Hur man visar en lista över child pages för en parent page i WordPress

En av våra läsare frågade oss nyligen hur man visar child-sidor på en WordPress page?

Om du organiserar din website i WordPress med parent- och child pages, kanske du vill displayed your child pages eller sub pages på huvudsidan parent. Du kanske också vill visa huvudsidan på varje underliggande page för enkel browsing.

I den här artikeln visar vi hur du enkelt kan visa en lista med child pages för en parent page i WordPress.

När du behöver visa en lista över Child Pages?

WordPress levereras med två standard post typer som anropas posts och pages. Posts är blogginlägg, och de är vanligtvis organiserade med kategorier och tags.

Pages är enstaka eller fristående content som är vintergröna, som till exempel en ”About us”-sida eller en ”Contact us”-sida.

I WordPress kan pages vara hierarkiska, vilket innebär att du kan organisera dem med parent- och child-sidor.

You kanske till exempel vill skapa en produktsida med child pages för funktioner, priser och support.

För att skapa en child page följer du vår guide om hur du skapar en child page i WordPress.

När du har skapat dina parent- och child pages kanske du vill lista child pages på huvudsidan parent.

Nu är ett enkelt sätt att göra detta genom att manuellt redigera parent page och add to en lista med länkar individuellt.

Du måste dock redigera parent-sidan manuellt varje gång du addar eller tar bort en child page. Skulle det inte vara trevligare om du bara kunde skapa en child page och den automatiskt skulle visas som en link på parent page?

Med detta sagt, låt oss ta en titt på några andra dynamiska sätt att snabbt displayed en lista över child pages på parent page i WordPress. Vi visar dig tre metoder, så att du kan välja den som är bäst för dig:

Metod 1. Display Child Pages på Parent Page med hjälp av ett plugin

Denna metod är enklare och rekommenderas för alla användare.

Först måste du installera och aktivera pluginet Page-list. För mer detaljer, se vår steg-för-steg guide om hur du installerar ett WordPress plugin.

Vid aktivering måste du redigera parent page och helt enkelt add to följande shortcode där du vill visa listan över child pages.

[undersidor]

Du kan nu save your page och previewa den i en new tabs i webbläsaren. You’ll notice that it displays a simple bulleted list of all the child pages.

Om du vill kan du add to lite custom CSS för att ändra listans appearance. Här är några exempel på CSS som du kan använda som utgångspunkt.

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

När du har tillämpat din custom CSS kan du previewa den parent page. Så här såg det ut på vår test website WordPress.

Pluginet ger ett gäng shortcode-parametrar som tillåter dig att ställa in djup, utesluta pages, antal objekt och mer. För detaljer, vänligen se pluginets page för detaljerad documentation.

Metod 2. Lista Child Pages för en Parent Page med hjälp av kod

Den här metoden är lite mer avancerad och är obligatorisk för att du ska kunna add to kod till din website i WordPress. Om du ej har gjort detta tidigare, vänligen ta en titt på vår guide om hur man copy and paste kod i WordPress.

För att lista barnsidor under en huvudsida måste du lägga till följande kod i ett code snippets plugin eller i ditt temas functions.php-fil:

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

På WPBeginner rekommenderar vi alltid att lägga till kod i WordPress med WPCode plugin.

WPCode allow you to easily add custom code without editing your theme files, so you don’t have to worry about breaking your site.

Först måste du installera och aktivera det gratis WPCode plugin. För steg-för-steg-instruktioner, se den här guiden om hur du installerar ett plugin för WordPress.

När pluginet är aktiverat navigerar du till Code Snippets ” Add Snippet från din WordPress dashboard. Därifrån hoverar du musen över alternativet ”Add Your Custom Code (New Snippet)” och klickar på knappen ”Use snippet”.

Lägg sedan till en rubrik för ditt snippet och klistra in koden ovan i boxen ”Code Preview”.

Glöm inte att välja ”PHP Snippet” som code type i dropdown-menyn till höger.

Efter det är det bara att toggle omkopplaren från ”Inaktiverad” till ”Aktiv” och klicka på knappen ”Save Snippet” högst upp på sidan.

Den här koden kontrollerar först om en page har en parent eller om själva page är en parent.

Om det är en parent page visas de child pages som är kopplade till den. Om det är en child page, visas alla andra pages som är underordnade till parent page.

Slutligen, om detta bara är en page utan någon child eller parent page, så kommer koden helt enkelt inte att göra någonting. På den sista raden i koden har vi add to en shortcode, så att you enkelt kan displayed child pages utan att ändra dina page templates.

För att displayed child pages add to följande shortcode i en page eller textwidget i sidebaren:

[wpb_childpages]

Glöm inte att save dina ändringar och previewa dem i en ny tabs i webbläsaren. Så här ser det ut på vår testsite.

Du kan nu styla den här page-listan med hjälp av lite customize CSS. Här är några exempel på CSS-kod som du kan använda som utgångspunkt.

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

Metod 3. Dynamiskt visa sidor för barn utan någon shortcode

Att använda shortcodes är bekvämt, men problemet med dem är att du måste add shortcodes på alla pages som har parent eller child pages.

Det kan sluta med att du har shortcodes på många pages, och ibland kanske du till och med glömmer att add to dem.

Ett bättre tillvägagångssätt skulle vara att edit filen page template i ditt theme, så att den automatiskt kan visa child pages.

För att göra det måste du edit main page.php template, eller skapa en custom page template i your theme.

Du kan editera ditt huvudtema, men dessa ändringar kommer att försvinna om du ändrar eller updaterar your theme. Det är därför det är bättre om du skapar ett barntema och sedan gör dina ändringar i barntemat.

In your page template file, you need to add this line of code where you want to display child pages.

<?php wpb_list_child_pages(); ?>

Det är all. Ditt theme kommer nu automatiskt att upptäcka barntema pages och visa dem i en vanlig lista.

Du kan customize formaten med CSS och format. Här är ett exempel på hur OptinMonster website visar parent page och sub pages:

Vi hoppas att den här artikeln hjälpte dig att lista child pages för en parent page i WordPress. Du kanske också vill se vår guide om de viktigaste sidorna att skapa på en new WordPress-webbplats, och vår jämförelse av de bästa drag and drop WordPress page builders för att skapa customizes layouts utan någon kod.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.