Content Marketing

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

, som du kan bruke i WordPress-innlegg eller -sider for å vise en liste over underordnede sider. Her er en oversikt over hvordan koden fungerer:

  1. 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.
  2. 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.
  3. Spørringsargumenter: Funksjonen setter opp en WP_Query for å hente alle underordnede sidene til gjeldende side, sortert i henhold til de angitte attributtene.
  4. 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.
  5. Utdata eller standardmelding: Hvis det ikke er noen underordnede sider, sender funksjonen ut meldingen spesifisert av ifempty attributt.
  6. 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.
  7. Kortkoderegistrering: Til slutt add_shortcode funksjonsregistre listchildpages som en ny kortkode, kobler den til add_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!

WordPress-plugin for oppføring av barnesider

Douglas Karr

Douglas Karr er CMO for Åpne INSIGHTS og grunnleggeren av Martech Zone. Douglas har hjulpet dusinvis av vellykkede MarTech-startups, har bistått med due diligence på over 5 milliarder dollar i Martech-oppkjøp og -investeringer, og fortsetter å hjelpe selskaper med å implementere og automatisere salgs- og markedsføringsstrategier. Douglas er en internasjonalt anerkjent digital transformasjons- og MarTech-ekspert og foredragsholder. Douglas er også en publisert forfatter av en Dummies guide og en bok om lederskap for bedrifter.

Relaterte artikler

Tilbake til toppen-knappen
Lukke

Annonseblokkering oppdaget

Martech Zone er i stand til å gi deg dette innholdet uten kostnad fordi vi tjener penger på nettstedet vårt gjennom annonseinntekter, tilknyttede lenker og sponsing. Vi vil sette pris på om du vil fjerne annonseblokkeringen når du ser på nettstedet vårt.