Hur man lägger till miniatyrbilder till länkar för föregående och nästa inlägg i WordPress

Efter allt det arbetet med ett WordPress-blogginlägg är det frustrerande att se läsare lämna efter bara en sida.

En stor anledning? De vanliga textnavigeringslänkarna längst ner i dina inlägg märks knappt.

Att lägga till miniatyrbilder till dessa navigeringslänkar kan hjälpa dig att fånga uppmärksamhet. Läsare kan omedelbart se vad som kommer härnäst, vilket gör dem mycket mer benägna att stanna kvar och utforska ditt innehåll.

Vi har testat många metoder och funnit att WPCode är det bästa verktyget för jobbet. Det låter dig lägga till anpassade kodavsnitt säkert utan att röra dina temafiler.

I den här guiden visar vi dig exakt hur du lägger till miniatyrbilder till dina länkar för föregående och nästa inlägg i WordPress. Det är enklare än du tror! 💡

Varför visa miniatyrbilder med länkarna till föregående och nästa inlägg?

Miniatyrer gör dina navigeringslänkar omedelbart mer iögonfallande och klickbara. De kan uppmuntra läsare att fortsätta utforska din webbplats, vilket potentiellt ökar sidvisningar och besökstid.

Din WordPress-blogg erbjuder några användbara funktioner för att hjälpa besökare att hitta nytt innehåll och navigera på din webbplats.

Dessa funktioner inkluderar:

• Navigationsmenyer
• En sökfält, och
• En widget för arkiverade inlägg.

En annan användbar navigeringsfunktion finns längst ner på varje blogginlägg. Där hittar du länkar till din webbplats föregående och nästa inlägg.

Dessa länkar bygger användarengagemang eftersom när besökare har läst ett blogginlägg kan de leta efter något annat att läsa. Men om du lägger till miniatyrbilder kommer länkarna att se mer interaktiva ut.

Det är också ett utmärkt sätt att uppmärksamma dina mest presterande eller populära blogginlägg.

Till exempel kanske du har grundläggande innehåll som redan driver mycket trafik och konverterar dessa läsare till e-postprenumeranter. Att lägga till miniatyrer med inläggslänkar skulle bara hjälpa dig att bygga din e-postlista och växa ditt lilla företag.

Med detta i åtanke visar vi dig hur du lägger till miniatyrbilder till länkarna för föregående och nästa inlägg i WordPress. Här är alla ämnen vi kommer att täcka i den här artikeln:

Låt oss börja!

Använda miniatyrbilder med föregående och nästa inläggslänkar i WordPress

För att lägga till miniatyrer till dina länkar för föregående och nästa inlägg måste du lägga till kod i din WordPress-temas filer.

Vi rekommenderar att använda WPCode, det bästa pluginet för kodavsnitt för WordPress. Det låter dig lägga till kod utan att bryta din webbplats och kommer med massor av färdiga mallar, så du behöver inte skriva kod från grunden.

På våra webbplatser använder vi WPCode för att skapa och hantera anpassade kodavsnitt. Det har fungerat otroligt bra för oss, och du kan läsa vår fullständiga recension av WPCode för att utforska dess funktioner.

Om du inte har gjort detta tidigare, se vår guide om hur du kopierar och klistrar in kod i WordPress.

För att komma igång behöver du installera och aktivera WPCode-pluginet. Gå från ditt WordPress-adminområde till Plugins » Lägg till Plugin.

På nästa skärm använder du sökfältet för att snabbt hitta WPCode-pluginet.

Klicka på ‘Installera nu’ i sökresultatet, följt av ‘Aktivera.’

Om du behöver hjälp kan du läsa vår artikel om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till Kodavsnitt » + Lägg till avsnitt från din WordPress-instrumentpanel.

Du kommer att omdirigeras till ett bibliotek med kodavsnitt, där du kan välja mellan ett brett utbud av färdiga mallar.

För att lägga till miniatyrer till länkarna för föregående och nästa inlägg kommer vi att ladda upp en sträng med anpassad kod.

Så, låt oss klicka på ‘+ Lägg till anpassat avsnitt’ under ‘Lägg till din anpassade kod (nytt avsnitt).’

I popup-fönstret som visas väljer du kodtypen.

Här vill du välja ' PHP Snippet', vilket är en liten kodbit som används för att utöka WordPress-funktionaliteten.

Nästa steg är att ge kodavsnittet ett namn så att du kan hänvisa till det senare.

Kopiera sedan helt enkelt följande kod till WPCode-textredigeraren:

function wpb_posts_nav(){
    $next_post = get_next_post();
    $prev_post = get_previous_post();
     
    if ( $next_post || $prev_post ) : ?>
     
        <div class="wpb-posts-nav">
            <div>
                <?php if ( ! empty( $prev_post ) ) : ?>
                    <a href="<?php echo get_permalink( $prev_post ); ?>">
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
                                <?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                        <div>
                            <strong>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
                                <?php _e( 'Previous article', 'textdomain' ) ?>
                            </strong>
                            <h4><?php echo get_the_title( $prev_post ); ?></h4>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
            <div>
                <?php if ( ! empty( $next_post ) ) : ?>
                    <a href="<?php echo get_permalink( $next_post ); ?>">
                        <div>
                            <strong>
                                <?php _e( 'Next article', 'textdomain' ) ?>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
                            </strong>
                            <h4><?php echo get_the_title( $next_post ); ?></h4>
                        </div>
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
                                <?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
        </div> <!-- .wpb-posts-nav -->
     
    <?php endif;
}

Här är hur det kan se ut på din skärm:

Innan aktivering, scrolla ner till avsnittet ‘Infogning’ för att kontrollera inställningarna.

Se här till att ‘Infogningsmetod’ är inställd på ‘Automatisk infogning’ och ‘Plats’ är ‘Kör överallt.’

Sedan kan du scrolla upp igen och växla knappen från ‘Inaktiv’ till ‘Aktiv.’

Glöm inte att klicka på knappen ‘Spara kodsnutt’ eller ‘Uppdatera’ för att aktivera din nya funktion.

Nu när funktionen är skapad behöver vi skapa en andra kodsnutt för att tala om exakt var WordPress ska visa den på sidan. Genom att dela upp detta i två kodsnuttar skapar vi säkert funktionen först och kan sedan enkelt placera den utan att överbelasta din webbplats eller bryta din layout.

Låt oss gå tillbaka till sidan Kodsnuttar » + Lägg till kodsnutt.

Återigen, under alternativet ‘Lägg till din anpassade kod (ny kodsnutt)’ klickar du på ‘+ Lägg till anpassad kodsnutt.’

I popup-fönstret som visas kommer WPCode att fråga efter din kodtyp.

Du kan välja ‘PHP-kodsnutt.’

Detta öppnar samma textredigerare som tidigare.

Ge ditt nya anpassade utdrag ett beskrivande namn så att du enkelt kan referera till det senare.

Nu kan du kopiera och klistra in följande kod i WPCode-textredigeraren. Den här koden talar om för WordPress var navigeringen med den markerade bilden ska visas.

wpb_posts_nav();

Här är hur det kan se ut på din skärm:

När det är gjort vill du scrolla ner till avsnittet 'Insertion' och klicka på rullgardinsmenyn bredvid 'Location'.

Gå härifrån till 'Sid-specifik' och välj 'Infoga efter inlägg'. På så sätt visas miniatyrbilderna korrekt bredvid länkarna.

Slutligen kan du aktivera ‘Aktiv’ och klicka på ‘Spara utdrag’ (eller ‘Uppdatera’).

Efter att ha sparat dina ändringar kan du använda den här funktionen i mallen där du vill visa länkar till föregående och nästa inlägg med miniatyrbilder.

Eftersom du ställde in platsen till 'Infoga efter inlägg' kommer WPCode automatiskt att hantera placeringen åt dig. Det finns inget behov av att redigera dina temafiler.

Och det är allt – du har lagt till och konfigurerat dina miniatyrbilder för föregående och nästa inlägg!

Nu, när du visar ett inlägg på din webbplats, kommer du att se att länkarna för föregående och nästa inlägg längst ner på inlägget nu har miniatyrbilder.

Alternativ: Visa populära inlägg med miniatyrbilder

Ett annat sätt att engagera dina läsare efter att de har läst ett inlägg är att visa en lista över populära inlägg efter varje artikel. Detta gör att dina läsare kan se ditt bästa innehåll istället för bara de föregående och nästa publicerade artiklarna.

Dina populära inlägg innehåller ditt mest framgångsrika innehåll. Att visa dem för dina besökare hjälper till att öka dina sidvisningar och förbättra användarnas engagemang.

Medan länkar för föregående och nästa är utmärkta för kronologisk läsning, tillåter ett verktyg som MonsterInsights dig att automatiskt visa ditt absolut bästa, mest konverterande innehåll för att hålla läsarna engagerade.

På WPBeginner använder vi MonsterInsights för att noga övervaka vår webbplats prestanda. Du kan läsa vår fullständiga recension av MonsterInsights och se varför det är vårt favoritverktyg för att fatta datadrivna beslut.

MonsterInsights populära inlägg-widget erbjuder ett brett utbud av attraktiva teman och många anpassningsalternativ.

Du kan lära dig hur enkelt det är att ställa in detta i vår guide om hur man visar inlägg efter visningar i WordPress.

Eller så kan du se vår guide om hur man lägger till anpassade widgetar efter inlägg i WordPress, där du kan lära dig hur du lägger till olika typer av innehåll i slutet av varje blogginlägg.

Vanliga frågor om miniatyrbilder för inläggsnivåer

Har du frågor om att lägga till miniatyrbilder i din inläggsnavigering? Här är några av de saker som läsare ofta frågar innan de börjar.

Bonuslänkar för att använda bilder och andra mediefiler i WordPress

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du använder miniatyrbilder med länkar till föregående och nästa inlägg i WordPress.

Därefter kanske du också vill lära dig:

• Hur man beskär och redigerar WordPress-miniatyrbilder för inlägg
• Hur man lägger till miniatyrbilder för utvalda videor i WordPress
• Bild Alt-text vs Bildtitel i WordPress
• Hur man fixar att utvalda bilder inte visas i WordPress
• Hur man optimerar bilder för webbprestanda utan att förlora kvalitet

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.