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.
Denise
För sidor på tredje nivån (barnbarn), vill jag visa samma meny som syns på undersidorna (alla undersidors länkar till föräldern). Med denna kodsnutt, när jag är på en barnbarnssida, ser jag bara de andra barnbarnssidorna i menyn. Hur skulle denna kod behöva modifieras för att visa alla barns länkar även när jag är på barnbarnssidor?
vicky
hur får jag barnsid-ID:n, inte barnbarnsid-ID:n... snälla hjälp, jag är nybörjare
Meredith L
Jag är relativt ny inom bloggande och jag bytte nyligen till Kale Wordpress-temat. Jag har försökt att skapa sidattributsidor (under föräldrasidan Recept) så att jag kan ha separata kategorier för förrätter, desserter, etc. Allt verkar fungera i admin-delen men sedan på själva webbplatsen finns inga sidattribut/nedrullningsmenyer från Recept-kategorin. Vad gör jag fel? Allt är inställt på publikt så jag är inte säker på vad problemet är.
Daves
Tack för den här koden. Men jag vill inte att detta ska visas på startsidan (statisk sida), bara på föräldrasidorna. Hur kan det göras?
Tack.
Boris Budeck
Jag använder Generatepress Theme (skapade ett barn-tema från det för anpassning) och jag får inte detta att fungera. Kortkoden visas på utdatans sida, det verkar som att den inte ens känns igen som en kortkod. Jag använder Elementor-widgets och varken text- eller kortkods-widgets fungerar.
Någon idé om hur man kan få det att fungera när man använder elementor-widgets?
WPBeginner Support
Hej Boris,
Försök att lägga till den här koden i ditt temas functions.php-fil eller en webbplatsspecifikt plugin.
add_filter('widget_text', 'do_shortcode');1-click Use in WordPress
Admin
Frederic
ett bra inlägg, det är precis vad jag har letat efter i många timmar! och det fungerar som en charm, bara att lägga till koden i function.php för temat och sedan lägga till kortkoden på sidan där jag vill att undersidorna ska visas, och voilà!!!
underbart, tack så mycket för din generositet!!
WPBeginner Support
Hej Frederic,
Glad you found it useful
You may also want to subscribe to our YouTube Channel for more WordPress video tutorials.
Admin
Mariano
Hej!
Tack för koden. Hur kan jag visa den utvalda bilden för varje undersida?
Ron
Som med så många av de kodsnuttar vi hittar, måste man gå igenom alla kommentarer för att få det att fungera. Vad är fel med att testa det man skriver?
Alicia
Kan du göra en rullgardinsmeny för föräldra-/undersidor på wordpress.com, eller måste det vara .org-versionen?
Razvan
Vad händer om jag vill visa underordnade inlägg, inte underordnade sidor?
Rudy
Att använda den här koden visar föräldrasidan tillsammans med undersidorna, vilket är redundant. Som jag förstår det, behöver vi egentligen bara visa undersidorna, inte föräldrasidan. Några förslag på modifiering som kan göra detta?
Michael Feske
Great, but it works not
add_shortcode är korrekt eller måste det vara add_filter https://www.wpbeginner.com/wp-tutorials/how-to-use-shortcodes-in-your-wordpress-sidebar-widgets/ ?
med add_shortcode är fel Fatal error: Uncaught Error: Call to undefined function add_shortcode()
med add_filter är inget fel men det fungerar inte
Milos
Vid pluginuppdateringar får jag av någon konstig anledning alltid ett fel:
Fatal error: Cannot redeclare wpb_list_child_pages() (previously declared in …/wp-content/themes/pagelines/functions.php:25) in …/wp-content/themes/pagelines/functions.php on line 34
Jeffrey Fry
Hur kan man också visa datumet för barnsidan?
ethann
Hej, jättebra artikel,
Kan du hjälpa mig att skapa en rullgardinsmeny med undersidor på en föräldrasida. Jag behöver den här funktionen för ett av mina WordPress-projekt och jag är helt nybörjare på WordPress.
Alex
Är jag den enda som inte kan få det att fungera?
Jag har följande struktur
Om
— Sida 1
— Sida 2
— Sida 3
När jag är på "Om" eller en undersida (1, 2 eller 3) skulle jag vilja ha en lista med min föräldrasida (Om) och alla barn (1, 2, 3) – Har någon fått det att fungera?
Thanks!
Kendra
OMG förlåt, det här är irriterande. Ignorera mina andra inlägg. Insåg inte att man inte kunde klistra in kod i kommentarerna.
Jag kunde INTE få det att fungera med wpb_list_child_pages();
Jag kunde få det att fungera med echo do_shortcode( '[wpb_childpages]')
Och för att få titeln på föräldrasidan, infogade jag detta ovanför listan med undersidor:
$current = $post->ID;
$parent = $post->post_parent;
$grandparent_get = get_post($parent);
$grandparent = $grandparent_get->post_parent;
PHP if ($root_parent = get_the_title($grandparent) !== $root_parent = get_the_title($current)) {echo get_the_title($grandparent); }else {echo get_the_title($parent);
Jean Bishop
Jag använder den här koden och den fungerar utmärkt. Är det möjligt att även visa kategorier i menyer tillsammans med sidor?
Michelle
Hej,
Jag vill göra följande
Föräldrasidan måste antingen vara till salu eller uthyres.
Sedan vill jag att barnet, till exempel en provins (Gauteng), ska länka till föräldern till salu och föräldern uthyres.
Hur gör jag det?
Michelle
Zakhar
Hur skapar jag en kortkod med en parameter, till exempel, [wpb_childpages id=”1″], där id=”1″ är ett ID för en föräldersida?
Strand
Hej,
Är det möjligt att begränsa länkarna till ett visst antal, till exempel maximalt 12 barnsid-idor?
Tack
Aander
Tack,
Kan du förklara, tack, hur jag kan organisera undersidor i en rullgardinsmeny som kan nås via föräldrasidan? (Jag vill inte att besökarna ska se alla undersidor i form av en blogglista.)
D.v.s. på föräldrasidan vill jag skapa en rullgardinsmeny (listruta) till vilken barnsidor skulle läggas till i en fördefinierad ordning (säg i alfabetisk ordning). Efter att ha läst introduktionen kan en besökare fortsätta genom att välja vilken sida som helst från listan efter eget önskemål (barnsidor har ingen logisk koppling så i vilket fall som helst kommer hon att söka efter den exakta sidan).
Är 'min dröm' förverkligbar?
Tack igen.
Quantum-mecha
Hur lägger jag till sidnumrering för undersidor?
Tack!
Astrid
Hej WPBeginner Staff,
Jag använde koden ni gav med "kortkodsalternativet" och det fungerade (länkar till undersidor). Dock ville jag använda det permanenta alternativet, och det fungerade inte.
När jag lade till den här kodraden [ ] fick föräldrasidan ett 500-fel och inga underordnade sidor visades alls.
Vad gör jag fel?
Förresten, om jag ville visa ett utdrag med dess respektive bild, hur skulle jag göra det? Tack!
Astrid
Jag lyckades lösa det.
Jag lade till kodavsnittet och sedan lade jag till den här kortkoden [wpb_childpages] på föräldrasidan där jag ville att undersidorna skulle visas. Fantastiskt!
Nu, för att visa utdrag och en bild, skulle jag använda samma frågor – precis som inlägg under en kategori.
Thanks in advance
Jade
Hej, jag undrade vad du menade med 'query'? Hur exakt fick du utdrag och bilder att visas på föräldrasidan?
Tack!
Mehar
Verkligen användbart. Tack.
Pradeep
Kan någon bekräfta att exempelsidan som används i den här handledningen http://optinmonster.com/how-it-works/ använder den här funktionen eller inte? För mig ser det ut som att de använder flikar istället för barnsidor.
Om jag har rätt, kan någon hänvisa mig till en resurs för att få den funktionen, eftersom jag desperat letar efter en flytande lösning som den de har på den sidan?
Tack så mycket,
Pradeep
Andrew Roberts
För alternativet utan kortkod kan du vilja informera användarna om att de antingen behöver ändra
return $string;tillecho $string;elleri sin sidmall skriva ut funktionen
echo page_list_child_pages();Tack till Erik för att han påpekade detta ovan
Meredith Adams
Tack!
Gaby
Tack! Jag undrade varför koden inte fungerade...
Howard
Hej, jag kan få detta att fungera när jag besöker min domän med en underkatalog (t.ex. – example.com/home) men när jag tittar på webbplatsen utan detta (example.com) listas inte undermenyerna. Kan någon peka mig på var jag gör fel?
Tack på förhand – väldigt ny på Wordpress.
Emily Jennewein
Hur får du den här funktionen att visa föräldrasidan själv högst upp i listan tillsammans med listan över barn- och barnbarnssidor? På undersidorna listas inte föräldrasidan.
Michael
hur kan jag anpassa detta för att bara visa barnsid-idorna till en specifik sida?
Yester
Hur lägger man till en aktiv klass på den aktuella?
Jenny
Finns det nu en plugin som kan göra samma sak?
och kan vi också bestämma var rutan med undermenysidor ska placeras på vilken del av sidan som helst, inte bara högst upp på sidan? Med hjälp av ett plugin
WPBeginner Staff
Ja, det kan användas för anpassade inläggstyper. Som så här:
function wpb_list_child_pages() {
global $post;
if ( 'movie' == get_post_type() && $post->post_parent )
$childpages = wp_list_pages( 'post_type=movie&sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
else
$childpages = wp_list_pages( 'post_type=movie&sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
if ( $childpages ) {
$string = '' . $childpages . '';
}
return $string;
}
add_shortcode('wpb_childpages', 'wpb_list_child_pages');
Daniela
Detta är jättebra! Finns det ett sätt att göra samma sak för anpassade inläggstyper som har underordnade inlägg?
Caroline
Undrar också!
Om någon vet, snälla hjälp!
dpc
Finns det ett sätt att modifiera detta för att skriva ut anpassade inläggstyper för barns inlägg på en sida för anpassade inläggstyper? Tack, det är väldigt användbart!
Sokeara
Det är väldigt bra för mig! Hur som helst skulle jag vilja veta hur jag kan visa titel och miniatyrbild för barnsidan på föräldrasidan.
Ashley Bell
Hej, jag har samma fråga. Jag gillar verkligen hur listan är stylad på sidan Beginners Blueprint men jag har ingen aning om hur jag ska börja. Kan någon rekommendera en artikel att läsa eller ge lite råd, tack.
Razvan Zamfir
Hej!
Snyggt utdrag, men hur listar jag bara barnbarnssidor?
Tack!
amitabha197
Det finns ett fel i sidorna som inte har undersidor så jag har modifierat lite
if( count($childpages) != 0 ) {
$string = ” . $childpages . ”;
}
istället för
if( $childpages ){
$string = ” . $childpages . ”;
}
WPBeginner Staff
För att kunna köra en kortkod i WordPress-mallar måste du lägga till den så här:
Matt Rock
Jag kunde inte få mallkoden "wpb_list_child_pages();" att fungera, men echo shortcode gjorde susen. Skål!
Erik
Ändra bara "return $string" till "echo $string" (detta kommer att skriva ut sidorna).
fariha
tack, det fungerade
Coen Siebenheller
Jag har lagt till koden i functions.php och när jag lägger till kortkoden [wpb_childpages] i min text fungerar det. Men när jag försöker lägga till den i en av mina mallar visas ingenting. Vet någon vad jag gör fel?
Elena Rapisardi
Bra förklaring!!
Finns det ett sätt att alltid visa föräldrasidorna?
Quin
Det här är briljant, tack.
Finns det ett sätt att anpassa det så att föräldern visar barnbarnet, och inte barnet?
Dejan
Bra funktion, tack!
Richelly Italo
Bra idé, tack snubben.
Steph
Kan du berätta hur vi stoppar listan på första nivån? Jag skulle vilja visa alla undersidor till den föräldern, men inte deras barn. Tack.
Stefan
Lägg bara till &depth=1
sort_column=menu_order&title_li=&child_of=’ . $post->post_parent . ‘&echo=0&depth=1
Martin Capodici
Bra. Jag gillar idén med ett webbplatsplugin och att se koden du lägger till (så du vet att den är ren och inte gör något dåligt) istället för att förlita sig på något plugin som kan installera vad som helst.
För något så enkelt som att lista barnsidor håller jag med om att det borde ingå i ett större plugin snarare än bara ett plugin, annars slutar du med så många plugins att det är svårt att hålla reda på.
Rishi Gangoly
This is great. I had a page on my website called “Services” and was manually linking the sub-pages, but not any more. Awesome. Thanks for this tip. Worked like a charm and did exactly what I was doing manually.
Bojan
Det här är jättebra! Att lägga in det i ett plugin är en fantastisk funktion och en stor möjlighet att utöka funktionaliteten genom att lägga till:
– Barnsidans utvalda bild (som miniatyrbild)
– Barnsidans titel
– Resten av metadatan (författare, datum, antal kommentarer)
– Stil i kolumner kanske
och så vidare
På så sätt skulle vi ha ett nästan komplett portföljplugin – portföljer gjorda av sidor snarare än bara av anpassade inläggstyper.
Tack..
Ivica
Den bästa plugin för att visa undersidor i en sidopanel för dem som vill ha ännu snabbare och "renare" navigering mellan undersidor:
http://wordpress.org/plugins/child-page-navigation/
yousef mayeli
Hej där
Tack, det var väldigt användbart. Men om du kunde visa det med en video vore det mycket mer användbart. Som Tyler Moore skulle göra.
Tack
Yousef
Nancy
Detta är jättebra! Jag har många manuellt tillagda länkar till undersidor, och detta kommer att göra underhållet av vår webbplats MYCKET enklare. Jag har precis testat i min utvecklingsmiljö, och jag skulle vilja justera funktionen lite, så att på en undersida, när kortkoden inkluderas, listas alla barn till samma förälder FÖRUTOM den för närvarande visade sidan. Jag lär mig fortfarande PHP, så medan jag kommer att försöka lösa detta på egen hand, skulle jag uppskatta all hjälp med att göra den ändringen i koden.