Su WPBeginner, abbiamo aiutato innumerevoli lettori a personalizzare i loro siti WordPress per migliorare l'esperienza utente, potenziare il branding e aumentare le conversioni. E abbiamo visto che, se fatto correttamente, un menu di navigazione unico nel suo genere può aiutare ad aumentare il coinvolgimento e a mantenere le persone più a lungo sul tuo sito.
Il problema è che tutti i temi WordPress hanno posizioni predefinite in cui è possibile visualizzare un menu di navigazione, quindi modificarlo può essere complicato. Questo è particolarmente vero se sei un principiante, poiché la modifica dei file del tema è un processo delicato.
Quando utilizzi un tema a blocchi, puoi farlo con l'Editor del Sito Completo. Ma, secondo la nostra esperienza, ci sono opzioni migliori che funzioneranno per tutti i tipi di temi.
Ad esempio, se desideri personalizzazioni avanzate, puoi utilizzare un potente page builder come SeedProd. Oppure, se stai cercando un modo semplice per utilizzare codice personalizzato, WPCode è di gran lunga la scelta migliore.
In questo articolo, ti mostreremo come aggiungere un menu di navigazione personalizzato in qualsiasi area del tuo tema WordPress. Ti guideremo attraverso 3 opzioni diverse in modo che tu possa scegliere il tutorial più adatto alle tue esigenze.
Perché aggiungere menu di navigazione personalizzati nei temi WordPress?
Un menu di navigazione è un elenco di collegamenti che puntano ad aree importanti del tuo sito web. Rendono facile per i visitatori trovare contenuti interessanti, il che può aumentare le visualizzazioni di pagina e ridurre il tasso di rimbalzo in WordPress.
La posizione esatta del tuo menu varierà in base al tuo tema WordPress. La maggior parte dei temi ha diverse opzioni, quindi puoi creare menu diversi e mostrarli in posizioni diverse.
Per vedere dove puoi visualizzare i menu nel tuo tema WordPress attuale, vai semplicemente su Aspetto » Menu e poi dai un'occhiata alla sezione 'Posizione di visualizzazione'.
L'immagine seguente mostra le posizioni supportate dal tema WordPress Astra.
A volte, potresti voler mostrare un menu in un'area che non è elencata come 'Posizione di visualizzazione' nel tuo tema.
Tenendo presente questo, diamo un'occhiata a come aggiungere un menu di navigazione personalizzato a qualsiasi area del tuo tema WordPress. Usa semplicemente i collegamenti rapidi qui sotto per passare al metodo che preferisci:
- Metodo 1: Utilizzo dell'Editor del Sito Completo (Solo temi basati su blocchi)
- Metodo 2: Utilizzo di un plugin Page Builder (funziona con tutti i temi)
- Method 3: Create a Custom Navigation Menu in WordPress Using Code (Advanced)
Metodo 1: Utilizzo dell'Editor del Sito Completo (Solo temi basati su blocchi)
Se stai utilizzando un tema a blocchi come ThemeIsle Hestia Pro, puoi aggiungere un menu di navigazione personalizzato utilizzando la modifica completa del sito (FSE) e l'editor a blocchi.
Per maggiori dettagli, puoi consultare il nostro articolo sui migliori temi WordPress per la modifica completa del sito.
Questo metodo non funziona con tutti i temi e non ti permette di personalizzare ogni parte del menu. Se vuoi aggiungere un menu completamente personalizzato a qualsiasi tema WordPress, ti consigliamo di utilizzare invece un plugin page builder.
Se stai utilizzando un tema basato su blocchi, vai su Aspetto » Editor.
Per impostazione predefinita, l'editor del sito completo mostra il modello della home page del tuo tema, ma puoi aggiungere un menu di navigazione in qualsiasi area.
Per vedere tutte le opzioni disponibili, seleziona semplicemente 'Modelli', 'Pattern' o 'Pagine'.
Ora puoi fare clic sul modello, sulla parte del modello o sulla pagina in cui desideri aggiungere un menu di navigazione personalizzato.
WordPress mostrerà ora un'anteprima del design. Per modificare questo modello, fai clic sulla piccola icona a forma di matita.
Il passo successivo è aggiungere un blocco di Navigazione nell'area in cui desideri mostrare il tuo menu.
Nell'angolo in alto a sinistra, fai clic sul pulsante blu '+'.
Ora, digita 'Navigazione' nella barra di ricerca.
Quando appare il blocco 'Navigazione', trascinalo e rilascialo sul tuo layout.
Successivamente, fai clic per selezionare il blocco di Navigazione.
Se hai già creato il menu che desideri visualizzare, fai clic per selezionare il blocco Navigazione. Nel menu di destra, fai clic sull'icona dei tre puntini accanto a 'Menu'.
Puoi quindi scegliere un menu dal menu a discesa.
Un'altra opzione è creare un menu all'interno dell'editor del sito completo aggiungendo pagine, articoli, collegamenti personalizzati e altro ancora. Per aggiungere elementi al nuovo menu, fai semplicemente clic sull'icona '+'.
Si aprirà una finestra popup in cui aggiungere qualsiasi articolo o pagina e decidere se questi collegamenti debbano aprirsi in una nuova scheda.
Puoi anche aggiungere una barra di ricerca al menu di WordPress, aggiungere icone dei social media e altro ancora. Nella finestra popup, digita semplicemente il blocco che desideri aggiungere al menu e seleziona l'opzione corretta quando appare.
Puoi quindi configurare questo blocco utilizzando le impostazioni nella barra degli strumenti ridotta e nel menu di destra. Ripeti semplicemente questi passaggi per aggiungere altri elementi al menu.
Quando sei soddisfatto dell'aspetto del menu, fai semplicemente clic sul pulsante 'Salva'.
Il tuo sito utilizzerà ora il nuovo modello e i visitatori potranno interagire con il tuo menu di navigazione personalizzato.
Metodo 2: Utilizzo di un plugin Page Builder (funziona con tutti i temi)
L'editor del sito completo ti consente di aggiungere menu ai temi basati su blocchi. Tuttavia, se desideri aggiungere un menu avanzato e completamente personalizzabile a qualsiasi tema di WordPress, avrai bisogno di un plugin per la creazione di pagine.
SeedProd è il miglior plugin per la creazione di pagine WordPress sul mercato che ti permette di personalizzare ogni parte del tuo menu di navigazione.
Abbiamo una vasta esperienza nell'utilizzo di questo strumento per creare menu di navigazione personalizzati, landing page e molto altro. Per maggiori dettagli, consulta la nostra recensione completa di SeedProd.
Per quanto riguarda le pagine, SeedProd offre oltre 350 modelli progettati professionalmente che puoi utilizzare come punto di partenza. Dopo aver scelto un modello, puoi aggiungere un menu di navigazione personalizzato al tuo sito utilizzando il blocco Nav Menu pronto all'uso di SeedProd.
Innanzitutto, devi installare e attivare il plugin SeedProd. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.
Nota: Esiste anche una versione gratuita di SeedProd che ti consente di creare menu di navigazione personalizzati senza scrivere codice. Tuttavia, in questa guida, utilizzeremo SeedProd Pro poiché dispone del blocco Nav Menu, oltre a modelli aggiuntivi e funzionalità avanzate.
Dopo aver attivato il plugin, SeedProd ti chiederà la tua chiave di licenza.
Puoi trovare queste informazioni nel tuo account sul sito web di SeedProd. Dopo aver inserito la chiave, fai clic sul pulsante ‘Verifica chiave’.
Una volta fatto ciò, vai su SeedProd » Pagine di destinazione e fai clic sul pulsante ‘Aggiungi nuova pagina di destinazione’.
Ora puoi scegliere un modello per la tua pagina personalizzata.
Per aiutarti a trovare il design giusto, tutti i modelli di SeedProd sono organizzati in diversi tipi di campagna, come le campagne coming soon e lead squeeze. Puoi persino utilizzare i modelli di SeedProd per migliorare la tua pagina 404.
Per esaminare più da vicino un design, passa il mouse sopra quel modello e fai clic sull'icona della lente d'ingrandimento.
Quando trovi un design che desideri utilizzare, fai clic su 'Scegli questo modello'.
Stiamo utilizzando il modello 'Pagina offerte Black Friday' in tutte le nostre immagini, ma puoi utilizzare qualsiasi modello desideri.
Dopo aver scelto un modello, digita un nome per quella pagina personalizzata. SeedProd creerà automaticamente un URL basato sul titolo della pagina, ma puoi modificare questo URL come preferisci.
Ad esempio, potresti aggiungere parole chiave pertinenti per aiutare i motori di ricerca a capire di cosa tratta la pagina. Questo può migliorare il tuo SEO di WordPress e aiutare il motore di ricerca a mostrare la pagina alle persone che cercano contenuti simili ai tuoi.
Dopo aver inserito queste informazioni, fai clic sul pulsante 'Salva e inizia a modificare la pagina'.
La maggior parte dei modelli contiene già alcuni blocchi, che sono i componenti principali di tutti i layout di pagina SeedProd.
Per personalizzare un blocco, fai semplicemente clic per selezionarlo nell'editor di pagina.
La barra degli strumenti di sinistra mostrerà ora tutte le impostazioni per quel blocco. Ad esempio, nell'immagine sottostante, stiamo modificando il testo all'interno di un blocco 'Titolo'.
Puoi formattare il testo, cambiarne l'allineamento, aggiungere collegamenti e altro ancora utilizzando le impostazioni nel menu di sinistra.
Se selezioni la scheda ‘Avanzate’, avrai accesso a ancora più impostazioni. Ad esempio, puoi far risaltare davvero il blocco aggiungendo ombreggiature e animazioni CSS.
Per aggiungere nuovi blocchi al tuo progetto, trova semplicemente un blocco nel menu di sinistra e trascinalo sulla pagina. Se vuoi eliminare un blocco, fai clic per selezionarlo e quindi utilizza l'icona del cestino.
Poiché vogliamo creare un menu di navigazione personalizzato, trascina un blocco ‘Menu di Navigazione’ sulla pagina.
Questo crea un menu di navigazione con un singolo elemento predefinito ‘Informazioni’.
Ora puoi creare un nuovo menu all'interno dell'editor SeedProd o scegliere un menu che hai già creato nella bacheca di WordPress.
Per mostrare un menu che hai creato in precedenza, fai clic sul pulsante ‘Menu WordPress’. Ora puoi aprire il menu a discesa ‘Menu’ e scegliere qualsiasi opzione dall'elenco.
Dopo di che, puoi modificare la dimensione del carattere, l'allineamento del testo e altro ancora utilizzando le impostazioni nel menu di sinistra.
Se invece vuoi creare un nuovo menu all'interno di SeedProd, seleziona il pulsante ‘Semplice’.
Quindi, fai clic per espandere l'elemento ‘Informazioni’ che SeedProd crea per impostazione predefinita.
Questo apre alcuni controlli dove puoi modificare il testo e aggiungere l'URL a cui il elemento del menu si collegherà.
Per impostazione predefinita, il link sarà ‘dofollow’ e si aprirà nella stessa finestra del browser. Puoi modificare queste impostazioni utilizzando le caselle di controllo nella sezione ‘Link URL’.
Nell'immagine seguente, stiamo creando un link ‘nofollow’ che si aprirà in una nuova finestra. Per maggiori informazioni su questo argomento, consulta la nostra guida per principianti ai link nofollow.
Per aggiungere altri elementi al menu, fai clic sul pulsante ‘Aggiungi nuovo elemento’.
Puoi quindi personalizzare ciascuno di questi elementi seguendo lo stesso processo descritto sopra.
Il menu di sinistra ha anche impostazioni che modificano la dimensione del carattere e l'allineamento del testo.
Puoi persino creare un divisore, che apparirà tra ogni elemento del menu.
Dopo di che, procedi e passa alla scheda ‘Avanzate’. Qui puoi modificare i colori, lo spazio, la tipografia e altre opzioni avanzate del menu.
Man mano che apporti modifiche, l'anteprima live si aggiornerà automaticamente, così potrai provare diverse impostazioni per vedere cosa funziona bene nel tuo design.
Per impostazione predefinita, SeedProd mostra lo stesso menu su dispositivi mobili e desktop. Tuttavia, i dispositivi mobili hanno in genere schermi molto più piccoli rispetto ai computer desktop.
Tenendo presente questo, potresti voler creare un menu separato da mostrare sui dispositivi mobili. Ad esempio, potresti utilizzare un layout verticale in modo che gli utenti mobili non debbano scorrere lateralmente. Potresti anche voler mostrare meno collegamenti sui dispositivi smartphone e tablet.
Per creare un menu pronto per i dispositivi mobili, è sufficiente progettare il menu seguendo lo stesso processo descritto sopra. Quindi, seleziona la scheda 'Avanzate' e fai clic per espandere la sezione 'Visibilità dispositivo'.
Ora puoi attivare il cursore 'Nascondi su desktop'.
Ora, SeedProd mostrerà questo menu solo agli utenti mobili.
Quando sei soddisfatto dell'aspetto del tuo menu personalizzato, è ora di pubblicarlo.
Fai semplicemente clic sulla freccia a discesa accanto a 'Salva' e quindi seleziona 'Pubblica'.
Ora, se visiti il tuo blog WordPress, vedrai il menu di navigazione personalizzato in azione.
Metodo 3: Creare un menu di navigazione personalizzato in WordPress utilizzando il codice (Avanzato)
Se non vuoi configurare un plugin page builder, puoi aggiungere un menu di navigazione personalizzato utilizzando il codice. Troverai spesso guide con istruzioni su come aggiungere frammenti di codice personalizzati al file functions.php del tuo tema.
Tuttavia, non raccomandiamo questo metodo, poiché anche un piccolo errore nel tuo codice potrebbe causare una serie di errori comuni di WordPress o addirittura bloccare completamente il tuo sito. Perderai anche il codice personalizzato quando aggiornerai il tuo tema WordPress.
Ecco perché consigliamo di utilizzare WPCode. È il modo più semplice e sicuro per aggiungere codice personalizzato in WordPress senza dover modificare alcun file principale di WordPress.
Nota: Ci sono tantissimi modi diversi in cui puoi usare WPCode per personalizzare in sicurezza il tuo sito WordPress. Ha una libreria di snippet di codice integrata e supporta tutti i linguaggi WordPress più importanti, tra cui PHP, JavaScript, CSS e HTML. Per maggiori informazioni sul plugin, consulta la nostra recensione completa di WPCode.
La prima cosa da fare è installare e attivare il plugin gratuito WPCode. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.
Dopo l'attivazione, vai su Snippet di codice » Aggiungi snippet nella tua bacheca di WordPress.
Qui vedrai tutti gli snippet pronti all'uso che puoi aggiungere al tuo sito. Questi includono uno snippet che ti permette di disabilitare completamente i commenti, caricare tipi di file che WordPress normalmente non supporta, disabilitare le pagine di allegato, e molto altro.
Per creare il tuo snippet, passa il mouse sopra 'Aggiungi il tuo codice personalizzato (Nuovo snippet)' e poi fai clic sul pulsante '+ Aggiungi snippet personalizzato'.
Successivamente, devi scegliere un tipo di codice dall'elenco delle opzioni che appaiono sullo schermo. Per questo tutorial, seleziona 'Snippet PHP' come tipo di codice.
Verrai ora indirizzato alla pagina Crea snippet personalizzato.
Per iniziare, inserisci un titolo per lo snippet di codice personalizzato. Può essere qualsiasi cosa che ti aiuti a identificare lo snippet nella tua bacheca di WordPress.
Una volta fatto ciò, incolla semplicemente il seguente snippet nell'editor di codice:
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
Questo aggiungerà una nuova posizione di menu al tuo tema chiamata 'Il mio menu personalizzato'. Per utilizzare un nome diverso, modifica semplicemente lo snippet di codice.
Se desideri aggiungere più di un menu di navigazione personalizzato al tuo tema, aggiungi semplicemente una riga extra allo snippet di codice.
Ad esempio, qui stiamo aggiungendo due nuove posizioni per i menu al nostro tema, chiamate ‘Il mio menu personalizzato’ e ‘Menu extra’:
function wpb_custom_new_menu() {
register_nav_menus(
array(
'my-custom-menu' => __( 'My Custom Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'wpb_custom_new_menu' );
Successivamente, scorri fino alle opzioni ‘Inserimento’. Se non è già selezionato, scegli il metodo ‘Inserimento automatico’ in modo che WPCode aggiunga lo snippet su tutto il tuo sito.
Quindi, apri il menu a discesa ‘Posizione’ e fai clic su ‘Esegui ovunque’.
Ora sei pronto per scorrere fino in cima alla schermata e fare clic sull’interruttore ‘Inattivo’ in modo che cambi in ‘Attivo’.
Infine, procedi e fai clic su ‘Salva’ per rendere attivo questo snippet.
Successivamente, vai su Aspetto » Menu e guarda l’area ‘Posizione di visualizzazione’.
Ora dovresti vedere una nuova opzione ‘Il mio menu personalizzato’.
Ora puoi procedere e aggiungere alcune voci di menu alla nuova posizione. Per ulteriori informazioni, consulta la nostra guida passo passo su come aggiungere menu di navigazione per principianti.
Quando sei soddisfatto del tuo menu, il passo successivo è aggiungerlo al tuo tema WordPress.
La maggior parte dei siti web mostra il menu di navigazione direttamente sotto la sezione dell'intestazione. Ciò significa che il menu è una delle prime cose che i visitatori vedono, insieme al logo del sito o al titolo.
Puoi aggiungere il menu di navigazione personalizzato in qualsiasi posizione aggiungendo del codice al file del modello del tuo tema.
Nella tua bacheca di WordPress, vai su Aspetto » Editor file tema.
Nel menu a destra, scegli il modello in cui desideri aggiungere il menu. Ad esempio, se desideri mostrare il menu di navigazione personalizzato nell'intestazione del tuo sito web, allora selezionerai tipicamente il file header.php.
Per assistenza nel trovare il file del modello corretto, consulta la nostra guida su come trovare i file da modificare nel tuo tema WordPress.
Dopo aver selezionato il file, dovrai aggiungere una funzione wp_nav_menu e specificare il nome del tuo menu personalizzato.
Ad esempio, nel seguente snippet di codice, stiamo aggiungendo 'Il mio menu personalizzato' all'intestazione del tema:
wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );
Dopo aver aggiunto il codice, fai clic sul pulsante 'Aggiorna file' per salvare le modifiche.
Ora, se visiti il tuo sito, vedrai il menu personalizzato in azione.
Per impostazione predefinita, il tuo menu apparirà come un semplice elenco puntato.
Puoi personalizzare il menu di navigazione personalizzato per adattarlo meglio al tuo tema WordPress o al branding della tua azienda aggiungendo codice CSS personalizzato al tuo sito.
Per fare ciò, vai su Aspetto » Personalizza.
Nel personalizzatore del tema WordPress, fai clic su ‘CSS aggiuntivo’.
Questo aprirà un piccolo editor di codice dove puoi digitare del CSS.
Ora puoi stilizzare il tuo menu usando la classe CSS che hai aggiunto al template del tuo tema. Nel nostro esempio, questa è .custom_menu_class.
Nel seguente codice, stiamo aggiungendo margini e padding, impostando il colore del testo su nero e disponendo le voci del menu in un layout orizzontale:
div.custom-menu-class ul {
margin:20px 0px 20px 0px;
list-style-type: none;
list-style: none;
list-style-image: none;
text-align:right;
display:inline-block;
}
div.custom-menu-class li {
padding: 0px 20px 0px 0px;
display: inline-block;
}
div.custom-menu-class a {
color:#000;
}
Il personalizzatore di WordPress si aggiornerà automaticamente.
Mostrerà ora come apparirà il menu con il nuovo stile.
Se sei soddisfatto di come appare il menu, fai clic su ‘Pubblica’ per rendere effettive le tue modifiche.
Per maggiori informazioni, consulta la nostra guida su come stilizzare i menu di navigazione di WordPress.
Guide Esperte: Fai di Più con i Menu di Navigazione di WordPress
Con WordPress, puoi creare ogni tipo di menu utile e coinvolgente. Tenendo presente questo, ecco alcune guide esperte per aiutarti a ottenere ancora di più dai tuoi menu di navigazione:
- Come aggiungere icone immagine con menu di navigazione in WordPress
- Come aggiungere logica condizionale ai menu in WordPress (Passo dopo Passo)
- Come aggiungere descrizioni ai menu nei tuoi temi WordPress
- Come aggiungere un menu responsive a schermo intero in WordPress
- Come aggiungere un Mega Menu sul tuo sito WordPress (Passo dopo Passo)
Speriamo che questa guida definitiva ti abbia aiutato a imparare come aggiungere un menu di navigazione personalizzato in WordPress. Potresti anche voler consultare le nostre guide su come aggiungere un pulsante nel menu dell'intestazione di WordPress o come evidenziare una voce di menu in WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Imran
Ho un header personalizzato creato per WordPress con elementi di menu codificati manualmente, Come posso usare il menu di WordPress nell'header invece del menu codificato manualmente?
cheryl
Sono abbastanza nuovo a WordPress tuttavia vorrei modificare un menu personalizzato che abbiamo creato poiché qualcosa sembra sbagliato all'interno del menu.
Come faccio a farlo?
Manu
Excellent tutorial! This was exactly what I needed right now. Within 5 minutes I was able to set up a footer menu in a theme that by default didn’t have any. Thank you so much
Munna Hossain
Articolo utile. Sono un utente WordPress e questi suggerimenti mi aiuteranno ad aggiungere menu di navigazione personalizzati. Grazie per aver condiviso.
Daniel Keith
Ciao,
Ottimo tutorial. Come posso applicare il CSS a questo menu personalizzato?
Sebbene questo sia un ottimo modo per aggiungere menu multipli, ma senza un CSS adeguato il sito web sembra strano.
Zaheer Abbas
Sto creando il mio tema WordPress ma il menu e il widget non vengono visualizzati nel pannello di amministrazione ???
sono funzionalità integrate in WordPress o devo creare menu e widget con il codice, per favore guidami
Tabitha
Come posso trasformare il mio menu a tendina in colonne? Il mio menu a tendina attuale è troppo lungo.
Aakash Salunke
Sono un utente un po' avanzato. Il mio tema supporta solo un menu. Ma voglio aggiungerne un altro. L'ho creato, ma come posso aggiungerlo?
Supporto WPBeginner
Per prima cosa dovrai registrare la posizione del menu, poi dovrai modificare i file del tuo tema per visualizzare il tuo menu di navigazione.
Amministratore
bobit
ha funzionato, grazie per il fantastico post
Aijaz Ansari
Fantastico, tutorial, aiuta davvero un principiante come me.
Grazie
Victoria
Grazie per l'articolo!!! Ho creato il mio nuovo menu.
Ho però un problema.
Il mio sito web ha una larghezza fissa e quando ridimensiono la finestra tutto rimane al suo posto, tranne il nuovo menu. Min-width non è un'opzione perché non è esattamente il comportamento che voglio.
Come posso farlo comportare allo stesso modo del resto dei contenuti della pagina?
Grazie!
Joey
GRAZIE! Lo cercavo da molto tempo, non avrei mai pensato che fosse così semplice.
Cory
ho un tema follemente vecchio che non supportava i menu di WP 3.0+. Questo tutorial è stato così facile. Mi ci sono voluti 3 minuti per aggiornarlo un po'. Grazie mille.
Jacques Goudreau
Grazie per il consiglio! Ottimo tutorial!
Emma
Dove si va per apportare queste modifiche? Non vedo nessuna di queste opzioni nelle schede Tema o Opzioni tema.
I use the Buenos Theme, but can’t find on the Buenos theme page does it support these changes? I want to put in an Archive menu with a list of all the recipes on my blog… should be easy but proving impossible
Staff editoriale
La maggior parte dei temi lo supporta. Guarda Aspetto > Menu. Questo articolo è per i designer di temi che vogliono aggiungere questa funzionalità nei loro temi per consentire agli utenti di aggiungere menu dal backend.
Amministratore
Zoe
Ho provato ad aggiungere una classe personalizzata a un singolo URL personalizzato (per cambiare il colore di un solo URL) nella sezione Menu di navigazione principale, ma aggiunge la mia classe come estensione della classe esistente nel codice sorgente di output e non succede nulla.
Ecco il mio codice CSS e il codice sorgente che viene generato sul mio sito:
.myCustomClass { color: #FFFF00; }
Un link colorato una tantum
Suggerimenti su come farlo funzionare?
Staff editoriale
Sì, aggiungilo come color: #ffff00 !important; in quella classe. Questo dovrebbe fare il trucco.
Amministratore
Jeremy Johnson
Sono riuscito a implementare queste modifiche e il menu personalizzato funziona. Tuttavia, il CSS del mio tema scelto non sembra supportare i sottomenu. L'elemento del sottomenu è sempre visibile, passare il mouse sopra l'elemento padre non fa nulla e l'elemento del menu padre è largo quanto l'elemento figlio più largo, il che spinge gli altri elementi del menu più a destra di quanto dovrebbero essere. Suggerimenti su come rendere il sottomenu dinamico? Sono abbastanza nuovo al CSS.
Staff editoriale
Il posto migliore per iniziare sarebbe prendere il tema predefinito Twenty Eleven. Usa il CSS di navigazione da lì e inizia a modificare.
Amministratore
Cedric
Sto ancora cercando una soluzione per questo.
shaunling
Questo è semplicemente fantastico!
digitfox
Sì! È un bel tutorial per me! Sono molto nuovo a WP! Grazie
PauloNeves
Ho bisogno di aiuto.
Segui tutti i passaggi, ma nel pannello Aspetto il menu delle opzioni non è abilitato.
Quando seleziono un altro tema funziona.
Come posso abilitare il menu delle opzioni?
Grazie.
Paulo Neves
wpbeginner
@PauloNeves Devi aggiungere questa riga nel file functions.php del tuo tema: add_theme_support( ‘menus’ );
Brad
Grazie per questo! Ha funzionato benissimo per me e ha aiutato molto il mio cliente! – aptdesign
eeebasic
Questo mi è molto utile anche se la versione 3.3 di WordPress è stata rilasciata pochi giorni fa.
citydan
Ho seguito le istruzioni e questo post e il post qui (https://014.leahstevensyj.workers.dev/wp-tutorials/adding-a-second-menu-to-the-twenty-ten-theme/), e ho capito come far apparire correttamente il mio CSS per il menu, ma gli elementi figli (elementi del sottomenu) non appaiono. Li ho impostati correttamente nell'editor dei menu, ma sul sito non vengono visualizzati. Non sono nascosti dal CSS perché non sono presenti nel codice sorgente della pagina.
Qualche idea sul perché i sottomenu non vengano visualizzati?
GourabMalla
Ciao,
Ho aggiunto il menu personalizzato nella navigazione in alto ma voglio sapere come posso attivare la "Current Page Class".
Sto usando WordPress 3.2
Grazie
Gourab
DanFlynnDesign
Grazie! Adoro come tutto sia dinamico in modo che il cliente possa modificarlo se necessario, oltre a poter indicare quale sia la pagina corrente e applicare l'effetto hover! ESATTAMENTE quello che stavo cercando!
asharperrazor
Ci ho provato molte volte. Ho un vecchio tema di WordPress. Così vecchio che non sono nemmeno sicuro per quale versione di WordPress sia stato scritto. Comunque, riesco a far funzionare la parte delle funzioni. Riesco a salvare il menu corretto. Posso inserire il codice in altre parti del mio sito web, ad esempio nel footer, anche se viene visualizzato come una lista gerarchica e non orizzontale.
Non viene visualizzato nel menu di navigazione in alto. Ho bisogno di un nuovo tema o è possibile modificare il mio tema attuale per consentire la nuova funzione del menu?
Grazie in anticipo. Il sito web è http://www.asharperrazor.com
JamesGeorge
L'ho implementato SENZA problemi - grazie! Ho preso il codice "nav menu" e l'ho inserito nel div dove il tema del mio cliente stava chiamando l'elenco delle pagine. L'ho fondamentalmente sostituito con il tuo codice sopra e l'ho caricato, e il CSS lo ha mantenuto nello stesso stile. Ha un bell'aspetto e funziona perfettamente. FANTASTICO!
ÁlvaroBenavides
Ho davvero bisogno di aiuto per implementare il CSS delle classi, quindi per favore avvisa quando hai finito!
Bec
Ottimo post – grazie!
Ho implementato come sopra e le voci del mio menu vengono visualizzate sul sito, l'unico problema è che ogni pagina è vuota?!
qualche idea?
Staff editoriale
Sembra un errore PHP. Si prega di convalidare il proprio PHP per assicurarsi che non ci siano errori.
Amministratore
Joseph McCullough
Veloce e grezzo – il modo in cui mi piacciono i miei snippet di codice. Grazie mille.
Paul
Ho creato menu di navigazione personalizzati un paio di volte. La cosa strana è che dopo averli creati e salvati, appaiono per un po' e poi la barra di navigazione torna a sole 2 schede, come se le impostazioni venissero sovrascritte automaticamente. Sui siti con lo stesso template dove non ho mai creato una barra personalizzata, vengono visualizzati correttamente.
Qualche idea?
Staff editoriale
No, non ho idea del perché lo stia facendo.
Amministratore
Narendra Choudhary
Puoi definire classi personalizzate per ogni navigazione e poi aggiungere un'immagine in background. Puoi persino usare la proprietà CSS (text-indent) per eliminare il testo del menu, se lo desideri.
Rispondi
Ram
Ho una domanda sul menu di navigazione,
c'è un modo per aggiungere l'immagine all'elenco dei menu di navigazione?
Grazie,
Ram
Staff editoriale
Puoi definire classi personalizzate per ogni navigazione e poi aggiungere un'immagine in background. Puoi persino usare la proprietà CSS (text-indent) per eliminare il testo del menu, se vuoi.
Amministratore
Ram
thanks for your response but i need more clearly that custom menu image for the wordpress.
Im using wp_list_categories(‘exclude=4,7&title_li=’); to show the navigational menu so is it any possibility to add the different images to the different menu button. Im trying the CSS but it never works for me
Grazie,
Ram
Staff editoriale
Sì, è possibile aggiungere immagini diverse con il menu personalizzato. Quello che stai usando non è il menu di cui stiamo parlando in questo articolo.
Julie @ Inspired to Write
Puoi aggiungere codice per renderlo più presentabile (font, pulsanti, dimensioni, ecc.)? Se sì, puoi darmi un esempio e dove inserire questo codice? Grazie!
Staff editoriale
Questa è una domanda relativa al CSS. Dovrai aggiungere la dimensione del font nelle classi appropriate nel file CSS. Faremo presto un articolo sugli stili CSS.
Amministratore
Chris
Domanda sulla gestione del menu.
Ho un menu allineato a destra, quindi le voci del menu appaiono in ordine inverso.
C'è un modo per ordinare 'menu_order' in MODO INVERSO?
quindi: 'sort_column' => 'menu_order' avrebbe qualcosa aggiunto per invertire l'ordine.
Grazie!
Staff editoriale
Solo perché sono allineati a destra, non dovrebbero apparire in ordine inverso. Per risolvere questo problema, è necessario modificare il tuo CSS piuttosto che invertire l'hook. Crea un div contenitore allineato a destra, e poi fai in modo che i tag di lista fluttuino a sinistra.
Amministratore
Julie
Ho seguito le istruzioni ma dopo aver creato i menu e aggiunto le categorie appropriate da utilizzare, non riesco a vederle nella mia barra di navigazione – qualche idea su cosa ho fatto di sbagliato?
Staff editoriale
Hai incollato i codici nel tuo header.php o ovunque debba apparire quel menu?
Amministratore
dan
Devi anche aggiungere questo al tuo file functions.php per poter utilizzare i menu
register_nav_menus( array( 'primary' => __( 'Navigazione Principale', 'twentyten' ), ) );
Staff editoriale
Certamente una cosa che dovresti avere quando rilasci temi gratuiti, ma per temi personalizzati dipende tutto da ciò di cui hai bisogno. A volte non devi registrare le posizioni.
Amministratore
errr
non sto seguendo per niente... potresti essere più chiaro su dove dovrei inserire questo codice (add_theme_support( ‘menus’ );) nel file functions.php?
sono completamente perso
Staff editoriale
Da qualche parte all'interno dei tag php. Se non hai esperienza con PHP, ti consigliamo di assumere un professionista.
Amministratore
BanyanTree
Se hai intenzione di scrivere articoli per principianti, ne consegue che dovresti rispondere a domande semplici. Altrimenti, paga semplicemente per la pubblicità per promuovere la tua attività e salva la finzione.
wpbeginner
@BanyanTree Aggiungere codici al file functions.php non è così difficile. Lo incolli all'interno dei tag php. Abbiamo scritto un articolo come questo: https://014.leahstevensyj.workers.dev/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/ Ma è semplicemente impossibile collegarsi a quell'unico articolo da tutti i nostri articoli. Quando qualcuno ti chiede come cambiare lo sfondo in CSS e tu gli dici che aggiungi background: #000 o un altro codice esadecimale nella proprietà CSS, questo è un aiuto sufficiente. Ora, se chiedono dove nel file CSS incollarlo, allora questa è una cosa che devi sapere in anticipo. Questo sito non è un sito PHP per Negati o CSS per Negati. Facciamo del nostro meglio per aiutare quante più persone possibile GRATUITAMENTE.
BanyanTree
@wpbeginner@BanyanTree Non è necessario collegarsi agli articoli, nessuno l'ha chiesto. Tre parole rispondono alla sua domanda; “alla fine”, che è più facile da digitare di un commento sarcastico. Tieni presente che hai chiamato il tuo sito; “wpbeginner”, e se è questo il pubblico che cerchi, adattati di conseguenza.
wpbeginner
@f1mktsol Sì e il sito è cresciuto oltre il pubblico con cui abbiamo iniziato inizialmente. Questo sito si è evoluto. Ecco perché abbiamo le categorie… La parola “principiante” viene usata su scala relativa.
Abbiamo articoli per Principianti Assoluti che sono solo utenti nella nostra Categoria Guida per Principianti… Abbiamo anche articoli nella nostra categoria Plugin WordPress che sono pensati per quel pubblico. Se sei nella nostra categoria Temi WP, allora gli articoli sono scritti per sviluppatori di temi principianti. Sono principianti nell'area sviluppatori. Lo stesso vale per i tutorial.
Spero che questo chiarisca.
f1mktsol
@wpbeginner Se sei cresciuto oltre il tuo nome, dovresti cambiarlo per adattarlo al pubblico che sembri preferire. Considera di consultare un professionista.
Skubeedoo
Ho aggiunto add_theme_support( ‘menus’ );
e non ho visto alcuna opzione nel pannello di amministrazione [dove devo guardare?] Sto usando il tema intrepidity. Sono un principiante, quindi potrebbe essere proprio davanti a me e non so la differenza. Ho un sito web che ha un WP al suo interno e voglio essere in grado di navigare fuori da WP e tornare al mio URL principale. Tutto ciò di cui ho bisogno è un link di navigazione "Home".
Grazie in anticipo.
Staff editoriale
Dovrebbe apparire sotto la scheda Aspetto.
Amministratore
ianarosh
amico hai un sito fantastico e sono felice di averlo trovato!
Mi stavo scervellando per capire come aggiungere il menu personalizzato ed è stato facile dopo aver visto questo! Semplicemente fantastico.
Hai mai considerato di fare post sulla sicurezza dei blog/server? (non sono sicuro se hai già avuto bisogno di esplorare di più :O)
I migliori saluti e continua così, amico!
Staff editoriale
Fai una ricerca, abbiamo già un post a riguardo.
Amministratore
Charles
Qualcuno di voi può dirmi come aggiungere il supporto per menu multipli nel file functions.php. Voglio includere due set di menu
Staff editoriale
Non hai bisogno di due set di functions.php... Chiama semplicemente la funzione principale. Crea menu multipli usando l'interfaccia utente in wp-admin. Poi dovrai chiamare i menu nel codice php.
Amministratore
Jamie
Solo per informarti, ma quanto segue:
"add_theme_support( 'nav-menus' );"
È cambiato nella release finale in:
"add_theme_support( 'menus' );"
Thanks!
Peter Luit
@Jamie: Grazie per quest'ultima osservazione!
Staff editoriale
Thanks Jamie, Post fixed
Amministratore
Jacob
Ottimo. Esattamente quello che stavo cercando. Come si aggiunge lo slug del menu alla funzione?
Staff editoriale
'menu' => 'Project Nav' in questo modo <<
Amministratore
Chris Creed
Grazie per questo – sto attualmente sperimentando con il nuovo sistema di menu – è un'ottima funzionalità aggiuntiva che renderà le cose molto più facili. Sviluppo temi e ricevo parecchie richieste di supporto da persone che desiderano creare sezioni di navigazione personalizzate sui loro siti – i nuovi menu dovrebbero aiutare a semplificare le cose (soprattutto per le persone con poca esperienza di WordPress).
Gopal Bhattacharjee
Sto anche testando WordPress 3.0 Beta, ora posso giocare con i menu... Grazie!
Angie
Mi chiedo come rimuovere HOME dal mio menu di navigazione usando WP 3.0 beta. Devo modificare la funzione wp_nav_menu o c'è un altro modo?
Se modifico la funzione, puoi fornire istruzioni?
Staff editoriale
Puoi semplicemente fare clic su Rimuovi... proprio come qualsiasi altro link di navigazione.
Amministratore
Kevin
È un peccato che non ci sia modo di aggiungere la pagina "home" al menu dall'interno del costruttore di menu. Questo è un difetto grave.
Staff editoriale
Perché no? Puoi creare un link di navigazione personalizzato chiamato Home e aggiungere l'URL della tua homepage.
Amministratore
Noor
Sto anche testando WordPress 3.0 Beta e ho trovato alcune cose negative nei menu... ad esempio è incoerente e spero che fino al rilascio finale diventi coerente
michelle
bel tutorial! grazie per la condivisione!
Mani Viswanathan
Buoni tutorial in primo luogo! Saranno utili mentre aggiorno alla 3.0