Tutoriale WordPress de încredere, atunci când aveți cea mai mare nevoie.
Ghidul începătorului pentru WordPress
Cupa WPB
25 de milioane+
Site-uri web care folosesc plugin-urile noastre
16+
Ani de experiență WordPress
3000+
Tutoriale WordPress de la experți

Cum să afișați o listă de pagini copil pentru o pagină părinte în WordPress

Recent, unul dintre cititorii noștri ne-a întrebat cum să afișăm paginile copil ale unei pagini WordPress? Este o întrebare pe care o primim destul de des la WPBeginner și subliniază o nevoie comună de a îmbunătăți navigarea pe site și experiența utilizatorului. 

Dacă vă organizați site-ul WordPress cu pagini părinte și pagini copil, atunci s-ar putea să doriți să afișați paginile copil sau subpaginile pe pagina părinte principală. Acest lucru ajută utilizatorii să vadă cu ușurință toate informațiile disponibile într-o anumită secțiune și să navigheze rapid la subiecte secundare relevante.

De asemenea, s-ar putea să dorești să afișezi linkul paginii părinte principale pe fiecare sub-pagină pentru o navigare ușoară, creând un efect similar cu firimiturile de pâine (breadcrumbs). Această navigare simplificată împiedică utilizatorii să se piardă în profunzimile site-ului tău și le îmbunătățește experiența generală de navigare.

În acest articol, îți vom arăta cum să afișezi cu ușurință o listă de pagini copil pentru o pagină părinte în WordPress.

Afișarea unei liste de pagini copil pentru o pagină părinte în WordPress

Când ai nevoie să afișezi o listă de pagini copil?

WordPress vine cu două tipuri de postări implicite numite postări și pagini. Postările sunt conținut de blog și, de obicei, sunt organizate cu categorii și etichete.

Paginile sunt conținut unic sau independent, care este peren, cum ar fi o pagină „Despre noi” sau o pagină „Contactați-ne”, de exemplu.

În WordPress, paginile pot fi ierarhice, ceea ce înseamnă că le puteți organiza cu pagini părinte și pagini copil. De exemplu, ați putea dori să creați o pagină Produs cu pagini copil pentru Caracteristici, Prețuri și Suport.

Pentru a crea o pagină copil, urmați ghidul nostru despre cum să creați o pagină copil în WordPress.

După ce ați creat paginile părinte și copil, este posibil să doriți să listați paginile copil pe pagina părinte principală.

Acum, o modalitate ușoară de a face acest lucru este prin editarea manuală a paginii părinte și adăugarea unei liste de linkuri individual.

Adăugați manual legături către paginile copil

Cu toate acestea, va trebui să editați manual pagina părinte de fiecare dată când adăugați sau ștergeți o pagină copil.

Nu ar fi mai frumos dacă ai putea pur și simplu să creezi o pagină copil, iar aceasta să apară automat ca un link pe pagina părinte?

Acestea fiind spuse, să aruncăm o privire la alte modalități dinamice de a afișa rapid o listă de pagini copil pe pagina părinte în WordPress. Vom prezenta trei metode, astfel încât să o poți alege pe cea mai potrivită pentru tine:

Metoda 1. Afișarea paginilor copil pe pagina părinte folosind un plugin

Această metodă este cea mai ușoară modalitate de a afișa paginile copil pe o pagină părinte și este recomandată tuturor utilizatorilor.

Mai întâi, trebuie să instalați și să activați pluginul Page-list. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, trebuie să editezi pagina părinte și să adaugi pur și simplu următorul shortcode acolo unde dorești să afișezi lista paginilor copil.

[subpages]

Acum puteți salva pagina și o puteți previzualiza într-o nouă filă de browser. Veți observa că afișează o listă simplă cu marcatori a tuturor paginilor copil.

Listă simplă de linkuri către paginile copil

Dacă doriți, puteți adăuga CSS personalizat pentru a schimba aspectul listei.

Iată câteva exemple de CSS pe care le puteți folosi ca punct de plecare.

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

După aplicarea CSS-ului personalizat, poți previzualiza pagina părinte.

Așa arăta pe site-ul nostru de test WordPress:

Listă de pagini copil cu CSS

Pluginul oferă o serie de parametri de scurtcod care vă permit să setați profunzimea, să excludeți pagini, numărul de elemente și multe altele.

Pentru detalii, vă rugăm să consultați pagina pluginului pentru documentație detaliată.

Metoda 2. Listarea paginilor copil pentru o pagină părinte folosind cod

Această metodă este puțin avansată și necesită adăugarea de cod pe site-ul dvs. WordPress. Dacă nu ați mai făcut acest lucru, atunci vă rugăm să consultați ghidul nostru despre cum să copiați și să lipiți cod în WordPress.

Pentru a lista paginile copil sub o pagină părinte, trebuie să adăugați următorul cod într-un plugin de fragmente de cod sau în fișierul functions.php al temei dvs.:

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');

La WPBeginner, recomandăm întotdeauna adăugarea de cod în WordPress cu pluginul WPCode.

WPCode vă permite să adăugați cu ușurință cod personalizat fără a edita fișierele temei, astfel încât să nu fie nevoie să vă faceți griji cu privire la deteriorarea site-ului dvs.

WPCode

Mai întâi, trebuie să instalați și să activați pluginul gratuit WPCode. Pentru instrucțiuni pas cu pas, consultați acest ghid despre cum să instalați un plugin WordPress.

După activarea pluginului, navighează la Fragmente de cod » Adaugă fragment din tabloul de bord WordPress.

De acolo, plasați cursorul mouse-ului peste opțiunea „Adăugați codul dvs. personalizat (Snippet nou)” și faceți clic pe butonul „Adăugați snippet personalizat”.

Adăugați un nou fragment de cod personalizat în WPCode

Apoi, trebuie să alegeți „PHP Snippet” ca tip de cod din lista de opțiuni care apar pe ecran.

Selectați Fragment PHP ca tip de cod

Apoi, adaugă un titlu pentru fragmentul tău, care poate fi orice pentru a te ajuta să-ți amintești la ce folosește codul.

Acum, pur și simplu lipiți codul de mai sus în caseta „Previzualizare cod”.

Lipiți codul în caseta de previzualizare a codului

Apoi, pur și simplu comutați comutatorul de la „Inactiv” la „Activ” și faceți clic pe butonul „Salvare fragment” din partea de sus a paginii.

Activați și salvați fragmentul de cod personalizat

Acest cod verifică mai întâi dacă o pagină are un părinte sau dacă pagina în sine este un părinte.

Dacă este o pagină părinte, atunci afișează paginile copil asociate cu ea. Dacă este o pagină copil, atunci afișează toate celelalte pagini copil ale paginii sale părinte.

În cele din urmă, dacă aceasta este doar o pagină fără pagină copil sau părinte, atunci codul nu va face nimic. În ultima linie a codului, am adăugat un shortcode, astfel încât să puteți afișa cu ușurință paginile copil fără a modifica șabloanele paginilor.

Pentru a afișa paginile copil, pur și simplu adăugați următorul shortcode într-o pagină sau widget de text din bara laterală:

[wpb_childpages]

Nu uitați să salvați modificările și să le previzualizați într-o filă de browser. Așa apare pe site-ul nostru de test.

Listă simplă de linkuri

Poți acum stiliza această listă de pagini folosind niște CSS personalizat.

Iată un exemplu de cod CSS pe care îl puteți folosi ca punct de plecare:

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

Metoda 3. Afișarea dinamică a paginilor copil fără niciun shortcode

Utilizarea shortcodurilor este convenabilă, dar problema cu ele este că va trebui să adăugați shortcoduri în toate paginile care au pagini părinte sau copil.

S-ar putea să ajungeți să aveți shortcode-uri în multe pagini și, uneori, s-ar putea să uitați chiar să le adăugați.

O abordare mai bună ar fi să editați fișierul șablon al paginii din tema dvs., astfel încât să poată afișa automat paginile copil.

Pentru a face acest lucru, trebuie să editezi șablonul principal page.php sau să creezi un șablon de pagină personalizat în tema ta.

Poți edita tema principală, dar acele modificări vor dispărea dacă schimbi sau actualizezi tema. De aceea ar fi mai bine dacă ai crea o temă copil și apoi să faci modificările în tema copil.

În fișierul șablon al paginii, trebuie să adăugați această linie de cod acolo unde doriți să afișați paginile copil.

<?php wpb_list_child_pages(); ?>

Atât. Tema ta va detecta acum automat paginile copil și le va afișa într-o listă simplă.

Puteți personaliza stilurile cu CSS și formatare.

Iată un exemplu despre cum site-ul OptinMonster afișează pagina părinte și subpaginile:

Exemplu de subpagini OptinMonster

Sperăm că acest articol v-a ajutat să listați paginile copil pentru o pagină părinte în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cele mai importante pagini de creat pe un site WordPress nou și comparația noastră despre cei mai buni constructori de pagini WordPress drag & drop pentru a crea layout-uri personalizate fără cod.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.

Dezvăluire: Conținutul nostru este susținut de cititori. Acest lucru înseamnă că dacă faceți clic pe unele dintre linkurile noastre, este posibil să câștigăm un comision. Vedeți cum este finanțat WPBeginner, de ce contează și cum ne puteți susține. Iată procesul nostru editorial.

Cel mai bun instrumentar WordPress

Obține acces GRATUIT la instrumentarul nostru - o colecție de produse și resurse legate de WordPress pe care fiecare profesionist ar trebui să le aibă!

Interacțiuni cu cititorii

80 CommentsLeave a Reply

  1. Salut, acest lucru funcționează, cu excepția faptului că se afișează și părintele, cum fac să afișez doar paginile copil, mulțumesc

    • Cea mai simplă metodă pentru ceea ce pare că doriți ar fi să nu aveți conținut pe pagina părinte și să aveți conținutul doar în paginile copil.

      Admin

  2. Salut Wpbeginner,

    Te rog, cum pot sorta toate paginile copil în ordine alfabetică pe pagina părinte. Am urmat toți pașii, dar paginile subordonate sunt afișate aleatoriu pe pagina părinte.

    Aștept răspuns. ….Mulțumesc

  3. Pot să atribui o clasă CSS acestei funcții? Astfel încât, atunci când fac modificări CSS elementelor ul, acestea să nu afecteze alte elemente ul de pe site.
    Sau vreo altă soluție simplă pentru asta?

  4. Salut, WPB Team,

    Vă mulțumesc mult pentru acest fragment și pentru tutorial.

    Mi-a economisit o grămadă de timp și m-a ajutat și pe mine.

    Cu stimă,
    Keshav Murthy

  5. Am instalat pluginul code snippets în wordpress 4.9.8

    Am copiat codul de pe https://www.wpbeginner.com/wp-tutorials/how-to-display-a-list-of-child-pages-for-a-parent-page-in-wordpress/#respond și l-am adăugat într-un nou fragment în fragmente de cod.

    Am creat o pagină și apoi o pagină căreia i-a fost atribuită prima pagină ca pagină părinte.

    Relația copil-părinte este afișată în lista de pagini din meniul derulant atribute.

    Când deschid pagina părinte, nu văd nimic care să arate o pagină copil.

    Apoi am încercat să folosesc pagina functions.php.

    Am adăugat codul copiat de pe https://www.wpbeginner.com/wp-tutorials/how-to-display-a-list-of-child-pages-for-a-parent-page-in-wordpress/#respond la sfârșitul codului din pagina functions.

    Când deschid pagina părinte, aceasta nu se afișează. Ceea ce se afișează este un mesaj de eroare care spune că există cod neașteptat.

    Am restaurat pagina functions.php la starea ei originală.

    Ce modificări trebuie să fac la ceea ce am încercat să fac.

    • Salut Gary,

      Asigurați-vă că publicați pagina copil înainte de a testa codul. De asemenea, copiați cu atenție codul din nou pentru a vă asigura că nu copiați numere sau caractere neașteptate.

      Admin

  6. Am o întrebare. Am adăugat subpagini în pagina părinte, dar când deschid site-ul pe mobil și dau clic pe pagina părinte, se deschide pagina părinte goală. Pentru a vedea subpaginile derulante, trebuie să ții apăsat butonul paginii părinte. Cum pot remedia acest lucru? Nu vreau ca pagina goală să se deschidă. Vreau ca, dacă ating pagina părinte, să se deschidă meniul derulant.
    Vă rog să sugerați cum să fac asta.

  7. Pentru paginile de nivel trei (nepoți), vreau să afișez același meniu ca cel de pe paginile copil (toate linkurile copil ale părinților). Cu acest fragment, când sunt pe o pagină de nepot, văd doar celelalte pagini de nepot în meniu. Cum ar trebui modificat acest cod pentru a afișa toate linkurile copil chiar și atunci când sunt pe pagini de nepot?

  8. cum să obțin id-urile paginilor copil, nu ale nepoților... vă rog ajutați-mă, sunt un începător

  9. Sunt relativ nou în blogging și recent am trecut la tema Kale Wordpress. Am încercat să fac pagini de atribute de pagină (sub pagina părinte Rețete) pentru a putea avea categorii separate pentru aperitive, deserturi etc. Totul pare să meargă bine în partea de administrare, dar apoi pe site-ul în sine nu există atribute de pagină/meniuri derulante din categoria Rețete. Ce fac greșit? Totul este setat la public, așa că nu sunt sigur care este problema.

  10. Vă mulțumesc pentru acest cod. Dar nu vreau ca acesta să fie afișat pe pagina principală (statică), ci doar pe paginile părinte. Vă rog, cum se poate face?

    Mulțumesc.

  11. Folosesc tema Generatepress (am creat o temă copil din ea pentru personalizare) și nu reușesc să fac acest lucru să funcționeze. Shortcode-ul este afișat în pagina de ieșire, se pare că nici măcar nu este recunoscut ca fiind un shortcode. Folosesc widget-uri Elementor și nici widget-urile de text, nici cele de shortcode nu funcționează.

    Aveți vreo idee cum să fac să funcționeze când folosesc widgeturi Elementor?

  12. un post grozav, este exact ceea ce caut de ore întregi! și funcționează perfect, doar adăugând codul în function.php al temei, apoi adăugând shortcode-ul în pagina unde vreau să apară subpaginile, și gata!!!
    minunat, mulțumesc mult pentru generozitatea ta!!

  13. Ca și în cazul multor fragmente pe care le găsim, trebuie să parcurgi toate comentariile pentru a funcționa. Ce este greșit cu testarea a ceea ce scrii?

  14. Poți face un meniu derulant pentru paginile părinte/copil pe wordpress.com, sau trebuie să fie versiunea .org?

  15. Folosind acest cod se ajunge la afișarea paginii părinte împreună cu paginile copil, ceea ce este redundant. Din câte înțeleg, ceea ce avem nevoie cu adevărat este să afișăm doar paginile copil, nu pagina părinte. Aveți vreo modificare sugerată care poate face acest lucru?

  16. La actualizarea pluginurilor, dintr-un motiv ciudat, primesc mereu o eroare:

    Eroare fatală: Nu se poate declara din nou wpb_list_child_pages() (declarat anterior în …/wp-content/themes/pagelines/functions.php:25) în …/wp-content/themes/pagelines/functions.php la linia 34

  17. Salut, articol grozav,
    Mă poți ajuta, te rog, să creez un meniu derulant de pagini copil pe pagina părinte. Am nevoie de această funcționalitate pentru unul dintre proiectele mele WordPress și sunt complet începător în WordPress.

  18. Sunt singurul care nu reușește să facă să funcționeze?

    Am următoarea structură

    Despre
    — Pagina 1
    — Pagina 2
    — Pagina 3

    Când sunt pe pagina „Despre” sau pe o pagină copil (1, 2 sau 3), aș dori o listă cu pagina mea părinte (Despre) și toți copiii (1, 2, 3) – A reușit cineva asta?

    Thanks! :)

    • OMG, scuze, asta e enervant. Ignoră celelalte postări ale mele. Nu mi-am dat seama că nu poți lipi cod în comentarii.

      NU am reușit să-l fac să funcționeze cu wpb_list_child_pages();

      AM putut să fac să funcționeze cu echo do_shortcode( ‘[wpb_childpages]’)

      Și pentru a obține titlul paginii părinte, am inserat acest cod deasupra listei de pagini copil:
      $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. Folosesc acest cod și funcționează excelent. Este posibil să afișez și categorii în meniuri, împreună cu paginile?

  20. Salut,

    Vreau să fac următoarele

    Pagina părinte trebuie să fie fie de vânzare, fie de închiriat
    Apoi vreau ca copilul, de exemplu o provincie (Gauteng), să facă legătura cu părintele de vânzare și cel de închiriat.
    Cum fac asta?

    Michelle

  21. Cum pot crea un shortcode cu un parametru, de exemplu, [wpb_childpages id=”1”], unde id=”1” este un id al paginii părinte?

  22. Salut,

    Este posibil să limitezi legăturile la un număr specific, cum ar fi maximum 12 pagini copil?

    Mulțumesc

  23. Mulțumesc,

    Ați putea explica, vă rog, cum pot organiza paginile copil într-o listă derulantă care să fie accesibilă prin pagina părinte? (Nu vreau ca vizitatorii să poată vedea toate paginile copil sub forma unei liste de bloguri.)

    Adică, pe pagina părinte vreau să creez o listă derulantă (listbox) în care paginile copil să fie adăugate într-o ordine prestabilită (să zicem în ordine alfabetică). După citirea Introducerii, un vizitator poate continua alegând orice pagină din listă după bunul plac (paginile copil nu au o legătură logică, deci în orice caz va căuta pagina exactă).

    Este 'visul meu' realizabil?

    Vă mulțumim din nou.

  24. Salut echipa WPBeginner,

    Am folosit codul pe care mi l-ați oferit cu „opțiunea shortcode” și a funcționat (linkuri către paginile copil). Totuși, am vrut să folosesc opțiunea permanentă, iar aceasta nu a funcționat.

    Când am adăugat această linie de cod [ ] pagina părinte returnează o eroare 500 și nicio pagină copil nu este afișată deloc.

    Ce fac greșit?

    Apropo, dacă aș dori să afișez un rezumat cu imaginea sa respectivă, cum aș proceda? Mulțumesc!

    • Am reușit să rezolv asta.

      Am adăugat fragmentul de cod, apoi am adăugat acest shortcode [wpb_childpages] la pagina părinte unde doream să fie afișate paginile copil. Super!

      Acum, pentru a afișa rezumate și o imagine, aș folosi aceleași interogări – la fel ca postările dintr-o categorie.

      Thanks in advance :)

      • Hei, mă întrebam ce ai vrut să spui prin „query”? Cum exact ai obținut afișarea rezumatelor și imaginilor pe pagina părinte?

        Mulțumesc!

  25. Ar putea cineva să confirme dacă pagina exemplu utilizată în acest tutorial http://optinmonster.com/how-it-works/ folosește această funcționalitate sau nu? Mi se pare că folosesc tab-uri, în loc de subpagini.

    Dacă nu mă înșel, m-ar putea îndruma cineva către o resursă pentru a obține acea funcționalitate, deoarece caut cu disperare o soluție fluidă precum cea de pe acea pagină?

    Mulțumesc mult,

    Pradeep

  26. Pentru opțiunea non-shortcode, ați putea dori să informați utilizatorii că trebuie fie să schimbe
    return $string; în
    echo $string; sau
    în șablonul paginii lor să afișeze funcția
    echo page_list_child_pages();

    Mulțumiri lui Erik pentru că a subliniat acest lucru mai sus

  27. Salut, pot face ca acest lucru să funcționeze atunci când vizitez domeniul meu cu un subdirector (de ex. – exemplu.com/home), dar când vizualizez site-ul fără acesta (exemplu.com), lista de subpagini nu este afișată. Poate cineva să-mi spună unde greșesc?

    Mulțumesc anticipat – sunt foarte nou în Wordpress.

  28. Cum pot face ca această funcție să afișeze pagina părinte în sine în partea de sus a listei, împreună cu lista paginilor copil și nepoți? Pe paginile copil nu afișează pagina părinte.

  29. Există acum un plugin care poate face același lucru?

    și, de asemenea, putem decide unde va merge caseta cu paginile de submeniuri în orice zonă a paginii, nu doar în partea de sus a paginii? Folosind un plugin

  30. Da, poate fi folosit pentru tipuri de postări personalizate. Astfel:


    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. Acest lucru este grozav! Există o modalitate de a face același lucru pentru Tipuri de Postări Personalizate care au postări copil?

  32. Există o modalitate de a modifica acest lucru pentru a afișa postări copil ale tipurilor de postări personalizate pe o pagină de postări de tip postare personalizată? Mulțumesc, este foarte util!

  33. Este foarte grozav pentru mine! Oricum, aș dori să știu cum pot afișa titlul și miniatura paginii copil pe pagina părinte.

    • Salut, am aceeași întrebare. Îmi place foarte mult cum este stilizată lista pe pagina Beginners Blueprint, dar nu am nicio idee cum să încep. Poate cineva să-mi recomande un articol de citit sau să-mi dea un sfat, mulțumesc.

  34. Există o eroare în paginile care nu au pagini copil, așa că am modificat ușor
    if( count($childpages) != 0 ) {
    $string = ” . $childpages . ”;
    }

    în loc de
    if( $childpages ){
    $string = ” . $childpages . ”;
    }

  35. Am adăugat codul în functions.php și când adaug shortcode-ul [wpb_childpages] în textul meu, funcționează. Dar când încerc să-l adaug într-unul dintre șabloanele mele, nu apare nimic. Știe cineva ce greșesc?

  36. Explicație grozavă!!
    Există o modalitate de a afișa întotdeauna paginile părinte?

  37. Acest lucru este genial, mulțumesc.

    Există o modalitate de a o adapta astfel încât Părintele să afișeze Nepotul, și nu Copilul?

Lasă un răspuns

Vă mulțumim că ați ales să lăsați un comentariu. Vă rugăm să rețineți că toate comentariile sunt moderate conform politicii noastre de comentarii, iar adresa dvs. de e-mail NU va fi publicată. Vă rugăm să NU folosiți cuvinte cheie în câmpul nume. Să avem o conversație personală și semnificativă.