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.
Carolyn
Hey there! This article is awesome! It was easy to get it all plugged in… however, do you know how to set it so that the previous/next navigates only within the category instead of navigating between ALL posts from all categories?
WPBeginner Support
The code for that is in our article just before the Styling section
Administratör
Shanna
I created a WP.org website and I have 4 post per page. I don’t see a next page at the bottom of my page. I have over 20 blog posts. How can I see more blog posts or go to the next page?
WPBeginner Support
If you are using pages instead of posts, you would not see a next page option, we would recommend taking a look at our guide below for understanding how pages work compared to posts.
https://www.wpbeginner.com/beginners-guide/what-is-the-difference-between-posts-vs-pages-in-wordpress/
This guide would show how to go through posts with previous and next links.
Administratör
Kristi Borst
Thanks for your article. Very helpful. How would I edit the call to limit the title to xx number of characters followed by eclipse ”…”? I tried using css but nothing I did worked.
WPBeginner Support
At the moment we do not have a beginner friendly way to set that up at the moment and that would require editing the code, not the CSS. If we find a way we would recommend we will be sure to share!
Administratör
George Okinda
Awesome! this helped. Thanks and God bless you all in Christ Jesus
WPBeginner Support
You’re welcome, glad our guide was helpful!
Administratör
Jennifer
Hello,
So, how would the code look if you wanted to use a shortcode instead of adding it to the single.php file? I am using GeneratePress and I want to add a hook to my post pages.
Would it look like this?
add_shortcode( ’posts-nav’, ’prev_add_next_blogs’ );
the_post_navigation(
array(
’prev_text’ => __( ’← %title’ ),
’next_text’ => __( ’%title →’ ),
’in_same_term’ => true,
’taxonomy’ => __( ’category’ ),
) );
add_action( ’init’, ’prev_add_next_blogs’ );
This did not work for me, any help would be greatly appreciated.
Thank you
Jennifer
WPBeginner Support
You would want to place the add_shortcode below the code for one likely reason if you have not tested so far.
Administratör
Ciprian Popescu
This is a good tutorial and I have just implemented it on my blog. It will definitely help with user retention and bounce rate.
The Full Site Editor will never be able to do this using HTML only. That’s why having the code in functions.php (or, even better, in another PHP file called from functions.php) will always work. The function could be coded as a shortcode (with a slight modification to return data instead of echoing it):
`add_shortcode( ’posts-nav’, ’wpb_posts_nav’ );`
And then adding it to every post, as a shortcode block (for the Block Editor).
WPBeginner Support
Thank you for your feedback on an alternative option!
Administratör
WPBeginner Support
For what it sounds like you’re wanting, you would want to add in_same_term to the post navigation code similar to the code below:
the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
'next_text' => true,
) );
Administratör
Bipo
Hello,
thanks for this tutorial.
While I’m trying to have thumbnail thing working with Divi (images are not shown), I would ask if it is posssible to add the category/taxonomy filter to this code too.
I mean: is it possible to show links and thumbs only when pages are in the same category?
(I’ve already added category to pages and the_post_navigation works )
Henrik Blomgren
Hi, great tutorial. For old style Wordpress.
Now if I wanted to do the image thumbnail post navigation next previous with the new thing in Wordpress. The Full Site Editing?
How would I go around doing this tutorial with that?
WPBeginner Support
Unless we hear otherwise, we would still recommend this method with the full site editor but we will certainly take a look and update the article as needed!
Administratör
Henrik Blomgren
Thank you very much for your reply. I forgot you still have full access to functions.php so the code will absolutely work.
Just that getting it into the single.html file is why my brain shut down. Since having to use single.php as the fallback for single posts feels a little weird.
So yes, please either update the article when time has been found or if possible please point me in the direction of how to use the function written in php in our html template.
Tina Filipčič
Thank you. It helps a lot. I only have this problem now: the navigation is displayed on both – pages and posts. How to make it display on posts only?
WPBeginner Support
The simplest method would be to have a template for your pages that does not use this, you can see more on our guide below about the template hierarchy:
https://www.wpbeginner.com/wp-themes/wordpress-template-hierarchy-explained/
as well as our guide below about creating a child theme:
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
Administratör
Tina Filipčič
Hello,
I solved the problem by adding this:
let page = document.querySelector(’.page’);
page.querySelector(’.wpb-posts-nav’).style = ”display:none”