Tutorial WordPress affidabili, quando ne hai più bisogno.
Guida per principianti a WordPress
WPB Cup
25 Milioni+
Siti web che utilizzano i nostri plugin
16+
Anni di esperienza con WordPress
3000+
Tutorial WordPress di esperti

Come visualizzare un elenco di pagine secondarie per una pagina principale in WordPress

Recentemente, uno dei nostri lettori ci ha chiesto come visualizzare le sottopagine di una pagina WordPress? È una domanda che riceviamo abbastanza spesso su WPBeginner e mette in evidenza una necessità comune per migliorare la navigazione del sito web e l'esperienza utente. 

Se organizzi il tuo sito WordPress con pagine genitore e pagine figlio, potresti voler visualizzare le tue sottopagine o pagine secondarie sulla pagina genitore principale. Questo aiuta gli utenti a vedere facilmente tutte le informazioni disponibili all'interno di una sezione specifica e a navigare rapidamente verso argomenti correlati.

Potresti anche voler mostrare il link della pagina genitore principale su ogni sottopagina per una facile navigazione, creando un effetto simile alle breadcrumb. Questa navigazione semplificata impedisce agli utenti di perdersi nelle profondità del tuo sito e migliora la loro esperienza di navigazione complessiva.

In questo articolo, ti mostreremo come visualizzare facilmente un elenco di sottopagine per una pagina genitore in WordPress.

Visualizzare un elenco di pagine figlie per una pagina genitore in WordPress

Quando hai bisogno di mostrare un elenco di sottopagine?

WordPress viene fornito con due tipi di contenuto predefiniti chiamati post e pagine. I post sono contenuti del blog e sono solitamente organizzati con categorie e tag.

Le pagine sono contenuti unici o autonomi che sono sempreverdi, come ad esempio una pagina 'Chi siamo' o una pagina 'Contattaci'.

In WordPress, le pagine possono essere gerarchiche, il che significa che puoi organizzarle con pagine genitore e pagine figlio. Ad esempio, potresti voler creare una pagina Prodotto con sottopagine per Funzionalità, Prezzi e Supporto.

Per creare una pagina secondaria, segui la nostra guida su come creare una pagina secondaria in WordPress.

Dopo aver creato le tue pagine padre e secondarie, potresti voler elencare le pagine secondarie nella pagina padre principale.

Ora, un modo semplice per farlo è modificare manualmente la pagina padre e aggiungere un elenco di link individualmente.

Aggiungi manualmente i link delle pagine figlie

Tuttavia, dovrai modificare manualmente la pagina padre ogni volta che aggiungi o elimini una pagina secondaria.

Non sarebbe meglio se potessi semplicemente creare una pagina secondaria e questa apparisse automaticamente come link nella pagina padre?

Detto questo, diamo un'occhiata ad altri modi dinamici per visualizzare rapidamente un elenco di pagine secondarie nella pagina padre in WordPress. Ti mostreremo tre metodi, in modo che tu possa scegliere quello più adatto a te:

Metodo 1. Visualizza le pagine secondarie nella pagina padre utilizzando un plugin

Questo metodo è il modo più semplice per visualizzare le pagine secondarie in una pagina padre ed è consigliato a tutti gli utenti.

Innanzitutto, devi installare e attivare il plugin Page-list. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, è necessario modificare la pagina padre e aggiungere semplicemente il seguente shortcode dove si desidera visualizzare l'elenco delle pagine figlie.

[subpages]

Ora puoi salvare la tua pagina e visualizzarla in anteprima in una nuova scheda del browser. Noterai che viene visualizzato un semplice elenco puntato di tutte le pagine figlie.

Elenco semplice di link di pagine figlie

Se lo desideri, puoi aggiungere del CSS personalizzato per modificare l'aspetto dell'elenco.

Ecco alcuni esempi di CSS che puoi utilizzare come punto di partenza.

ul.page-list.subpages-page-list {
    list-style: none;
    list-style-type: none;
    background-color: #eee;
    border: 1px solid #CCC;
    padding: 20px;
}

Dopo aver applicato il tuo CSS personalizzato, puoi visualizzare in anteprima la pagina padre.

Ecco come appariva sul nostro sito WordPress di test:

Elenco di pagine figlie con CSS

Il plugin fornisce una serie di parametri per lo shortcode che ti consentono di impostare la profondità, escludere pagine, il numero di elementi e altro ancora.

Per maggiori dettagli, consulta la pagina del plugin per la documentazione dettagliata.

Metodo 2. Elenca le pagine secondarie per una pagina padre utilizzando il codice

Questo metodo è un po' avanzato e richiede l'aggiunta di codice al tuo sito WordPress. Se non l'hai mai fatto prima, consulta la nostra guida su come copiare e incollare codice in WordPress.

Per elencare le pagine figlie sotto una pagina genitore, devi aggiungere il seguente codice in un plugin per snippet di codice o nel file functions.php del tuo tema:

function wpb_list_child_pages() { 
 
global $post; 
 
if ( is_page() && $post->post_parent )
 
    $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
else
    $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
 
if ( $childpages ) {
 
    $string = '<ul class="wpb_page_list">' . $childpages . '</ul>';
}
 
return $string;
 
}
 
add_shortcode('wpb_childpages', 'wpb_list_child_pages');

Su WPBeginner, raccomandiamo sempre di aggiungere codice in WordPress con il plugin WPCode.

WPCode ti consente di aggiungere facilmente codice personalizzato senza modificare i file del tuo tema, quindi non devi preoccuparti di rompere il tuo sito.

WPCode

Innanzitutto, devi installare e attivare il plugin gratuito WPCode. Per istruzioni passo passo, consulta questa guida su come installare un plugin WordPress.

Una volta attivato il plugin, naviga su Snippet di codice » Aggiungi snippet dal tuo pannello di controllo WordPress.

Da lì, passa il mouse sopra l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)' e fai clic sul pulsante 'Aggiungi snippet personalizzato'.

Aggiungi un nuovo snippet di codice personalizzato in WPCode

Quindi, devi scegliere 'Snippet PHP' come tipo di codice dall'elenco di opzioni che appaiono sullo schermo.

Seleziona Snippet PHP come tipo di codice

Successivamente, aggiungi un titolo per il tuo snippet, che può essere qualsiasi cosa per aiutarti a ricordare a cosa serve il codice.

Ora, incolla semplicemente il codice sopra nella casella 'Anteprima codice'.

Incolla il codice nella casella Anteprima codice

Dopodiché, basta spostare l'interruttore da 'Inattivo' ad 'Attivo' e fare clic sul pulsante 'Salva snippet' in cima alla pagina.

Attiva e salva il tuo snippet di codice personalizzato

Questo codice controlla prima se una pagina ha una pagina genitore o se la pagina stessa è una pagina genitore.

Se è una pagina genitore, allora visualizza le pagine figlie ad essa associate. Se è una pagina figlia, allora visualizza tutte le altre pagine figlie della sua pagina genitore.

Infine, se questa è solo una pagina senza pagina genitore o figlia, il codice semplicemente non farà nulla. Nell'ultima riga del codice, abbiamo aggiunto uno shortcode, in modo da poter visualizzare facilmente le pagine figlie senza modificare i modelli di pagina.

Per visualizzare le pagine figlie, aggiungi semplicemente il seguente shortcode in una pagina o in un widget di testo nella barra laterale:

[wpb_childpages]

Non dimenticare di salvare le modifiche e di visualizzarle in anteprima in una scheda del browser. Ecco come appare sul nostro sito di prova.

Elenco di link semplice

Ora puoi stilizzare questo elenco di pagine usando un po' di CSS personalizzato.

Ecco del codice CSS di esempio che puoi usare come punto di partenza:

ul.wpb_page_list {
    list-style: none;
    list-style-type: none;
    background-color: #eee;
    border: 1px solid #CCC;
    padding: 20px;
}

Metodo 3. Visualizza dinamicamente le pagine secondarie senza alcun shortcode

L'uso degli shortcode è conveniente, ma il problema è che dovrai aggiungere shortcode in tutte le pagine che hanno pagine genitore o figlie.

Potresti finire per avere shortcode in molte pagine, e a volte potresti anche dimenticarti di aggiungerlo.

Un approccio migliore sarebbe quello di modificare il file del modello di pagina nel tuo tema, in modo che possa visualizzare automaticamente le pagine figlie.

Per farlo, devi modificare il modello principale page.php, o creare un modello di pagina personalizzato nel tuo tema.

Puoi modificare il tuo tema principale, ma tali modifiche scompariranno se cambi o aggiorni il tuo tema. Ecco perché sarebbe meglio se creassi un tema figlio e poi apportassi le tue modifiche nel tema figlio.

Nel tuo file del modello di pagina, devi aggiungere questa riga di codice dove vuoi visualizzare le pagine figlio.

<?php wpb_list_child_pages(); ?>

Tutto qui. Il tuo tema ora rileverà automaticamente le pagine figlio e le visualizzerà in un semplice elenco.

Puoi personalizzare gli stili con CSS e formattazione.

Ecco un esempio di come il sito web di OptinMonster mostra la pagina padre e le sottopagine:

Esempio di sottopagine OptinMonster

Speriamo che questo articolo ti abbia aiutato a elencare le pagine figlie di una pagina genitore in WordPress. Potresti anche voler consultare la nostra guida su le pagine più importanti da creare su un nuovo sito web WordPress, e il nostro confronto dei migliori page builder drag & drop per WordPress per creare layout personalizzati senza codice.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.

Dichiarazione: Il nostro contenuto è supportato dai lettori. Ciò significa che se fai clic su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come è finanziato WPBeginner, perché è importante e come puoi supportarci. Ecco il nostro processo editoriale.

Il Toolkit WordPress Definitivo

Ottieni l'accesso GRATUITO al nostro toolkit - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Interazioni del lettore

80 CommentsLeave a Reply

  1. Ciao, questo funziona, tranne per il fatto che viene visualizzato anche il genitore, come faccio a mostrare solo le pagine figlie, grazie

    • Il metodo più semplice per quello che sembra tu voglia sarebbe quello di non avere contenuti sulla pagina genitore e avere i tuoi contenuti solo nelle pagine figlie.

      Amministratore

  2. Ciao Wpbeginner,

    Per favore, come posso ordinare tutte le pagine figlie alfabeticamente sulla pagina genitore. Ho seguito tutti i passaggi ma le sottopagine vengono visualizzate in modo casuale sulla pagina genitore.

    In attesa di risposta. ….Grazie

    • Cambieresti le due istanze di menu_order nel nostro codice in: post_title

      Amministratore

  3. Posso assegnare una classe CSS a questa funzione? In modo che quando apporto modifiche CSS agli elementi ul, non influenzi altri ul sul sito.
    O qualsiasi altra soluzione semplice per questo?

  4. Ciao, Team WPB,

    Grazie mille per questo snippet e per il tutorial.

    Mi ha fatto risparmiare un sacco di tempo e mi ha aiutato.

    Con cordiali saluti,
    Keshav Murthy

  5. Ho installato il plugin Code Snippets in WordPress 4.9.8

    Ho copiato il codice da https://www.wpbeginner.com/wp-tutorials/how-to-display-a-list-of-child-pages-for-a-parent-page-in-wordpress/#respond e l'ho aggiunto a un nuovo snippet in Code Snippets.

    Ho creato una pagina e poi una pagina a cui è stato assegnato come pagina genitore la prima pagina.

    La relazione figlio-genitore è mostrata nell'elenco delle pagine nel menu a discesa degli attributi.

    Quando apro la pagina genitore, non vedo nulla che mostri una pagina figlia.

    Ho quindi provato a usare la pagina functions.php.

    Ho aggiunto il codice copiato da https://www.wpbeginner.com/wp-tutorials/how-to-display-a-list-of-child-pages-for-a-parent-page-in-wordpress/#respond alla fine del codice nella pagina functions.

    Quando apro la pagina genitore, non viene visualizzata. Viene visualizzato un messaggio di errore che indica codice inatteso.

    Ho ripristinato la pagina functions.php al suo stato originale.

    Quali modifiche devo apportare a ciò che ho cercato di fare.

    • Ciao Gary,

      Assicurati di pubblicare la pagina figlia prima di testare il codice. Copia attentamente il codice di nuovo per assicurarti di non copiare numeri o caratteri inattesi.

      Amministratore

  6. Ho una domanda. Ho aggiunto sottopagine a una pagina principale, ma quando apro il sito sul cellulare e clicco sulla pagina principale, si apre una pagina principale vuota. Per visualizzare le sottopagine a discesa, è necessario tenere premuto il pulsante della pagina principale. Come posso risolvere questo problema? Non voglio che si apra quella pagina vuota. Voglio che, se si tocca la pagina principale, si apra il menu a discesa.
    Per favore, suggerisci come fare.

  7. Per le pagine di terzo livello (nipote), voglio mostrare lo stesso menu che si vede nelle pagine figlie (tutti i link figli del genitore). Con questo snippet, quando mi trovo su una pagina nipote, vedo solo le altre pagine nipote nel menu. Come dovrebbe essere modificato questo codice per mostrare tutti i link figli anche quando ci si trova su pagine nipote?

  8. come ottenere gli ID delle pagine figlie non degli ID dei nipoti…………….per favore aiutami sono un principiante

  9. Sono relativamente nuovo al blogging e ho recentemente cambiato al tema Kale Wordpress. Ho cercato di creare pagine con attributi di pagina (sotto la pagina genitore Ricette) in modo da poter avere categorie separate per antipasti, dessert, ecc. Tutto sembra andare a buon fine nella parte amministrativa, ma poi sul sito stesso non ci sono attributi di pagina/menu a discesa dalla categoria Ricette. Cosa sto sbagliando? È tutto impostato su pubblico, quindi non sono sicuro di quale sia il problema.

  10. Grazie per questo codice. Ma non voglio che venga mostrato sulla homepage (pagina statica), solo sulle pagine genitore. Come si può fare?

    Grazie.

  11. Sto usando il tema Generatepress (ho creato un tema figlio da esso per la personalizzazione) e non riesco a farlo funzionare. Lo shortcode viene visualizzato nella pagina di output, sembra che non venga nemmeno riconosciuto come shortcode. Uso i widget di Elementor e né i widget di testo né quelli di shortcode funzionano.

    Hai qualche idea su come farlo funzionare quando si usano i widget di Elementor?

  12. un ottimo post, è esattamente quello che sto cercando da molte ore! e funziona a meraviglia, basta aggiungere il codice nel file function.php del tema e poi aggiungere lo shortcode nella pagina dove voglio che appaiano le sottopagine, e voilà!!!
    meraviglioso, grazie mille per la tua generosità!!

  13. Come con molti degli snippet che troviamo, bisogna leggere tutti i commenti per farlo funzionare. Cosa c'è di sbagliato nel testare quello che si scrive?

  14. Puoi creare un menu a tendina per le pagine genitore/figlio su wordpress.com, o deve essere la versione .org?

  15. L'utilizzo di questo codice finisce per visualizzare la pagina padre insieme alle pagine figlie, il che è ridondante. Per quanto ne so, quello che ci serve davvero è visualizzare solo le pagine figlie, non la pagina padre. Ci sono modifiche suggerite che possono fare questo?

  16. Durante l'aggiornamento dei plugin, per qualche strana ragione ricevo sempre un errore:

    Fatal error: Cannot redeclare wpb_list_child_pages() (previously declared in …/wp-content/themes/pagelines/functions.php:25) in …/wp-content/themes/pagelines/functions.php on line 34

  17. Ciao, ottimo articolo,
    Puoi aiutarmi a creare un menu a tendina di pagine figlie in una pagina genitore. Ho bisogno di questa funzionalità per uno dei miei progetti WordPress e sono un principiante assoluto di WordPress.

  18. Sono l'unico a non riuscire a farlo funzionare?

    Ho la seguente struttura

    Informazioni
    — Pagina 1
    — Pagina 2
    — Pagina 3

    Quando sono sulla pagina "Chi siamo" o su una sottopagina (1, 2 o 3), vorrei avere un elenco con la mia pagina principale (Chi siamo) e tutte le sottopagine (1, 2, 3) – Qualcuno è riuscito a farlo funzionare?

    Thanks! :)

    • OMG scusa, questo è fastidioso. Ignora i miei altri post. Non mi ero reso conto che non si potesse incollare codice nei commenti.

      NON sono riuscito a farlo funzionare con wpb_list_child_pages();

      SONO riuscito a farlo funzionare con echo do_shortcode( '[wpb_childpages]')

      E per ottenere il titolo della pagina genitore, ho inserito questo sopra l'elenco delle pagine figlie:
      $current = $post->ID;

      $parent = $post->post_parent;

      $grandparent_get = get_post($parent);

      $grandparent = $grandparent_get->post_parent;

      PHP if ($root_parent = get_the_title($grandparent) !== $root_parent = get_the_title($current)) {echo get_the_title($grandparent); }else {echo get_the_title($parent);

  19. Sto usando questo codice e funziona benissimo. È possibile visualizzare anche le categorie nei menu insieme alle pagine?

  20. Ciao,

    Voglio fare quanto segue

    La pagina genitore deve essere in vendita o in affitto
    Poi voglio che la figlia, ad esempio una provincia (Gauteng), si colleghi alla genitore in vendita e alla genitore in affitto.
    Come posso fare?

    Michelle

  21. Come posso creare uno shortcode con parametri, ad esempio, [wpb_childpages id="1"], dove id="1" è l'ID della pagina principale?

  22. Ciao,

    È possibile limitare i link a un numero specifico, ad esempio un massimo di 12 pagine figlie?

    Grazie

  23. Grazie,

    Potresti spiegare, per favore, come posso organizzare le pagine figlie in un menu a discesa accessibile dalla pagina genitore? (Non voglio che i visitatori vedano tutte le pagine figlie sotto forma di blogroll.)

    Cioè, sulla pagina genitore voglio creare un menu a discesa (listbox) a cui verranno aggiunte le pagine figlie in un ordine prestabilito (diciamo in ordine alfabetico). Dopo aver letto l'introduzione, un visitatore potrà procedere scegliendo qualsiasi pagina dall'elenco a suo piacimento (le pagine figlie non hanno connessioni logiche, quindi in ogni caso cercherà la pagina esatta).

    Il mio 'sogno' è realizzabile?

    Grazie ancora.

  24. Ciao Staff di WPBeginner,

    Ho usato il codice che avete fornito con l'"opzione shortcode" e ha funzionato (link alle pagine figlie). Tuttavia, volevo usare l'opzione permanente e quella non ha funzionato.

    Quando ho aggiunto questa riga di codice [ ] la pagina genitore restituisce un errore 500 e nessuna pagina figlia viene visualizzata affatto.

    Cosa sto facendo di sbagliato?

    A proposito, se volessi visualizzare un estratto con la sua immagine corrispondente, come dovrei fare? Grazie!

    • Sono riuscito a risolvere.

      Ho aggiunto lo snippet di codice, quindi ho aggiunto questo shortcode [wpb_childpages] alla pagina genitore dove volevo visualizzare le pagine figlie. Fantastico!

      Ora, per visualizzare estratti e un'immagine, dovrei usare le stesse query, proprio come i post sotto una categoria.

      Thanks in advance :)

      • Ehi, mi stavo chiedendo cosa intendessi con 'query'? Come hai fatto esattamente a visualizzare estratti e immagini nella pagina genitore?

        Grazie!

  25. Qualcuno potrebbe confermare se la pagina di esempio utilizzata in questo tutorial http://optinmonster.com/how-it-works/ utilizza questa funzionalità o meno? A me sembra che stiano usando schede, invece di pagine figlie.

    Se ho capito bene, qualcuno potrebbe indirizzarmi a una risorsa per ottenere quella funzionalità, dato che sto cercando disperatamente una soluzione fluida come quella presente in quella pagina?

    Molte grazie,

    Pradeep

  26. Per l'opzione non-shortcode, potresti voler informare gli utenti che devono modificare
    return $string; in
    echo $string; oppure
    nel loro template di pagina eseguire la funzione
    echo page_list_child_pages();

    Grazie a Erik per averlo segnalato sopra

  27. Ciao, riesco a farlo funzionare quando visito il mio dominio con una sottodirectory (ad es. example.com/home) ma quando visualizzo il sito senza questa (example.com) l'elenco delle sottopagine non viene visualizzato. Qualcuno può indicarmi dove sto sbagliando?

    Grazie in anticipo – molto nuovo a Wordpress.

  28. Come si fa a far visualizzare la pagina genitore stessa in cima all'elenco insieme all'elenco delle pagine figlie e nipoti? Nelle pagine figlie non viene elencata la pagina genitore.

  29. Esiste ora un plugin che possa fare lo stesso?

    e inoltre possiamo decidere dove andrà la casella con le sottopagine in qualsiasi area della pagina, non solo in cima alla pagina? Usando un plugin

  30. Sì, può essere utilizzato per tipi di post personalizzati. Come questo:


    function wpb_list_child_pages() {

    global $post;

    if ( 'movie' == get_post_type() && $post->post_parent )

    $childpages = wp_list_pages( 'post_type=movie&sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
    else
    $childpages = wp_list_pages( 'post_type=movie&sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );

    if ( $childpages ) {

    $string = '' . $childpages . '';

    return $string;

    }

    add_shortcode('wpb_childpages', 'wpb_list_child_pages');

  31. Questo è fantastico! C'è un modo per fare lo stesso per i tipi di post personalizzati che hanno post figli?

  32. C'è un modo per modificarlo in modo da stampare i post di tipo post personalizzato figlio in una pagina di post di tipo post personalizzato? Grazie, è molto utile!

  33. È fantastico per me! Comunque vorrei sapere come posso visualizzare titolo e miniatura della pagina figlia nella pagina genitore.

    • Ciao, ho la stessa domanda. Mi piace molto come è stilizzata la lista nella pagina Beginners Blueprint ma non ho idea da dove iniziare. Qualcuno può raccomandare un articolo da leggere o dare qualche consiglio, grazie.

  34. C'è un errore nelle pagine che non hanno pagine figlie, quindi ho modificato leggermente
    if( count($childpages) != 0 ) {
    $string = ” . $childpages . ”;
    }

    invece di
    if( $childpages ){
    $string = ” . $childpages . ”;
    }

  35. Ho aggiunto il codice a functions.php e quando inserisco lo shortcode [wpb_childpages] nel mio testo funziona. Ma quando provo ad aggiungerlo a uno dei miei template non mostra nulla. Qualcuno sa cosa sto sbagliando?

  36. Questo è geniale, grazie.

    C'è un modo per adattarlo in modo che il Genitore visualizzi il Nipote, e non il Figlio?

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tieni presente che tutti i commenti sono moderati secondo la nostra politica sui commenti, e il tuo indirizzo email NON verrà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avviamo una conversazione personale e significativa.