Hur man lägger till Nästa / Föregående länkar i WordPress (ultimat guide)

Har du någonsin läst ett blogginlägg och önskat ett enkelt sätt att hoppa till nästa?

Det är där nästa/föregående länkar kommer till nytta. Dessa enkla navigationslänkar håller läsarna engagerade genom att guida dem till mer innehåll på din webbplats utan att de behöver leta efter det.

Som standard inkluderar WordPress länkar till nästa och föregående inlägg, men beroende på ditt tema kanske de inte är synliga eller stilade på det sätt du vill.

Men du behöver inte oroa dig eftersom vi har dig täckt! Efter att ha testat olika metoder har vi hittat några pålitliga sätt att lägga till och anpassa dessa länkar.

I den här guiden visar vi hur du enkelt lägger till nästa/föregående länkar i WordPress, oavsett om du vill göra det med ett plugin eller lite anpassad kod.

Vad är Nästa / Föregående-länkar i WordPress?

Nästa och föregående länkar är dynamiska navigationslänkar inbyggda i WordPress-teman. De låter användare enkelt flytta mellan inlägg, vilket hjälper dem att upptäcka mer innehåll utan extra klick.

Som standard visas WordPress-blogginlägg i omvänd kronologisk ordning (nyare inlägg först).

Detta innebär att nästa inlägg är det som publicerades efter det aktuella inlägget som en användare tittar på, och föregående inlägg är det som publicerades före det aktuella inlägget.

Nästa/föregående länkar gör det enkelt för användare att navigera mellan enskilda artiklar och arkivsidor för bloggen. Det hjälper dig också att få fler sidvisningar på din blogg.

De flesta WordPress-teman levereras med inbyggda länkar för nästa/föregående inlägg, som automatiskt visas längst ner på varje inlägg. Vissa teman visar dem dock inte, eller så kanske du vill anpassa var och hur de visas på din WordPress-webbplats.

Med det sagt, låt oss titta på hur du enkelt lägger till nästa och föregående länkar i WordPress. Du kan följa länkarna nedan för att hoppa till det avsnitt du väljer:

• Lägga till nästa/föregående länkar till WordPress med ett plugin (enklaste metoden)
• Lägga till nästa/föregående länkar med anpassad kod
• Stilning av nästa/föregående länkar i WordPress
• Lägga till nästa/föregående länkar för inlägg med miniatyrbilder
• Lägga till nästa / föregående länkar till WordPress-sidor
• Bonus: Ta bort nästa och föregående länkar i WordPress

Lägga till nästa/föregående länkar till WordPress med ett plugin (enklaste metoden)

Den här metoden är enkel och rekommenderas för nybörjare som inte är bekväma med att lägga till kod på sina webbplatser.

Först måste du installera och aktivera pluginet CBX Next Previous Article. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Besök sidan Inställningar » CBX Nästa Föregående efter aktivering. Här kan du välja var du vill visa länkarna för nästa och föregående på din webbplats.

Pluginet låter dig visa pilar för nästa och föregående länk på enskilda inlägg, sidor, arkivsidor och mer.

För att göra detta, scrolla ner till sektionen 'Arkivvisningsinställningar' och välj 'Ja' för de områden där du vill visa dessa länkar.

För att göra dina nästa och föregående länkar mer relevanta kan du också välja att visa de nästa och föregående inläggen från samma kategori eller tagg.

Bläddra nu ner till avsnittet ‘Single Article Display Settings’. Du kommer att se att Posts och Pages redan är valda som standardposttyper där dina pilar kommer att visas.

Om du bara vill visa en pil för antingen föregående eller nästa inlägg, välj då alternativet 'Föregående' eller 'Nästa' i inställningen 'Visa inlägg'.

Men om du vill visa båda pilarna, välj alternativet 'Ja' i inställningen 'Visa båda pilarna'.

Den kostnadsfria versionen av pluginet tillåter dig bara att visa pilar för nästa och föregående artiklar. Du kan uppgradera till pro-versionen för att låsa upp andra visningsalternativ, som en popup som glider in.

Därefter kan du välja en pilstil från rullgardinsmenyn i avsnittet 'Pilstilinställningar'.

När du har gjort det ser du en förhandsgranskning av pilarna nedan. Klicka sedan på knappen 'Spara inställningar'.

Om du väljer att visa nästa/föregående inlägg från samma taxonomi, måste du sedan växla till fliken Navigera efter taxonomi.

Välj här vilken taxonomi du vill använda för att välja länkarna till nästa och föregående inlägg. Klicka sedan bara på knappen 'Spara inställningar'.

Pluginet tillåter dig också att spåra klick med Google Analytics. För att använda den här funktionen måste du först installera Google Analytics i WordPress.

Därefter, växla till fliken Google Analytics i plugininställningarna och aktivera alternativen för klickspårning.

Du kan sedan lämna resten av inställningarna som de är eller konfigurera dem enligt dina önskemål. När du är klar klickar du helt enkelt på knappen 'Spara inställningar' för att spara dina ändringar.

Du kan nu besöka din WordPress-webbplats för att se nästa/föregående länkar i praktiken.

Denna metod är enklare, men den ger dig inte mycket flexibilitet. Till exempel visar gratisversionen av pluginet inte titeln på nästa eller föregående inlägg.

Lägga till nästa/föregående länkar med anpassad kod

Om du letar efter ett mer flexibelt och anpassningsbart sätt att lägga till navigeringslänkar, då är denna metod för dig. För att lägga till länkarna för nästa/föregående inlägg måste du redigera dina WordPress-temafiler.

Detta kan vara extremt riskabelt, eftersom det minsta fel kan göra din webbplats otillgänglig.

Det är här WPCode kommer in. Det är det bästa pluginet för kodavsnitt i WordPress eftersom det låter dig lägga till anpassad kod säkert utan risk att bryta din webbplats.

För mer information, se vår WPCode-recension.

Först måste du installera och aktivera pluginet WPCode. För detaljer, se vår handledning om hur man installerar ett WordPress-plugin.

Efter aktivering, besök sidan Kodavsnitt » +Lägg till avsnitt från WordPress-instrumentpanelen. Klicka här på knappen ‘+ Lägg till anpassat avsnitt’ under alternativet ‘Lägg till din anpassade kod (Nytt avsnitt)’.

Detta kommer att leda dig till sidan 'Skapa anpassad kodsnutt', där du kan börja med att lägga till en titel för din kod.

Välj sedan ‘PHP Snippet’ som kodtyp från rullgardinsmenyn till höger.

Lägg sedan till följande anpassade kod i rutan 'Code Preview':

<?php the_post_navigation(); ?> 

Därefter, bläddra ner till avsnittet 'Infogning' och välj läget 'Automatisk infogning'.

Din kod kommer att köras automatiskt på din webbplats efter aktivering.

Öppna sedan rullgardinsmenyn 'Plats' och byt till fliken 'Sid-specifik'.

Välj sedan ‘Infoga efter inlägg’ som plats för din kod. Dina länkar för föregående/nästa inlägg kommer nu att visas i slutet av varje inlägg.

Men om du har någon annan position i åtanke kan du välja det alternativet.

Skrolla slutligen tillbaka till toppen och växla omkopplaren ‘Inaktiv’ till ‘Aktiv’.

Klicka sedan på knappen 'Spara kodavsnitt' för att spara dina ändringar.

Du kan nu besöka din WordPress-webbplats för att se Nästa / Föregående länkar i aktion.

Här kommer du att märka att den anpassade koden du lade till endast visar länkarna till nästa och föregående inlägg med inläggstiteln som ankaretext.

Det framhäver inte att detta är länkarna till nästa och föregående artiklar.

Om du vill ändra det kan du lägga till följande anpassade kod i rutan 'Kodförhandsgranskning' istället:

<?php the_post_navigation( array(
 'prev_text'  => __( 'Previous Article: %title' ),
 'next_text'  => __( 'Next Article: %title' ),
 ) );
?>

När du har sparat dina ändringar i WPCode, besök helt enkelt din webbplats.

Så här såg det ut på vår testwebbplats:

Du kan också använda specialtecken och pilar tillsammans med nästa och föregående inläggstitlar.

Ersätt helt enkelt koden med följande:

<?php the_post_navigation( array(
 'prev_text'  => __( '← %title' ),
 'next_text'  => __( '%title →' ),
 ) );
?>

Så här såg den här koden ut på vår testwebbplats:

Nu, låt oss säga att du vill göra de nästa och föregående länkarna mer relevanta för artikeln som användaren för närvarande tittar på.

Du kan göra det genom att visa nästa och föregående länkar från samma kategori eller taggar:

<?php the_post_navigation( array(
 'prev_text'  => __( '← %title' ),
 'next_text'  => __( '%title →' ),
 'in_same_term' => true, 
 'taxonomy'	=> __( 'category' ),
 ) );
?>

Den här koden talar om för WordPress att visa nästa och föregående inlägg i samma kategori. Du kan ändra parametern taxonomy till taggar eller någon annan anpassad taxonomi om det behövs.

Stilning av nästa/föregående länkar i WordPress

Nu när vi har lärt oss hur man lägger till Nästa / Föregående-länkar i WordPress, låt oss titta på hur man stylar dem ordentligt.

Som standard lägger WordPress automatiskt till flera standard CSS-klasser till inläggens navigationslänkar. Du kan använda dessa CSS-klasser i WPCode för att styla dessa länkar.

Gå först till sidan Kodsnuttar » Lägg till kodsnutt från WordPress admin-sidofältet. Klicka sedan på knappen '+ Lägg till anpassad kodsnutt' under alternativet 'Lägg till din anpassade kod (ny kodsnutt)'.

När du väl är på sidan 'Skapa anpassad kodsnutt', lägg till en titel för din kod.

Välj sedan 'CSS-kodavsnitt' som kodtyp från rullgardinsmenyn.

Därefter kan du lägga till följande CSS-kod i din 'Kodförhandsgranskning'-ruta.

Den här grundläggande CSS:en visar helt enkelt länkarna till nästa och föregående inlägg bredvid varandra men på olika sidor av samma rad:

.nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

Du kan också få dina navigeringslänkar att sticka ut genom att lägga till bakgrundsfärg, en hover-effekt och mer.

Här är lite exempel på CSS-kod som du kan använda som utgångspunkt:

.post-navigation {
background-color:#f3f9ff;
padding:0px;
}
.nav-previous, .nav-next{
padding:10px;
font-weight:bold
}
.nav-previous:hover,.nav-next:hover {
background-color:#0170b9;
}
.nav-previous:hover a:link ,.nav-next:hover a:link {
color:#fff;
}

Skrolla nu ner till avsnittet 'Infogning' och välj läget 'Automatisk infogning'.

Din anpassade kod kommer automatiskt att köras vid aktivering.

Fortsätt och växla omkopplaren 'Inaktiv' till 'Aktiv'.

Klicka sedan på knappen 'Spara utdrag' för att lagra dina inställningar.

Besök nu din WordPress-webbplats för att se de stilade länkarna för dina inlägg.

Du kommer att märka att länken nu har lite bakgrundsfärg och en hover-effekt för att göra nästa och föregående länkar mer framträdande.

Lägga till nästa/föregående länkar för inlägg med miniatyrbilder

Om du vill göra dina länkar för nästa/föregående mer framträdande kan du visa miniatyrbilder av inläggen tillsammans med länkarna. Bilder är det enklaste sättet att locka användarens uppmärksamhet och göra dessa länkar mer engagerande.

För att göra detta kan du lägga till anpassad kod i din functions.php-fil, men tänk på att minsta fel kan förstöra din webbplats. Det är därför vi rekommenderar att du använder WPCode även för detta istället.

Efter pluginaktivering, gå till sidan Code Snippets » +Add Snippet och klicka på knappen ‘+ Add Custom Snippet’ under alternativet ‘Add Your Custom Code (New Snippet)’.

När du kommer till sidan 'Skapa anpassad kodsnutt' behöver du lägga till en titel för din kod.

Välj sedan 'PHP-utdrag' som kodtyp från rullgardinsmenyn till höger.

Lägg sedan till följande anpassade kod i rutan 'Code Preview':

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

Den här koden skapar helt enkelt en funktion som visar nästa och föregående inlägg med miniatyrbilder eller inläggstumnails.

När du har angett utdraget kan du aktivera reglaget till 'Aktiv' och klicka på knappen 'Spara utdrag'.

Därefter måste du gå tillbaka till sidan Kodavsnitt » + Lägg till avsnitt och klicka på knappen ‘Använd avsnitt’ under alternativet ‘Lägg till din anpassade kod’.

När sidan 'Skapa anpassad kodsnutt' öppnas, kopiera följande kod och klistra in den i rutan 'Kodförhandsgranskning':

<?php wpb_posts_nav(); ?>

Den här koden bestämmer var du vill visa länkarna.

Se till att välja 'PHP Snippet' från rullgardinsmenyn 'Code Type' också.

Rulla sedan ner till avsnittet 'Infogning' och välj läget 'Automatisk infogning' för automatisk kodkörning.

Du kan också expandera sektionen 'Plats' och växla till fliken 'Sidspecifik'. Härifrån väljer du alternativet 'Infoga efter inlägg' så att miniatyrbilderna visas korrekt bredvid länkarna.

Slutligen kan du växla omkopplaren till ‘Aktiv’ och klicka på knappen ‘Spara avsnitt’.

Nu kan du besöka din webbplats för att se länkarna i aktion.

Nu kanske du märker att dessa länkar inte ser särskilt snygga ut.

Du kan ändra det genom att lägga till lite anpassad CSS med WPCode för att styla dem.

.wpb-posts-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 100px auto;
}
 
.wpb-posts-nav a {
    display: grid;
    grid-gap: 20px;
    align-items: center;
}
 
.wpb-posts-nav h4,
.wpb-posts-nav strong {
    margin: 0;
}
 
.wpb-posts-nav a svg {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}
 
.wpb-posts-nav > div:nth-child(1) a {
    grid-template-columns: 100px 1fr;
    text-align: left;
}
 
.wpb-posts-nav > div:nth-child(2) a {
    grid-template-columns: 1fr 100px;
    text-align: right;
}
 
.wpb-posts-nav__thumbnail {
    display: block;
    margin: 0;
}
 
.wpb-posts-nav__thumbnail img {
    border-radius: 10px;
}

Du kan nu spara dina ändringar och besöka din webbplats för att se nästa och föregående länkar med miniatyrbilder.

Så här såg det ut på vår testwebbplats:

För mer information kan du se vår guide om hur du lägger till miniatyrbilder till länkar för föregående och nästa inlägg i WordPress.

Lägga till nästa / föregående länkar till WordPress-sidor

Normalt används inläggsnavigeringslänkar för blogginlägg i WordPress. Det beror på att dessa objekt publiceras i omvänd kronologisk ordning.

Å andra sidan publiceras WordPress-sidor generellt inte i kronologisk ordning. För mer information, se vår guide om skillnaden mellan inlägg och sidor i WordPress.

Vissa användare kan dock vilja visa sidnavigering för att hjälpa besökare att enkelt hitta nästa sida. De goda nyheterna är att koden vi använde tidigare med WPCode visar de föregående och nästa länkarna för sidor.

Om du vill visa dessa länkar på både sidor och inlägg, behöver du inte göra några ytterligare ändringar.

Men om du bara vill visa länkarna för föregående/nästa sida, gå då till sidan Kodavsnitt » + Lägg till avsnitt .

Välj här alternativet ‘Lägg till din anpassade kod (nytt avsnitt)’.

När du är på sidan 'Skapa anpassad kodsnutt', lägg till en titel för din kodsnutt.

Välj sedan 'PHP-kodsnutt' som kodtyp från rullgardinsmenyn.

Lägg sedan till följande anpassade kod i rutan ‘Code Preview’.

Detta är samma kod som du kan använda för att lägga till länkar för föregående/nästa inlägg:

<?php the_post_navigation( array(
  'prev_text'   => __( '← %title' ),
  'next_text'   => __( '%title →' ),
   ) );
?>

Därefter, scrolla ner till sektionen 'Insertion' och välj läget 'Auto Insert' för automatisk kodkörning.

Du kan också konfigurera placeringen av dina länkar från rullgardinsmenyn ‘Plats’. Om du till exempel väljer ‘Infoga efter inlägg’, kommer dina länkar att visas i slutet av varje sida.

Om du har en annan position i åtanke, välj helt enkelt lämpligt alternativ från rullgardinsmenyn.

Skrolla sedan ner till avsnittet 'Smart villkorsstyrd logik' och aktivera reglaget 'Aktivera logik'.

Välj därefter 'Visa' från rullgardinsmenyn 'Villkor' och klicka på knappen '+ Lägg till ny grupp'.

Detta öppnar några nya inställningar där du måste definiera villkoren för när kodsnutten visas.

Eftersom vi vill visa de föregående/nästa länkarna endast på sidor, öppna den första rullgardinsmenyn och byt till fliken 'Var (sida)' i den vänstra kolumnen.

Välj sedan 'Inläggstyp' från alternativen, välj 'Är' från den mellersta rullgardinsmenyn och välj 'Sidor' från den sista rullgardinsmenyn.

Slutligen, scrolla tillbaka till toppen och växla omkopplaren 'Inaktiv' till 'Aktiv' och klicka på knappen 'Spara kodavsnitt'. Du har nu framgångsrikt lagt till länkarna för föregående/nästa till dina sidor.

Så här såg det ut på vår demosida:

Bonus: Ta bort nästa och föregående länkar i WordPress

Vissa användare kanske vill ta bort de nästa och föregående länkarna i WordPress.

Till exempel kan vissa användare finna att dessa länkar är mindre hjälpsamma. Vissa kanske vill visa relaterade inlägg eller populära inlägg istället.

Det finns två sätt att ta bort nästa och föregående länkar i WordPress.

Metod 1. Ta bort koden i ditt WordPress-tema

För att ta bort länkarna för nästa och föregående i WordPress måste du ta bort koden som ansvarar för att visa länkarna i ditt WordPress-tema.

Problemet med detta tillvägagångssätt är att så snart du uppdaterar ditt tema, kommer den borttagna koden att komma tillbaka om den var en del av originaltemat.

För att undvika detta behöver du skapa ett barn-tema.

Därefter behöver du hitta koden som ansvarar för att visa länkarna för nästa och föregående i ditt föräldratema.

Vanligtvis finns den inuti mallarna single.php eller content-single.php.

I grund och botten letar du efter koden som inkluderar följande funktion:

<?php the_post_navigation() ?> 

Den här koden kan ha ett något annorlunda format och andra parametrar.

Till exempel, på vår testsida använde temat denna kod för att visa länkarna:

the_post_navigation(
				array(
					'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
					'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
				)
			);

Om du använder ett barn-tema måste du duplicera den här specifika mallen i ditt barn-tema och sedan ta bort raderna som används för att visa länkarna till nästa eller föregående inlägg.

Om du hellre vill ta bort den i ditt föräldratema kan du göra det också.

Att ta bort koden kommer att stoppa WordPress från att visa länkarna för nästa och föregående.

Metod 2. Dölj länkarna för nästa och föregående inlägg

Den här metoden tar inte bort länkarna för nästa och föregående. Istället gör den dem bara osynliga för mänskliga läsare.

Lägg helt enkelt till följande anpassade CSS i ditt WordPress-tema:

nav.navigation.post-navigation {
    display: none;
}

Glöm inte att spara dina ändringar.

Besök sedan din webbplats för att se navigationslänkarna försvinna.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till länkar för nästa och föregående i WordPress. Du kanske också vill se vår guide om hur man använder WordPress blockmönster och vår lista över väsentliga tips för att använda kortkoder i WordPress.

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.