Come utilizzare la funzione wp_nav_menu() in WordPress

<?php
  wp_nav_menu(array(
    'theme_location' => 'primary',
    'container' => 'nav',
    'container_class' => 'main-menu',
    'menu_class' => 'nav-menu',
  ));
?>

function register_my_menu() {
  register_nav_menu('primary', __('Primary Menu', 'your_theme_name'));
}
add_action('after_setup_theme', 'register_my_menu');

. Nel nostro esempio, lo abbiamo impostato come elemento
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!