WordPress: Slik viser du underordnede sider ved hjelp av en kortkode
Vi har gjenoppbygd hierarkiet av nettsteder for flere av våre WordPress klienter, og en av tingene vi prøver å gjøre er å organisere informasjonen effektivt. For å gjøre dette ønsker vi ofte å lage en hovedside og inkludere en meny som automatisk viser sidene under den. En liste over underordnede sider, eller undersider.
Dessverre er det ingen iboende funksjon eller funksjon for å gjøre dette i WordPress, så vi utviklet en kortkode for å legge til klientens nettsted. Slik kan du bruke kortkoden med alle variablene fylt ut i et WordPress-innlegg eller -side:
[listchildpages ifempty="No child pages found" order="ASC" orderby="title" ulclass="custom-ul-class" liclass="custom-li-class" aclass="custom-a-class" displayimage="yes" align="aligncenter"]
Fordeling av bruk:
ifempty="No child pages found"
: Denne teksten vil vises hvis det ikke er noen underordnede sider tilgjengelig.order="ASC"
: Dette sorterer listen over underordnede sider i stigende rekkefølge.orderby="title"
: Dette sorterer barnesidene etter tittel.ulclass="custom-ul-class"
: Bruker CSS-klassen "custom-ul-class" på<ul>
element i listen.liclass="custom-li-class"
: Bruker CSS-klassen "custom-li-class" på hver<li>
element i listen.aclass="custom-a-class"
: Bruker CSS-klassen "custom-a-class" på hver<a>
(lenke) element i listen.displayimage="yes"
: Dette inkluderer det fremhevede bildet av hver underordnede side i listen.align="aligncenter"
: Dette justerer de fremhevede bildene i midten.
Sett inn denne kortkoden direkte i innholdsområdet til et WordPress-innlegg eller -side der du vil at listen over underordnede sider skal vises. Husk å tilpasse verdiene til hvert attributt for å passe til design og struktur på WordPress-nettstedet ditt.
I tillegg, hvis du vil ha en kort utdrag som beskriver hver side, tillater pluginet utdrag på sider slik at du kan redigere innholdet i siden.
Liste underordnede sider kortkode
function add_shortcode_listchildpages($atts, $content = "") {
global $post;
$string = '';
$atts = shortcode_atts(array(
'ifempty' => '<p>No Records</p>',
'order' => 'DESC',
'orderby' => 'publish_date',
'ulclass' => '',
'liclass' => '',
'aclass' => '',
'displayimage' => 'no',
'align' => 'alignleft'
), $atts, 'listchildpages');
$args = array(
'post_type' => 'page',
'posts_per_page' => -1,
'post_parent' => $post->ID,
'orderby' => $atts['orderby'],
'order' => $atts['order']
);
$parent = new WP_Query($args);
if ($parent->have_posts()) {
$string .= $content.'<ul class="'.$atts['ulclass'].'">';
while ($parent->have_posts()) : $parent->the_post();
$string .= '<li class="'.$atts['liclass'].'">';
$true = array("y", "yes", "t", "true");
$showimage = strtolower($atts['displayimage']);
if (in_array($showimage, $true)) {
if (has_post_thumbnail($post->ID)) {
$image_attributes = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail');
$string .= '<a class="'.$atts['aclass'].'" href="'.get_permalink().'" title="'.get_the_title().'">';
$string .= '<img src="'.$image_attributes[0].'" width="'.$image_attributes[1].'" height="'.$image_attributes[2].'" alt="'.get_the_title().'" class="'.$atts['align'].'" /></a>';
}
}
$string .= '<a class="'.$atts['aclass'].'" href="'.get_permalink().'" title="'.get_the_title().'">'.get_the_title().'</a>';
if (has_excerpt($post->ID)) {
$string .= ' - '.get_the_excerpt();
}
$string .= '</li>';
endwhile;
$string .= '</ul>';
} else {
$string = $atts['ifempty'];
}
wp_reset_postdata();
return $string;
}
add_shortcode('listchildpages', 'add_shortcode_listchildpages');
Funksjonen add_shortcode_listchildpages
legger til en egendefinert kortkode
No Records
- Global postvariabel: Funksjonen begynner med å erklære den globale variabelen
$post
, som brukes for å få tilgang til informasjon om gjeldende innlegg eller side i WordPress. - Kortkodeattributter: The
shortcode_atts
funksjonen setter opp standardverdier for shortcode-attributtene. Brukere kan overstyre disse når de setter inn kortkoden. Attributter inkluderer:ifempty
: Melding som vises hvis det ikke er noen underordnede sider.order
: Rekkefølgen på de underordnede sidene (ASC eller DESC).orderby
: Kriterier for bestilling av underordnede sider (f.eks. publiseringsdato).ulclass
: CSS-klasse for<ul>
element.liclass
: CSS-klasse for<li>
elementer.aclass
: CSS-klasse for<a>
(anker)elementer.displayimage
: Om det fremhevede bildet av de underordnede sidene skal vises.align
: Justering av det fremhevede bildet.
- Spørringsargumenter: Funksjonen setter opp en
WP_Query
for å hente alle underordnede sidene til gjeldende side, sortert i henhold til de angitte attributtene. - Generering av listen:
- Hvis underordnede sider blir funnet, konstruerer funksjonen en HTML uordnet liste (
<ul>
), med hver underordnede side representert av et listeelement (<li>
). - Innenfor hvert listeelement sjekker funksjonen om det aktuelle bildet skal vises basert på
displayimage
attributt. - Funksjonen oppretter også en lenke til hver underordnede side ved hjelp av
<a>
og legger til utdraget av den underordnede siden hvis den er tilgjengelig.
- Hvis underordnede sider blir funnet, konstruerer funksjonen en HTML uordnet liste (
- Utdata eller standardmelding: Hvis det ikke er noen underordnede sider, sender funksjonen ut meldingen spesifisert av
ifempty
attributt. - Tilbakestill postdata: The
wp_reset_postdata
funksjonen tilbakestiller WordPress-spørringen, og sikrer at den globale$post
objektet gjenopprettes til den opprinnelige hovedspørringens post. - Kortkoderegistrering: Til slutt
add_shortcode
funksjonsregistrelistchildpages
som en ny kortkode, kobler den tiladd_shortcode_listchildpages
funksjon, noe som gjør den tilgjengelig for bruk i innlegg og sider.
Denne funksjonen er nyttig for dynamisk liste over undersider på en overordnet side, for å forbedre navigasjonen og organiseringen på et WordPress-nettsted. Jeg vil anbefale å legge den til en tilpasset plugin hvis du vil legge den til på WordPress-siden din. Eller... du kan laste ned plugin-en jeg publiserte.
Liste underordnede sider Shortcode Plugin
Jeg kom endelig rundt å skyve koden inn i et plugin for å gjøre det lettere å installere og bruke, og Liste Plugins for barnekoder ble godkjent av WordPress i dag! Vennligst last ned og installer det - hvis du liker det, gi en anmeldelse!