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.
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.
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
- Metodo 2. Elenca le pagine secondarie per una pagina padre utilizzando il codice
- Metodo 3. Visualizza dinamicamente le pagine secondarie senza alcun shortcode
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.
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:
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.
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'.
Quindi, devi scegliere 'Snippet PHP' come tipo di codice dall'elenco di opzioni che appaiono sullo schermo.
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'.
Dopodiché, basta spostare l'interruttore da 'Inattivo' ad 'Attivo' e fare clic sul pulsante 'Salva snippet' in cima alla pagina.
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.
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:
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.
Philip
Ciao, questo funziona, tranne per il fatto che viene visualizzato anche il genitore, come faccio a mostrare solo le pagine figlie, grazie
Supporto WPBeginner
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
Sachit Shori
Grazie mille. Mi hai salvato.
Supporto WPBeginner
You’re welcome
Amministratore
Emmanuel Husseni
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
Supporto WPBeginner
Cambieresti le due istanze di menu_order nel nostro codice in: post_title
Amministratore
Iyke O.
Come posso rendere l'elenco comprimibile nella barra laterale?
Supporto WPBeginner
Per renderlo comprimibile potresti usare un plugin per fisarmoniche come uno di quelli del nostro articolo qui: https://014.leahstevensyj.workers.dev/showcase/best-wordpress-accordion-plugins/
Amministratore
Stacie
Facile da seguire e ha fatto il suo lavoro. Grazie mille per aver condiviso!
Supporto WPBeginner
You’re welcome, glad our content could be helpful
Amministratore
Aaro
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?
Supporto WPBeginner
You could add your CSS class in the ul section of the function
Amministratore
Keshav Murthy
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
Supporto WPBeginner
Glad our tutorial could help
Amministratore
Gary Granai
Ho installato il plugin Code Snippets in WordPress 4.9.8
Ho copiato il codice da https://014.leahstevensyj.workers.dev/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://014.leahstevensyj.workers.dev/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.
Supporto WPBeginner
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
Itika
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.