Crea un menu di navigazione personalizzato in WordPress senza utilizzare plugin
Pubblicato: 2020-11-28Indipendentemente dal tema WordPress che stai utilizzando, quasi sicuramente fornirà almeno una posizione del menu in cui puoi visualizzare il tuo menu (normalmente nell'intestazione del tuo sito Web). I menu possono essere facilmente creati dall'interno dell'area di amministrazione e aggiunti rapidamente a queste posizioni preimpostate. Ma cosa fai se hai bisogno di un altro menu da visualizzare altrove sul tuo sito web? In questo tutorial vedremo come creare il tuo menu di navigazione che può essere visualizzato in una posizione a tua scelta senza dover utilizzare un plug-in.
Muoviamoci!
Registra la tua nuova posizione del menu personalizzato
La prima cosa che dobbiamo fare è registrare la posizione del tuo nuovo menu personalizzato. Per fare ciò, apri il file functions.php del tuo tema attivo con il tuo editor di testo preferito (come Sublime) e aggiungi il seguente codice:
function my_custom_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' )); } add_action( 'init', 'my_custom_menu' ); In questo pezzo di codice abbiamo usato l'hook add_action() per aggiungere una funzione di callback my_custom_menu() . Ciò significa che la funzione my_custom_menu() verrà eseguita insieme alle funzioni principali predefinite che vengono eseguite ogni volta che viene chiamata l'azione init . La stringa "My Custom Menu" è la versione leggibile che vedrai nella pagina di amministrazione.
All'interno della funzione, viene utilizzata la funzione principale register_nav_menu per registrare una posizione del menu di navigazione per il nostro tema. Nel caso in cui desideri registrare più menu, puoi utilizzare register_nav_menus() e definire le posizioni dei menu all'interno di un array come questo:
function my_custom_menu() { register_nav_menus( array( 'my-custom-menu' => _( 'My Custom Menu' ), 'my-custom-menu-2' =>_('My Second Custom Menu') ) ); } add_action( 'init', 'my_custom_menu' );Per confermare i risultati, vai alla tua area di amministrazione in Aspetto > Menu. Noterai che la posizione del tuo menu personalizzato è inclusa nelle Impostazioni del menu.
Nota: se selezioniamo questa posizione a questo punto, il menu non visualizzerà nulla sul frontend.
Come visualizzare il nostro menu personalizzato
Diciamo che vogliamo che la nuova posizione del menu venga utilizzata per un menu orizzontale secondario che si troverà sotto il "Menu orizzontale desktop" che è già presente nel nostro tema.
Per ottenere ciò inseriremo del codice nel template del tema dove vogliamo che venga visualizzato il menu. In questo esempio utilizziamo il tema Twenty Twenty e modifichiamo il suo file header.php per visualizzare il nostro menu. Troverai questo file nella cartella del tema.
Apri il file header.php con il tuo editor e trova questo elemento nel codice intorno alla riga 33.
<header class="header-footer-group" role="banner">Proprio sotto questa sezione metteremo il nostro codice per visualizzare la nostra nuova posizione del menu personalizzato: 'my-custom-menu'.
<header class="header-footer-group" role="banner"> <?php wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) ); ?>Il valore theme_location deve essere identico al nome che hai fornito per il tuo menu nel codice functions.php che abbiamo incollato prima. Nel nostro caso: 'my-custom-menu'.
Ora creiamo un menu di prova per vedere se funziona. Per fare ciò, vai su Aspetto > Menu e inizia a creare un nuovo menu.
Assegna al menu il titolo "Menu secondario", seleziona "Il mio menu personalizzato" per una posizione e quindi premi il pulsante "Crea menu".
Infine aggiungi alcune voci al menu (ad esempio Voce di menu 1, Voce di menu 2, Voce di menu 3) e quindi salva il menu.
Vediamo cosa abbiamo ora nel frontend.
Siamo riusciti a mostrare il nostro nuovo menu, ma è piuttosto disordinato, vero?
Se osserviamo il nostro codice sorgente, noteremo che la funzione wp_nav_menu() ha creato questo pezzo di codice HTML
<div class="menu-secondary-menu-container"> <ul class="menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-378"><a href="#">Menu item 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-381"><a href="#">Menu item 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-382"><a href="#">Menu item 3</a></li> </ul> </div>Quindi, possiamo usare le classi descritte nel codice per abbellire il nostro menu. Per fare questo useremo dei CSS. Trova style.css (normalmente si trova nella stessa posizione del file header.php) e quindi aprilo con il tuo editor per aggiungere questo codice:
ul#menu-secondary-menu { text-align: right; padding: 10px 30px; } ul#menu-secondary-menu li { list-style: none; display: inline-block; padding: 1px; } ul#menu-secondary-menu li:hover { border: 1px solid #c00202; padding: 0; border-radius: 3px; } ul#menu-secondary-menu li a { text-decoration: none; padding: 5px; font-size: 14px; }Il risultato sarà ora molto più ordinato e molto più in linea con lo stile del nostro sito web demo.
Personalizzazione del menu aggiuntiva
La funzione wp_nav_menu() fornita da WordPress per la visualizzazione dei menu include una gamma di opzioni che ti consentono di personalizzarla ulteriormente.
' posizione_tema '
Come descritto sopra, questo parametro corrisponde alle chiavi passate alla funzione register_nav_menus() in functions.php
wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) );'menu_class'
C'è l'opzione ' menu_class ' che ti permette di specificare la tua classe per il menu.
wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'menu_class' => 'my-custom-menu' ) ); 
Come avrai già notato, la classe non sostituisce nessun'altra classe ma viene invece aggiunta nell'elemento ul.
'menu_id'
A differenza dell'opzione di classe, l'opzione menu_id sostituisce l'id del menu corrente. L'HTML generato per l'elemento <ul> sarà qualcosa del genere.
<ul class="menu">Quando questa opzione non viene utilizzata, l'id sarà lo slug del menu, che verrà incrementato quando si utilizzano più istanze.
'contenitore'
Questo parametro definisce il tipo di elemento che circonda il menu. L'impostazione predefinita è 'div'. Se ad esempio usi questo codice:
wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container' => 'nav', ) );otterrai questo risultato:
'classe_container'
Questa è una classe che viene applicata all'elemento padre del menu:
wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'my-custom-menu-wrapper', ) ); 
Puoi anche inserire il contenuto prima o dopo il collegamento di ogni voce di menu utilizzando i parametri 'prima' e 'dopo'. Questo è molto utile se vuoi anteporre un trattino o un'icona o racchiudere le voci di menu in un tag span. Puoi provare tu stesso l'esempio qui sotto per vederlo in azione:
wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<span class="menulink">', 'after' => '</span>', ) ); wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) ); wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );Puoi anche aggiungere icone alle voci di menu. Prova ad esempio a installare il plug-in Font Awesome per includere la loro libreria di icone e usa l'opzione di menu "prima" per applicare un'icona fantastica ai caratteri alle voci di menu.
wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<i class="fas fa-caret-right"></i>', ) );Puoi trovare il codice per ciascuna icona nell'elenco delle icone del plugin.
Il parametro Walker
Ultimo ma non meno importante, forniremo un esempio di come il parametro walker aiuta a personalizzare i menu. Se non sai quale sia la classe Walker di WordPress, probabilmente non avrà molto senso la seguente. Ti consigliamo di leggere prima "Imparare a familiarizzare con la classe Walker di WordPress".
wp_nav_menu( array( 'walker' => new Walker_Custom_Menu ) );Per dimostrare la classe Walker, aggiungeremo un "elemento secondario" nel nostro menu.
Sovrascriveremo la classe Walker predefinita fornita da WordPress. Questo si trova nel file wp-includes/class-walker-nav-menu.php. Per ottenerlo vai al tuo file function.php e inserisci il codice qui sotto:
if ( !class_exists('My_Nav_Menu_Walker') ) { class My_Nav_Menu_Walker extends Walker { var $tree_type = array( 'post_type', 'taxonomy', 'custom' ); var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' ); function start_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "\n$indent"; $output .= "<i class=\"dropdown icon\"></i>\n"; $output .= "<div class=\"menu\">\n"; } function end_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "$indent</div>\n"; } function start_el(&$output, $item, $depth, $args) { $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes = in_array( 'current-menu-item', $classes ) ? array( 'current-menu-item' ) : array(); $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = strlen( trim( $class_names ) ) > 0 ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', '', $item, $args ); $id = strlen( $id ) ? '' : ''; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes . $id . $value . $class_names . '>'; $item_output .= '<div class="item">'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</div>'; $item_output .= "</a>\n"; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } }Ora nel tuo headers.php sostituisci il tuo codice di menu con questo (produrremo entrambe le versioni di menu apposta solo per confrontare i risultati):
wp_nav_menu(); // Default 'walker' => new Walker_Nav_Menu() wp_nav_menu( array( 'walker' => new My_Nav_Menu_Walker() ) ); 
Confrontando questo codice con la classe Walker_Nav_Menu originale, noterai che $tree_type e $db_fields rimasti intatti ma il resto è cambiato. Prenditi il tuo tempo e confronta sia il codice che gli output HTML su queste due versioni dello stesso menu e prova a sperimentare te stesso giocando con My_Nav_Menu_Walker Class.
Conclusione
I menu sui siti Web sono chiaramente piuttosto importanti! Essere in grado di avere il pieno controllo sul posizionamento e sull'output dei menu estende le tue capacità come sviluppatore di temi e apre una gamma di nuove entusiasmanti possibilità durante la progettazione di siti Web senza dover fare affidamento sui plug-in che è sempre fantastico essere in grado di fare.