Hur man enkelt visar en sidlista med miniatyrbilder i WordPress

Vill du ha ett enkelt sätt att göra dina WordPress-sidlistor mer engagerande? Att lägga till miniatyrbilder är en enkel men effektiv teknik för att öka det visuella intrycket och förbättra webbplatsnavigeringen.

Att visa utvalda bilder bredvid dina sidtitlar ger dina besökare mer information om innehållet, så de är mer benägna att klicka och besöka dessa sidor.

På WPBeginner har vi hjälpt många användare att optimera sina WordPress-sajter, och vi vet att detta trick kan göra stor skillnad. 

I den här artikeln visar vi dig hur du visar en sidlista med miniatyrbilder i WordPress, steg för steg.

Varför visa en sidlista med miniatyrbilder i WordPress?

WordPress har två olika inläggstyper som kallas inlägg och sidor.

Sidor används för mer tidlöst innehåll, som sidorna “Om oss”, “Kontakta oss” och “Tjänster”, medan inlägg används för blogginnehåll som uppdateras oftare.

Dina viktigaste sidor länkas vanligtvis från din huvudsakliga navigeringsmeny, men du kan ha fler sidor som du vill visa.

Genom att lägga till en sidlista med miniatyrbilder kan du göra dina länkar mer tilltalande än vanliga textlänkar och ge dina besökare en bättre uppfattning om innehållet på varje sida på din WordPress-webbplats.

När besökare är engagerade och intresserade är de mer benägna att besöka fler sidor och stanna längre på din webbplats, vilket gör det mer sannolikt att de gör ett köp eller går med i din e-postlista.

Med det sagt, låt oss titta på några olika sätt du kan visa en sidlista med miniatyrbilder på din webbplats. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

• Metod 1. Visa en sidlista med miniatyrbilder genom att lägga till kod i WordPress
• Metod 2. Visa en sidlista med miniatyrbilder med hjälp av WordPress blockredigerare

Metod 1. Visa en sidlista med miniatyrbilder genom att lägga till kod i WordPress

Ett sätt att visa en sidlista med miniatyrbilder är genom att lägga till kod i dina WordPress-filer.

Denna metod är mer avancerad, men fördelen är att du kommer att kunna använda anpassningsbara kortkoder. Istället för att manuellt uppdatera listan varje gång du publicerar en ny sida, kommer kortkoderna automatiskt att generera en uppdaterad sidlista åt dig.

Om du inte har lagt till kod på din WordPress-webbplats tidigare, kan du se vår nybörjarguide för att klistra in kodavsnitt från webben i WordPress.

Sedan behöver du lägga till följande kod i din functions.php-fil, i ett webbplatsspecifikt plugin, eller genom att använda ett plugin för kodavsnitt:

add_shortcode('pagelist', function ($args) {
    $args = wp_parse_args($args, [
        'type'  => 'page',
        'limit' => 10,
    ]);
    $out = [];
    $ids = [];
    // Check if we have a predefined list od IDs
    if ( ! empty($args['id'])) {
        $ids = array_filter(explode(',', $args['id']), function ($id) {
            return ! empty($id);
        });
        $ids = array_map('intval', $ids);
    }
    // If we don't have a predefined list od IDs, get the latest posts based on 'limit' parameter
    if (empty($ids)) {
        $queryArgs = [
            'post_type'              => isset($args['type']) && post_type_exists($args['type']) ? $args['type'] : 'page',
            'posts_per_page'         => ! empty($args['limit']) && is_numeric($args['limit']) ? intval($args['limit']) : 10,
            'ignore_sticky_posts'    => true,
            'fields'                 => 'ids',
            'cache_results'          => false,
            'update_post_meta_cache' => false,
            'update_post_term_cache' => false,
        ];
        $ids = get_posts($queryArgs);
        wp_reset_postdata();
    }
    foreach ($ids as $id) {
        $img = has_post_thumbnail($id)
            ? get_the_post_thumbnail($id, [60, 60])
            : '<span class="wpb-post-list__no-image"></span>';
        $excerpt = has_excerpt($id) ? wpautop(get_the_excerpt($id)) : '';
        $out[] = "<a href='" . get_the_permalink($id) . "' class='wpb-page-list__item'>
            <div>{$img}</div>
            <div>
                <div><h4>" . get_the_title($id) . "</h4></div>
                {$excerpt}
            </div>
        </a>";
    }
    return "<div class='wpb-page-list'>" . implode('', $out) . "</div>";
});

Vi rekommenderar att du lägger till den här koden med hjälp av WPCode, det är det bästa pluginet för kodavsnitt på marknaden.

WPCode gör det säkert och enkelt att lägga till anpassad kod i WordPress utan att redigera din temas functions.php-fil.

För att komma igång behöver du installera och aktivera kostnadsfria WPCode-pluginet. Om du behöver hjälp, se vår handledning om hur man installerar ett WordPress-plugin.

När pluginet är aktiverat, gå till Kodavsnitt » + Lägg till avsnitt från din WordPress-instrumentpanel.

På sidan Lägg till kodavsnitt, 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 i popup-fönstret som visas på skärmen.

Därifrån behöver du lägga 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 sedan in koden ovan i rutan "Code Preview".

Därefter växlar du helt enkelt omkopplaren från 'Inaktiv' till 'Aktiv' och klickar på knappen 'Spara kodavsnitt' högst upp på sidan.

Detta kodavsnitt skapar en kortkod som du kan använda för att visa din sidlista med miniatyrer var som helst på din webbplats.

Innan du använder kortkoden måste du lägga till följande CSS på din webbplats för att säkerställa att din sidlista visas snyggt.

Om du inte har gjort detta tidigare, se vår guide om hur du enkelt lägger till anpassad CSS på din WordPress-webbplats.

.wpb-page-list{
    display: block;
    margin: 10px 0 35px;
}
.wpb-page-list__item{
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-column-gap: 16px;
    align-items: center;
    text-decoration: none;
    margin: 10px 0;
}
.wpb-page-list__item:hover h4{
    text-decoration: underline;
}
.wpb-post-list img,
.wpb-post-list__no-image{
    display: block;
    width: 60px;
    height: 60px;
}
.wpb-post-list__no-image{
    background: #aaa;
}
.wpb-page-list__item h4{
    font-size: 20px;
}
.wpb-page-list__item p {
    font-size: 1rem;
    color: #555;
}

Därefter måste du lägga till följande kortkod i WordPress för att lägga till din sidlista:

[pagelist]

Denna kortkod kommer att visa en sidlista som innehåller dina senaste 10 sidor, sorterade efter publiceringsdatum. Den uppdateras automatiskt när nya sidor läggs till.

Om du vill begränsa antalet sidor som visas kan du använda kortkoden nedan:

[pagelist limit=3]

Byt helt enkelt ut ‘3’ mot antalet sidor du vill visa.

För att lägga till kortkoden i WordPress, öppna sidan du vill redigera och klicka sedan på 'Plus'-knappen för att lägga till ett block.

Sök sedan efter blocket 'Shortcode'.

Klicka sedan på blocket 'Kortkod' för att lägga till det på din webbplats och klistra helt enkelt in kortkoden ovan.

När du är klar, se till att du klickar på 'Spara' eller 'Publicera' för att spara dina ändringar.

Därefter kommer dina besökare att kunna se din sidlista med miniatyrbilder.

Du kan också använda kortkoden i en widget för att visa din sidlista i sidofältet eller sidfoten.

Visa en sidlista med specifika webbplatssidor

För att visa en sidlista med endast vissa sidor måste du lägga till följande kortkod på din webbplats:

[pagelist id="20, 10, 35"]

Den här kortkoden visar specifika sidor baserat på deras sid-ID. För mer information, se vår guide om hur du hittar sid-ID i WordPress.

Visa en lista med dina senaste blogginlägg

Du kan också använda kortkoden för att visa en lista över dina senaste blogginlägg. Detta kan vara ett utmärkt sätt att öka sidvisningar på dina blogginlägg.

Lägg helt enkelt till följande kortkod i WordPress:

[pagelist type=post]

Så här kommer din lista med dina senaste blogginlägg att se ut för dina läsare.

Visa en sidlista med varje sida du har publicerat

Slutligen kan du visa en sidlista med miniatyrbilder som innehåller varje sida du har publicerat.

Detta kan vara användbart om du vill skapa en arkivsida eller en HTML-sitemap-sida för dina läsare. De tillagda miniatyrbilderna för inlägg gör den mer engagerande än en enkel sidlista.

Du behöver lägga till följande kortkod på din webbplats:

[pagelist limit="-1"]

När du publicerar nya sidor kommer din sidlista att uppdateras automatiskt.

Metod 2. Visa en sidlista med miniatyrbilder med hjälp av WordPress blockredigerare

Ett annat sätt att visa en sidlista i WordPress är att använda WordPress blockredigerare.

Notera: När du använder den här metoden måste din sidlista skapas och uppdateras manuellt, eftersom nya sidor inte automatiskt läggs till när de publiceras.

För att göra detta, öppna sidan du vill redigera.

Klicka sedan på ikonen för att lägga till blocket ’Plus’ för att öppna blockmenyn.

Sök sedan efter ‘Kolumner’ i sökfältet.

Välj sedan blocket 'Kolumner'.

Detta tar upp en lista över tillgängliga kolumnblock.

Välj blocket ’30/70’ kolumn. Vi kommer att använda den vänstra kolumnen för miniatyrbilderna och den högra kolumnen för sidtiteln och en kort sammanfattning.

Klicka sedan på ikonen för att lägga till block, ‘Plus’.

Därefter väljer du blocket 'Bild' för att lägga till din utvalda bild. Detta ger dig möjlighet att ladda upp en ny bild eller välja en från ditt mediebibliotek.

Om du vill länka din bild, klicka på ikonen 'Infoga länk'.

Lägg sedan helt enkelt till din sid-URL.

När du har lagt till din bild, klicka på ikonen för att lägga till block, ‘Plus’, i den högra kolumnen.

Sök sedan efter blocket 'Rubrik' och klicka på det för att lägga till det på din sida.

Ange sedan din sidtitel och markera den.

Klicka sedan på ikonen 'Länk' för att lägga till en länk till sidan.

Du kan välja om länken ska öppnas på samma sida, eller i en ny flik, genom att klicka på växlingsknappen.

Om du vill lägga till text under din rubrik, klicka bara på ikonen 'Lägg till block' igen och välj blocket 'Paragraf'.

Skriv sedan helt enkelt i det tillgängliga textområdet.

För att lägga till fler objekt i din lista med hjälp av den formatering du just skapat, klicka på kolumnblocket och välj alternativmenyn med de tre prickarna.

Välj sedan alternativet ’Duplicera’ från rullgardinsmenyn.

Detta skapar automatiskt en kopia av kolumnen.

Allt du behöver göra är att följa samma steg som ovan för att ändra bild, rubrik och text.

När du är klar med att göra ändringar i din sidlista, se till att klicka på knappen 'Uppdatera' eller 'Publicera' högst upp på sidan.

Nu kommer dina besökare att se en mer engagerande sidlista med miniatyrbilder för inlägg.

Notera: Det finns ett annat tillgängligt block som kallas 'Sidlista'-blocket som låter dig lägga till en sidlista utan miniatyrer.

Den manuella metoden ovan är dock det enda sättet att lägga till en lista med miniatyrer med hjälp av blockredigeraren.

Om du vill skapa helt anpassade sidor som även inkluderar en sidlista med miniatyrbilder, kan du använda pluginet SeedProd för att göra detta med en dra-och-släpp-byggare. För mer information, se vår guide om hur man skapar en anpassad sida i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt visar en sidlista med miniatyrbilder i WordPress. Du kanske också vill se våra experters val av de bästa WordPress-temabyggarna och vår guide om hur man lägger till oändlig scrollning till din WordPress-webbplats.

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.