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

Nyligen frågade en av våra läsare oss hur man visar barnsidor på 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 överordnade och underordnade sidor kanske du vill visa dina underordnade sidor eller undersidor på den överordnade huvudsidan. På så sätt kan användarna enkelt se all information som finns tillgänglig inom ett visst avsnitt och snabbt navigera till relevanta underrubriker.

Du kanske också vill visa länken till den överordnade sidan på varje undersida för att göra det enklare att navigera, vilket skapar en brödsmule-liknande effekt. Denna strömlinjeformade navigering hindrar användarna från att gå vilse i djupet av din webbplats och förbättrar deras övergripande surfupplevelse.

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 sidor vara hierarkiska, vilket innebär att du kan organisera dem med överordnade och underordnade sidor. Du kanske t.ex. vill skapa en produktsida med underordnade sidor 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 den överordnade sidan manuellt varje gång du lägger till eller tar bort en barnsida. Vore det inte trevligare om du bara kunde skapa en barnsida, så skulle den automatiskt visas som en länk på föräldrasidan?

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 insticksprogrammet Page-list. För mer information, 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 lägga till lite anpassad CSS för att ändra utseendet på listan. Här är några exempel på CSS som du kan använda som utgångspunkt.

När du har använt din anpassade CSS kan du förhandsgranska den överordnade sidan. Så här såg det ut på vår testwebbplats för 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:

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 kostnadsfria WPCode-pluginet. För steg-för-steg-instruktioner, se denna guide om hur du installerar ett WordPress-plugin.

När pluginet är aktiverat navigerar du till Code Snippets ” Add Snippet från din WordPress-panel. Där håller du muspekaren över alternativet ”Lägg till din anpassade kod (nytt snippet)” och klickar på knappen ”Lägg till anpassat snippet”.

Sedan måste du välja ”PHP Snippet” som kodtyp från listan med alternativ som visas på skärmen.

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

Nu klistrar du bara in koden från ovan i rutan ”Code Preview”.

Efter det är det bara att växla från ”Inaktiv” till ”Aktiv” och klicka på knappen ”Spara 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 visa undersidor lägger du bara till följande kortkod i en sid- eller textwidget i sidofältet:

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

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.

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.