Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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.

Displaying a list of child pages for a parent page in 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.

Manually add child page links

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.

Plain list of child page links

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.

1
2
3
4
5
6
7
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 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.

Child pages list with CSS

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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.

WPCode

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

Add a new custom code snippet in WPCode

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

Select PHP Snippet as the code type

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

Paste code into the Code Preview box

Efter det är det bara att växla från ”Inaktiv” till ”Aktiv” och klicka på knappen ”Spara snippet” högst upp på sidan.

Activate and save your custom code snippet

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.

Plain link list

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.

1
2
3
4
5
6
7
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.

1
<?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:

OptinMonster Sub Pages Example

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

80 kommentarerLeave a Reply

  1. Philip

    Hello this works, except that the parent is also displaying, how do i show just the child pages, thanks

    • WPBeginner Support

      The simplest method for what it sounds like you’re wanting would be to not have content on the parent page and only have your content in the child pages.

      Admin

  2. Sachit Shori

    Thank you so much. You saved me.

    • WPBeginner Support

      You’re welcome :)

      Admin

  3. Emmanuel Husseni

    Hello Wpbeginner,

    Please how can i sort all the child page alphabetically on the parent page. I’ve follow all step but the sub pages are showing randomly on the parent page.

    Waiting for response. ….Thanks

    • WPBeginner Support

      You would change the two instances of menu_order in our code to be: post_title

      Admin

  4. Iyke O.

    How do I make the list collapsible on sidebar.

  5. Stacie

    Easy to follow and did the job. Thanks so much for sharing!

    • WPBeginner Support

      You’re welcome, glad our content could be helpful :)

      Admin

  6. Aaro

    Can I assign a css class to this function? So that when I make css changes to ul elements it wouldn’t affect other ul’s on the site.
    Or any other simple solution for this?

    • WPBeginner Support

      You could add your CSS class in the ul section of the function :)

      Admin

  7. Keshav Murthy

    Hi, WPB Team,

    Thank you so much for this Snippet and the tutorial.

    It saved my ton of time and helped me too.

    With Warm Regards,
    Keshav Murthy

    • WPBeginner Support

      Glad our tutorial could help :)

      Admin

  8. Gary Granai

    I installed the plugin code snippets in wordpress 4.9.8

    I copied the code on https://www.wpbeginner.com/wp-tutorials/how-to-display-a-list-of-child-pages-for-a-parent-page-in-wordpress/#respond and added it to a new snippet in code snippets.

    I made a page and then a page which was given the attribute of having the first page as the parent page.

    The child parent relationship is shown in the list of pages in the attributes drop down.

    When I open the parent page I see nothing that shows a child page.

    I then tried using the functions.php page.

    I added the code copied from https://www.wpbeginner.com/wp-tutorials/how-to-display-a-list-of-child-pages-for-a-parent-page-in-wordpress/#respond to the bottom of the code on the functions page.

    When I open the parent page, I it does not display. What displays is an error message saying there is unexpected code.

    I restored the functions.php page to its original statuc.

    What changes must I make to what I have tried to do.

    • WPBeginner Support

      Hi Gary,

      Make sure that you publish the child page before testing the code. Also carefully copy the code again to make sure that you are not copying the numbers or any unexpected characters.

      Admin

  9. Itika

    I have a question. I have added sub pages in parent page but when I am opening the site in mobile and clicking on parent page it opens the empty parent page. To view the drop down sub pages one have to hold the button of parent page. How can I fix it. I don’t want that empty page to open. I want that if we touch on parent page it opens the drop down menu.
    Please suggest how to do it.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.