Creare un menù personalizzato su WordPress

22 Gennaio 2019 di

In questo articolo andremo a vedere come creare un menù su WordPress.

Il primo step sarà quello di collegarci alla pagina di login, se si lavora in locale sarà localhost/nome_sito/wp-admin

Una volta entrati all’interno del nostro back-end, ci spostiamo sulla sinistra, e andando a posizionarci su Pagine clicchiamo sulla tendina Tutte le Pagine.

Cliccando su aggiungi pagina andiamo ad inserire un titolo personalizzato, in questo caso Chi Sono, e del testo all’interno del nostro editor, un Lorem Ipsum per farci un’idea su cosa andremo a fare potrebbe andare benissimo.

Perfetto, andiamo a salvare cliccando sul pulsante Pubblica.

Eseguiamo lo stesso procedimento creando le sezioni Servizi – Portfolio – Contatti, in modo da realizzare ben 4 voci di menù.

Terminato di far questo, andiamo ad agganciare le pagine create al nostro menù.

Ci spostiamo su Aspetto, e quindi su Menù.

Selezioniamo le voci che siamo andati a creare e clicchiamo su aggiungi al menù e successivamente salva menù.

Ora abbiamo il nostro menù correttamente funzionante nell’header del nostro sito, infatti cliccando singolarmente sulle voci potremo notare che le nostre pagine sono agganciate correttamente.

Semplice vero?

Ora proviamo a creare un menù personalizzato tramite codice.Spostiamoci all’interno della cartella del nostro tema wp-content/themes/nome_tema e apriamo il file functions.php

Bene, andiamo a registrare il nostro nuovo menù tramite la funzione register_nav_menus.

Una lista completa delle funzioni proprietarie in WordPress le si possono trovare a questo indirizzo

register_nav_menus(array (‘header’=>esc_html__(‘my_menu_wordpress’,’slug-theme’)));

Ricordo solo che questa funzione può registrare all’interno dell’array più menù customizzati senza dover riscrivere nuovamente il tutto.

Nota: ho voluto inserire la funzione esc_html__ perchè rende traducibili le stringhe. E’ buona prassi utilizzarla per una corretta localizzazione del tema

Non ci resta che mostrare il menù sul nostro sito. Spostiamoci in header.php e inseriamo questo snippet di codice

<?php wp_nav_menu(array( ‘theme_location’=>’header’,’depth’=>’3′,’container’=>false,’menu_class’=>’navbar-nav ml-auto’)); ?>

Una volta fatto questo torniamo su aspetto → menu, selezioniamo in impostazioni del menù la casella Posizione di visualizzazione, clicchiamo su my_menu_wordpress e salviamo.

Analizziamolo velocemente:

wp_nav_menu è la funzione che ci permette semplicemente di mostrare un menù di navigazione. All’interno dell’array troviamo delle coppie chiave-valore che hanno il compito di personalizzare il menù:

theme_location avrà come valore il menù da selezionare come visto precedentemente,

depth la profondità, ovvero quanti sottolivelli avrà il nostro menù, io ho messo 3, anche se 2 potrebbe andar comunque bene, dipende dalle esigenze dello sviluppatore

container possiamo inserire un ulteriore contenuto o meno,a me in questo caso non interessava e quindi ho inserito il valore booleano false, non mi restituirà nulla

menu_class, ho inserito la classe nativa di Bootstrap

Ripeto, all’interno del glossario ufficiale di WordPress abbiamo un elenco completo delle proprietà da aggiungere.

Mi è capitato di non riuscire ad ottenere tramite le proprietà dell’array la possibilità di inserire una classe per l’ancoraggio delle voci di menù.

Ho risolto il problema inserendo all’interno del file functions questo snippet

function add_menuclass($ulclass) { return preg_replace(‘/<a /’, ‘<a class=”nav-link”‘, $ulclass); }

successivamente inserisco all’interno del nostro filter hook come primo argomento la funzione interessata, e come secondo quella appena realizzata da noi add_filter(‘wp_nav_menu’,’add_menuclass’);  ricarichiamo la nostra pagina e se la procedura è stata realizzata correttamente dovremmo avere lo stile anche per il nostro ancoraggio.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Ti piacciono i miei articoli?

Iscriviti alla mia newsletter.

Riceverai tutorial e consigli su come gestire un sito wordpress in totale autonomia!

* indicates required
Se sei un privato o un’azienda, hai un progetto in mente e vorresti collaborare con me, non esitare a contattarmi al form accanto oppure a questo indirizzo! info@fabriziomercurio.it