Hur man visar en lista över undersidor för en huvudsida i WordPress

Nyligen frågade en av våra läsare oss hur man visar undersidor till en WordPress-sida? Det är en fråga vi får ganska ofta på WPBeginner, och den belyser ett vanligt behov av att förbättra webbplatsnavigering och användarupplevelse. 

Om du organiserar din WordPress-webbplats med föräldra- och barnsidor, kanske du vill visa dina barnsidor eller undersidor på den huvudsakliga föräldrasidan. Detta hjälper användare att enkelt se all information som finns tillgänglig inom ett specifikt avsnitt och snabbt navigera till relevanta underteman.

Du kanske också vill visa länken till den huvudsakliga föräldrasidan på varje undersida för enkel navigering, vilket skapar en brödsmuleliknande effekt. Denna strömlinjeformade navigering förhindrar att användare går vilse i djupet av din webbplats och förbättrar deras övergripande surfupplevelse.

I den här artikeln visar vi dig hur du enkelt kan visa en lista över barnteman för en föräldersida i WordPress.

När behöver du visa en lista över barnteman?

WordPress levereras med två standardinläggstyper som kallas inlägg och sidor. Inlägg är blogginnehåll, och de organiseras vanligtvis med kategorier och taggar.

Sidor är engångsinnehåll eller fristående innehåll som är tidlöst, till exempel en 'Om oss'-sida eller en 'Kontakta oss'-sida.

I WordPress kan sidor vara hierarkiska, vilket innebär att du kan organisera dem med överordnade och underordnade sidor. Du kanske till exempel vill skapa en Produktsida med underordnade sidor för Funktioner, Prissättning och Support.

För att skapa en undersida, följ vår guide om hur man skapar en undersida i WordPress.

Efter att du har skapat dina föräldra- och barnsidor kanske du vill lista barnsidorna på den huvudsakliga föräldrasidan.

Nu, ett enkelt sätt att göra detta är att manuellt redigera föräldrasidan och lägga till en lista med länkar individuellt.

Du måste dock manuellt redigera föräldrasidan varje gång du lägger till eller tar bort en undersida.

Vore det inte trevligare om du bara kunde skapa en barntema, och den automatiskt skulle visas som en länk på föräldersidan?

Med det sagt, låt oss titta på några andra dynamiska sätt att snabbt visa en lista med undersidor på föräldrasidan i WordPress. Vi visar dig tre metoder, så att du kan välja den som passar dig bäst:

• Metod 1. Visa undersidor på en huvudsida med hjälp av ett plugin
• Metod 2. Lista undersidor för en huvudsida med kod
• Metod 3. Visa dynamiskt undersidor utan någon kortkod

Metod 1. Visa undersidor på en huvudsida med hjälp av ett plugin

Den här metoden är det enklaste sättet att visa undersidor på en huvudsida och rekommenderas för alla användare.

Först måste du installera och aktivera pluginet Page-list. Mer information finns i vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering behöver du redigera föräldrasidan och helt enkelt lägga till följande kortkod där du vill visa listan med undersidor.

[underordnade sidor]

Du kan nu spara din sida och förhandsgranska den i en ny webbläsarflik. Du kommer att märka att den visar en enkel punktlista över alla undersidor.

Om du vill kan du lägga till lite anpassad CSS för att ändra utseendet på listan.

Här är lite exempel-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;
}

Efter att ha tillämpat din anpassade CSS kan du förhandsgranska föräldrasidan.

Så här såg det ut på vår testwebbplats WordPress:

Pluginet tillhandahåller en mängd kortkodsparametrar som låter dig ställa in djup, exkludera sidor, antal objekt och mer.

För detaljer, vänligen se pluginets sida för detaljerad dokumentation.

Metod 2. Lista undersidor för en huvudsida med kod

Den här metoden är lite avancerad och kräver att du lägger till kod på din WordPress-webbplats. Om du inte har gjort det tidigare, ta en titt på vår guide om hur man kopierar och klistrar in kod i WordPress.

För att lista barnsidor under en föräldrasida behöver du lägga till följande kod i ett kodsnuttplugin eller i din 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 pluginet WPCode.

WPCode låter dig enkelt lägga till anpassad kod utan att redigera dina temafiler, så du behöver inte oroa dig för att bryta din webbplats.

Först måste du installera och aktivera det kostnadsfria WPCode-pluginet. För steg-för-steg-instruktioner, se denna guide om hur man installerar ett WordPress-plugin.

När pluginet är aktiverat, navigera till Kodavsnitt » Lägg till avsnitt från din WordPress-instrumentpanel.

Därifrån, för muspekaren över alternativet 'Lägg till din anpassade kod (nytt kodavsnitt)' och klicka på knappen 'Lägg till anpassat kodavsnitt'.

Välj sedan ‘PHP Snippet’ som kodtyp från listan med alternativ som visas på skärmen.

Lägg sedan till en titel för ditt kodavsnitt, vilket kan vara vad som helst för att hjälpa dig att komma ihåg vad koden är till för.

Klistra nu bara in koden ovan i rutan ‘Kodförhandsgranskning’.

Därefter, växla bara omkopplaren från ‘Inaktiv’ till ‘Aktiv’ och klicka på knappen ‘Spara utdrag’ högst upp på sidan.

Den här koden kontrollerar först om en sida har en överordnad eller om sidan i sig är en överordnad.

Om det är en föräldrasida, så visas de barnsidor som är associerade med den. Om det är en barnsida, så visas alla andra barnsidor till dess föräldrasida.

Slutligen, om detta bara är en sida utan underordnade eller överordnade sidor, kommer koden helt enkelt inte att göra någonting. I den sista raden av koden har vi lagt till en kortkod, så du enkelt kan visa underordnade sidor utan att ändra dina sidmallar.

För att visa undersidor, lägg bara till följande kortkod på en sida eller i en textwidget i sidofältet:

[wpb_childpages]

Glöm inte att spara dina ändringar och förhandsgranska dem i en webbläsarflik. Så här visas det på vår testsida.

Du kan nu styla denna sidlista med lite anpassad CSS.

Här är lite 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. Visa dynamiskt undersidor utan någon kortkod

Att använda kortkoder är bekvämt, men problemet med dem är att du måste lägga till kortkoder på alla sidor som har föräldra- eller barnsidor.

Du kan sluta med kortkoder på många sidor, och ibland kan du till och med glömma att lägga till dem.

En bättre metod vore att redigera sidmallfilen i ditt tema, så att den automatiskt kan visa undersidor.

För att göra det behöver du redigera huvudmallen page.php, eller skapa en anpassad sidmall i ditt tema.

Du kan redigera ditt huvudtema, men de ändringarna försvinner om du byter eller uppdaterar ditt tema. Därför vore det bättre om du skapar ett barntema och sedan gör dina ändringar i barntemat.

I din sidmallfil måste du lägga till den här kodraden där du vill visa undersidor.

<?php wpb_list_child_pages(); ?>

Det var allt. Ditt tema kommer nu automatiskt att upptäcka undersidor och visa dem i en enkel lista.

Du kan anpassa stilarna med CSS och formatering.

Här är ett exempel på hur webbplatsen OptinMonster visar föräldrasidan och underordnade sidor:

Vi hoppas att den här artikeln hjälpte dig att lista underordnade sidor för en föräldrasida i WordPress. Du kanske också vill se vår guide om de viktigaste sidorna att skapa på en ny WordPress-webbplats, och vår jämförelse av bästa dra-och-släpp-sidbyggare för WordPress för att skapa anpassade layouter utan kod.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.