Come aggiungere la logica condizionale ai menu in WordPress (passo dopo passo)

A volte si può desiderare che voci di menu diverse appaiano su pagine diverse di WordPress. Oppure si può desiderare un menu speciale solo per gli utenti connessi.

Per impostazione predefinita, WordPress visualizza lo stesso menu ovunque nel tema. Questo approccio unico non è sempre ideale.

In questo articolo vi spiegheremo come add-onare la logica condizionale ai vostri menu. In questo modo, è possibile personalizzare ciò che i visitatori vedono in base a condizioni specifiche.

Perché aggiungere la logica condizionale ai menu di WordPress?

I menu di navigazione strutturano il sito web WordPress e aiutano i visitatori a trovare ciò che cercano. Per impostazione predefinita, il sito web WordPress visualizza lo stesso menu di navigazione per tutti gli utenti e su tutte le pagine e i post.

Tuttavia, può capitare che si desideri visualizzare menu diversi per utenti diversi o su pagine diverse del sito web.

Siti web come un negozio online, una Community di siti WordPress o una piattaforma di apprendimento online possono beneficiare di menu di navigazione personalizzati.

Utilizzando la logica condizionale, è possibile aggiungere voci di menu extra per gli utenti connessi, in modo che possano gestire i loro account, rinnovare i loro abbonamenti o visualizzare i corsi online che hanno acquistato. Si tratta di un controllo degli accessi al menu di WordPress.

Per questo motivo, vi mostreremo come aggiungere la logica condizionale ai menu di WordPress. Ecco gli argomenti che copriremo in questo tutorial:

Pronti? Iniziamo.

Creare nuovi menu di navigazione in WordPress

Il primo passo consiste nel creare i menu di navigazione aggiuntivi che si desidera visualizzare in WordPress. Dopodiché, si può usare la logica condizionale per decidere quando ogni menu sarà visualizzato.

Da qui in avanti, vi mostreremo come add-on i menu condizionali in WordPress sia per l’editor classico che per quello a blocchi.

Creazione di nuovi menu di navigazione in WordPress con il Classic Editor

Questo metodo funziona per gli utenti del tema classico.

Per creare nuovi menu di navigazione, basta andare alla pagina Aspetto ” Menu della dashboard di WordPress. Se avete già un menu di navigazione che utilizzate sul vostro sito web per tutti gli utenti, questo può essere il vostro menu predefinito.

Successivamente, dovrete fare clic sul link “Crea un nuovo menu” per creare una nuova voce di menu. Ad esempio, si può creare un menu da mostrare agli utenti connessi e un altro da visualizzare su una determinata pagina o categoria di WordPress.

Sul lato sinistro dello schermo è presente un elenco delle pagine del sito web. È sufficiente selezionare la casella accanto alla pagina che si desidera aggiungere al menu e fare clic sul pulsante “Aggiungi al menu”.

È anche possibile trascinare e rilasciare le voci di menu sul lato destro dello schermo per riorganizzarle.

Giù nella pagina, è possibile scegliere una posizione per visualizzare il menu. Ma non è necessario assegnare una posizione a questo menu. Lo faremo nella fase successiva.

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

Per maggiori dettagli sulla creazione di menu, potete dare un’occhiata alla nostra guida per principianti su come aggiungere un menu di navigazione in WordPress.

Creare nuovi menu di navigazione in WordPress utilizzando FSE

Per creare nuovi menu di navigazione in un tema a blocchi con Full Site Editing (FSE), è necessario andare prima su Aspetto ” Editor dal cruscotto di WordPress.

Una volta entrati, si può fare clic sulla scheda “Navigazione” per espanderla. Se ve lo state chiedendo, per questa guida stiamo usando il tema Twenty-Twenty Three.

Quindi, facciamo clic su “Modifica” accanto all’etichetta “Navigazione”. In questo modo si aprirà l’editor completo del sito sulla schermata.

A questo punto, non resta che cliccare sull’icona ‘+’ per aggiungere una voce di menu di navigazione. Verrà visualizzato un messaggio che mostra un menu a discesa in cui è possibile selezionare un’opzione.

Per istruzioni più dettagliate, potete consultare la nostra guida su come add-on un menu di navigazione in WordPress.

Mostrare un menu diverso agli utenti connessi in WordPress

Spesso è utile mostrare agli utenti menu di navigazione diversi a seconda che abbiano effettuato o meno l’accesso al sito.

Ad esempio, è possibile includere link di accesso e registrazione per gli utenti disconnessi e aggiungere un link di disconnessione al menu per gli utenti connessi.

Se gestite un negozio WooCommerce, potete includere elementi per i vostri clienti che sono nascosti al pubblico.

Mostrare un menu diverso agli utenti connessi che utilizzano il Classic Editor

Per iniziare, è 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, si dovrà navigare in Aspetto ” Menu e passare alla scheda ‘Gestisci località’.

Da qui si vedrà l’elenco delle posizioni di menu disponibili e i menu attualmente visualizzati. Questi variano a seconda del tema WordPress utilizzato.

Ad esempio, sul nostro sito web demo, la posizione “Menu primario” mostra un menu di navigazione intitolato “Menu principale”.

Possiamo dire al plugin di mostrare un menu diverso quando si verifica una determinata condizione, facendo clic sul link “+ Menu condizionale” e selezionando un altro menu dal menu a discesa.

Per questa esercitazione, selezioneremo “Menu connesso”.

Successivamente, è necessario fare clic sul link “+ Condizioni”.

Si aprirà una finestra a comparsa con una serie di condizioni tra cui scegliere.

È sufficiente selezionare la casella accanto all’opzione “Utente connesso”, quindi fare clic sul pulsante “Salva”.

Ora è possibile visitare il sito web per vedere il menu dell’utente connesso in azione. È possibile effettuare la disconnessione dal sito web per vedere il menu di navigazione che viene mostrato a tutti gli altri utenti.

Per istruzioni più approfondite e per imparare a farlo utilizzando il codice, date un’occhiata alla nostra guida su come mostrare menu diversi per gli utenti connessi in WordPress.

Mostrare un menu diverso agli utenti connessi con FSE

Se si utilizza un tema a blocchi, è necessario il plugin Conditional Blocks. Quindi, per prima cosa installiamo e attiviamo il plugin. Se avete bisogno di aiuto, potete consultare la nostra guida su come installare un plugin di WordPress.

Dopo averla attivata, è possibile aprire la caratteristica FSE navigando su Aspetto ” Editor. Quindi, fare clic su “Patterns” e poi su “All template parts”.

Ora si dovrebbero vedere tutte le parti del template, che potrebbero includere footer, header e commenti. Facciamo clic sui tre punti nella sezione “Header” e selezioniamo “Modifica”.

In questo modo si viene reindirizzati all’editor a blocchi.

A questo punto, è necessario fare clic sul menu di navigazione a cui si desidera add-on. Dopodiché, basta passare alla scheda ‘Blocco’ sul pannello laterale destro per iniziare a personalizzare.

Se si scorre giù la scheda “Blocco”, si vedrà la sezione “Blocchi condizionali”. Basta fare clic su di essa per aprire le opzioni personalizzate.

Quindi, fare clic sul pulsante “Modifica visibilità”.

Appare una finestra a comparsa in cui è possibile impostare le condizioni per il menu di navigazione scelto.

Qui si può aprire il menu a discesa “CONDIZIONE” e selezionare l’opzione “Utente connesso”.

È sufficiente chiudere la finestra facendo clic sul pulsante “X” in alto a destra.

Si dovrebbe vedere una condizione aggiunta alla sezione “Blocchi condizionali”. Fare clic su “Salva” per aggiornare i menu di navigazione.

Ora, se visitate il vostro sito web, ecco come potrebbe apparire per gli utenti disconnessi e connessi:

Mostrare un menu WordPress diverso a seconda del ruolo dell’utente

Una volta che l’utente ha effettuato l’accesso, è possibile visualizzare un menu di navigazione diverso a seconda del ruolo assegnato all’utente.

Ad esempio, si possono includere voci di menu extra per un amministratore e voci più limitate per un collaboratore. Su un sito di membri, si possono concedere diversi livelli di accesso a diversi livelli di appartenenza.

Mostrare un menu WordPress diverso a seconda del ruolo dell’utente utilizzando il Classic Editor

Come nella sezione precedente, è necessario installare e attivare il plugin Conditional Menus.

Quindi, si può andare alla pagina Aspetto ” Menu e passare alla scheda ‘Gestisci posizioni’.

È necessario aggiungere il menu condizionale appropriato per il ruolo dell’utente selezionato. Per questa esercitazione, selezioneremo il menu ‘Nav Menu Amministratore’.

Successivamente, si può fare clic sul link “+ Condizioni” per scegliere il ruolo dell’utente.

È necessario fare clic sulla scheda “Ruoli utente” per visualizzare i checkbox per ogni ruolo utente del sito web. È sufficiente fare clic sui ruoli utente che vedranno questo menu e poi cliccare sul pulsante “Salva” per memorizzare le modifiche.

Mostrare un menu WordPress diverso a seconda del ruolo dell’utente utilizzando FSE

Per mostrare un menu diverso a seconda dei ruoli degli utenti in FSE, si utilizza il plugin Content Control. Se avete bisogno di aiuto per installarlo e attivarlo, fate riferimento alla nostra guida su come installare un plugin di WordPress.

Dopo l’attivazione, si può navigare in Aspetto ” Editor ” Patterns ” Tutte le parti del template. A questo punto, è sufficiente fare clic sui tre punti nella sezione “Header” e selezionare “Modifica”.

Nell’editor, è possibile selezionare un menu di navigazione a cui aggiungere le condizioni.

Ad esempio, vogliamo rendere la pagina “Blog” esclusiva per i nostri abbonati. Faremo quindi clic su “Blog” per aprire le opzioni personalizzate.

Da qui, ci dirigiamo verso il pannello di destra e attiviamo/disattiviamo l’interruttore “Abilita controlli” nella sezione “Blocca controlli”.

Quindi, scorrere giù fino alla sezione “Regole utente” per impostare le condizioni.

Per prima cosa, è sufficiente aprire il menu a discesa “CHI PUÒ VEDERE QUESTI CONTENUTI” e scegliere “Utente connesso”.

Poi, nel menu a discesa “RUOLO UTENTE”, si può scegliere “corrispondenza”. E in “RUOLI SCELTI”, selezioniamo “abbonato”.

Una volta fatto, si può procedere facendo clic sul pulsante “Salva”.

Mostrare un menu diverso per pagine diverse in WordPress

In WordPress è possibile visualizzare un menu diverso per pagine diverse. Ad esempio, si possono visualizzare voci di menu aggiuntive nella pagina dell’informativa sulla privacy, come un link all’informativa sui cookie.

Mostrare un menu diverso per pagine diverse in WordPress usando il Classic Editor

Per farlo, è necessario installare e attivare il plugin Conditional Menus. Quindi, si dovrà navigare in Aspetto ” Menu “ Gestisci posizioni.

Dopo aver scelto il menu di navigazione appropriato, si può fare clic sul link “+ Condizioni”. Questa volta si deve fare clic sulla scheda “Pagine”. Verrà visualizzato un elenco di tutte le pagine del sito web.

È quindi necessario apporre un segno di spunta accanto a ogni pagina in cui si desidera visualizzare il menu di navigazione. Una volta fatto, fare clic sul pulsante “Salva”.

Mostrare un menu diverso per pagine diverse in WordPress utilizzando FSE

Gli utenti del tema Block possono utilizzare il plugin Block Visibility. Se avete bisogno di aiuto per l’installazione, consultate la nostra guida su come installare un plugin di WordPress.

Una volta attivato, andiamo su Aspetto ” Editor ” Patterns ” All template parts. Dopo aver aperto l’editor dell’intestazione, ci si può dirigere verso la sezione “Visibilità”.

Da qui è possibile aprire il menu a discesa e selezionare “Percorso URL”.

Quindi, è possibile aggiungere il percorso URL della pagina Privacy Policy nell’area “URL PATH (CONTAIN)”.

Il percorso URL è la parte di un indirizzo web che viene dopo il nome del sito web principale e mostra una pagina o un elemento specifico.

Ad esempio, nell’indirizzo https://example.com/about, la parte /about è il percorso dell’URL.

Se non si conosce il percorso URL della pagina Privacy Policy, si può andare su Pagine ” Tutte le pagine. Quindi, trovare la pagina Privacy policy e passare del mouse su di essa.

È sufficiente fare clic sul pulsante “Modifica rapida” per visualizzare la sezione “Slug”. Il percorso dell’URL deve essere il simbolo ‘/’ seguito dallo slug della pagina.

Oppure visitate semplicemente la pagina e copiate e incollate la parte dopo il nome del dominio.

È tutto! Fare clic su “Salva” per salvare le modifiche.

Nascondere il menu di navigazione sulle pagine di destinazione in WordPress

Ci possono essere pagine del sito web in cui non si vuole visualizzare alcun menu di navigazione, come ad esempio le landing page.

Una landing page è progettata per aumentare le vendite o generare lead per un’azienda. Su queste pagine è necessario ridurre al minimo le distrazioni e fornire agli utenti tutte le informazioni necessarie per compiere un’azione specifica.

Nella nostra guida su come aumentare le conversioni della landing page del 300%, suggeriamo di ridurre al minimo le distrazioni rimuovendo i menu di navigazione e altri link dalla pagina.

Nascondere il menu di navigazione sulle landing page in WordPress usando il Classic Editor

È possibile farlo utilizzando il plugin Menu condizionali. Questa volta si sceglierà “Menu disabilitato” dal menu a discesa quando si seleziona il menu condizionale.

Quindi facciamo clic sul link “+ Condizioni” per scegliere quando visualizzare il menu.

Cliccate sulla scheda “Pagine” e mettete un segno di spunta accanto all’elemento “My Landing Page”.

Non dimenticate di fare clic sul pulsante “Salva” per salvare e applicare le impostazioni.

Nascondere il menu di navigazione sulle landing page in WordPress con FSE

Ora, per gli utenti dei temi a blocchi, è possibile utilizzare il plugin Block Visibility, ma questa volta si inserisce il percorso URL nel campo “URL Path (Does Not Contain)”.

Quindi, installiamo e attiviamo il plugin. Se avete bisogno di aiuto, consultate gratuitamente la nostra guida su come installare un plugin di WordPress.

Dopo l’attivazione, ci si può dirigere verso Aspetto ” Editor ” Patterns ” All template parts. Una volta entrati nell’editor Header, troviamo la sezione ‘Visibilità’.

Da qui si può scegliere “Percorso URL” e inserire il percorso della landing page nel campo “Percorso URL (non contiene)”.

Una volta fatto, è sufficiente fare clic sul pulsante “Salva”.

Fare di più con i menu di navigazione di WordPress

I menu di navigazione sono potenti strumenti di web design. Permettono di indirizzare gli utenti verso le sezioni più importanti del sito web.

Ora che i menu di navigazione sono diversi su pagine diverse e per utenti diversi, ci si può chiedere come personalizzarli ulteriormente.

Per migliorare la funzionalità dei vostri menu di navigazione, vi consigliamo di selezionare questi tutorial. Vi aiuteranno a portare il vostro sito WordPress a un livello superiore:

• Come aggiungere elementi personalizzati a menu specifici di WordPress
• Come aggiungere menu di navigazione personalizzati nei temi di WordPress
• Come aggiungere un menu responsive a schermo intero in WordPress
• Come creare un menu di navigazione verticale in WordPress
• Come aggiungere un mega menu al proprio sito WordPress
• Come creare i menu di navigazione di WordPress

Speriamo che questo tutorial vi abbia aiutato a imparare come aggiungere la logica condizionale ai menu di WordPress. In seguito, potreste voler apprendere come aggiungere titoli nel menu di WordPress senza collegamenti a una pagina o come visualizzare i link di navigazione breadcrumb in WordPress.

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