Vorresti personalizzare i menu di navigazione di WordPress per cambiarne i colori o l'aspetto? Vostro tema WordPress gestisce l'aspetto dei menu di navigazione sul tuo sito. Puoi personalizzarlo facilmente utilizzando CSS per soddisfare le tue esigenze. In questo tutorial, ti mostreremo come dare uno stile ai menu di navigazione del tuo blog WordPress.

to-the-style-to-menu di navigazione de de wordpress

Metodo 1: come modellare i menu di WordPress con un plug-in

la tua tema WordPress usa i CSS per i tuoi stili di navigazione. Molti principianti non si sentono a proprio agio nell'editing CSS Temi WordPress. Ecco allora che un plug-in per lo stile di un menu torna utile, perché ti evita di modificare i file del tema o di scrivere codice.

Innanzitutto, quello che devi fare è installare e attivare il plug-in " CSS eroe ". Per maggiori dettagli, consulta la nostra guida passo passo su come installare a WordPress Plugin.

CSS Hero è un WordPress Plugin premium che ti consente di progettare il tuo tema WordPress senza scrivere una sola riga di codice (No HTML o CSS richiesta).

Dopo aver attivato il plugin, verrai reindirizzato a una pagina in cui dovrai fornire la tua licenza. Segui le istruzioni sullo schermo e verrai reindirizzato al tuo sito con pochi clic.

Ora devi fare clic sul pulsante eroe CSS Sulla barra degli strumenti di WordPress.

css-hero-menu-wordpress

CSS Hero offre un editor WYSIWYG (quello che vedi è quello che ottieni "Quello che vedi è quello che ottieni"). Fare clic su questo pulsante ti porterà al tuo sito web con una barra degli strumenti mobile CSS Hero sulla destra.

barra degli strumenti-css-hero

È necessario fare clic sull'icona blu in alto per avviare la modifica.

Sposta il mouse sul menu di navigazione e CSS Hero lo evidenzierà visualizzando i suoi bordi. Quando fai clic sul menu di navigazione evidenziato, ti mostreranno i diversi elementi che puoi modificare.

personalizzare un menu con-css-eroe

Nello screenshot qui sopra, puoi vedere la voce di menu, il menu di navigazione e il contenitore del menu di navigazione, ecc.

Supponiamo di voler cambiare il colore del testo di tutti gli elementi nel menu di navigazione. In questo caso, selezioneremo il menu di navigazione che tocca l'intero menu.

CSS Hero ora ti mostrerà le diverse proprietà che puoi modificare come testo, colore di sfondo, bordi, margini, riempimento, ecc.

css-proprietà-hero

È possibile fare clic su una proprietà che si desidera modificare. CSS Hero ti presenterà una semplice interfaccia in cui puoi apportare le tue modifiche.

edit-a-proprietà-css-con-css-hero

Nello screenshot qui sopra, abbiamo selezionato il testo e ci ha mostrato una bella interfaccia per selezionare i caratteri, cambiare il colore del testo, le dimensioni e altre proprietà.

Man mano che apporti le modifiche, avrai un'anteprima dal vivo del risultato finale.

ANTEPRIMA-to-live-css-hero

Quando sei soddisfatto delle modifiche, fai clic sul pulsante "Salva" nella " eroe CSS Per salvare le modifiche.

La parte migliore di questo metodo è che puoi facilmente annullare le modifiche apportate. CSS Hero mantiene una cronologia completa di tutte le tue modifiche e puoi andare e venire tra queste modifiche.

Metodo due: come modificare manualmente lo stile del menu di navigazione

Questo metodo richiede di modificare i file del tema WordPress. Dovresti usarlo solo se sei uno sviluppatore e hai una certa conoscenza della creazione di temi WordPress.

Il modo migliore per farlo è personalizzare il tuo tema WordPress creando un tema figlio. Se cambi solo CSS, ti invito a leggere il nostro tutorial su come aggiungere codice CSS personalizzato su WordPress.

I menu di navigazione di WordPress vengono visualizzati in un elenco non ordinato (elenco puntato).

Se si utilizza il seguente tag php, verrà visualizzato un elenco senza classi CSS associate ad esso.


Il tuo elenco puntato avrebbe il "menu" del nome della classe con ogni voce di elenco con la propria classe CSS.

Questo potrebbe funzionare se si dispone di un'unica posizione del menu. Tuttavia, la maggior parte dei temi ha diversi punti in cui è possibile visualizzare i menu di navigazione.

L'utilizzo solo delle classi CSS predefinite può causare conflitti con i menu in altri posti.

Questo è il motivo per cui è necessario definire la classe CSS e la posizione del menu. È probabile che il tuo tema WordPress lo stia già facendo aggiungendo i menu di navigazione utilizzando un codice come questo:

'primary', 'menu_class' => 'primary-menu',)); ?>

Questo codice dice a WordPress che è qui che il tema mostra il menu principale. Aggiunge anche una classe CSS " menù principale Nel menu di navigazione.

Ora si trova lo stile del vostro menu di navigazione usando la struttura CSS.

#header menù .primary {} // contenitore classe #header menù .primary ul {} // contenitore prima classe lista non ordinata #header menù .primary ul ul {} // lista non ordinata All'interno di una lista non ordinata #header .primary -menu li {} // Ogni elemento di navigazione #header .primary li menu {} // Ogni elemento di navigazione # intestazione li ancoraggio menù .primary ul {} // lista non ordinata se non v'è discesa articoli #header .primary -menu li li {} // Ogni discesa voce di navigazione # intestazione li menù li .primary ha {} // Ogni ancora di salvezza verso il basso voce di navigazione

Sostituisci #header con la classe contenitore o " ID Utilizzato dal tuo tema WordPress.

Questa struttura ti aiuterà a cambiare completamente l'aspetto del tuo menu di navigazione.

Questo è tutto per questo tutorial. Spero che ti permetta di personalizzare i menu del tuo blog WordPress. Sentiti libero di condividerlo con i tuoi amici sui tuoi social network preferiti.