Så här addar du nästa/förra links i WordPress (Ultimate Guide)

Vill du lägga till nästa / föregående länkar i WordPress?

Next and previous links är dynamiska links som allow användare att view nästa inlägg eller föregående inlägg.

I den här artikeln visar vi dig hur du enkelt kan add to nästa/förra links i WordPress och hur du får ut så mycket som möjligt av dem.

Vad är nästa / föregående länkar i WordPress?

Nästa / Föregående länkar är dynamiska länkar som läggs till av ett WordPress-tema som gör det möjligt för användare att enkelt navigera till nästa eller föregående inlägg. Detta kan bidra till att öka sidvisningar och minska din avvisningsfrekvens.

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

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

Next/previous links allow users to easily navigate individual articles and blog archive pages. Det hjälper dig också att få fler sidvisningar på din blogg.

De flesta WordPress themes kommer med built-in next and föregående inlägg links som automatiskt visas längst ner i varje inlägg. Vissa themes visar dock inte dem, eller så kanske du vill customize var och hur de visas på din WordPress website.

Med detta sagt, låt oss ta en titt på hur du enkelt kan add to nästa och föregående links i WordPress.

Följare är en lista över ämnen som vi kommer att täcka i den här artikeln.

• Lägga till nästa/förra länkar i WordPress med hjälp av ett plugin
• Lägga till nästa/förra länkar till ett WordPress Theme
• Styling av nästa/förra links i WordPress
• Lägga till nästa/förra links på pages
• Lägga till nästa/förra länkar med thumbnails
• Ta bort nästa/förra links i WordPress

Lägga till nästa/förra länkar i WordPress med hjälp av ett plugin

Den här metoden är enklare och rekommenderas för Beginnare som inte är bekväma med att lägga till kod på sina websites.

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

Efter aktivering måste du besöka Settings ” CBX Next Previous page. Härifrån kan du välja var du vill visa nästa och föregående links på din website.

Pluginet allow you to show Next and Previous link arrows on single posts, pages, archive pages, and more.

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

Den gratis 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 displayalternativ som slides-in popup.

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

Härifrån måste du välja vilken taxonomi du vill använda för att select nästa och föregående links.

Alternativt tillåter pluginet dig också att spåra clicks med hjälp av Google Analytics. För att använda den här funktionen måste du först installera Google Analytics i WordPress.

Efter det, växla till Google Analytics tabs i plugin inställningar och aktivera click tracking alternativ.

När du är slutförd, glöm inte att klicka på knappen Save Settings för att lagra dina ändringar.

You can now visit your WordPress website to see the next/previous links in action.

Den här metoden är enklare men den ger dig ej mycket flexibilitet. Till exempel visar den gratis versionen inte titeln på nästa eller föregående inlägg.

Om du behöver mer flexibilitet, fortsätt då att Läsa.

Lägga till nästa/förra länkar till ett WordPress Theme

För den här metoden måste du editera dina WordPress theme-filer. Om du inte har gjort det tidigare kan du ta en titt på vår guide om hur du copy and paste kod i WordPress.

Därefter måste du ansluta till din WordPress-webbplats med en FTP-klient eller genom att använda appen File Manager i din kontrollpanel för WordPress webbhotell.

När du är ansluten måste du navigera till /wp-content/themes/your-current-theme/ folder.

Nu måste du lokalisera filen single.php. Det här är filen som är responsiv för att visa objekten för enskilda inlägg på din website.

Vissa WordPress teman kan referera till andra filer inuti single.php-filen. Dessa filer anropas template parts och är placerade i template-parts folder i your WordPress theme.

För mer detaljer, se vår artikel om vilka filer som ska editeras i WordPress Theme.

Följaktligen är det bara att copy and paste följande kod på den location i template-filen där du vill visa nästa och föregående links.

<?php the_post_navigation(); ?> 

You can now save your changes and visit your website to see Next / Previous links in action.

Ovanstående template tagg kommer helt enkelt att visa länken till nästa och föregående inlägg med inläggets titel som ankartext. Det står inte att det här är länkarna till nästa och föregående artiklar.

Låt oss ändra detta lite och ge användarna lite sammanhang om dessa länkar. Vi gör detta genom att lägga till de tillgängliga parametrarna för template taggen the_post_navigation.

Byt helt enkelt ut koden ovan mot följande:

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

Nu kan du save dina ändringar och previewa din website.

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

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

Ersätt helt enkelt koden med följande:

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

Så här såg koden ut på vår test website:

Låt oss nu säga att du vill göra nästa och föregående länkar mer relevanta för den artikel som användaren för närvarande viewar.

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' ),
 ) );
?>

Denna kod säger till WordPress att visa nästa och föregående inlägg i samma kategori. Du kan ändra taxonomi parameter till taggar eller någon annan customize taxonomi om det behövs.

Styling av nästa/förra links i WordPress

Nu när vi har lärt oss hur man add to Next / Previous links i WordPress, låt oss ta en titt på hur man stylar dem ordentligt.

Som standard lägger WordPress automatiskt till flera standard CSS-klasser till länkarna för navigation i posterna. Du kan använda dessa CSS-klasser i ditt WordPress-tema för att utforma dessa länkar.

Här är några grundläggande CSS som du kan add to your theme.

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

Denna grundläggande CSS visar helt enkelt nästa och föregående länkar bredvid varandra men på olika sidor av samma rad.

Du kan också få dina links i navigationen att sticka ut genom att lägga till bakgrundsfärg, hover-effekt med mera.

Här är några 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;
}

Den här koden formaterar länktexten och add to lite bakgrundsfärg och hover-effekt för att göra nästa och föregående links mer framträdande.

Lägga till nästa/förra länkar till WordPress pages

Normalt används post navigation links för blogginlägg i WordPress. Det beror på att dessa objekt publiceras i omvänd kronologisk order.

WordPress Pages publiceras däremot allmänt inte i kronologisk order. För mer details, se vår guide om skillnaden mellan posts och pages i WordPress.

Vissa användare kan dock behöva visa navigation på sidan så att de enkelt kan hitta nästa page.

Lyckligtvis kan du använda samma kod som vi använde tidigare för pages. Du måste dock lägga till koden i page.php template.

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

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

Lägga till nästa/förra länkar i WordPress med thumbnails

Vill du göra dina nästa och föregående links mer notice? Images är det enklaste sättet att dra till sig användarnas uppmärksamhet och göra dessa links mer engagerande.

Låt oss add to nästa och föregående links med inläggsminiatyr eller featured image bredvid dem.

Först måste du add to följande kod till temats functions.php-fil eller ett site-specifikt plugin.

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 featured images eller inläggsminiatyrer.

Därefter måste du add to wpb_posts_nav( )-funktionen till ditt temas single.php-fil där du vill displayed links.

Om your theme redan har next och previous links, då kanske du vill hitta raden som innehåller funktionen_post_navigation() och ta bort den.

Add to följande kod för att visa dina customize nästa och föregående länkar.

<?php wpb_posts_nav(); ?>

När du har lagt till koden, glöm inte att save dina ändringar och besök din website för att se links i action.

Now, you may notice that these links don’t look very clean.

Låt oss ändra det genom att lägga till lite custom CSS 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;
}

You can now save your changes and visit your website to view next and previous links with thumbnails.

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

För mer details, you can see our guide on how to add thumbnails to previous and next post links.

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

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

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

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

Metod 1. Delete koden i ditt WordPress Theme

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

Problemet med detta tillvägagångssätt är att så snart du uppdaterar ditt theme kommer den borttagna koden att komma tillbaka.

För att undvika detta måste du skapa ett barntema.

Därefter måste du hitta koden som är responsiv för att visa nästa och föregående links i ditt huvudtema.

Vanligtvis finns den i templates single.php eller content-single.php.

I grund och botten kommer du att leta efter koden som innehåller följande funktion.

<?php the_post_navigation() ?> 

Den här koden kan ha ett något annorlunda format och parametrar. På vår testsite använde temat till exempel den här koden för att visa links:

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 barntema måste du duplicera den här vissa templates i ditt barntema och sedan ta bort de rader som används för att visa nästa eller föregående links.

Om du hellre vill bara ta bort det i ditt huvudtema, kan du göra det också.

Om du borttar koden kommer WordPress inte längre att kunna visa nästa och föregående links.

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

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

Lägg bara till följande Custom CSS i ditt WordPress theme.

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

Glöm inte att save dina ändringar och besök din website för att se att navigationens links försvinner.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till nästa och föregående links i WordPress. Du kanske också vill se vår guide om hur du väljer den bästa programvaran för webbdesign, eller vår expertjämförelse av de bästa domänregistratorerna.

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.