A volte si può trovare un tema fantastico solo per rendersi conto che sarebbe fantastico se avesse un menu di navigazione extra con link importanti o utilizzati frequentemente per aumentare l’usabilità del vostro sito WordPress.
Con solo un po’ di codice si potrebbe avere la base del vostro nuovo menu impostato rapidamente, e pronto per voi per lo stile in base al vostro tema.
Se preferisci non perdere tempo con il codice, ci sono molti plugin che possono fare il lavoro pesante per te, e anche fornire opzioni di stile.
Non importa quale opzione scegli, la guida qui sotto ti aiuterà a farlo accadere.
Basic Housekeeping
Per creare un nuovo menu è necessario modificare i file del tuo tema. Prima di apportare modifiche ai tuoi file principali, è meglio fare un backup di tutto il tuo sito nel caso in cui qualcosa vada storto lungo la strada. Sarai in grado di ripristinare il tuo sito rapidamente e sarà come se non fosse mai successo nulla.
Puoi fare il backup manuale del tuo sito via FTP o usando un plugin, come il nostro Snapshot. Assicurati solo di salvare una copia del tuo database e dei tuoi file in una posizione separata dal tuo sito per minimizzare il rischio di perdere il tuo backup.
Costruire un tema figlio
Per creare nuovi menu con il codice, devi fare delle modifiche che andrebbero perse quando aggiorni il tuo tema. La creazione di un tema figlio si prende cura di questo problema.
Puoi trovare i dettagli di cui hai bisogno per creare un tema figlio controllando un paio dei nostri altri post Come creare un tema figlio di WordPress e Come creare automaticamente temi figli in WordPress.
Puoi anche scegliere di creare un tema completamente nuovo da solo o provarlo su un sito locale o di prova.
Puoi controllare questi post per maggiori dettagli su come creare un’installazione locale di WordPress:
- Come sviluppare WordPress in locale con MAMP
- Come installare XAMPP e WordPress in locale su PC/Windows
- Come impostare WordPress in locale in 5 minuti con DesktopServer
- La guida facile e veloce per migrare un’installazione locale di WordPress in un sito live
- Come spostare WordPress per lo sviluppo locale con XAMPP
Una volta impostata una di queste opzioni, sei libero di iniziare a creare i tuoi menu di navigazione extra. Anche se, se decidi di usare un plugin o un tema framework, non hai bisogno di creare un tema figlio.
Creazione di nuovi menu
Per aggiungere un’opzione di posizione del menu selezionabile nella tua dashboard di amministrazione sotto Aspetto > Menu devi fare ciò che si chiama “registrare un menu”. Tutto ciò che serve è aggiungere un frammento di codice al tuo file functions.php situato in wp-content > themes > your-theme.
In cPanel, clicca sull’icona File Manager nella sezione Files sulla homepage. Se non hai precedentemente impostato il tuo File Manager per caricare la radice dei documenti del tuo sito, navigaci ora.
C’è un file functions.php nella tua cartella /wp-includes/, ma non è quello che devi modificare. Assicurati di trovare il file functions.php che si trova nel tema che stai usando. Altrimenti, ti ritroveresti con degli errori quando cerchi di aggiungere il codice trovato in seguito.
Trova il tuo file functions.php e cliccaci sopra una volta e poi clicca sul pulsante Modifica in cima alla pagina.
Se si apre un pop-up, clicca semplicemente sul pulsante Modifica in basso a destra. Potresti non vederne uno se lo hai precedentemente disabilitato.
Scorri in fondo al file. Se vuoi aggiungere solo un menu, aggiungi il seguente codice su una nuova linea:
function register_my_menu() {register_nav_menu('new-menu',__( 'New Menu' ));}add_action( 'init', 'register_my_menu' );
In questo esempio, New Menu è il nome che apparirà nella pagina del menu del tuo cruscotto amministrativo per renderlo comprensibile agli occhi umani. Il nome new-menu è quello che WordPress capirà per eseguire correttamente il tuo codice.
Puoi chiamare il tuo menu come vuoi, ma assicurati che solo il nome leggibile dall’uomo contenga spazi e lettere maiuscole.
Se vuoi aggiungere più menu al tuo sito, aggiungi invece questo codice su una nuova linea:
Con questo metodo puoi aggiungere tutti i menu che vuoi. Le stesse regole si applicheranno per nominarli.
Salva le modifiche che hai apportato al file. Ora tutto ciò che rimane è aggiungere il nuovo menu al tuo sito.
Aggiungimento di posizioni di menu al tuo tema
Questo è il momento in cui devi decidere dove vuoi posizionare il tuo menu. Se vuoi che il tuo menu appaia all’inizio della pagina, dovrai modificare il file header.php. Puoi anche metterlo nel footer, il che significa che devi modificare il file footer.php.
Puoi anche visualizzare un menu in una pagina modificando il suo file template o in una barra laterale, modificando il suo file sidebar.php.
Puoi mettere il tuo nuovo menu dove vuoi. Ecco la quantità minima di codice che devi aggiungere in una di queste posizioni:
<?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>
Basta sostituire new-menu con il nome leggibile da WordPress che hai scelto. Probabilmente vuoi stilizzare il tuo menu con i CSS in modo che vada oltre la funzionalità di base e sia anche bello da vedere. Per fare questo, avrai bisogno di creare una classe e aggiungerla al tuo tema con il seguente codice.
<?php wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>
Proprio come prima, sostituisci new-menu con il nome che hai scelto. In questo esempio, ho chiamato la classe che ho creato new_menu_class. Puoi cambiarlo, ma assicurati di aggiornare questo codice per riflettere la modifica.
Prendi il pulsante Salva e vai su Aspetto > Menu nel tuo cruscotto. Noterai che i tuoi nuovi menu saranno elencati sotto Theme Locations nella sezione Menu Settings.
Ora sarai in grado di vedere le tue nuove posizioni di menu elencate. Quando aggiungi un menu, puoi selezionare una o tutte le posizioni.
Per far visualizzare i link nelle tue nuove posizioni di menu, clicca su crea un nuovo menu in cima alla pagina.
Se non hai già un menu, puoi inserire un nome per il tuo menu nel campo della pagina, poi cliccare su Crea menu. Se hai già un menu creato in precedenza, puoi cliccare sul link Crea un nuovo menu in cima alla pagina.
Una volta creato un nuovo menu, puoi anche gestire le posizioni in cui vengono visualizzati nella scheda “Gestisci posizioni”.
Styling, plugin e menu responsive
Il tuo nuovo menu è ora pronto per essere stilizzato usando i CSS. La codifica richiesta è specifica per il tema che stai utilizzando, quindi non mi addentrerò in questo post, ma abbiamo un altro post che puoi consultare per questo chiamato How to Create an Awesome Responsive Menu for Your WordPress Theme. Vi mostra anche come creare menu responsivi che sono mobile-ready.
Se volete un’opzione più facile, ci sono molti plugin che creeranno menu responsivi basati sugli stili del vostro tema. Uno dei migliori che ho trovato è Responsive Menu.
Alcune menzioni degne di nota che potresti anche trovare utili sono ShiftNav, WP Responsive Menu e Max Mega Menu.
Risorse per andare oltre
Ora hai le solide basi necessarie per creare ulteriori menu per il tuo tema e risorse per aiutarti ad andare oltre. Sia che tu lo codifichi da solo, che usi un plugin o un framework per il tema, ora hai un nuovo menu sul tuo sito WordPress.
Se ti imbatti in problemi, vai avanti e chiedi ai nostri eroi del supporto. Possono darti consigli esperti e supporto per aiutarti a risolvere qualsiasi problema. Puoi aprire un ticket nel nostro forum di supporto e noi saremo subito lì ad aiutarti.
Per maggiori informazioni su come dare stile al tuo nuovo tema, ci sono molte risorse che puoi controllare e puoi trovarle tutte nel nostro post A Mega Guide to Learning and Referencing CSS for WordPress: 150+ Resources.
Potete anche controllare alcuni dei nostri altri post 10 semplici consigli per imparare i CSS per WordPress, 25 consigli degli esperti per una codifica CSS più pulita per WordPress, 25 consigli professionali per migliorare il vostro flusso di lavoro CSS e 5 plugin CSS gratuiti per modificare dal vivo il vostro sito WordPress per maggiori dettagli sulla codifica di alcuni CSS per il vostro tema.
Tag:
- menu
- navigazione