Personalizza il sito:

pannello di controllo

Sei qui: Homepage » wordpress » Le funzioni wp_list_pages e wp_page_menu di WordPress

mar 01 2010

43

Le funzioni wp_list_pages e wp_page_menu di WordPress

Un confronto tra le due soluzioni disponibili per creare un menu di navigazione.

Su WordPress esistono due funzioni php essenziali per la gestione dei menu di navigazione: wp_list_pages e wp_page_menu. Che abbiate un semplice blog o un sito più complesso, in ogni caso avrete quasi sempre bisogno di un menu di navigazione, anche solo per includere i link alla homepage, alla pagina about ed a quella dei contatti.

Le due funzioni hanno alcune differenze: wp_page_menu è stata introdotta dalla versione 2.7 e va ad estendere wp_list_pages, che comunque fa ancora egregiamente il suo dovere. Recentemente mi sono imbattuto in queste funzioni per un aggiornamento al tema Stardust, ed ho deciso di condividere quello che ho scoperto.

La funzione wp_list_pages

Se lavorate con WordPress, conoscerete bene questo template tag, esistente ormai da anni:

<?php wp_list_pages(); ?>

Il suo punto di forza sono le possibilità di personalizzazione.

Escludere una pagina dal menu

Una delle opzioni più usate è quella che consente di nascondere dal menu alcune pagine. Per farlo è sufficiente usare il parametro exclude (in questo caso elimina dall’elenco le pagine con ID 1 e 7:

<?php wp_list_pages('exclude=1,7'); ?>

Mostrare solo le pagine di primo livello

Un altro parametro molto utile è depth, che permette di nascondere tutte le sottopagine e controllare la profondità del menu:

<?php wp_list_pages('depth=1'); ?>

In questo caso, depth=1 mostra solo le pagine di primo livello.

Nascondere il titolo

Se invece non avete bisogno del titolo prima dell’elenco delle pagine, ad esempio perché il menu non è nella sidebar ma disposto in orizzontale, potete usare il parametro title_li:

<?php wp_list_pages('title_li='); ?>

La funzione wp_list_pages offre ottime possibilità di personalizzazione, e spesso è più che sufficiente. Per tutti i dettagli vi consiglio di consultare anche la pagina ufficiale su WordPress.org, dove sono illustrati i parametri utilizzabili ed i rispettivi valori.

La funzione wp_page_menu

Dalla versione 2.7 di WordPress è stato introdotta la funzione wp_page_menu, che aumenta le possibilità a disposizione degli sviluppatori. La differenza principale con wp_list_pages è nel codice che viene generato, e nella possibilità di mostrare un link alla homepage.

Usando la funzione

<?php wp_page_menu(); ?>

Questo sarà l’HTML creato:

<div class=”menu”>
  <ul>
    <li class=”current_page_item”><a href=”…” title=”…”>Pagina attiva</a></li>
    <li class=”page_item”><a href=”…” title=”…”>Pagina</a></li>
    …
  </ul>
</div>

Non c’è quindi bisogno di aggiungere codice HTML intorno alla funzione php, tutto il necessario viene generato automaticamente.

Cambiare la classe associata al menu

Per cambiare la classe del menu, è sufficiente usare il parametro menu_class:

<?php wp_page_menu('menu_class=navigation'); ?>

Mostrare un link alla home nel menu

La novità principale però riguarda il parametro per includere automaticamente un link alla homepage:

<?php wp_page_menu('show_home=1'); ?>

Utilizzando wp_list_pages questo era possibile solo inserendo manualmente nel template un link alla home, ma è una soluzione poco elegante. Inoltre possono esserci problemi quando la prima pagina del blog è una pagina statica: il link alla homepage apparirebbe duplicato.

Con wp_page_menu questo non accade: con un parametro è possibile gestire tutto senza problemi.

Altri parametri

Una caratteristica non è specificata sulla documentazione ufficiale, ma è fondamentale: la funzione wp_page_menu supporta tutti i parametri di wp_list_pages, essendo un’estensione di quest’ultima.

Se ad esempio volete creare un menu con classe “nav”, mostrando anche la homepage e solo un livello di profondità, questa è la funzione:

<?php wp_page_menu('menu_class=nav&show_home=1&depth=1'); ?>

Potete approfondire il discorso sulla pagina di wordpress.org dedicata alla funzione, ricordandovi quindi anche di wp_list_pages.

Quale funzione utilizzare?

La presenza di due funzioni simili potrebbe confondere le idee, ed in effetti viene da chiedersi quale sia l’utilità del conservarle entrambe. La risposta è da cercare nella retrocompatibilità per le vecchie versioni di WordPress.

Se però dovete sviluppare un nuovo tema e non avete problemi di questo tipo, il mio consiglio è di sfruttare fin da subito wp_page_menu. I vantaggi non sono incredibili ma ci sono: i vostri visitatori non noteranno niente di diverso, ma voi avrete un codice più facile da mantenere.

Usi Twitter?

Twitter

Ti è piaciuto questo post?

Segnalalo su Twitter, aiutami a spargere la voce!

 

Classificato in wordpress.

43 Commenti a “ Le funzioni wp_list_pages e wp_page_menu di WordPress ”

  1. 1 marzo 2010 alle 10:29

    Luca

    molto interessante come cosa, questo fa parte sempre dei miei TODO cioè trovare il tempo di mettermi a studiare seriamente WP

    ciao

  2. 1 marzo 2010 alle 12:13

    Zave

    Interessante soprattutto il link alla Home, non conoscevo il comando.
    Conosci per caso qualche modo “semplice” per richiamare all’occorrenza le thumbnail delle pagine nell’elenco?

    Io per ora ho risolto modificando il file wp-includes/classes.php con una funzione che ho trovato in giro per la rete, ma è parecchio contorto…

    Ciao
    Zave

  3. 1 marzo 2010 alle 12:42

    Tom

    @Zave: forse si può fare qualcosa sfruttando il parametro link_before, aggiunto proprio dalla versione 2.7 di WordPress, che ti permette di inserire del codice prima del link. Devi però provvedere tu a recuperare le immagini che ti interessano e ad inserirle nel menu.

  4. 1 marzo 2010 alle 13:21

    Zave

    bhe, è comunque interessante, stasera mi documento un po’ =)
    comunque non risolve il mio problema, se vuoi ti passo la soluzione che ho trovato che, per quanto macchinosa, è interalmente personalizzabile.

  5. 1 marzo 2010 alle 19:12

    Stefano

    Credo che l’utilità di avere un link per la home separato dal resto delle pagine sta nel poter applicare una classe che prevede a sinistra del link un separatore per le pagine, e senza per la home. Se si usa wp_page_menu questo non è applicabile (forse, è più che altro una questione di gusto) in quanto la classe applicata ai link è la stessa per home e le altre pagine.

    Ad ogni modo utilissimo articolo, grande Tom ;)

  6. 21 marzo 2010 alle 10:32

    natspace

    E’ possibile fare in modo che il codice generato per , ad esempio:

    Home
    AZIENDA

    contenga solo il riferimento al numero di ID e non le parole page_item page-item, ovvero:

    Home
    AZIENDA

    Grazie.

  7. 21 marzo 2010 alle 11:31

    Tom

    @natspace: non puoi modificare le classi di default assegnate alle voci del menu, sono standard comuni a tutti i temi di WordPress ed è bene che siano sempre presenti. Puoi dare un’occhiata alle pagine ufficiali delle funzioni su wordpress.org per capire quali parametri puoi cambiare.

  8. 30 novembre 2010 alle 15:48

    francesco fabiano

    Ciao sono un neofita inesperto e direi anche un pò ignorante in materia. Vorrei solo sapere in quale file devo usare questi comandi

  9. 1 dicembre 2010 alle 09:05

    Tom

    @francesco: non c’è una risposta univoca, perché tutto dipende dal tema che stai utilizzando. In genere i menu di navigazione sono nel file header.php, ma potresti trovare delle differenze. E’ molto probabile che dopo aver inserito queste righe di php ci sia anche qualcosa da sistemare per quanto riguarda l’aspetto, tramite il CSS (style.css).

  10. 1 dicembre 2010 alle 13:28

    francesco fabiano

    Grazie per la risposta veloce. Ma ahime ti ripeto sono ignorante e non so proprio dove mettere le mani.Il thema cmq è studiopress.Ho controllato e i riferimenti al menù sono nell’header ma nn so come modifircala, anche perchè non c’e’ nessuna delle due funzioni che tu hai descritto chiaramente nell’articolo.Il mio problema è che voglio far corrispondere all’home page una pagina statica senza che questa appaia poi ne menù.Mahh,se la metto privata non mi funziona.Per i lettori di questo blog sarà sicuramente semplice,ma per me è un rompicapo. Cmq grazie per il tempo concessomi.

  11. 1 dicembre 2010 alle 16:20

    Tom

    @francesco: la soluzione migliore per il tuo problema è creare la pagina ed impostarla come home da Impostazioni – Lettura del pannello di amministrazione.

    Se ti appare comunque nel menu, devi escluderla aggiungendo un parametro sul template header.php, nel punto dove viene creato il menu. Probabilmente troverai qualcosa di molto simile a wp_list_pages();, ti basta aggiungere il parametro exclude

    wp_list_pages(‘exclude=2′)

    dove “2″ è l’ID della pagina da nascondere. Il valore dell’ID lo trovi quando modifichi la pagina, nella barra degli indirizzi: …/post.php?post=2&action=edit

  12. 1 dicembre 2010 alle 16:43

    francesco fabiano

    Avevo gia fatto questo cioè in impostazioni lettura mettere la prima pagina come una pagina statica creata e va bene pero’ questa pagina mi appare nel menù, se la metto privata non funziona.Per quanto riguarda la funzione wp_list_pages non c’e’ nel mio header.Scusa, no so sefaccio bene ma vorrei farti vedere come viene creato il menù nel mio header.Se il commento diventa troppo lungo non sò magari cancellalo.Comunque grazie per il tempo e la pazienza concessami.
    ecco il codice

    get_results(‘select ID, post_title from ‘. $wpdb->posts .’ where post_status = “publish” and post_type = “page” order by ID’);

    }
    return $these_pages;
    }

    function list_all_pages(){

    $all_pages = get_the_pa_ges ();
    foreach ($all_pages as $thats_all){
    $the_page_id = $thats_all->ID;

    if (is_page($the_page_id)) {
    $addclass = ‘ class=”current_page”‘;
    } else {
    $addclass = ”;
    }
    $output .= ‘ID).’” title=”‘.$thats_all->post_title.’”>’.$thats_all->post_title.”;
    }

    return $output;
    }
    ?>

    <?php

    if (is_home()) {
    $addclass = ' class="current_page"';
    } else {
    $addclass = '';
    }
    echo "Home”;
    echo list_all_pages();?>

    In pratica io riesco nè ad ordinare le pagine e nè a nasconderle.

  13. 1 dicembre 2010 alle 16:47

    francesco fabiano

    scusa non l’aveva incollato.
    inizia così e continua nel commento di prima

  14. 1 dicembre 2010 alle 17:20

    Tom

    Ho visto adesso, il tema è molto vecchio ed infatti usa delle funzioni diverse dalle solite. Puoi provare a modificare questa riga:

    $these_pages = $wpdb->get_results(‘select ID, post_title from ‘. $wpdb->posts .’ where post_status = “publish” and post_type = “page” order by ID’);

    in questo modo:

    $these_pages = $wpdb->get_results(‘select ID, post_title from ‘. $wpdb->posts .’ where post_status = “publish” and post_type = “page” and ID != 2 order by ID’);

    dove 2 è il solito ID della pagina che ti dicevo prima.

  15. 1 dicembre 2010 alle 18:42

    francesco fabiano

    Grazie per la pazienza che stai avendo e per il tempo che mi stai concedendo ma non funziona.
    Ho cambiato la riga e se la copia senza i parametri strong ilbrowser non carica la pagina e mi dice che c’e’ un errore di sintassi. Se la copio con iparametri strong dal menu spariscono tutte le pagine esclusa la home che poi come contenuto corrisponde alla 2

  16. 2 dicembre 2010 alle 09:06

    Tom

    Ho fatto una prova, se in quella riga aggiungi “and ID != x” dove X è l’ID della pagina che vuoi eliminare funziona tutto come previsto. Magari sbagli a scrivere qualcosa, non saprei. Prova a controllare, se per caso avessi ancora problemi scrivimi direttamente tramite il modulo contatti.

  17. 7 gennaio 2011 alle 02:51

    Danilo

    Ho una domanda da poco esperto.

    Devo personalizzare un tema introducendo in una sidebar a sinistra un menu con le pagine fino a 3 livelli (pagine, sottopagine e sotto-sotto-pagine) tipo:
    -pagina1
    -pagina1.sp1
    -pagina1.sp1.ssp1
    -pagina1.sp1.ssp2
    -pagina1.sp2
    -pagina1.sp3
    -pagina2
    -pagina2.sp1
    -pagina2.sp2
    …

    Ho provato in diversi modi usando widget page, flexi widget page, e utilizzando un widget per inserire codice php puro (inserendo di conseguenza dentro le funzioni wp_list_pages o wp_nav_pages di cui parli in questo post con vari parametri).

    Le pagine e sottopagine vengono tutte stampate bene.

    Quello che non riesco a gestire bene è l’evidenziazione delle settopagine di secondo livello (so che si deve lavorare con i css su current_page_item), ma questo ancora ancora passi. Credo che si debba lavorare sulle classi .current_page_item (.current_page_ancestor forse anche perche’ nelle prove che ho fatto quando evidenziavo le sotto-sottopagine rimanevano evidenziate anche le sottopagine …)

    Il problema piu’ grosso però e’ il menu la gestione dell’apertura del menu.

    Vorrei che quando sono su
    -pagina1.sp1.ssp1

    e clicco su

    -pagina1.sp1.ssp2

    il menu (l’albero della pagina) rimanesse aperto ed invece di chiude facendo vedere solo le pagine (e non le sottopagine).

    Ho provato in tutti i modi. Qual e’ la strada giusta ?

    sul codex wordpress di wp_list_pages c’e’ del codice css che dicono essere per “accordion menu effect”
    che dovrebbe essere l’effetto a fisarmonica del menu che intendo io e lavora su display none e block delle classi del menu, ma dalle prove che ho fatto non funziona.

    Mi sapreste dare un consiglio per instradarmi ?
    Grazie

  18. 10 gennaio 2011 alle 09:16

    Tom

    @Danilo: ciao, potrebbe fare al caso tuo la soluzione di Roger Johansson per creare menu gerarchici su WordPress. Non so se è esattamente quello che avevi in mente, ma è sicuramente una base valida da utilizzare.

  19. 31 gennaio 2011 alle 13:05

    mimmo

    salve,
    ilmenu di navigazione, composto al momento da due righe e tante colonne … non è fisso ma dinamico. C’è un modo per fare restare fisso?

    Mi spiego …a volte, invece di stare su 2 righe si mette su tre a altera il funzionamento … qualche suggerimento?

    Grazie

  20. 31 gennaio 2011 alle 15:12

    Tom

    @mimmo il problema è sul layout del tuo sito: il menu che usi è fatto per funzionare su una sola riga. E’ già tanto che funzioni su due righe senza scombinare il layout, quando va su tre è normale che si rompa qualcosa.

    La soluzione ideale sarebbe riorganizzare la navigazione, lasciando sul menu orizzontale solo le voci principali su una riga ed eliminare le altre o posizionarle nella barra laterale.

  21. 2 febbraio 2011 alle 14:53

    Michele

    Segnalo un plugin/widget che reputo molto interessante per collocare un menu verticale multilivello contenente le pagine di wordpress: si tratta di Flexi Pages Widget.

    E’ una versione arricchita del widget/plugin Pages ed in pratica da quanto ho capito (nei meccanismi interni) è un wrapper per le due funzioni di cui parli tu: wp_list_pages e wp_page_menu.

    Ha delle opzioni molto interessanti che in maniera visuale consentono di impostare i parametri delle due funzioni di cui sopra (come escludere pagine dal menu, aggiungere un link alla home etc).

    In particolare segnalo la possibilità di visualizzare quali pagine e sottopagine mostrare nel momento in cui si percorre il menu (la scelta della visualizzazione varia a seconda del livello di correlazione tra le pagine stesse) e fino a quale sottolivello mostrare menu/sottomenu.

    Non sarà perfetto per ogni possibile situazione e desiderato per un menu, ma probabilmente può essere sufficiente in molti casi.

  22. 4 marzo 2011 alle 13:03

    Dario

    Ciao, e complienti!
    Io avrei la necessità di togliere il menu di navigazione dalla sola homepage.
    Non potendo eliminarlo dall’header.php altrimenti verrebbe tolto a tutte le pagine che richiamano l’header.php come posso escluderlo dalla pagina template che creo per la homage in questione?
    Grazie

    Dario

  23. 4 marzo 2011 alle 14:03

    Tom

    @Dario devi fare una modifica su header.php, usando i commenti condizionali per nascondere quello che non ti serve sulla homepage. La condizione da controllare è is_home, sulla pagina ufficiale trovi anche degli esempi di utilizzo.

  24. 4 marzo 2011 alle 14:34

    Dario

    Grazie mille! Ora mi metto sotto.

  25. 4 marzo 2011 alle 14:41

    Dario

    …mmm mastico poco in materia php…
    Diciamo che io apro header.php
    come gli dico: “se sei nella home page non far vedere il menù di navigazione?”
    Il codice dove spunta il menù è il seguente:

    <a href="/”>Home

  26. 4 marzo 2011 alle 15:16

    Tom

    E’ sufficiente inserire una cosa del genere su header.php:

    < ?php if ( is_home() ) {
    // Quello che vuoi mostrare in homepage
    } else {
    // Tutto quello che non vuoi appaia in homepage
    }
    ?>

    Prova e vedi se riesci a fare quello che volevi :)

  27. 4 marzo 2011 alle 16:12

    Dario

    Caro e gentilissimo Tom, si, avevo letto il link che mi avevi dato, il mio problema è propio come scrivere in php quel
    // Quello che vuoi mostrare in homepage (tutto tranne il menù)
    oppure
    // Tutto quello che non vuoi appaia in homepage (il menù!)

    Nell’header.php il menu di navigazione si trova dentro il DIV class=”navigation” nel cui interno è riportato il seguente codice php (ometto qualche simbolo od ancora poichè sennò non viene visualizzato nel presente post):
    a href=”/”>Home /a>

    Spero il codice si capisca.

  28. 4 marzo 2011 alle 16:13

    Dario

    …niente… come faccio per scrivere del codice qui dentro al post?

  29. 4 marzo 2011 alle 16:44

    Tom

    Puoi benissimo usare questa sintassi:

    < ?php if ( is_home() ) { ?>
    Quello che vuoi mostrare in homepage
    < ?php } else { ?>
    Tutto quello che non vuoi appaia in homepage
    < ?php } ?>

    …ed inserire il semplice codice html senza preoccuparti del php. Fai una prova, se hai ancora problemi contattami via mail, ma non saprei spiegartelo meglio di così :)

  30. 27 marzo 2011 alle 15:11

    Filippo

    Ciao complimenti per l’articolo e per i contenuti del sito…..
    Volevo farti una domanda….
    E’ possibile applicare delle classi differenti per ogni singola pagina nella funzione wp_page_menu per poter ottenere una navigazione personalizzata?
    Per esempio per poter utilizzare delle immagini al posto del testo nel menu di navigazione?
    Grazie Filippo….

  31. 28 marzo 2011 alle 10:24

    Tom

    @Filippo: la funzione wp_page_menu ha sempre una classe fissa, che puoi impostare tra i parametri. Per modificare l’aspetto del menu a seconda della pagina però puoi sfruttare body_class ed i CSS, con dei selettori discendenti.

  32. 30 agosto 2011 alle 17:56

    Leonardo

    Ho usato wp_list_pages in un template per far uscire anche le sottopagine, ma mi da fastidio che esce anche quel rettangolo vicino al cursore del mouse dove c’è scritto le stesse parole del bottone del menù. C’è un modo per non farlo uscire?

  33. 31 agosto 2011 alle 08:48

    Tom

    @Leonardo l’elemento a cui ti riferisci dovrebbe essere l’attributo title dei link. Rimuoverlo non è immediato, ma è possibile. Qui c’è una guida in inglese, magari ci scriverò un post: Cleaner HTML for the WordPress wp_list_pages function.

  34. 31 agosto 2011 alle 09:40

    Leonardo

    Grazie della risposta, si in effetti era il title, poi sono andato a vedere l’html che generava e c’era il title, cmq io ho risolto con il codice che viene riportato in questa pagina.

    http://www.456bereastreet.com/archive/201011/removing_title_attributes_from_wordpress_links/

    In cui dice che c’è anche un plugin per fare questa cosa, ma a me è andata bene inserendo il codice nel file function.php

    Grazie

  35. 31 agosto 2011 alle 09:53

    Tom

    Esatto, l’articolo che hai citato è collegato a quello che ti avevo indicato :)

  36. 29 novembre 2011 alle 17:08

    roberto

    ciao,
    se io volessi ad esempio avere come pagina genitore una pagina magari chiamata “prodotti” genericamente, e senza usare i drop down menù nella barra principale, ma far apparire all’interno delle thumbnail delle sottopagine ? è possibile ? magari con un plugin specifico ?

    ve lo chiedo perchè sto realizzando un sito con parecchie sottopagine , diciamo una 30ina, e a livello estetico sarebbe sicuramente più gradevole

  37. 30 novembre 2011 alle 08:36

    Tom

    @roberto: l’aspetto del menu puoi gestirlo come preferisci dai CSS, considera che le funzioni php di cui parlo servono per ricavare un elenco di contenuti in HTML che puoi personalizzare successivamente.

    Potrebbe esserti ancora più utile la funzione wp_nav_menu(): con questa puoi sfruttare le classi CSS su ogni voce relativa ad una sottopagina.

  38. 30 novembre 2011 alle 08:40

    roberto

    @Tom
    perdonami ti ho perso, con la funzione da te descritta potrei crearmi una pagina genitrice con sole thumb delle sottopagine ?
    ieri cercando ho trovato questo che lo fa parzialmente [child_pages width="33%"] anche se non è esattamente ciò che cercavo

    Sempre curiosando sul web ho trovato questo sito, http://www.legnopan.com/index.php/it/component/zoo/category/pannelli.html peò realizzato con Joomla, che ha esattamente l’aspetto grafico che vorrei ottenere

    Secondo te è possibile automatizzare il tutto, o mi devo inserire immagine per immmgine e linkarla manualmente ?

    Grazie molte

  39. 30 novembre 2011 alle 09:49

    Tom

    Ok, ho capito cosa intendi, quello che ti serve è associare ad ogni voce di menu un’immagine, poi però sta a te agire sul CSS per sistemare l’aspetto. Non ho mai fatto niente del genere tramite plugin, ma questo potrebbe tornarti utile per la prima parte del lavoro: Custom menu images.

  40. 30 novembre 2011 alle 09:56

    roberto

    Grazie del suggerimento Tom
    forse però il metodo più veloce credo sia piuttosto che agire sul CSS lavorare direttamente da una immagine, nel caso specifico penso di crearla da photoshop e poi linkarla con image-maps.com/

Trackbacks

  1. Il meglio della settimana #52 | BigThink
  2. I migliori post della settimana #57 | EmaWebDesign :: Web Programming / Web Design / SEO
  3. Wordpress 3.0: menu personalizzati | Web Strategist

Scrivi un commento

»
«

Menu secondario

feed

866 lettori

Iscriviti al Feed RSS

categorie

archivio

risorse esterne

extra