Una Guida Approfondita per Creare e Personalizzare un Menu WordPress

Un sito WordPress non sarebbe granché senza i suoi menu e sottomenu. Personalizzare questi menu a vostro piacimento dall’interno di WordPress è semplice. Il vostro menu WordPress è uno strumento in prima linea per ottenere un alto posizionamento di ricerca e mantenere i visitatori sul sito.

Le schermate dedicate all’interno di WordPress non rivelano quanto possano arrivare a essere complessi i vostri menu. Potete anche visualizzare i menu in diversi punti del vostro sito. Se avete delle conoscenze di programmazione, potete personalizzare il vostro menu WordPress con possibilità quasi infinite.

Con questo articolo vi offriamo una guida approfondita per creare un menu WordPress. Vi mostreremo anche come prendere la funzionalità e migliorarla in alcuni modi diversi.

L’Anatomia di un Menu di WordPress

Per chi non lo sapesse, un menu WordPress è spesso una collezione di link (inclusi i menu a tendina). È una funzionalità semplice che è solo una “vertebra” nella spina dorsale del vostro sito web.

Parleremo in modo più dettagliato di dove vedere i menu su un sito web nella prossima sezione. Per ora, sappiate che possono adattarsi ovunque vogliate visualizzarli. Potreste avere solo alcune opzioni preselezionate (in base alle aree dei widget), ma in senso tecnico un menu può andare ovunque.

Naturalmente, un menu WordPress è fondamentale per la navigazione di un sito web. Se avete un menu di navigazione chiaro e definito, questo aiuterà gli utenti a muoversi nel vostro sito e manterrà bassa la vostra frequenza di rimbalzo.

Servono anche per un altro scopo: i vostri menu aiutano l’ottimizzazione per i motori di ricerca (SEO). Ottimizzare un menu WordPress per la SEO è più una questione di cosa lasciare fuori che di cosa mettere dentro. Per cominciare, potete eliminare elementi – come le nuvole di tag – e mantenere ridotto il numero di link che includete.

Anche se Google vi permette di aggiungere fino a 250 link su una pagina, mantenere alto il “valore dei link” è essenziale. Per questo ridurre il numero di link esterni vi sarà utile nel lungo termine.

I Diversi Tipi di Strutture di Menu di WordPress

Come potreste aver già capito, a seconda delle esigenze della vostra applicazione, potete optare per diverse strutture di menu WordPress.

I menu dell’intestazione, per esempio, sono i più comuni perché si occupano della navigazione primaria del sito. Spesso vedrete anche dei menu più piccoli sopra la navigazione principale, un posto eccellente per le icone dei social media, le barre di ricerca e altro.

Il sito web di SAU/CAL, partner di Kinsta, ha un menu “fly-in” che include la navigazione e i link social:

Questo menu mostra che ci sono più casi d’uso per un menu WordPress che non si limitano alla navigazione di un sito. Usando la funzionalità integrata di WordPress (più avanti), potete creare un menu per quasi tutto ciò di cui avete bisogno.

Altro uso popolare del menu, è quello che compare nel footer. Spesso userete quest’area per ripetere la navigazione primaria per gli utenti che scorrono verso il basso. Inoltre, è un posto eccellente per offrire link più contestuali per i vostri prodotti e servizi:

Vi capiterà di vedere anche dei menu all’interno di una barra laterale, se il sito la usa:

Anche se in molti casi qui non vedrete la navigazione primaria, è una posizione tradizionale per i link social, gli archivi dei post del blog e molto altro.

Come Creare un Menu WordPress Personalizzato (3 Metodi)

Creare un menu WordPress è un processo semplice, indipendentemente dal vostro livello di esperienza. Ci sono tre modi principali per fare il lavoro: usare la funzionalità integrata di WordPress; installare un plugin adatto o sporcarsi le mani con il codice.

Di seguito vi mostreremo come creare un menu WordPress usando tutti e tre gli approcci.

1. Usare la Funzionalità Integrata di WordPress per Creare il Vostro Menu

WordPress ha degli strumenti integrati per aiutarvi a creare un menu. Una schermata dedicata all’interno dell’amministrazione di WordPress sarà familiare a tutti tranne che agli utenti più recenti.

Naturalmente, usare la funzionalità nativa per creare il vostro menu di WordPress ha numerosi vantaggi. Per cominciare, avete una completa compatibilità con il vostro sito. Inoltre, potete costruire i vostri menu usando un’interfaccia familiare e strumenti nativi.

Per arrivarci, andate alla pagina Aspetto > Menu all’interno di WordPress:

Questa schermata si divide in alcune sezioni diverse. In alto, troverete l’opzione per selezionare un menu corrente o crearne uno nuovo:

Se decidete di creare un nuovo menu, dategli un nome e verificate la sezione Impostazioni del menu:

Ci sono molte caselle di controllo qui, ma avete due decisioni principali da prendere:

• Aggiungere automaticamente le pagine di primo livello al menu. “Di primo livello” qui significa le pagine che create all’interno di WordPress e che non sono dipendenti da altre pagine. Per esempio, un post del blog non è una pagina di primo livello perché in molti casi avrà una pagina archivio madre (ad esempio /blog). D’altra parte, una pagina di contatto è spesso di primo livello perché di solito non ha una pagina madre.
• La posizione del menu. Ogni tema avrà le sue posizioni di menu. A meno che non modifichiate i file principali del vostro tema, chi ha sviluppato il tema avrà codificato queste posizioni del menu. Alcuni temi includono delle impostazioni che vi permettono di personalizzarli.

Quando avete le idee chiare, fate clic sul pulsante Crea menu. Lo schermo si aggiornerà e vi troverete nel vostro nuovo menu. Poi date un’occhiata al lato sinistro dello schermo:

Questa schermata elenca tutti i post, le pagine, le tassonomie e altre risorse collegabili sul vostro sito. Costruite il vostro menu spuntando le caselle sulla sinistra e facendo clic sul pulsante Aggiungi al menu.

Questo pulsante li sposterà nella sezione centrale della schermata dei Menu:

Qui potete trascinare e rilasciare gli elementi del menu al loro posto. Se fate clic sulla freccia di espansione accanto a ogni voce, potete anche impostare un’etichetta per la voce di menu o rimuoverla:

Una volta che avete fatto clic su Salva menu, potete partire. Se espandete il menu Impostazioni schermata nella parte superiore dello schermo, però, potete fare molto altro con il vostro menu WordPress:

Il gruppo Elementi dello schermo vi permette di mostrare le meta box del menu nella barra laterale sinistra. Al contrario, il gruppo Mostra proprietà avanzate del menu include la destinazione dei link, le descrizioni e le classi CSS per gli elementi dell’elenco.

C’è un altro aspetto della schermata dei Menu che vale la pena notare. La casella Link personalizzati vi permette di impostare un link a vostro scelta, piuttosto che una pagina predefinita del vostro sito:

Questa opzione è il modo in cui potete aggiungere i link dei social media al vostro menu di WordPress. La piattaforma tirerà fuori l’icona corretta per voi in base al sito che selezionate, dandovi la possibilità di avere loghi ben visualizzati per i siti che scegliete.

2. Usare un Plugin per Creare il Vostro Menu WordPress Personalizzato

La soluzione immediata per aggiungere funzionalità a WordPress è attraverso i plugin. Nella sezione precedente abbiamo spiegato perché l’opzione nativa di WordPress è quasi tutto ciò di cui avete bisogno, ma i plugin possono espandere questa funzionalità.

C’è da chiedersi se avete bisogno di un plugin dedicato (e aggiuntivo) per creare un menu WordPress, anche se ci sono molte buone ragioni per farlo. Per cominciare, spesso vorrete creare un menu basato su uno stile a cui non potete accedere con l’impostazione predefinita. Specifici design responsive, “mega menu” e altri elementi sono tutti disponibili attraverso i plugin.

Inoltre, in molti casi potete costruire i menu usando un editor dedicato e scegliere da modelli preimpostati. Insieme alle ampie opzioni di personalizzazione, avete una soluzione “no-code” che genererà un menu WordPress che funziona per il vostro sito.

Per esempio, il plugin Max Mega Menu non ha segreti su quello che potete ottenere installandolo:

Una volta installato e attivato, troverete un nuovo pannello Mega Menu all’interno di WordPress:

Se guardate la schermata Menu Locations, noterete che ci sono più personalizzazioni disponibili:

Potete anche applicare modelli di menu e modificarli con una portata simile ad alcuni dei migliori page builder sul mercato:

C’è molto altro che potremmo approfondire qui, anche se finiremmo per ripeterci. Vi invitiamo a leggere il nostro articolo precedente sui plugin per i menu di WordPress. Entriamo nel dettaglio su come scegliere il plugin giusto per voi e su come usarlo.

3. Scrivere il Codice per Creare il Vostro Menu WordPress Personalizzato

Se avete buona volontà (o se sviluppate temi WordPress per lavoro), programmare da zero il vostro menu WordPress è un modo affidabile per raggiungere il vostro obiettivo. Naturalmente, per farlo non vi servirà aprire un editor di codice ogni giorno e aggiungere il menu: vi basterà usare gli strumenti nativi di WordPress (o forse un plugin).

Detto questo, imparare a codificare un menu WordPress è un requisito vitale se volete sviluppare temi. Ci sono quattro passaggi per farlo con successo:

• Registrare il vostro menu.
• Visualizzare il menu di WordPress sul front-end.
• Mostrare contenuti aggiuntivi all’interno del vostro menu o dei suoi elementi.
• Definire un callback.

Daremo per scontato che abbiate familiarità condi un editor di codice, che abbiate un ambiente di sviluppo in cui lavorare e che abbiate buone conoscenze di programmazione. Se non avete ancora un tema con cui lavorare, potete usare le opzioni predefinite di WordPress o sceglierne uno dalla nostra lista di temi WordPress più veloci.

Quando tutto è pronto, aprite il file functions.php del tema. Notate che è diverso dal file generale di WordPress che porta lo stesso nome. Qui dovete registrare il vostro menu. In altre parole, dovete dire a WordPress cosa visualizzare nella pagina Aspetto > Menu.

Per farlo, usate la funzione register_nav_menus():

function register_my_menus() {
  register_nav_menus(
    array(
      'header' => __( 'Header Menu' ),
      'other' => __( 'Other Menu' )
     )
   );
 }
 add_action( 'init', 'register_my_menus' );

Questo codice dice alla scheda Gestisci posizioni all’interno di WordPress di visualizzare due menu: Menu intestazione e Altro menu:

Successivamente, dovete visualizzare il vostro menu usando la funzione wp_nav_menu(). Lo aggiungerete nel file template che corrisponde al punto in cui vorreste visualizzare il menu. Nel nostro caso, abbiamo scelto l’intestazione, quindi aggiungeremo il seguente codice al file header.php del nostro tema:

wp_nav_menu( array( 'theme_location' => 'header' ) );

Potrebbe essere che questo codice sia avvolto in un’istruzione if, insieme ad alcuni dei vostri altri menu, quindi seguite le convenzioni che trovate.

A questo punto, potete lavorare con il menu di WordPress come qualsiasi altro. Tuttavia, potreste anche prendere in considerazione l’aggiunta di contenuti aggiuntivi alle voci del vostro menu. Per esempio, potete espandere l’array definito per includere i tag HTML che verranno resi in uscita:

wp_nav_menu(
  array(
    'menu' => 'primary',
    'link_before' => '',
    'link_after' => '',
  )
);

Il vostro compito finale qui è quello di definire un callback. Per impostazione predefinita, WordPress visualizza un menu popolato quando quello specificato non viene trovato. In alternativa, WordPress visualizzerà un menu di pagine quando nessun menu personalizzato è selezionato.
Se questa non è la vostra azione desiderata, potete impostare un parametro diverso per l’argomento theme-location e aggiungere anche un argomento fallback_cb:

wp_nav_menu(
  array(
    'menu' => 'primary',
    // do not fall back to first non-empty menu
    'theme_location' => '__no_such_location',
    // do not fall back to wp_page_menu()
    'fallback_cb' => false
  )
);

Una volta che avete capito come creare un menu WordPress, potete iniziare a migliorarne la funzionalità. Vedremo come fare nella sezione finale per creare una meta box menu personalizzato per WordPress.

Come Migliorare il Menu WordPress

Questa è una sezione avanzata, per cui prima di continuare supponiamo che:

• Sappiate come creare un menu WordPress utilizzando PHP.
• Le vostre competenze di PHP vi permettono di seguire passaggi avanzati.
• Sappiate come registrare e inizializzare un plugin WordPress.

Va oltre lo scopo di questo articolo, ma potete usare il WordPress Plugin Boilerplate Generator per creare un nuovo modello di plugin standardizzato.

Quando siete pronti, create e caricate il vostro plugin su WordPress:

Successivamente, navigate nella cartella del plugin e aprite il file principale. Qui, aggiungete il seguente codice:

/**
 * Add menu meta box
 *
 * @param object $object The meta box object
 * @link https://developer.wordpress.org/reference/functions/add_meta_box/
 */
function custom_add_menu_meta_box( $object ) {
    add_meta_box( 'custom-menu-metabox', __( 'Authors' ), 'custom_menu_meta_box', 'nav-menus', 'side', 'default' );
    return $object;
}
add_filter( 'nav_menu_meta_box_object', 'custom_add_menu_meta_box', 10, 1);

La funzione WordPress add_meta_box() registrerà una meta box nell’amministratore di WordPress. Ci sono alcuni argomenti a cui dovrete fare riferimento all’interno della documentazione ufficiale.
Usiamo anche il filtro nav_menu_meta_box_object() perché non c’è nessuna azione all’interno del file nav-menu.php a cui agganciarsi.

Questa dichiarazione determina se la funzione aggiunge la meta box di una voce di menu per un tipo di oggetto. Quando il filtro viene eseguito, add_meta_box registra la meta box personalizzata.

Definire una Funzione di Callback

Successivamente, possiamo definire una funzione di callback per produrre il contenuto HTML per la meta box:

/**
 * Displays a metabox for an author menu item.
 *
 * @global int|string $nav_menu_selected_id (id, name or slug) of the currently-selected menu
 */
function custom_menu_meta_box(){
    global $nav_menu_selected_id;
    $walker = new Walker_Nav_Menu_Checklist();
    ...
}

La variabile globale ricorda l’ID corrente del menu, mentre $walker memorizza una nuova istanza dell’oggetto Walker_Nav_Menu_Checklist. Questo costruirà l’elenco HTML delle voci di menu.

Da qui, dobbiamo determinare la scheda attiva nella meta box personalizzata. Per farlo, impostiamo il valore di $current_tab, lavorando all’interno dell’ellissi impostata nel blocco di codice precedente.

Qui stiamo usando due schede, ma potete aggiungerne quante ne volete:

$current_tab = 'all';
if ( isset( $_REQUEST['authorarchive-tab'] ) && 'admins' == $_REQUEST['authorarchive-tab'] ) {
    $current_tab = 'admins';
} elseif ( isset( $_REQUEST['authorarchive-tab'] ) && 'all' == $_REQUEST['authorarchive-tab'] ) {
    $current_tab = 'all';
}

La linea seguente otterrà tutti gli utenti con privilegi di scrittura e aggiungerà molte proprietà all’oggetto $authors:

$authors = get_users( array( 'orderby' => 'nicename', 'order' => 'ASC', 'who' => 'authors' ) );
$admins = array();

/* set values to required item properties */
foreach ( $authors as &$author ) {
    $author->classes = array();
    $author->type = 'custom';
    $author->object_id = $author->nickname;
    $author->title = $author->nickname . ' - ' . implode(', ', $author->roles);
    $author->object = 'custom';
    $author->url = get_author_posts_url( $author->ID );
    $author->attr_title = $author->displayname;
    if( $author->has_cap( 'edit_users' ) ){
        $admins[] = $author;
    }
}
$removed_args = array( 'action', 'customlink-tab', 'edit-menu-item', 'menu-item', 'page-tab', '_wpnonce' );
?>

Qui, get_users restituisce un array di oggetti $user selezionati dai parametri specificati. Il parametro who forzerà WordPress a interrogare il database per gli utenti che hanno privilegi di scrittura.

Inoltre, l’array $admins memorizzerà un array di autori, mentre $removed_args memorizzerà un elenco di variabili di query da rimuovere.

Ora potete stampare il markup della meta box. Per farlo, costruiamo le etichette delle schede e i collegamenti.

<div id="authorarchive" class="categorydiv">
    <ul id="authorarchive-tabs" class="authorarchive-tabs add-menu-item-tabs">
        <li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>>
            <a class="nav-tab-link" data-type="tabs-panel-authorarchive-all" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'all', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-all">
                <?php _e( 'View All' ); ?>
            </a>
        </li>

        <li <?php echo ( 'admins' == $current_tab ? ' class="tabs"' : '' ); ?>>
            <a class="nav-tab-link" data-type="tabs-panel-authorarchive-admins" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'admins', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-admins">
                <?php _e( 'Admins' ); ?>
            </a>
        </li>
    </ul>

Ricordate di assegnare i nomi di classe corretti, gli ID e gli attributi dati agli elementi della meta box; altrimenti il menu non funzionerà come previsto.

Entrambe le funzioni add_query_arg e remove_query_arg impostano valori specifici per la variabile authorarchive-tabs e rimuovono le variabili non necessarie.

A questo punto, abbiamo una meta box con schede definite:

Il prossimo passo è costruire il contenuto HTML delle schede.

Costruire il Contenuto HTML per le Schede della Meta Box

Dovrete seguire il codice della sezione precedente all’interno della funzione custom_menu_meta_box(). Per costruire il contenuto, usate quanto segue all’interno della funzione <div> che avete scritto nell’ultima sezione:

<div id="tabs-panel-authorarchive-all" class="tabs-panel tabs-panel-view-all <?php echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>">
    <ul id="authorarchive-checklist-all" class="categorychecklist form-no-clear">
    <?php
        echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $authors), 0, (object) array( 'walker' => $walker) );
    ?>
    </ul>
</div>

<div id="tabs-panel-authorarchive-admins" class="tabs-panel tabs-panel-view-admins <?php echo ( 'admins' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>">
    <ul id="authorarchive-checklist-admins" class="categorychecklist form-no-clear">
    <?php
        echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $admins), 0, (object) array( 'walker' => $walker) );
    ?>
    </ul>
</div>

In breve, ogni scheda contiene una lista di caselle di controllo. La funzione walk_nav_menu_tree() stampa la lista usando tre argomenti: $items, $depth e $r, tutti richiesti.

L’array $items memorizza un array di utenti admin. La funzione array_map() applica la funzione wp_setup_nav_menu_item() a $admins e aggiunge le proprietà degli elementi del menu agli elementi dell’array.

Da qui, possiamo aggiungere il tocco finale.

Aggiungere un Pulsante di Invio

La gran parte della meta box personalizzata è completa, anche se abbiamo ancora bisogno di aggiungere un pulsante Invia e un’icona “spinner” di elaborazione.

Ecco un breve snippet di codice che potete inserire subito dopo il blocco precedente:

<p class="button-controls wp-clearfix">
    <span class="list-controls">
        <a href="<?php echo esc_url( add_query_arg( array( 'authorarchive-tab' => 'all', 'selectall' => 1, ), remove_query_arg( $removed_args ) )); ?>#authorarchive" class="select-all"><?php _e('Select All'); ?></a>
    </span>
    <span class="add-to-menu">
        <input type="submit"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?> class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e('Add to Menu'); ?>" name="add-authorarchive-menu-item" id="submit-authorarchive" />
        <span class="spinner"></span>
    </span>
</p>

</div>
<?php
}

Con queste conoscenze, potete aggiungere quasi tutte le funzionalità ai vostri menu! C’è anche un Gist pubblico del plugin su GitHub che è disponibile per il download gratuito.

Riepilogo

Un menu di WordPress è un aspetto cruciale del vostro sito. Per questo motivo, la piattaforma offre un pannello nativo e potente che vi permetterà di personalizzare ogni menu del vostro sito. Tuttavia, non vi darà tutto ciò di cui avete bisogno per impostazione predefinita.

Diverse opzioni dello schermo vi aiutano ad aggiungere tag CSS e altro. Inoltre, l’installazione di un plugin vi permetterà di trasformare i vostri menu nativi in mega menu e di lavorare con funzionalità avanzate per rendere il vostro menu più responsive (tra le altre cose). Anche la programmazione da zero è una possibilità, e sebbene sia un compito impegnativo se siete principianti, è qualcosa che potete mettere insieme nello spazio di un pomeriggio.

Volete personalizzare il vostro menu di WordPress e se sì, quale approccio avete scelto? Condividete le vostre opinioni nella sezione commenti qui sotto!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.

• Sito Web
• LinkedIn
• Twitter