Så här addar du thumbnails till länkar till föregående och nästa inlägg i WordPress

Som standard visar WordPress länkar till föregående och nästa inlägg längst ner i varje inlägg för enkel navigation.

Att lägga till miniatyrer till dessa länkar kan göra stor skillnad för din WordPress bloggs användarupplevelse. Denna enkla förändring kan fånga din Läsares öga och få dem att stanna kvar på din webbplats längre.

I den här artikeln przewodnikar vi dig om hur du lägger till miniatyrer till länkar till föregående och nästa inlägg i WordPress för att ge din webbplats ett visuellt lyft.

Varför visa inläggsminiatyrer med föregående och nästa inläggs länkar?

Din WordPress blogg erbjuder några utvalda funktioner som hjälper besökare att hitta nytt innehåll och navigera på din webbplats. Dessa funktioner inkluderar navigationsmenyer, ett sökfält och ett widget för arkiv för inlägg.

En annan användbar funktion för navigation finns längst ner i varje blogginlägg i WordPress. Där hittar du länkar till webbplatsens föregående inlägg och nästa inlägg.

Dessa länkar skapar engagemang hos användarna, för när besökarna slutfört läsningen av ett blogginlägg kanske de letar efter något annat att läsa. Men om du lägger till miniatyrer kommer länkarna att se mer interaktiva ut.

Det är också ett bra sätt att uppmärksamma dina bäst utförda blogginlägg.

Du kan till exempel ha ett innehåll som redan driver massor av trafik och konverterar dessa läsare till prenumeranter på e-post. Att lägga till miniatyrer med inläggslistor skulle bara hjälpa dig att bygga din lista mailingowa och växa ditt lilla företag.

Med detta i åtanke, låt oss ta en titt på hur du lägger till miniatyrer till länkarna till föregående och nästa inlägg i WordPress.

Använda inläggsminiatyrer med länkar till föregående och nästa inlägg i WordPress

För att add thumbnails till dina föregående och nästa inlägg links, måste du lägga till kod i ditt WordPress temas filer. Om du inte har gjort det tidigare kan du läsa vår guide om hur man copy and paste kod i WordPress.

Lägga till kod med hjälp av WPCode

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

För att komma igång måste du installera och aktivera tillägget WPCode. För mer information kan du kontrollera vår artikel om hur du installerar ett tillägg till WordPress.

Därifrån går du till sidan Code Sn ippets ” + Add Snippet. Klicka sedan på ”Lägg till nytt”.

Du kommer till ett bibliotek med fragment kodu där du kan välja mellan ett stort antal färdiga mallar.

Men för att lägga till miniatyrer i länkarna till 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 fragment kodu” under ”Lägg till din anpassade kod.

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

Kopiera sedan helt enkelt följande kod till textredigeraren WPCode. Se till att markera ”PHP fragment kodu” som ”kodtyp”.

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 fragmentet kodu kan du slå på/av knappen från ”Inaktiverad” till ”Aktiv”.

Det ska se ut så här.

Detta aktiverar koden så att den fungerar.

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

Nu måste vi gå tillbaka till Code Sn ippets ” +Add Snippet sida.

Återigen, under alternativet ”Lägg till din anpassade kod”, markerar du ”Använd fragment kod” och namnger den så att du kan hänvisa tillbaka till den senare.

Följaktligen kan du kopiera följande kod och klistra in den i WPCode:s textredigerare. Se till att markera ”PHP fragment kodu” från rullgardinsmenyn ”Kodtyp” också.

wpb_posts_nav();

Denna kod talar om för WordPress var navigationen med den utvalda bilden ska visas.

Nu vill du rulla ner till sektionen ”Infogare” och klicka på rullgardinsmenyn bredvid ”Plats”.

Härifrån går du till ”Sidospecifik” och väljer ”Infoga efter inlägg”. På så sätt kommer miniatyrerna att visas korrekt bredvid länkarna.

Slutligen kan du slå på/av ”Aktiv” och klicka på ”Uppdatera”.

När du har sparat dina ändringar kan du använda den här funktionen i den mall där du vill visa länkar till föregående och nästa inlägg med miniatyrer.

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

När du nu viewar ett inlägg på din website kommer du att se att föregående och nästa inläggs links längst ner i inlägget nu har thumbnails.

Alternativ: Displaying Popular Posts with Thumbnails (populära inlägg med thumbnails)

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 tillåter dina läsare att se ditt bästa innehåll snarare än bara de föregående och nästa publicerade artiklarna.

Dina populära inlägg innehåller ditt mest framgångsrika innehåll. Genom att visa dem för dina besökare bygger du upp förtroende, förbättrar det sociala beviset och ser till att dina besökare stannar kvar längre på din webbplats.

När du kontrollerar den första metoden i vår guide om hur du visar posterna efter views i WordPress, kommer du att lära dig hur enkelt det är att lägga till populära post med hjälp av pluginet MonsterInsights.

MonsterInsights’ Popular Posts Widget erbjuder ett brett utbud av attraktiva teman och många alternativ för customomize.

Eller så kan du läsa vår przewodnik om hur du 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.

Vi hoppas att den här poradniken hjälpte dig att lära dig hur du använder miniatyrer med länkar till föregående och nästa inlägg i WordPress. Därefter kanske du också vill lära dig hur du beskär och redigerar inläggsminiatyrer i WordPress eller hur du lägger till utvalda videominiatyrer i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.