Come abilitare i nuovi menu di navigazione di WordPress su un tema esistente

Oltre al nuovo tema “Twenty Ten”, l’altra piccola rivoluzione di WordPress 3.0 sono i Menu Personalizzabili.

Finalmente possiamo decidere le “voci” da inserire nella barra di navigazione del nostro tema WordPress, utilizzando una comoda interfaccia simile a quella dei Widget.

Il nostro tema però deve essere predisposto per l’uso dei nuovi menu: nella maggior parte dei casi si tratta di incollare un po’ di codice php, un compito abbastanza semplice, non c’è bisogno di essere esperti…

Di seguito vedremo i passi necessari per sostituire con un nuovo Menu Personalizzato, la classica lista di pagine generata col comando wp_list_pages() che molti temi (recenti) utilizzano.

Nel caso il vostro tema usasse una modalità differente (ormai lo sappiamo che ogni tema “fa storia a sè”) il procedimento sarà comunque simile.

Ma vediamo come procedere.

Il mio tema non supporta i nuovi menu?

Innanzitutto dovete verificare se il tema ha già il supporto per i menu. Per fare questo andate nel pannello di controllo di WordPress (ovviamente va aggiornato alla versione 3.0). Selezionate “Aspetto” (Appearance) e poi “Menu” per aprire la nuova pagina di gestione.

Se il tema in uso non è ancora abilitato per i nuovi menu apparirà l’avvertimento seguente:

L'avviso dice: Questo tema non ha il supporto nativo per i menu ma, è possibile utilizzare il widget “menu personalizzati” per aggiungere ogni menu creato alla barra laterale del tema.
clicca la miniatura per vedere l'immagine completa

In questo caso avete 3 possibilità:

  1. verificate sul sito del tema se ne esiste una versione aggiornata che supporta i menu. Eventualmente mandate un’email all’autore del tema allegando i link di approfondimento che trovate in fondo a questo post: lui saprà cosa fare.
  2. Usate semplicemente il nuovo Widget chiamato “Menu personalizzato” per inserire i menu nella barra laterale.
  3. Continuate a leggere questo post e abilitate una volta per tutte il tema.

Come attivare i menu personalizzati

L’attivazione è abbastanza semplice e, come vi dicevo, per la maggior parte dei casi richiede semplicemente il copia-incolla di qualche riga di php.

Passo1: aprite il file function.php che si trova nella cartella del vostro tema, incollatevi le seguenti righe, subito prima del tag di chiusura del php "?>": poi salvate e chiudete.

register_nav_menus(array('primary'=>__('Primary Menu'),));

Con questa riga abbiamo attivato un nuovo menu e registrato la locazione dove apparirà col nome  di “primary”.

Passo2: ora torniamo nel pannello di gestione dei menu, creiamone uno nuovo, aggiungiamo qualche pagina. Poi salviamo. In questo modo quando imposteremo il menu nel tema potremo “vedere” la differenza…

Passo3: individuate il file dove compare la barra di navigazione che volete sostituire, normalmente per la barra di navigazione orizzontale il file è header.php, ovviamente sempre nella cartella del vostro tema.

Fatene una copia di sicurezza e mettetela al sicuro.

Attenzione: le copie di sicurezza non le fa mai nessuno, ma in questo caso il backup è fondamentale: c’è una certa probabilità che alla fine del processo di conversione ai nuovi menu ti ritrovi con un menu almeno graficamente “scompaginato”: senza copia di sicurezza non avrai modo per tornare indietro!!!

Passo4: Ora, nel file originale (la copia di sicurezza l’hai messa al sicuro, vero?) cercate la riga con il comando che inizia con wp_list_pages (è il comando di WordPress che elenca nel menu le pagine) e sostituite l’intero comando con:

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

Ora salvate… ed ecco sostituita la lista delle pagine con il vostro nuovo menu. Ora potete tornare nella pagina di gestione dei menu e aggiungere / sostituire tutte le voci che vi servono.

Attenzione: Se il vostro tema non usa il comando wp_list_pages per creare il menu di navigazione, o se usa parametri particolari per modificarne l’aspetto, è probabile che il nuovo menu appaia piuttosto “scompaginato“.

In questo caso è indispensabile approfondire la struttura del proprio tema e i parametri che si possono “passare” alla funzione wp_nav_menu, in modo da personalizzarne l’output secondo le nostre esigenze. Di seguito trovate link a risorse molto utili per fare questo.

Se la cosa dovesse richiedervi parecchio tempo ripristinate temporaneamente la copia di sicurezza del file che avete realizzato in precedenza…

  • Il blog di web2feel che illustra, anche con screencast la procedura che vi ho appena descritto
  • Il sempre ottimo Justin Tadlock che vi dà una panoramica completa sui Menu e sulle possibilità di personalizzare l’output della funzione in modo da adeguarne la grafica alle nostre esigenze.
  • Il riferimento ufficiale è come sempre il Codex di WordPress

P.S. Qui su WordPressMania sto usando i nuovi menu in 3 punti diversi: in alto a destra (sezione chi siamo/iscriviti/contattaci), nella barra di navigazione principale e, in un widget, per elencare i plugin che ho sviluppato io (barra laterale sinistra, box “I miei plugin”). Come vedete sono molto flessibili.

15 commenti:

  1. ” Passo1: aprite il file function.php che si trova nella cartella del vostro tema, incollatevi le seguenti righe, subito prima del tag di chiusura del php “?>”: poi salvate e chiudete.

    register_nav_menus(array(‘primary’=>__(‘Primary Menu’),)); ”

    Ciao Stefano, sono a zero con la conoscenza del codice php e volevo costruire un menu decente per un blog costruito con Artisteer.
    Vorrei subito chiederti cosa intendi con “subito prima del php “?>” “? le virgolette sono comprese nel tag? Di questi tag, nel file “function.php” ce ne sono a decine. Dove andrebbe, precisamente, collocata la stringa?
    Poi un altro quesito: ammesso e non concesso che io sia in grado di seguire fino alla fine le tue istruzioni, potrò inserire nel menu creato la voce “categorie” e farla funzionare come funziona nel widget con tanto di sottocategorie?

    Ti ringrazio per ogni tua attenzione.
    E scusami per l’ignoranza: sono un neofita di wordpress.

    Marco

  2. ” Passo1: aprite il file function.php che si trova nella cartella del vostro tema, incollatevi le seguenti righe, subito prima del tag di chiusura del php “?>”: poi salvate e chiudete.

    register_nav_menus(array(‘primary’=>__(‘Primary Menu’),)); ”

    Ciao Stefano, sono a zero con la conoscenza del codice php e volevo costruire un menu decente per un blog costruito con Artisteer.
    Vorrei subito chiederti cosa intendi con “subito prima del php “?>” “? le virgolette sono comprese nel tag? Di questi tag, nel file “function.php” ce ne sono a decine. Dove andrebbe, precisamente, collocata la stringa?
    Poi un altro quesito: ammesso e non concesso che io sia in grado di seguire fino alla fine le tue istruzioni, potrò inserire nel menu creato la voce “categorie” e farla funzionare come funziona nel widget con tanto di sottocategorie?

    Ti ringrazio per ogni tua attenzione.
    E scusami per l’ignoranza: sono un neofita di wordpress.

    Marco

  3. anch’io uso Artisteer.
    nel Passo1: ne ho tantissimi di “?>” in quale va ? nel primo o nel ultimo ?
    nel Passo4: non trovo questa riga wp_list_pages e neanche wp_nav_menu.

    cosa devo fare ?
    grazie mille

  4. ho capito il Passo4: la stringa ‘primary’ ) ); ?> va messa al posto della stringa ma va anche modificata in questo modo ‘primary’ ) ); ?> e così nel pannello di controllo -Aspetto-Menu scompare la scritta “Questo tema non ha il supporto nativo per i menu ma, è possibile…..” xò non si riese a personalizarla, va in automatico tutte le pagine che si è creato

  5. niente non riesco a personalizzarlo. in panello di controllo-Aspetto-Menu ho creato vari menu diversi ed inserendo alcune pagine e alcune categorie ma poi quando apro il mio sito mi compare sempre i stessi pulsanti delle pagine e il pulsante Home.
    non so dove sbaglio e cosa devo fare, qui nessuno mi da una mano ?

    1. Ciao!
      qui si fa il possibile per rispondere a tutti… ma si fa quel che si può.. 😉
      Nel pannello, Aspetto-> Menu, hai inserito il menu che ti serve nel box “Posizione dei temi” (il primo in alto a sinistra) e salvato?

      1. si si ho fatto vari tentativi, creato tanti menu con inserito solo alcune pagine, o alcuni articoli, e alcuni link per vedere quale funzionava ma niente, sul sito vedo sempre i stessi bottoni delle pagine che ho compreso la Home.
        ho fatto si come dici, ero gia capace di farlo xche con un thema scaricato da internet e con quello standard che ti da wordpress funzionano, solo che non mi piacciono i temi gia fatti, volevo usare il mio fatto con Artisteer, ma niente da fare con quello non funziona.
        se io ti mandassi il mio thema potresti guardare tu e vedere come fare ?

        1. Wanted777, non è per cattiva volontà ma capisci bene che se dovessi guardare i temi di tutti i lettori di WordPRessMania… beh lavorerei gartis dalla mattina alla sera 😉
          Facciamo così, incolla la parte “incriminata” del tema su pastebin.com poi pubblica qui il link… così potrò controllare non solo io ma anche i tanti esperti che passano di qua.
          Sono sicuro che una soluzione si trova :-)

          aspettiamo il link!

          Stefano

  6. Ciao Stefano a me non funziona perchè essendo un template con menù a tendina orizzontale va a posizionarsi sotto, invece che sopra. Per sopra intendo dove ci dovrebbero essere le categorie madre.
    Volevo provare con il widget per caso mi dare il link? Non lo trovo. Grazie.

  7. Ciao.. Grazie per l’articolo.. Una domanda, è possibile creare un menù a tendina, sul menù creato, dopo la procedura che hai spiegato??

    1. sì è possibile, la gestione dei menu interna di WordPress ti permette di specificare numerosi sottolivelli per i menu… poi il tuo tema deve essere adattato per mostrare le “tendine”

  8. Grazie mille, tutorial davvero ben fatto, spiegato in modo semplice e chiaro e soprattutto che porta ad un risulatato funzionante! 😉
    Domanda: posso postare sul mio sito questo tutorial? Ovviamente citerei il tuo sto come fonte e metteri il tuo link.
    Ancora grazie!

  9. Ciao,
    ottimo tutorial..
    pannello di controllo ok ma non riesco a visualizzare il menu, nel sito, dopo le sostituzioni non vedo niente, come mai?
    Grazie 1000

Rispondi