Creare un sottomenu, o menu multilivello, in WordPress è in realtà piuttosto semplice! WordPress ha una guida alla creazione di menu multilivello perfettamente spiegata nella loro documentazione, circa a metà della guida generale alla creazione di menu.
Allora perché abbiamo un post tutto su qualcosa che WordPress ha già trattato? Bene... se stai creando un sottomenu in WordPress, potresti aver riscontrato un problema:WordPress, per impostazione predefinita, vuole solo link cliccabili nel suo menu. A volte, tuttavia, desideri una voce di menu di livello superiore che esista semplicemente per fornire ai visitatori del tuo sito Web l'accesso alle sottopagine sottostanti. È un compito relativamente facile da eseguire, ma come farlo sicuramente non è chiaro!
Ti mostreremo come fare in modo che ciò accada, quindi esamineremo alcune modifiche più avanzate per migliorare l'usabilità del menu dopo averlo fatto.
Come aggiungere un'etichetta di sottomenu non collegata in WordPress
- Nell'amministratore di WordPress, vai su Aspetto> Menu
- Nella barra laterale sinistra di quella pagina, fai clic su "Collegamento personalizzato"
- Imposta semplicemente l'URL su:
# - Imposta il valore del "testo del collegamento" in modo che sia il nome che desideri venga visualizzato nel menu
- Ora aggiungi le pagine effettive (sottopagine) che desideri vengano visualizzate sotto questa intestazione e trascinale e rilasciale in posizione, annidandole sotto la voce di menu che hai appena aggiunto. Appariranno rientrati quando sono voci di sottomenu.
Questo è tutto! Questa è la versione base. Il menu sarà lì con le sue opzioni di sottomenu e quando fai clic su di esso, non ti porterà in un'altra pagina.
Come farlo sembrare e comportarsi meno come un collegamento
E ora per l'aggiunta un po' più avanzata (ma non proprio).
Il problema che rimane, dal punto di vista dell'usabilità, è che quando un visitatore del sito web passa con il mouse sopra il collegamento, "sembra" ancora che dovresti essere in grado di fare clic su di esso. Ha il cursore per un collegamento, si comporta come un collegamento, punta solo da qualche parte che non va da nessuna parte. Questo probabilmente va bene, ma se questo ti fa impazzire (ciao, sono io!) c'è un modo per aggirare il problema.
Dovrai aggiungere un po' di CSS al tuo sito. Vai su Aspetto> Personalizzatore e apri la sezione CSS personalizzato e incollalo lì, quindi salva le modifiche:
a[href="#"] {
pointer-events: none;
cursor: default;
}
Questo CSS dice:tutti i link che hanno "#" come URL di destinazione non devono più essere cliccabili (pointer-events: none; ) e imposta il cursore in modo che non sia la mano (cursor: default; ).
Ora hai un'intestazione nel tuo menu che non va da nessuna parte, può avere sottoelementi sotto di essa e non mi fa male la testa dal punto di vista dell'usabilità.
Il tuo host web ti aiuta con WordPress?
No? Forse è ora di cambiare. Dai un'occhiata al nostro hosting WordPress canadese ad alte prestazioni!
Leggi di più