Come aggiungere elementi personalizzati a menu specifici di WordPress

Volete aggiungere elementi personalizzati a menu specifici di WordPress?

I menu di WordPress sono menu di navigazione che vengono visualizzati nella parte superiore della maggior parte dei siti web. A volte è possibile visualizzare nei menu di navigazione elementi personalizzati diversi dai semplici link.

In questo articolo vi mostreremo come aggiungere facilmente elementi personalizzati a specifici menu di WordPress.

Perché aggiungere elementi personalizzati ai menu di WordPress

I menu di WordPress sono collegamenti di navigazione solitamente visualizzati nella parte superiore di un sito web. Sui dispositivi mobili, sono spesso visualizzati quando si tocca un’icona di menu.

Poiché si tratta di una posizione di rilievo nel tipico layout di un sito web WordPress, è opportuno sfruttarla inserendo nel menu elementi personalizzati diversi dai semplici link.

Ad esempio, alcuni utenti potrebbero voler visualizzare il modulo di ricerca come facciamo noi di WPBeginner. Un sito di membership potrebbe voler mostrare i link di login e logout, oppure si potrebbero aggiungere icone o immagini al menu.

Per impostazione predefinita, i menu di navigazione sono progettati per visualizzare link di testo semplice. Tuttavia, è possibile inserire elementi personalizzati nei menu di WordPress.

Detto questo, vediamo come aggiungere elementi personalizzati a menu specifici in WordPress, mantenendo intatto il resto del menu di navigazione.

Aggiunta di elementi personalizzati a menu di navigazione specifici in WordPress

Esistono diversi modi per aggiungere elementi personalizzati a un menu di navigazione in WordPress. Dipende dal tipo di elemento personalizzato che si sta cercando di aggiungere.

Vi mostreremo alcuni degli esempi più comuni. Per alcuni di essi è necessario utilizzare dei plugin, mentre per altri è necessario aggiungere del codice.

Se si desidera passare a una determinata sezione, è possibile utilizzare l’indice:

• Aggiungere un popup di ricerca al menu di WordPress
• Aggiungere icone o immagini al menu
• Aggiungere link di login/logout al menu
• Aggiungere testo personalizzato a un menu di WordPress
• Aggiungere la data corrente al menu
• Visualizzare i nomi utente nel menu
• Mostrare menu diversi su pagine diverse

Cominciamo.

1. Aggiunta di un popup di ricerca nel menu di WordPress

Normalmente, è possibile aggiungere un modulo di ricerca alla barra laterale di WordPress utilizzando il widget o il blocco di ricerca predefinito. Tuttavia, non c’è modo di aggiungere la ricerca al menu di navigazione per impostazione predefinita.

Alcuni temi WordPress hanno un’opzione per aggiungere una casella di ricerca all’area del menu principale. Ma se il vostro non ce l’ha, potete usare il metodo seguente.

A tal fine, è necessario installare e attivare il plugin SearchWP Modal Search Form. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Questo plugin è un addon per SearchWP, che è il miglior plugin di ricerca per WordPress sul mercato.

L’addon è gratuito e funziona anche con la ricerca predefinita di WordPress. Tuttavia, si consiglia di utilizzarlo con SearchWP se si desidera migliorare la ricerca su WordPress.

Dopo aver installato l’addon, basta andare alla pagina Aspetto ” Menu. Nella colonna “Aggiungi voci di menu”, fare clic sulla scheda “SearchWP Modal Search Forms” per espanderla.

Selezionate il vostro motore di ricerca e fate clic sul pulsante Aggiungi al menu.

Il plugin aggiunge la ricerca al menu di navigazione. Fare clic su “Modulo di ricerca modale” sotto le voci di menu per espanderlo e cambiare l’etichetta in Ricerca o in qualsiasi altra cosa si desideri.

Non dimenticate di fare clic sul pulsante Salva menu per memorizzare le modifiche.

Ora è possibile visitare il proprio sito web e vedere la voce Ricerca aggiunta al menu di navigazione. Facendo clic su di esso si aprirà il modulo di ricerca in un popup lightbox.

Per maggiori dettagli, consultate la nostra guida su come aggiungere un pulsante di ricerca a un menu di WordPress.

2. Aggiungere icone e immagini personalizzate a menu specifici

Un altro elemento personalizzato molto diffuso che gli utenti desiderano aggiungere a un menu specifico è un’immagine o un’icona.

A tal fine, è necessario installare e attivare il plugin Menu Image Icon. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l’attivazione, andare alla pagina Aspetto ” Menu e spostare il mouse sulla voce di menu in cui si desidera visualizzare un’icona o un’immagine.

Fare clic sul pulsante blu Immagine del menu per continuare.

Si aprirà una finestra a comparsa. Da qui è possibile scegliere un’immagine o un’icona da visualizzare con quella voce di menu.

Si può anche scegliere la posizione dell’immagine o dell’icona rispetto alla voce di menu. Ad esempio, è possibile visualizzare l’icona subito prima della voce di menu, come nel nostro esempio qui sotto, oppure nascondere il titolo del menu, in modo da visualizzare solo l’icona.

Non dimenticate di fare clic sul pulsante Salva modifiche per memorizzare le impostazioni. Ripetete la procedura se dovete aggiungere icone o immagini ad altre voci di menu.

Successivamente, è possibile visitare il sito web per vedere l’immagine o l’icona personalizzata in voci di menu specifiche.

Per istruzioni più dettagliate, consultate il nostro tutorial su come aggiungere immagini nei menu di WordPress.

3. Aggiungere i link di login/logout a un menu specifico di WordPress

Se si utilizza un plugin per l’iscrizione a WordPress o si gestisce un negozio online, si potrebbe voler consentire agli utenti di accedere facilmente ai loro account.

Per impostazione predefinita, WordPress non offre un modo semplice per visualizzare i collegamenti di login e logout nei menu di navigazione.

Vi mostreremo come aggiungerli utilizzando un plugin o uno snippet di codice.

1. Aggiungere link di login/logout ai menu utilizzando un plugin

Questo metodo è più semplice e consigliato a tutti gli utenti.

Innanzitutto, è necessario installare e attivare il plugin Login or Logout Menu Item. Successivamente, è necessario visitare la pagina Aspetto ” Menu e fare clic sulla scheda Login/Logout per espanderla.

Da qui, è necessario selezionare la voce ‘Log in|Log Out’ e fare clic sul pulsante Aggiungi al menu.

Non dimenticate di fare clic sul pulsante Salva menu per memorizzare le modifiche. Ora è possibile visitare il sito web per vedere in azione il link di accesso e uscita personalizzato.

Il link cambia dinamicamente in login o logout a seconda dello stato di accesso dell’utente.

Per saperne di più, consultate il nostro tutorial su come aggiungere link di login e logout nei menu di WordPress.

2. Aggiungere link di accesso/disconnessione utilizzando un codice personalizzato

Questo metodo richiede l’aggiunta di codice al vostro sito WordPress. Se non l’avete mai fatto prima, date un’occhiata alla nostra guida su come aggiungere codice personalizzato in WordPress.

Innanzitutto, è necessario scoprire il nome che il vostro tema WordPress utilizza per la posizione specifica del menu di navigazione.

Il modo più semplice per trovarlo è visitare la pagina Aspetto ” Menu e passare con il mouse all’area delle posizioni dei menu.

Fare clic con il pulsante destro del mouse per selezionare lo strumento Ispezione e vedere il nome della posizione nel codice sorgente sottostante. Ad esempio, il nostro tema demo utilizza primary, footer e top-bar-menu.

Si noti il nome utilizzato per la posizione di destinazione in cui si desidera visualizzare il link di login/logout.

Successivamente, è necessario aggiungere il seguente codice al file functions.php del tema o a un plugin specifico del sito.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
    }
    return $items;
}

Successivamente, è possibile visitare il proprio sito web e vedere il link di login e logout nel menu di navigazione.

Questo link dinamico passa automaticamente al login o al logout in base allo stato di accesso dell’utente.

4. Aggiunta di testo personalizzato al menu di navigazione di WordPress

E se si volesse aggiungere solo del testo e non un link al menu di navigazione?

Ci sono due modi per farlo.

1. Aggiungere testo personalizzato a un menu specifico (modo semplice)

Basta andare alla pagina Aspetto ” Menu e aggiungere un link personalizzato con il segno # come URL e il testo che si desidera visualizzare come testo del link.

Fare clic sul pulsante Aggiungi al menu per continuare.

WordPress aggiungerà il testo personalizzato come voce di menu nella colonna di sinistra. Ora, fate clic per espanderla ed eliminate il segno #.

Non dimenticate di fare clic sul pulsante Salva menu e di visualizzare l’anteprima del sito. Noterete che il testo personalizzato appare nel menu di navigazione.

Si tratta sempre di un link, ma fare clic su di esso non comporta nulla per l’utente.

2. Aggiungere testo personalizzato a un menu di navigazione usando il codice

Per questo metodo, aggiungerete uno snippet di codice al vostro sito web. Per prima cosa, è necessario scoprire il nome della posizione del tema, come descritto sopra nella sezione link di accesso/logout.

Successivamente, è necessario aggiungere il seguente codice al file functions.php del tema o a un plugin specifico del sito.

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if ( $args->theme_location == 'primary') {
        $items .= '<li><a title="">Custom Text</a></li>';
    }
    return $items;
}

È sufficiente sostituire il punto in cui è scritto “Testo personalizzato” con il proprio testo.

Ora è possibile salvare le modifiche e visitare il sito web per vedere il testo personalizzato aggiunto alla fine del menu di navigazione.

Questo metodo di codice può essere utile se si desidera aggiungere programmaticamente elementi dinamici a un menu specifico di WordPress.

5. Aggiungere la data corrente nel menu di WordPress

Volete visualizzare la data corrente all’interno di un menu di navigazione in WordPress? Questo trucco è utile se gestite un blog aggiornato frequentemente o un sito web di notizie.

È sufficiente aggiungere il seguente codice al file functions.php del vostro tema o a un plugin specifico del sito.

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'primary')  {
         
        $todaysdate = date('l jS F Y');
        $items .=  '<li><a>' . $todaysdate .  '</a></li>';
 
    }
    return $items;
}

Non dimenticate di sostituire “primario” con la posizione del vostro menu.

Ora è possibile visitare il proprio sito web per vedere la data corrente nel menu di WordPress.

È anche possibile modificare il formato della data a proprio piacimento. Consultate il nostro tutorial su come cambiare il formato della data e dell’ora in WordPress.

6. Visualizzazione del nome utente nel menu di WordPress

Volete aggiungere un po’ di personalizzazione al vostro menu di navigazione? Nel menu di navigazione è possibile salutare gli utenti connessi con il loro nome.

Per prima cosa, è necessario aggiungere il seguente codice al file functions.php del vostro tema o a un plugin specifico del sito.

add_filter( 'wp_nav_menu_objects', 'username_in_menu_items' );
function username_in_menu_items( $menu_items ) {
    foreach ( $menu_items as $menu_item ) {
        if ( strpos($menu_item->title, '#profile_name#') !== false) {
			 if ( is_user_logged_in() )     {
				$current_user = wp_get_current_user();
				 $user_public_name = $current_user->display_name;
                $menu_item->title =  str_replace("#profile_name#",  " Hey, ". $user_public_name, $menu_item->title . "!");
			 } else { 
			 $menu_item->title =  str_replace("#profile_name#",  " Welcome!", $menu_item->title . "!");
			 }
        }
    }

    return $menu_items;
} 

Questo codice controlla innanzitutto se è stata aggiunta una voce di menu con #nome_profilo# come testo di collegamento. Successivamente, sostituisce la voce di menu con il nome dell’utente connesso o con un saluto generico per gli utenti non connessi.

Successivamente, è necessario andare alla pagina Aspetto ” Menu e aggiungere un nuovo link personalizzato con il #nome_profilo# come testo del link.

Non dimenticate di fare clic sul pulsante Salva menu per memorizzare le modifiche. Dopodiché, potete visitare il vostro sito web per vedere il nome dell’utente connesso nel menu di WordPress.

7. Visualizzare dinamicamente i menu condizionali in WordPress

Finora abbiamo mostrato come aggiungere diversi tipi di voci personalizzate a specifici menu di WordPress. Tuttavia, a volte potrebbe essere necessario mostrare dinamicamente agli utenti voci di menu diverse.

Ad esempio, si potrebbe voler mostrare un menu solo agli utenti che hanno effettuato l’accesso. Un altro scenario è quello in cui si desidera che il menu cambi in base alla pagina che l’utente sta visualizzando.

Questo metodo consente di creare diversi menu e di visualizzarli solo quando si verificano determinate condizioni.

Per prima cosa, è necessario installare e attivare il plugin Conditional Menus. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l’attivazione, è necessario visitare la pagina Aspetto ” Menu. Da qui è necessario creare un nuovo menu che si desidera visualizzare. Ad esempio, in questo esempio abbiamo creato un nuovo menu per i soli utenti connessi.

Dopo aver creato il menu, passare alla scheda Gestione posizioni.

Da qui, è necessario fare clic sul link Menu condizionali accanto alla posizione del menu.

Successivamente, è necessario selezionare il menu creato in precedenza dal menu a discesa.

Quindi, fare clic sul pulsante “+ Condizioni” per continuare.

Si aprirà una finestra a comparsa.

Da qui è possibile selezionare le condizioni che devono essere soddisfatte per visualizzare il menu.

Il plugin offre una serie di condizioni tra cui scegliere. Ad esempio, è possibile mostrare il menu in base a pagine specifiche, categorie, tipi di post, tassonomie e altro ancora.

È anche possibile mostrare menu diversi in base ai ruoli degli utenti e allo stato di accesso. Ad esempio, è possibile mostrare un menu diverso ai membri esistenti in un sito web di iscrizione.

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere elementi personalizzati a specifici menu di WordPress. Potreste anche voler consultare la nostra guida su come scegliere il miglior software di web design o il nostro confronto tra esperti dei migliori software di live chat per le piccole imprese.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.