Pubblicato il 15/04/15e aggiornato il

Come creare un menù dalla Bacheca di Wordpress.

Come realizzare un Menu Responsive Design con la Bacheca di Wordpress a prescidere dal Tema che abbiamo attivato. Sarà multilivello e si potranno aprire le pagine linkate in un'altra scheda.
Nelle versioni più recenti di Wordpress c'è la possibilità di creare un Menù direttamente dalla Bacheca del CMS senza conoscere e scrivere una sola riga di codice e a prescindere dal Tema che è stato attivato. Il menù inoltre sarà multilivello con la possibilità di creare dei sottomenù semplicemente con il trascinamento del mouse. Al menù possono anche essere aggiunte in modo automatico le pagine che verranno create dopo la realizzazione del menù.

Si inizia andando su Bacheca > Aspetto > Menù. Si dà un nome al menù quindi si va sulla destra e si clicca su Creazione Menù.
 
creare-menu-wordpress

Successivamente si visualizzeranno le tre schede Pagine, Link e Categorie con i cui elementi iniziare a creare il menù. Nelle Pagine si potrà mettere la spunta a quelle già create o alla Home per visualizzarle come voci del nostro menù sulla destra sotto a Struttura del Menù

aggiungere-menù-elemento

Per ciascun elemento bisogna inserire due dati: il suo nome e il suo link. Il nome sarà quello che i lettori visualizzeranno e il link dovrà essere l'URL della pagina web collegata che potrà essere del nostro sito ma che può anche essere per esempio quella del nostro Profilo su un social network. In linea generale si va sulla freccetta nera a destra di Link e si compilano questi due campi

creare-nuovo-elemento

Si termina cliccando su Aggiungi al menù. Su Struttura del menù sarà visualizzato il nuovo elemento nella parte bassa e dovrà essere trascinato con il drag & drop nella posizione desiderata

trascinamento-elemento-menu

Tramite il mouse può essere posizionato in modo indentato rispetto a a un altro e quindi diventare un elemento di un sottomenù o come si dice un sottoelemento in questo modo 

creazione-sottoelemento

Si possono poi inserire anche sottoelementi a sottoelementi

creazione-sottoelementi-wordpress-menu

Nello screenshot precedente per esempio l'elemento principale è Categorie che ha il sottoelemento Ricette il quale a sua volta ha come sottoelemento Secondi con i sottoelementi Carne e Pesce. Cliccando sulla freccetta posta a destra si possono editare tutte le impostazioni di un elemento

modifica-elemento-menù-wordpress

e anche modificarne il posizionamento che comunque può essere fatto con il mouse. È interessante il campo Attributo titolo che merita un approfondimento.

attributo-titolo

Quello che vi viene digitato sarà compreso nell'HTML all'interno del tag title e sarà visualizzato dai navigatori quando ci passeranno sopra con il mouse.  Quando abbiamo terminato si clicca su Salva Menù per applicarlo al nostro sito. Il suo aspetto sarà simile a questo 

menù-wordpress

Il menù può essere eliminato in qualsiasi momento andando in basso su Cancella Menù.

COME FAR APRIRE UN LINK IN UN'ALTRA SCHEDA


Sempre nella pagina del menù che è …/wp-admin/nav-menus.php, dove al posto dei puntini si inserisce l'URL del nostro sito, si va in alto a destra su Impostazioni Schermata

impostazioni-schermata-menu

Si aprirà la barra di configurazione della Visualizzazione a Schermo dello Strumento Menù

impostazioni-menù-wordpress

Va messa la spunta su Destinazione link. Magicamente sotto a ciascun elemento si visualizzerà una casella di controllo Apri il link in una nuova finestra/scheda
 
aprire-link-nuova-scheda

che è equivalente a inserire il tag target="_blank" nel codice del collegamento. Ho postato anche un video tutorial sul mio Canale Youtube su come creare un Menù con Wordpress.


Concludo questo post con la visualizzazione da mobile di questi menù targati Wordpress.

 

MENÙ WORDPRESS VISTO DA MOBILE


A partire dal 21 Aprile 2015 Google penalizzerà i siti che non si vedranno in modo adeguato da mobile. Quindi è bene controllare come i menù di Wordpress realizzati con questo strumento vengono visualizzati anche da tablet o smartphone. Ecco il risultato

menù-visuaslizzazione-tablet-smartphone

Si tratta quindi di un menù Responsive che può essere usufruito anche da dispositivi mobili.




3 commenti :

  1. Ciao Ernesto, sto lavorando al nuovo blog su wordpress e ho impostato il menu ma il font è decisamente troppo grande. Però, andando su personalizzazione, non riesco a modificarne le dimensioni, mi permette di modificare tutto (titolo, titoletti ecc) eccetto il menu. Presumo di dover intervenire via CSS, ma come fare? Non capisco come individuarlo nel foglio di stile, qual è il codice, e come procedere. Grazie mille. Laura

    RispondiElimina
    Risposte
    1. Non sono molto esperto di Wordpress. Non so se c'è un sistema per intervenire. Puoi però usare questo strumento
      http://www.ideepercomputeredinternet.com/2015/07/ispeziona-elemento-chrome-selettore-univoco-css-html.html
      @#

      Elimina
  2. Ciao ernesto, ok, grazie mille, ora provo a verificare! Laura

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.