Å dele relatert innhold på flere tilknyttede undersider er like mye kunst som det er vitenskap. Som WordPress-webmaster kan du bli fristet til å legge mye innhold på en enkeltside, men du bør motstå det! Å redusere rot vil øke lesbarheten til siden din. Og å spre innholdet ditt over flere sider er en av de vanligste måtene å unngå virvar på. Men du må fortsatt gjøre det åpenbart for de besøkende at den opprinnelige siden og påfølgende undersider er koblet sammen. Og sørg for at disse undersidene er lett tilgjengelige.
Du kan løse dette ved å inkludere en indeks over alle tilknyttede undersider på den opprinnelige siden. Indeksen vil hjelpe nettstedbrukere raskt å se innholdet de leter etter, samt hjelpe dem å velge og vrake fra innholdet, eller til og med oppdage noe nytt.
Å lage undersider er ganske enkelt siden WordPress har et innebygd alternativ for å hjelpe deg med det. Det fungerer ved å tilordne en side til å være overordnet side til en annen (referert til som undersiden). Det vanskelige er imidlertid å sette inn en indeks over underordnede sider på den overordnede siden. Så i denne artikkelen skal vi se på hvordan du viser en indeks over underordnede sider som tilhører en bestemt overordnet side. Og vi viser deg hvordan du takler dette problemet ved å dele det opp i flere mindre trinn:
Hvordan vise alle underordnede sider til en spesifikk WordPress-side
Du kan vise en indeks over alle underordnede sider knyttet til en spesifikk WordPress-side ved å bruke to forskjellige metoder. Den første innebærer å bruke en praktisk plugin og den andre innebærer å aktivere denne funksjonen ved å bruke tilpasset kode. Vi viser deg fremgangsmåten for begge metodene. Vi må imidlertid først forklare hvordan du tildeler en overordnet side til en annen WordPress-side.
Start med å bestemme hvilken side som skal være undersiden. Deretter åpne den for redigering og naviger til Sideattributter-delen til høyre. Hvis du bruker standard WordPress-sidebygger – Gutenberg, vil delen være plassert i Dokument-fanen. Deretter, finn Foreldreside alternativ, velg en side fra rullegardinmenyen, og trykk Oppdater knapp øverst til høyre på skjermen for å oppdatere siden.
Dette vil angi siden du valgte fra rullegardinmenyen som overordnet for siden du redigerte. Den vellykkede tilkoblingen kan også sees fra listen over Alle sider. Underordnede sider vises under den tilhørende overordnede siden og er rykket inn med en bindestrek foran navnet.
Du kan også tilordne overordnede sider til allerede eksisterende overordnede sider. Dette lager underordnede sider med flere dybder. Underordnet dybdenivå noteres deretter med antall bindestreker foran sidetittelen.
På grunn av en overflod av WordPress-plugins for nesten alle formål, bør du alltid prøve å finne en praktisk plugin først når du legger til en ny funksjon eller funksjonalitet. Programtillegget vi skal bruke i denne artikkelen er CC underordnede sider plugg inn. Du kan bruke denne plugin-en på to måter etter at du har installert den.
Den første måten krever bruk av widgets. Sett inn CC Child Pages-widgeten i ønsket widgetområde og så justere de tilgjengelige widgetalternativene.
Du finner CC Child Pages-widgeten nær toppen av listen over Available Widgets-delen. Når du har lagt det til, kan du velge hvilke alternativer som vil være nyttige for deg. For eksempel, når det er krysset av, alternativet Vis sidetittel erstatter den statiske tittelen fra Tittel-feltet med navnet på gjeldende overordnede side, slik at den underordnede sideindeksen vil ha en nyttig tittel i stedet for bare å si Barnesider. Du kan velge hvilke sider som ikke skal vises ved å legge til side-ID-er i Utelukke alternativ.
For referanse er en side-ID et nummer du kan finne i en sides permalink, etter delen med ?post= i. I vårt tilfelle, for eksempel, ID-en til Kontakt oss siden er 1114.
Også ved å huke av Vis søskensider du vil vise sider som har samme forelder og er på samme underordnede dybde.
Her er et eksempel på hvordan widgetinnholdet kan se ut på et nettsted laget med Powerlift-temaet.
Den andre måten å bruke CC Child Pages-plugin er å sette inn kortkoden direkte. Vi tar deg gjennom trinnene ved å bruke Gutenberg-sidebyggeren. Vi anbefaler på det sterkeste å studere artikkelen vår om egendefinerte kortkoder hvis du ikke er sikker på hva de er og i hvilken form du skal bruke når du setter dem inn på siden din. Artikkelen dekker også innsetting av en egendefinert kortkode på siden din hvis du bruker Elementor eller WPBakery som dine foretrukne sidebyggere.
For å sette inn den egendefinerte kortkoden på en side, klikk på +-tegnet for å legge til en Gutenberg-blokk og velg a Kort kode blokkere. Deretter legg inn kortkodenavnet innenfor det og trykk Oppdater knapp. Kortkodenavnet er barnesider, så du kan ganske enkelt sette inn [child_pages]. Ved å gjøre det vil alle mulige funksjonsparametere settes til standardverdien, som er definert i den tilsvarende plugin-filen. Men du kan også sette inn argumentene dine for å spesifisere noen av parameterne. Siden listen over mulige argumenter er satt som en assosiativ matrise, bør du sette inn argumentene i følgende format: key=’value’. Hvis du legger inn flere oppføringer, bør du skille dem med et tomt mellomrom.
Som et eksempel har vi satt følgende:
[child_pages cols=’2’ depth=’0’]
Dette gjør at indekslisten vår vises i 2 kolonner (cols=’2′) og presenterer overordnet og alle underordnede sider i en hierarkisk og innrykket (depth=’0′) liste. Hvis du vil vite mer om de tilgjengelige argumentene og hvordan du inkluderer dem, foreslår vi at du går gjennom den offisielle plugin-siden i detalj.
Etter å ha satt inn eksempelkortkoden, fikk vi følgende resultat, vist nedenfor.
Ulempen med denne plugin er at den har svært få tilleggsalternativer. For stylingformål, du kan velge om du vil bruke forhåndslagde plugin-stiler eller ikke. Det gjøres ved å huke av Ja eller Nei avmerkingsboksen ved siden av Enqueue Skin CSS alternativet i Innstillinger > Underordnede sider.
For å forbedre stiliseringen av resultatene på barnesidene dine du kan også inkludere ekstra, skreddersydde, CSS i Tilpasset CSS alternativet nedenfor.
Etter å ha gjort endringer i innstillingene, ikke glem å trykke på Oppdateringsalternativer knappen nedenfor, for at disse endringene skal gjelde.
En annen mulig måte å lage en indeks over underordnede sider på er ved bruk av skreddersydd kode. Fordelen med denne metoden er friheten til tilpasning. Du kan endre indeksdelen av underordnede sidene nøyaktig i henhold til dine behov uten å være avhengig av en plugin. Å lage tilpasset kode er imidlertid en metode som hovedsakelig er rettet mot mer erfarne WordPress-brukere.
Før vi fordyper oss i trinnene som trengs for denne metoden, er det et par forslag vi ønsker å komme med. For det første foreslår vi å friske opp kunnskapen din om bruk av FTP. For det andre er det fornuftig å ta en sikkerhetskopi av WordPress-filene dine på forhånd, siden feil bruk av kode kan ødelegge nettstedet ditt.
Når det er sagt, la oss gå videre til beskrivelsen av denne metoden. Først må du koble til serveren din ved å bruke FTP-legitimasjonen din og naviger til WordPress-rotkatalogen din, ofte kalt public_html.
Deretter, naviger til katalogen /wp-content/themes og klikk på katalogen til ditt nåværende tema for å åpne den.
Finn functions.php-filen innenfor, høyreklikk på den, og velg Vis/rediger alternativ.
Åpne filen ved å bruke ditt foretrukne tekstredigeringsprogram og sett inn koden nedenfor på slutten av filen.
function qode_children_list() {
global $id;
$child_pages = wp_list_pages( array(
'title_li' => '',
'child_of' => $id,
'sort_column' => 'post_date',
'sort_order' => 'desc',
'echo' => 0
) );
if ( $child_pages){
$output="<ul>" . $child_pages . '</ul>';
}
else
$output="";
return $output;
}
add_shortcode( 'children_list', 'qode_children_list', 11 );
La oss se nærmere på koden inkludert ovenfor.
Denne koden er en liten egendefinert kortkode kalt barneliste. Den viser en uordnet liste over lenker som fører til tilsvarende underordnede sider på en side som kortkoden brukes på. Hvis den siden ikke har noen underordnede sider, vil ikke koden gjøre noe (utdata-HTML vil være tom).
Koden er helt avhengig av wp_list_pages() funksjon. Denne funksjonen kan ta mange mulige parametere selv om vi brukte svært få. De bemerkelsesverdige er de to vi brukte for å sortere de riktige koblingene. Mer presist er lenkene sortert i synkende rekkefølge etter publiseringsdatoene til de underordnede sidene. Derfor vil oppføringene på listen starte fra den nyeste og gå ned til den eldste.
Vi anbefaler på det sterkeste å gå gjennom dokumentasjonen angående funksjonen wp_list_pages() for mer informasjon om parametere og bruk. Når det er sagt, la oss se hvordan vi kan bruke denne kortkoden på nettstedet vårt.
Hvis du vil legge til kortkoden på siden din, kan du gjøre det ved å bruke Gutenberg som sidebygger. Ganske enkelt trykk på +-tegnet for å legge til en ny blokk, velg Kort kode blokkere, og sett inn [children_list]. Til slutt, trykk Oppdater knapp øverst til høyre på siden. Hvis du foretrekker Elementor eller WPBakery som sidebyggere, kan du finne trinnene som kreves for dem i artikkelen vår om bruk av egendefinerte kortkoder.
Hvis du brukte den samme kortkoden vi ga som vårt eksempel i innholdet på siden din, vil du få følgende resultat:
Du kan også plassere kortkoden i en tekst-widget og vise underordnet sideindeks i det foretrukne widget-området. Denne bruken er også beskrevet mer detaljert i vår artikkel om tilpassede kortkoder. Foreløpig kan du ganske enkelt Legg til [children_list] inne i tekst-widgeten og trykk Lagre knapp. Du kan til og med legge til en tittel for underordnet sideindeks, selv om vi har valgt å ikke gjøre det i vårt eksempel.
Slik så kortkoden ut i Powerlift-temaet etter å ha blitt satt inn i sidefeltet.
Du kan velge å stilisere utseendet til denne listen ytterligere. Det kan gjøres ved å lage tilpasset CSS. Hvis du velger å gjøre dette, anbefaler vi deg å legge det til under Ekstra CSS, som er plassert i Utseende > Tilpass-delen av administrasjonsdashbordet.
Siste tanker
Å vise alle underordnede sider til en bestemt overordnet side har mange bruksområder. Gjør navigering gjennom nettstedet ditt enklere og forbedre brukeropplevelsen, for å nevne noen. Selv om det kan virke enkelt å vise barnesidene til en WordPress-overordnet side, blir det litt komplisert av mangelen på innebygde alternativer i WordPress. Men hvis du følger trinnene vi skisserte i artikkelen, kan du klare dette raskt og med minimal innsats. I tillegg har vi gjort vårt beste for å gi en omfattende forklaring av begge metodene. Nå er det opp til deg å velge hvilken du foretrekker å bruke.
Støtt vårt arbeid ❤️
Hvis du likte denne artikkelen, vurder å gi en tips for å hjelpe oss med å fortsette å publisere kvalitetsinnhold.
