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ù.
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ù
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
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
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
Si possono poi inserire anche sottoelementi a sottoelementi
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
e anche modificarne il posizionamento che comunque può essere fatto con il mouse. È interessante il campo Attributo titolo che merita un approfondimento.
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
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
Si aprirà la barra di configurazione della Visualizzazione a Schermo dello Strumento Menù
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
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
Si tratta quindi di un menù Responsive che può essere usufruito anche da dispositivi mobili.
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
RispondiEliminaNon sono molto esperto di Wordpress. Non so se c'è un sistema per intervenire. Puoi però usare questo strumento
Eliminahttp://www.ideepercomputeredinternet.com/2015/07/ispeziona-elemento-chrome-selettore-univoco-css-html.html
@#
Ciao ernesto, ok, grazie mille, ora provo a verificare! Laura
RispondiElimina