Adding custom items to WordPress menus
Categories
News Sviluppo Realizzazione Siti Web Wordpress Serra Simone

Come aggiungere elementi personalizzati a menu specifici di WordPress

Tempo di lettura: 11 minuti

 

Vuoi aggiungere elementi personalizzati a specifici menu di WordPress?

I menu di WordPress sono menu di navigazione visualizzati nella parte superiore della maggior parte dei siti Web. A volte potresti voler visualizzare elementi personalizzati diversi dai semplici collegamenti nei menu di navigazione.

In questo articolo, ti 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, vengono spesso visualizzati quando si tocca l’icona di un menu.

example navigational menu

Poiché questa è una posizione prominente in un tipico layout di un sito Web WordPress, è intelligente trarne vantaggio inserendo elementi personalizzati diversi dai semplici collegamenti nel menu.

Ad esempio, alcuni utenti potrebbero voler visualizzare il modulo di ricerca come facciamo in WPBeginner. Un sito Web di appartenenza potrebbe voler mostrare i collegamenti di accesso e disconnessione, oppure potresti voler aggiungere icone o immagini al tuo menu.

Per impostazione predefinita, i menu di navigazione sono progettati per visualizzare collegamenti di testo normale. Tuttavia, puoi comunque posizionare elementi personalizzati nei menu di WordPress.

Detto questo, diamo un’occhiata a 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 stai cercando di aggiungere.

Ti mostreremo alcuni degli esempi più comuni. Dovrai utilizzare i plug-in per alcuni di essi, mentre altri richiederanno l’aggiunta del codice.

Se vuoi saltare una determinata sezione, puoi utilizzare questo sommario:

Iniziamo.

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

Alcuni temi WordPress hanno un’opzione per aggiungere una casella di ricerca all’area del menu principale. Ma se il tuo non lo fa, puoi usare il metodo qui sotto.

Per questo, devi installare e attivare il plug-in SearchWP Modal Search Form . Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.

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

L’addon è gratuito e funzionerà anche con la ricerca WordPress predefinita. Tuttavia, ti consigliamo di usarlo con SearchWP se vuoi migliorare la tua ricerca su WordPress.

Dopo aver installato l’addon, vai semplicemente su Aspetto » Menu pagina. Nella colonna “Aggiungi voci di menu”, fai clic sulla scheda “Moduli di ricerca modali di SearchWP” per espanderla.

Add search to menu

Seleziona il tuo motore di ricerca e quindi fai clic sul pulsante Aggiungi al menu.

Il plugin aggiungerà la ricerca al tuo menu di navigazione. Fai clic sul “Modulo di ricerca modale” sotto le voci del menu per espanderlo e modificare l’etichetta in Cerca o qualsiasi altra cosa desideri

Change search label

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

Ora puoi visitare il tuo sito Web per vedere la ricerca aggiunta al menu di navigazione. Cliccandoci sopra si aprirà il modulo di ricerca in un popup lightbox.

Search in navigation menu

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

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

Per questo, dovrai installare e attivare il plug-in Menu Image Icon. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.

Dopo l’attivazione, vai alla pagina Aspetto » Menu e sposta il mouse sulla voce di menu in cui desideri visualizzare un’icona o un’immagine.

Menu Image button

Fare clic sul pulsante blu Immagine del menu per continuare.

Questo farà apparire un popup. Da qui, puoi scegliere un’immagine o un’icona da visualizzare con quella voce di menu.

Choose image or icon

Puoi anche scegliere la posizione dell’immagine o dell’icona rispetto alla voce di menu. Ad esempio, puoi visualizzare l’icona subito prima della voce di menu come nel nostro esempio di seguito, o persino nascondere il titolo del menu in modo che venga visualizzata solo l’icona.

Non dimenticare di fare clic sul pulsante Salva modifiche per memorizzare le tue impostazioni. Ripetere la procedura se è necessario aggiungere icone o immagini ad altre voci di menu.

Successivamente, puoi visitare il tuo sito Web per vedere l’immagine o l’icona personalizzata in voci di menu specifiche.

Menu icons

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

Se stai utilizzando un plug-in di abbonamento a WordPress o gestisci un negozio online, potresti voler consentire agli utenti di accedere facilmente ai propri account.

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

Ti mostreremo come aggiungerli utilizzando un plug-in o utilizzando uno snippet di codice.

1. Aggiungi collegamenti di accesso/disconnessione ai menu utilizzando un plug-in

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

Innanzitutto, è necessario installare e attivare il plug-in della voce di menu Accesso o Disconnessione. Successivamente, è necessario visitare la pagina Aspetto »Menu e fare clic sulla scheda Accesso/Disconnessione per espanderla.

Add login or logout link to specific WordPress menu

Da qui, devi selezionare la voce “Accedi|Esci” e fare clic sul pulsante Aggiungi al menu.

Non dimenticare di fare clic sul pulsante Salva menu per memorizzare le modifiche. Ora puoi visitare il tuo sito web per vedere in azione il tuo link di logout di accesso personalizzato.

Login and Logout link preview

Il collegamento cambierà dinamicamente per accedere o disconnettersi a seconda dello stato di accesso di un utente.

Scopri di più nel nostro tutorial su come aggiungere collegamenti di accesso e disconnessione nei menu di WordPress.

2. Aggiungi collegamenti di accesso/disconnessione utilizzando il codice personalizzato

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

Innanzitutto, devi scoprire il nome utilizzato dal tuo tema WordPress per la posizione specifica del menu di navigazione.

Il modo più semplice per trovarlo è visitare la pagina Aspetto »Menu e portare il mouse sull’area delle posizioni dei menu.

Find menu location name

Fai clic con il pulsante destro del mouse per selezionare lo strumento Ispeziona e vedrai il nome della posizione nel codice sorgente di seguito. Ad esempio, il nostro tema demo utilizza il menu principale, a piè di pagina e nella barra in alto.

Prendere nota del nome utilizzato per la posizione di destinazione in cui si desidera visualizzare il collegamento di accesso/disconnessione.

Successivamente, devi aggiungere il seguente codice al file functions.php del tuo tema o a un plug-in 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, puoi visitare il tuo sito Web e vedrai il link di accesso al nostro logout nel menu di navigazione.

Login link added via custom code

Questo collegamento dinamico passerà automaticamente all’accesso o al logout in base allo stato di accesso dell’utente.

E se volessi solo aggiungere del testo e non un link al tuo menu di navigazione?

Ci sono due modi per farlo.

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

Vai semplicemente alla pagina Aspetto »Menu e aggiungi un collegamento personalizzato con il segno # come URL e il testo che desideri visualizzare come testo del collegamento.

Add custom text with dummy link

Fare clic sul pulsante Aggiungi al menu per continuare.

WordPress aggiungerà il tuo testo personalizzato come voce di menu nella colonna di sinistra. Ora, fai clic per espanderlo ed eliminare il segno #.

Remove link

Non dimenticare di fare clic sul pulsante Salva menu e visualizzare in anteprima il tuo sito web. Noterai che il tuo testo personalizzato appare nel menu di navigazione.

È ancora un collegamento, ma fare clic su di esso non fa nulla per l’utente.

custom text in navigation menu

2. Aggiungi testo personalizzato a un menu di navigazione utilizzando il codice

Per questo metodo, aggiungerai uno snippet di codice al tuo sito web. Innanzitutto, dovrai scoprire il nome della posizione del tuo tema come descritto sopra nella sezione del collegamento di accesso/disconnessione.

Successivamente, è necessario aggiungere il seguente codice al file functions.php del tema o a un plug-in 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;
}

Sostituisci semplicemente dove dice “Testo personalizzato” con il tuo testo.

Ora puoi salvare le modifiche e visitare il tuo sito Web per vedere il testo personalizzato aggiunto alla fine del menu di navigazione.

Questo metodo di codice può tornare utile se desideri aggiungere a livello di codice elementi dinamici a uno specifico menu di WordPress.

Vuoi visualizzare la data corrente all’interno di un menu di navigazione in WordPress? Questo trucco è utile se gestisci un blog aggiornato di frequente o un sito Web di notizie.

Aggiungi semplicemente il seguente codice al file functions.php del tuo tema o a un plug-in 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 dimenticare di sostituire “primario” con la posizione del tuo menu.

Ora puoi visitare il tuo sito Web per vedere la data corrente nel menu di WordPress.

Current date in WordPress menu

Puoi anche modificare il formato della data a tuo piacimento. Guarda il nostro tutorial su come modificare il formato di data e ora in WordPress.

Vuoi aggiungere un po’ più di personalizzazione al tuo menu di navigazione? Puoi salutare gli utenti che hanno effettuato l’accesso con il loro nome nel menu di navigazione.

Innanzitutto, dovrai aggiungere il seguente codice al file functions.php del tuo tema o a un plug-in 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 verifica innanzitutto se è stata aggiunta una voce di menu con #nome_profilo# come testo del collegamento. Successivamente, sostituisce quella voce di menu con il nome dell’utente che ha effettuato l’accesso o un saluto generico per gli utenti non registrati.

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

Add special tag to a menu item

Non dimenticare di fare clic sul pulsante Salva menu per memorizzare le modifiche. Successivamente, puoi visitare il tuo sito Web per vedere il nome dell’utente che ha effettuato l’accesso nel menu di WordPress.

User name in WordPress navigation menu

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

Ad esempio, potresti voler mostrare un menu solo agli utenti che hanno effettuato l’accesso. Un altro scenario è quando si desidera che il menu cambi in base alla pagina visualizzata dall’utente.

Questo metodo consente di creare diversi menu e di visualizzarli solo quando vengono soddisfatte determinate condizioni.

Innanzitutto, è necessario installare e attivare il plug-in Menu condizionali. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per 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 solo per gli utenti che hanno effettuato l’accesso.

Create new menu

Dopo aver creato il menu, passa alla scheda Gestisci posizioni.

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

Add a conditional menu

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

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

Select menu you want to show

Questo farà apparire una finestra popup.

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

Choose condtions

Il plugin offre una serie di condizioni tra cui scegliere. Ad esempio, puoi mostrare il menu in base a pagina, categoria, tipo di post, tassonomia e altro ancora specifici.

Puoi anche mostrare menu diversi in base ai ruoli utente e allo stato di accesso. Ad esempio, puoi mostrare un menu diverso ai membri esistenti su un sito Web di abbonamento.

Ci auguriamo che questo articolo ti abbia aiutato a imparare come aggiungere elementi personalizzati a specifici menu di WordPress. Potresti anche voler vedere la nostra guida su come scegliere il miglior software di web design, o il nostro confronto di esperti del miglior software di chat dal vivo per le piccole imprese.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per i tutorial video di WordPress. Puoi trovarci anche su Twitter e Facebook.

Source link

Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.

Scroll Giù