Come aggiungere una voce non cliccabile nel menu su WordPress

Durante la creazione di un sito web con WordPress potrebbe succedere di voler creare un menu composto da sottomenu che appaiono quando l’utente passerà il mouse sopra la voce principale.

Questa scelta viene utilizzata sopratutto quando il sito web è ricco di pagine interne e abbiamo bisogno di suddividerle correttamente all’interno del menu principale, per far si che i visitatori navighino in maniera fluida creando una struttura facilmente comprensibile.

Tuttavia, spesso accade che la voce principale del menu (quella che conterrà il sottomenu) non deve essere un link, ma solo un semplice segnaposto che avrà lo scopo di far apparire il sottomenu se l’utente dovesse interagire con esso.

Quindi come fare per aggiungere una voce non cliccabile nel menu su WordPress? In questo articolo andremo a vedere quali sono i passi da seguire per ottenere questo risultato in pochi minuti.

Aggiungere una voce non cliccabile nel menu

La prima cosa da fare è entrare nella bacheca del sito WordPress e andare in “Aspetto->Menu” dove potremo facilmente creare o modificare i vari menu del sito.

Ora dobbiamo creare una nuova voce del menu, per fare questo utilizzeremo l’opzione “Link Personalizzati” perché dovrà contenere, appunto, un link personalizzato 🙂

Basterà fare click sulla voce “Link personalizzati” per aprire il tab delle impostazioni, dove avremo la possibilità di aggiungere l’URL e dare un titolo alla voce del menu.

Nel campo URL non dovremo fare altro che inserire il simbolo del cancelletto (#), mentre nella voce del titolo potremo inserire il testo che preferiamo.

Fatto ciò, sarà sufficiente cliccare sul pulsante “Aggiungi al menu” per poter generare la voce di menu e poterla spostare all’interno della struttura del nostro menu pre-esistente.

Adesso sarà sufficiente scegliere dove posizionare questa nuova voce di menu, e infine cliccare sul tasto “Salva menu” in basso a destra della pagina per confermare il tutto.

Bene, abbiamo finito! Facendo un test sarà possibile notare che la voce del menu appena creata non porterà in nessuna pagina.
Ma c’è un ma… tecnicamente la voce è ancora cliccabile, semplicemente non porta da nessuna parte ma in realtà il cursore del mouse mostra ancora il simbolo della manina quando si passa su di esso.

Rimuovere il puntatore del mouse alla voce di menu non cliccabile

Il fatto che la voce del menu sia ancora cliccabile nonostante il link non porti da nessuna parte è un po’ fastidioso e potrebbe confondere le idee ad un eventuale visitatore.

Il passaggio successivo è quello di rimuovere il puntatore del mouse col simbolo della manina (tipico di un link) e sostituirlo con simbolo del puntatore del mouse classico, ossia la freccia.

Per fare ciò torniamo nella pagina “Aspetto-> Menu” e assicuriamoci che le voci del menu accettino classi CSS personalizzate.
Una volta nella pagina del menu, facciamo click sul pulsante “Impostazioni schermata” posto nella parte alta a destra dello schermo.

Facendo click su di esso, si aprirà un menu a scomparsa che ci permetterà di attivare o disattivare alcune proprietà avanzate dei menu.

Quello che a noi interessa è assicurarci che la voce “Classi CSS” sia selezionata, se non lo fosse basterà spuntare il check.

Bene! A questo punto possiamo andare a modificare il link personalizzato precedentemente creato (lo troviamo all’interno del menu).

Aprendo le impostazioni, vedremo una nuova voce chiamata “Classi CSS” dove sarà possibile, appunto, inserire delle classi CSS personalizzate.
Utilizziamo quel campo per inserire una classe chiamata “noncliccabile” al suo interno e infine salviamo il menu.

Ricorda che questa classe CSS deve essere inserita solo alle voci di menu non cliccabili.

Abbiamo quasi finito 🙂
L’ultimo passaggio da fare è quello di creare una classe CSS personalizzata chiamata “noncliccabile“.
Possiamo farlo velocemente andando in “Aspetto-> Personalizza-> CSS Aggiuntivo” e incollando questo codice nell’apposito box:

.noncliccabile > a:hover {
  cursor: default !important;
}

Questo pezzo di codice CSS può essere inserito anche all’interno di un child theme se il sito su cui stai lavorando ne è provvisto. Il risultato è uguale, scegli tu quale metodo usare in base alle tue esigenze.

Fatto! Ora la voce non cliccabile che abbiamo creato precedentemente non solo non avrà un link, ma il cursore del mouse non diventerà una manina ma rimarrà la classica freccia.

Conclusioni

In questo breve articolo abbiamo visto come fare per aggiungere una voce non cliccabile nel menu su WordPress e come cambiare il cursore del mouse per evitare di confondere i visitatori.

E tu? Conosci altri modi per rendere una voce non cliccabile nel menu di WordPress? Se si, scrivilo nei commenti qui in basso 😉