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.

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.

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
• Metoda 2. Listarea paginilor copil pentru o pagină părinte folosind cod
• Metoda 3. Afișarea dinamică a paginilor copil fără niciun shortcode

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.

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:

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.

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”.

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

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”.

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.

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.

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:

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.