L’uso dei menu semplifica il processo di navigazione attraverso un sito web. Con la funzione wp_nav_menu() in WordPress, puoi costruire e gestire rapidamente e facilmente i menu sul tuo sito web. Con l’aiuto di questa funzione integrata, sarai in grado di creare e mostrare menu dinamici che possono essere modificati per adattarsi alle tue preferenze indipendentemente dal tema che stai utilizzando. Questo post del blog ti guiderà attraverso il processo di utilizzo della funzione wp_nav_menu(), fornendoti anche alcuni esempi di codice da seguire. Gli esempi seguenti presuppongono che tu stia lavorando sul tuo tema personalizzato o su un tema figlio all’interno di un tema esistente. Come sempre, le modifiche al codice dovrebbero essere testate localmente e/o su un sito di staging prima di renderle attive.
Iniziare con wp_nav_menu()
La funzione wp_nav_menu() è abbastanza semplice da usare. Inserire la funzione nel file modello del tuo tema, che spesso si trova in header.php o in un’altra area in cui desideri che appaia il menu, è tutto ciò che serve per visualizzare un menu.
Ecco un esempio base di utilizzo della funzione wp_nav_menu():
<?php wp_nav_menu(array( 'theme_location' => 'primary', 'container' => 'nav', 'container_class' => 'main-menu', 'menu_class' => 'nav-menu', )); ?>
Parametri
La funzione wp_nav_menu() accetta una serie di argomenti che consentono di personalizzare l’aspetto e il comportamento del menu generato. Immergiamoci nei parametri utilizzati nell’esempio sopra:
theme_location: questo parametro specifica la posizione del menu nel tema. Dovrai registrare questa posizione nel file Functions.php del tuo tema. Ad esempio, “primario” potrebbe essere utilizzato per il menu di navigazione principale.
function register_my_menu() { register_nav_menu('primary', __('Primary Menu', 'your_theme_name')); } add_action('after_setup_theme', 'register_my_menu');
contenitore: definisce l’elemento HTML che avvolgerà il menu. Per impostazione predefinita, il contenitore è un
Parametri aggiuntivi
Esistono molti altri parametri che puoi utilizzare per personalizzare la funzione wp_nav_menu(). Ecco alcuni esempi:
menu_id: imposta un attributo ID per l’elemento
-
- del menu.
-
- fallback_cb: definisce una funzione personalizzata da visualizzare se il menu non esiste o è vuoto. Per impostazione predefinita, questo parametro è impostato su “wp_page_menu”.
-
- profondità: controlla la profondità del menu gerarchia. Impostarlo su un valore intero per limitare il numero di livelli visualizzati. Ad esempio, profondità => 2 mostrerebbe solo due livelli di voci di menu (voci padre e figlio di primo livello).
-
- echo: imposta questo parametro su false se non desideri visualizzare immediatamente il menu ma restituire invece l’HTML del menu generato come stringa. Per impostazione predefinita, questo parametro è impostato su true.
Ecco un esempio che utilizza alcuni di questi parametri aggiuntivi:
<?php wp_nav_menu(array( 'theme_location' => 'primary', 'container' => 'nav', 'container_class' => 'main-menu', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu', 'fallback_cb' => 'my_custom_fallback_menu', 'depth' => 2, 'echo' => false, )); ?>
Creazione di una funzione di fallback
Se desideri definire una funzione di fallback personalizzata per il parametro fallback_cb, puoi creare una funzione nel tuo file Functions.php come questa:
function my_custom_fallback_menu() { echo '<ul class="nav-menu">'; wp_list_pages(array( 'title_li' => '', 'depth' => 1, )); echo '</ul>'; }
Questa funzione di fallback visualizzerà un elenco di pagine quando il menu specificato è vuoto o non esiste. La funzione wp_list_pages() genera un menu semplice basato sulle pagine del tuo sito e il parametro title_li è impostato su una stringa vuota per rimuovere i titoli delle voci dell’elenco. Il parametro di profondità è impostato su 1 per visualizzare solo le pagine di livello superiore.
Stile del menu
Una volta implementata con successo la funzione wp_nav_menu(), probabilmente vorrai modellare il tuo menu in modo che corrisponda al design del tuo tema. Utilizza le classi contenitore, menu ed elementi dell’elenco per individuare gli elementi del menu nel foglio di stile del tuo tema (solitamente style.css).
Ecco un semplice esempio di stile CSS per il menu:
.main-menu { background-color: #333; padding: 10px; } .nav-menu { list-style-type: none; margin: 0; padding: 0; } .nav-menu li { display: inline-block; margin-right: 20px; } .nav-menu a { color: #fff; text-decoration: none; } .nav-menu a:hover { color: #ccc; }
In questo esempio il contenitore del menu, gli elementi dell’elenco e i collegamenti hanno tutti uno stile fondamentale. L’aggiunta di stili per sottomenu, effetti al passaggio del mouse e comportamento reattivo sono alcuni dei modi aggiuntivi con cui puoi personalizzare ulteriormente l’aspetto.
Conclusione
La creazione e la gestione dei menu in WordPress può essere eseguita in modo efficace e adattabile con l’aiuto della funzione wp_nav_menu(). Puoi semplicemente modificare il menu per adattarlo allo stile e alla funzionalità del tuo tema grazie alle numerose impostazioni e opzioni che fornisce. Ricordati di registrare le posizioni dei menu nel file Functions.php e di utilizzare i CSS per decorare i tuoi menu in modo che gli utenti ottengano un’esperienza coerente quando navigano nel tuo sito web. Potrai installare menu dinamici totalmente regolabili se segui le istruzioni fornite in questo post del blog. Questi menu miglioreranno l’esperienza dell’utente in generale e renderanno più semplice la navigazione nel tuo sito web. Buona programmazione!