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?

Kort sagt, miniatyrbilder gör omedelbart dina navigeringslänkar mer iögonfallande och klickbara. De kan uppmuntra läsare att fortsätta utforska din webbplats.

Din WordPress-blogg erbjuder några användbara funktioner som hjälper besökare att hitta nytt innehåll och navigera på din webbplats. Dessa funktioner inkluderar:

• navigeringsmenyer
• en sökfält, och
• en widget för inläggsarkiv.

En annan användbar navigeringsfunktion finns längst ner på varje blogginlägg. Där hittar du länkar till ditt webbplatsens 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 bäst presterande eller populära blogginlägg.

Till exempel kanske du har grundläggande innehåll som redan genererar mycket trafik och konverterar dessa läsare till e-postprenumeranter. Att lägga till miniatyrbilder 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:

• Using Thumbnails with Previous and Next Post Links in WordPress
• Alternativ: Visa populära inlägg med miniatyrbilder
• Vanliga frågor om miniatyrbilder för inläggsnivåer
• Bonuslänkar: Använda bilder och andra mediefiler i WordPress

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 miniatyrbilder 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. Om du inte har gjort detta tidigare, se vår guide om hur man kopierar och klistrar in kod i WordPress.

Lägga till kod med WPCode

Det första steget är att lägga till följande kodavsnitt med hjälp av WPCode, det bästa pluginet för kodavsnitt. Det låter dig lägga till kod utan att bryta din webbplats och kommer med gott om färdiga mallar, så du behöver inte skriva kod från grunden.

På våra partnervarumärkens 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 kompletta WPCode-recension för att utforska dess funktioner.

För att komma igång måste du installera och aktivera WPCode-pluginet. Om du behöver hjälp kan du läsa vår artikel om hur man installerar ett WordPress-plugin.

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

Klicka sedan på knappen 'Lägg till ny'.

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 tumnaglar till länkarna för föregående och nästa inlägg, laddar vi upp en sträng med anpassad kod. Så, låt oss klicka på 'Använd kodavsnitt' under 'Lägg till din anpassade kod (Nytt kodavsnitt)'.

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

Här vill du välja 'PHP-avsnitt'.

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;
}

När du har angett kodavsnittet kan du växla knappen från 'Inaktiv' till 'Aktiv'.

Det bör se ut så här.

Detta gör att koden fungerar.

Sedan kan du helt enkelt klicka på knappen 'Uppdatera'.

Nu måste vi gå tillbaka till sidan Kodavsnitt » + Lägg till kodavsnitt.

Återigen, under alternativet 'Lägg till din anpassade kod (nytt utdrag)', väljer du 'Använd utdrag'.

Se till att välja ‘PHP Snippet’ i popup-fönstret som visas.

Därefter kan du ge det ett beskrivande namn så att du enkelt kan hänvisa till det senare.

Nu kan du kopiera följande kod och klistra in den i WPCode-textredigeraren.

wpb_posts_nav();

Den här koden talar om för WordPress var navigeringen med den utvalda bilden ska visas.

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å '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.

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 kommer att bygga förtroende, förbättra socialt bevis och säkerställa att dina besökare stannar kvar på din webbplats längre.

När du tittar på den första metoden i vår guide om hur man visar inlägg efter visningar i WordPress, kommer du att lära dig hur enkelt det är att lägga till populära inlägg med hjälp av MonsterInsights-pluginet.

På WPBeginner använder vi MonsterInsights för att hålla ett öga på vår webbplats prestanda. Du kan se vår fullständiga MonsterInsights-recension och se varför det är vårt verktyg för att fatta datadrivna beslut!

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

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.

Kan jag ändra storleken på miniatyrbilderna?

Absolut! I det första kodavsnittet, leta efter raderna som innehåller [ 100, 100 ]. Dessa siffror representerar bredden och höjden i pixlar. Byt bara ut dem mot de dimensioner som fungerar bäst med ditt temas design.

Kommer miniatyrbilder med kod att sakta ner min webbplats?

Inte alls. Koden är lättviktig och byggd med prestanda i åtanke, så du bör inte märka någon nedgång. Dessutom ser WPCode till att kodavsnittet bara laddas på enskilda inläggssidor där det behövs.

Vad händer om ett inlägg inte har en utvald bild?

Inga problem. Om ett länkat inlägg inte har en utvald bild, kommer koden bara att visa textlänken istället. Med det sagt, att ställa in en utvald bild för varje inlägg hjälper till att hålla din webbplats polerad och konsekvent.

Är det bättre att visa länkar till föregående/nästa eller en sektion med populära inlägg?

Det beror på ditt mål. Länkar till föregående och nästa sida är utmärkta för att guida läsare genom relaterat innehåll i ordning.

Men om du vill att folk ska fortsätta att bläddra bland dina toppartiklar, kan en sektion med populära inlägg (med ett verktyg som MonsterInsights) göra underverk.

Bonuslänkar: 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 en bakgrundsbild i WordPress
• Hur man lägger till miniatyrbilder för utvalda videor i WordPress
• Hur man lägger till en widget för ljudmusikspelare i WordPress
• Hur man lägger till PDF-indexering och sökning 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 då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.