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.
Denise
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?
vicky
come ottenere gli ID delle pagine figlie non degli ID dei nipoti…………….per favore aiutami sono un principiante
Meredith L
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.
Daves
Grazie per questo codice. Ma non voglio che venga mostrato sulla homepage (pagina statica), solo sulle pagine genitore. Come si può fare?
Grazie.
Boris Budeck
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?
Supporto WPBeginner
Ciao Boris,
Prova ad aggiungere questo codice al file functions.php del tuo tema o a un plugin specifico per il sito.
add_filter('widget_text', 'do_shortcode');1-click Use in WordPress
Amministratore
Frederic
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à!!
Supporto WPBeginner
Ciao Frederic,
Glad you found it useful
You may also want to subscribe to our YouTube Channel for more WordPress video tutorials.
Amministratore
Mariano
Ciao!
Grazie per il codice. Come posso visualizzare l'immagine in evidenza di ogni pagina figlia?
Ron
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?
Alicia
Puoi creare un menu a tendina per le pagine genitore/figlio su wordpress.com, o deve essere la versione .org?
Razvan
E se volessi visualizzare post figli, non pagine figlie?
Rudy
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?
Michael Feske
Great, but it works not
add_shortcode è corretto o deve essere add_filter https://www.wpbeginner.com/wp-tutorials/how-to-use-shortcodes-in-your-wordpress-sidebar-widgets/ ?
con add_shortcode è errore Fatal error: Uncaught Error: Call to undefined function add_shortcode()
con add_filter non c'è errore ma non funziona
Milos
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
Jeffrey Fry
Come posso visualizzare anche la data della sottopagina?
ethann
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.
Alex
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!
Kendra
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);
Jean Bishop
Sto usando questo codice e funziona benissimo. È possibile visualizzare anche le categorie nei menu insieme alle pagine?
Michelle
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
Zakhar
Come posso creare uno shortcode con parametri, ad esempio, [wpb_childpages id="1"], dove id="1" è l'ID della pagina principale?
Strand
Ciao,
È possibile limitare i link a un numero specifico, ad esempio un massimo di 12 pagine figlie?
Grazie
Aander
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.
Quantum-mecha
Come aggiungo la paginazione per la Pagina Figlia?
Grazie!
Astrid
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!
Astrid
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
Jade
Ehi, mi stavo chiedendo cosa intendessi con 'query'? Come hai fatto esattamente a visualizzare estratti e immagini nella pagina genitore?
Grazie!
Mehar
Molto utile. Grazie.
Pradeep
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
Andrew Roberts
Per l'opzione non-shortcode, potresti voler informare gli utenti che devono modificare
return $string;inecho $string;oppurenel loro template di pagina eseguire la funzione
echo page_list_child_pages();Grazie a Erik per averlo segnalato sopra
Meredith Adams
Grazie!
Gaby
Grazie! Mi stavo chiedendo perché il codice non funzionasse...
Howard
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.
Emily Jennewein
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.
Michael
come posso personalizzarlo per visualizzare solo la pagina figlia di una pagina specifica?
Yester
Come si aggiunge una classe attiva a quella corrente?
Jenny
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
Staff di WPBeginner
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');
Daniela
Questo è fantastico! C'è un modo per fare lo stesso per i tipi di post personalizzati che hanno post figli?
Caroline
Anch'io mi chiedo!
Se qualcuno lo sa, per favore aiuti!
dpc
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!
Sokeara
È fantastico per me! Comunque vorrei sapere come posso visualizzare titolo e miniatura della pagina figlia nella pagina genitore.
Ashley Bell
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.
Razvan Zamfir
Ciao!
Bel frammento, ma come faccio a elencare solo le pagine nipote?
Grazie!
amitabha197
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 . ”;
}
Staff di WPBeginner
Per eseguire uno shortcode nei template di WordPress devi aggiungerlo così:
Matt Rock
Non sono riuscito a far funzionare il codice del template “wpb_list_child_pages();”, ma echo shortcode ha fatto il trucco. Saluti!
Erik
Basta cambiare “return $string” in “echo $string” (questo stamperà le pagine).
fariha
grazie, ha funzionato
Coen Siebenheller
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?
Elena Rapisardi
Ottima spiegazione!!
C'è un modo per visualizzare sempre le pagine padre?
Quin
Questo è geniale, grazie.
C'è un modo per adattarlo in modo che il Genitore visualizzi il Nipote, e non il Figlio?
Dejan
Ottima funzione, grazie!
Richelly Italo
La grande idea, grazie amico.
Steph
Puoi dirci come fermare la lista al primo livello? Vorrei mostrare tutte le sottopagine di quel genitore, ma non i figli delle sottopagine. Grazie.
Stefan
Basta aggiungere &depth=1
sort_column=menu_order&title_li=&child_of=’ . $post->post_parent . ‘&echo=0&depth=1
Martin Capodici
Ottimo. Adoro questa idea di un plugin per il sito e vedere il codice che stai aggiungendo (così sai che è pulito e non fa cose brutte) piuttosto che affidarsi a qualche plugin che potrebbe installare qualsiasi cosa.
Per qualcosa di semplice come elencare le pagine figlie, concordo sul fatto che dovrebbe far parte di un plugin più grande piuttosto che di un singolo plugin, altrimenti finisci con così tanti plugin che è difficile tenerne traccia.
Rishi Gangoly
This is great. I had a page on my website called “Services” and was manually linking the sub-pages, but not any more. Awesome. Thanks for this tip. Worked like a charm and did exactly what I was doing manually.
Bojan
Questo è fantastico! Inserirlo in un plugin è un'ottima funzionalità e un'ottima opportunità per estendere le funzionalità aggiungendo:
– immagine in evidenza della pagina figlia (come miniatura)
– Titolo della pagina figlia
– il resto dei metadati (autore, data, numero di commenti)
– stile in colonne forse
e così via
In questo modo, avremmo un plugin Portfolio quasi completo – portfolio realizzati con Pagine piuttosto che solo con tipi di post personalizzati.
Grazie..
Ivica
Il miglior plugin per visualizzare le pagine figlie in una barra laterale per coloro che desiderano una navigazione tra le pagine figlie ancora più veloce e "pulita":
http://wordpress.org/plugins/child-page-navigation/
yousef mayeli
ciao
grazie è stato molto utile. ma se potessi mostrarlo in video sarebbe molto più utilizzabile. come farebbe tyler moor
grazie
yousef
Nancy
Fantastico! Ho molti link aggiunti manualmente a pagine figlie, e questo renderà la manutenzione del nostro sito MOLTO più facile. Ho appena testato nel mio ambiente di sviluppo e vorrei modificare leggermente la funzione, in modo che in una pagina figlia, quando viene incluso lo shortcode, vengano elencati tutti i figli dello stesso genitore TRANNE la pagina attualmente visualizzata. Sto ancora imparando il PHP, quindi mentre cercherò di risolvere questo problema da solo, sarei lieto di ricevere qualsiasi aiuto per apportare questa modifica al codice.