Come creare strutture di menu personalizzate in WordPress

WordPress ha una struttura di navigazione integrata automatica che crea i tuoi menu per te. Include pagine e categorie. Li inserirà nel menu principale senza che tu debba fare altro che creare la pagina o un post all'interno della categoria. Funziona benissimo se hai solo poche pagine e categorie, ma dopo un po' può iniziare a sfuggirti di mano. Inoltre, solo perché può gestire automaticamente la tua navigazione non significa che dovresti consentirlo.

WordPress gestirà automaticamente i menu per te senza alcun input da parte tua, ma se vuoi davvero sfruttare appieno la struttura dei menu puoi creare i tuoi menu personalizzati. I menu personalizzati ti consentono di assumere il pieno controllo della tua struttura di navigazione e possono dare al tuo sito un aspetto più pulito e professionale.

Tipologia di menu

Esistono diversi tipi di menu. I tipi di menu che puoi utilizzare dipendono dalle caratteristiche del tuo tema. I tipi di menu più diffusi includono:

• Menu principale: questo appare sotto l'intestazione. Dovrebbe includere la tua navigazione principale e le pagine che i tuoi visitatori si aspettano in base al tipo di sito web che hai: casa, informazioni, contatti, blog, portfolio, ecc.
• Menu secondario: questo appare sopra l'intestazione. Questo dovrebbe includere link e pagine che vuoi fornire ai tuoi lettori in una posizione comoda ma non necessariamente nella tua struttura di navigazione principale. Può trattarsi di elementi come tutorial, un carrello della spesa, ecc.
• Barra laterale: i tuoi menu personalizzati possono essere inseriti nella barra laterale utilizzando il widget del menu personalizzato. Puoi utilizzare tutti i widget che desideri e inserire qualsiasi menu al loro interno.
• Piè di pagina: puoi creare un menu solo per il tuo piè di pagina. Questo menu di solito contiene meno informazioni rispetto al menu principale. A seconda delle esigenze del tuo sito, di solito contiene casa, informazioni, contatti, blog, ecc. Se il tuo sito include annunci di lavoro, un programma di affiliazione e siti gemelli, potrebbero essere inclusi anche qui.
• Menu dei link social: questo è un menu speciale che si trova in temi come Twenty Fifteen che inserisce i tuoi link ai social media nella barra laterale. Se il tema riconosce il social network fornirà l'icona corretta. In caso contrario, mostrerà i nomi come testo (in base a come hai etichettato il collegamento).

I menu primario e secondario sono i più popolari tra i temi di WordPress. Ciò che li contiene dipende davvero dal focus del tuo sito. L'obiettivo principale del tuo sito dovrebbe apparire nel menu principale. Dovrebbe avere senso per i tuoi visitatori ed essere ciò che si aspettano di vedere.

Ad esempio, se hai un negozio, il tuo carrello dovrebbe essere nel menu principale. Se hai un sito portfolio ma vendi anche alcune cose, allora il tuo portfolio dovrebbe essere nel tuo menu principale e il carrello dovrebbe essere nel menu secondario. Pensa solo a dove si adatta logicamente e posizionalo di conseguenza.

Creazione di menu personalizzati

WordPress semplifica la creazione manuale dei tuoi menu personalizzati. Puoi creare, regolare e applicare menu dal back-end e puoi selezionare i tuoi menu dal front-end per vederli e testarli prima di andare in diretta.

Creazione dei menu dal back-end

Sul back-end, vai su Aspetto e seleziona Menu. Sul front-end vai su Personalizza e seleziona Navigazione.

Nella schermata del menu, seleziona Crea un nuovo menu, assegna un nome al menu e fai clic sul pulsante Crea menu.

Ora sei pronto per iniziare ad aggiungere la struttura di navigazione. Sulla sinistra hai le caselle per Pagine, Collegamenti personalizzati e Categorie. Puoi usarli tutti come link nel tuo menu personalizzato. Nel mezzo hai alcune opzioni. Puoi consentire l'aggiunta automatica di tutte le nuove pagine alla struttura del menu o lasciarla deselezionata se desideri avere un maggiore controllo e scegliere tu stesso le pagine e le categorie.

Pagine

Seleziona la scheda Pagine nella finestra di sinistra se non è già aperta. Per aggiungere pagine al menu, seleziona tutte le pagine desiderate e fai clic su Aggiungi al menu.

Se vuoi che siano disposti in modo diverso, trascina e rilascia la voce di menu che vuoi spostare nella sua nuova posizione. Puoi persino renderlo una voce secondaria di un'altra voce di menu trascinandolo a destra sotto la voce di cui vuoi che sia una voce secondaria.

È possibile selezionare la freccia a destra per aprire l'elemento e apportare modifiche come modificare il nome e la posizione. Puoi anche rimuovere la voce dalla struttura del menu qui.

Collegamenti personalizzati

Per aggiungere collegamenti personalizzati, apri Collegamenti personalizzati nella finestra a sinistra, aggiungi l'URL desiderato e seleziona Aggiungi al menu. Puoi creare qualsiasi tipo di collegamento desideri e farli entrare a far parte della struttura del tuo menu. Questo è anche il modo in cui crei i collegamenti per il menu Collegamenti social.

Puoi quindi trascinarlo e rilasciarlo dove vuoi nella struttura del menu.

Categorie

Scegli e aggiungi le categorie nello stesso modo in cui scegli e aggiungi le Pagine nella finestra di sinistra. Agiscono allo stesso modo delle pagine e dei collegamenti nel menu.

Salva il tuo menu

Una volta che ti piace la tua nuova struttura del menu, salvala e puoi usarla.

Gestisci posizioni

Esistono due modi per utilizzare il menu dal back-end.

Impostazioni menu

Nella schermata in cui è stato creato il menu è presente un gruppo di caselle di controllo in Impostazioni menu. È possibile selezionare qualsiasi menu e quindi selezionare dove deve essere utilizzato. Puoi selezionarne quanti ne vuoi. Non dimenticare di salvarlo.

Gestisci posizioni

Seleziona la scheda Gestisci posizioni. Qui puoi scegliere quale menu utilizzare dove nelle caselle a discesa. Non devi usarli tutti. Dopo aver scelto quale dei tuoi menu verrà utilizzato, premi semplicemente salva e hai appena aggiornato la struttura del menu.

Aggeggio

WordPress ha anche un widget Menu personalizzato che puoi trascinare e rilasciare nelle barre laterali. Da qui puoi selezionare il tuo menu.

Test

Ecco uno sguardo al mio menu di prova e al widget della barra laterale. La prossima cosa da fare è testare ogni elemento per assicurarsi che funzioni in modo fluido e intuitivo. Non dimenticare questo passaggio. È molto importante testare il tuo menu per vedere se funziona nel modo previsto. Ovviamente questi non sono titoli di menu che dovresti usare sul tuo sito web.

Utilizzo del front-end per una vista WYSIWYG

Per modificare la struttura del menu dal front-end, vai su Aspetto e seleziona Personalizza. Una volta arrivato al front-end, scegli Navigazione. Da qui puoi scegliere i tuoi menu. Il vantaggio di questa visualizzazione è che puoi vedere le modifiche immediatamente prima di salvarle. In questo modo puoi decidere se ti piace prima di impegnarti. Sfortunatamente questo sistema non ti permette di crearli.

Personalizza l'aspetto grafico con temi come Divi

Alcuni temi, come Divi 2.4 di Elegant Theme, ti offrono strumenti che ti consentono di apportare modifiche all'aspetto dei tuoi menu dal front-end e di vederne immediatamente gli effetti. In questo modo saprai cosa vedranno i tuoi visitatori prima di salvarlo.

Ecco uno sguardo alle regolazioni del menu di Divi. È possibile apportare le stesse modifiche per modificare l'aspetto grafico di ciascuna voce di menu.

Personalizzazione ulteriormente: utilizzo dei plug-in per modificare i menu

Ci sono molti plugin disponibili per WordPress che ti aiutano a modificare i tuoi menu personalizzati con nuove caratteristiche, aspetto e funzionalità. Aggiungono molte regolazioni CSS, li rendono reattivi e persino più veloci. Ecco alcuni dei plugin più popolari.

Widget Procedura guidata menu personalizzato

Questo plugin gratuito aggiunge un widget di menu personalizzato che puoi utilizzare nelle barre laterali o nei tuoi contenuti utilizzando gli shortcode. Ti dà il pieno controllo sui parametri del tuo menu e ti consente di utilizzare porzioni specifiche dei tuoi menu personalizzati. Aggiunge anche alcune classi personalizzate.

È possibile visualizzare porzioni specifiche del menu o l'intero menu. Puoi anche rendere condizionale l'output. Verrà visualizzato come piatto o come gerarchico in base al numero di livelli specificato. Puoi anche modificare l'output con HTML.

Le impostazioni per il widget sono facili da usare. Scegli il menu da una casella a discesa e seleziona filtri, fallback, output, contenitore, classi, collegamenti e alternative (questo è un altro livello di condizioni). Ti dà anche uno shortcode in modo da poter incollare i tuoi menu nei tuoi contenuti.

Menu della fisarmonica di fine corsa

Questo plugin ti consente di creare menu in stile fisarmonica con il controllo completo su livelli di menu, colori, animazioni, ecc., ognuno con le proprie impostazioni e skin. Hai il controllo sui livelli e gli stati di caratteri, sfondi, colori, immagini, ecc. Accelera il sistema di menu utilizzando la cache, fornisce vari tipi di animazione, ha livelli illimitati di menu e fornisce 30 impostazioni.

Mi piace il modo in cui funzionano i menu della fisarmonica. Puoi espanderli quando vuoi usarli e poi nasconderli per darti un layout più pulito quando non vuoi vederli sullo schermo. Il plugin è facile da usare e da configurare. Crei menu proprio come faresti con i tipi di contenuto personalizzati. Puoi quindi trascinare il widget nelle barre laterali e scegliere il menu all'interno del widget.

C'è anche un'edizione Pro che aggiunge tre temi e supporto. I prezzi partono da $ 29.

Menu reattivo

Questo plugin gratuito ha 70 opzioni per regolare l'aspetto, la sensazione e l'azione dei tuoi menu. Puoi regolare titoli, CSS, azioni, dimensioni, animazioni, script e molto altro. Funziona alla grande per i dispositivi mobili e ha funzioni per tirare il menu da un lato e impostare la posizione del menu. Minimizzerà persino i CSS e JavaScript del tuo menu. Puoi anche aggiungere HTML personalizzato e importare/esportare le tue impostazioni.

Ci sono molte regolazioni nelle impostazioni, ma sono tutte semplici da capire e da regolare. C'è anche un livello avanzato di impostazioni ma puoi ignorarle se lo desideri. Include codici brevi e puoi anche aggiungere il codice PHP al tuo tema, se preferisci.

Altri plugin per modificare i menu

Ecco un elenco di altri plugin che ho trovato interessanti. Aggiungono o modificano le funzionalità dei tuoi menu e ti consentono di controllarli in vari modi.

• Mega menu di WordPress
• Menu a discesa Mega CSS3
• Menu reattivo WP
• Font Awesome 4 menu
• Shortcode nei menu
• Aspetto più veloce – Menu
• Menù Cibo e Bevande
• Menu al dettaglio semplici
• Purifica i menu di WordPress
• Menuizzatore di widget

Suggerimenti per la creazione di ottime strutture di menu

• Usa i tuoi menu per mantenere organizzata la tua struttura di navigazione.
• Usa il minor numero di livelli che puoi. Pensa in termini di Primario e Secondario.
• Usa nomi che abbiano senso per i lettori senza che debbano decifrare il tuo codice.
• Usa il metodo KISS. Ricorda: più semplice è meglio. I menu dovrebbero essere facili da usare e intuitivi.
• Controlla le strutture dei menu dei tuoi siti preferiti e vedi cosa ti piace e cosa non ti piace. Allora migliora il tuo.

Pensieri finali

Aggiungere la tua struttura di menu personalizzata è facile e renderà il tuo sito WordPress più professionale e manterrà la tua struttura dall'aspetto casuale. Ci vogliono solo pochi minuti per creare la tua serie di menu e puoi vederli e provarli prima di andare in diretta. I tuoi visitatori apprezzeranno una struttura di menu che consente loro di navigare nel tuo sito in modo più rapido e intuitivo.

Il tuo turno! Hai creato la tua struttura di menu personalizzata? Hai qualcosa da aggiungere? Utilizzi plugin per modificare i tuoi menu? Raccontacelo nei commenti qui sotto.