Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man nächste / vorherige Links in WordPress hinzufügt (Ultimative Anleitung)

Möchten Sie nächste / vorherige Links in WordPress hinzufügen?

Nächste und vorherige Links sind dynamische Links, die es den Nutzern ermöglichen, den nächsten oder vorherigen Beitrag zu sehen.

In diesem Artikel zeigen wir Ihnen, wie Sie in WordPress ganz einfach nächste/vorherige Links hinzufügen können und wie Sie das Beste aus ihnen machen.

Adding next and previous links in WordPress

Was sind nächste/vorherige Links in WordPress?

Nächste / Vorherige Links sind dynamische Links, die von einem WordPress-Theme hinzugefügt werden und es den Nutzern ermöglichen, einfach zum nächsten oder vorherigen Beitrag zu navigieren. Dies kann dazu beitragen, die Seitenaufrufe zu erhöhen und die Absprungrate zu verringern.

Standardmäßig werden WordPress-Blogbeiträge in umgekehrter chronologischer Reihenfolge angezeigt (neuere Beiträge zuerst).

Das bedeutet, dass der nächste Beitrag derjenige ist, der nach dem aktuellen Beitrag veröffentlicht wurde, den ein Nutzer gerade anschaut, und der vorherige Beitrag ist derjenige, der vor dem aktuellen Beitrag veröffentlicht wurde.

Example of next previous links in a WordPress post

Die Links „Weiter“ und „Zurück“ ermöglichen den Nutzern eine einfache Navigation durch einzelne Artikel und Blog-Archivseiten. Sie helfen Ihnen auch, mehr Seitenaufrufe für Ihr Blog zu erhalten.

Die meisten WordPress-Themes verfügen über integrierte Links zum nächsten und vorherigen Beitrag, die automatisch am Ende jedes Beitrags angezeigt werden. Einige Themes zeigen sie jedoch nicht an, oder Sie möchten vielleicht anpassen, wo und wie sie auf Ihrer WordPress-Website erscheinen.

Sehen wir uns also an, wie man in WordPress ganz einfach nächste und vorherige Links hinzufügen kann.

Im Folgenden finden Sie eine Liste der Themen, die wir in diesem Artikel behandeln werden.

Hinzufügen von nächsten/vorherigen Links zu WordPress mit Hilfe eines Plugins

Diese Methode ist einfacher und wird Anfängern empfohlen, die sich mit dem Hinzufügen von Code zu ihren Websites nicht auskennen.

Zunächst müssen Sie das CBX-Plugin Nächster vorheriger Artikel installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie die Seite Einstellungen “ CBX Next Previous aufrufen. Hier können Sie auswählen, wo auf Ihrer Website der nächste und der vorherige Link angezeigt werden sollen.

Next and previous link plugin settings

Das Plugin ermöglicht es Ihnen, Pfeile für den nächsten und vorherigen Link auf einzelnen Beiträgen, Seiten, Archivseiten und mehr anzuzeigen.

Um die Relevanz Ihrer nächsten und vorherigen Links zu erhöhen, können Sie auch die nächsten und vorherigen Beiträge derselben Kategorie oder desselben Tags anzeigen lassen.

Die kostenlose Version des Plugins ermöglicht Ihnen nur die Anzeige von Pfeilen für den nächsten und vorherigen Artikel. Sie können auf die Pro-Version upgraden, um andere Anzeigeoptionen wie Slide-in-Popups freizuschalten.

Choose arrow color

Wenn Sie die nächsten/vorherigen Beiträge aus derselben Taxonomie anzeigen möchten, müssen Sie zur Registerkarte Navigation nach Taxonomie wechseln.

Hier müssen Sie auswählen, welche Taxonomie Sie für die Auswahl der nächsten und vorherigen Links verwenden möchten.

Taxonomy select

Optional können Sie mit dem Plugin auch Klicks mit Google Analytics verfolgen. Um diese Funktion zu nutzen, müssen Sie zunächst Google Analytics in WordPress installieren.

Wechseln Sie anschließend in den Plugin-Einstellungen auf die Registerkarte Google Analytics und aktivieren Sie die Optionen für die Klickverfolgung.

Enable Google Analytics

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche Einstellungen speichern zu klicken, um Ihre Änderungen zu speichern.

Sie können nun Ihre WordPress-Website besuchen, um die nächsten/vorherigen Links in Aktion zu sehen.

Next / Previous links with arrows

Diese Methode ist einfacher, aber sie bietet Ihnen nicht viel Flexibilität. Zum Beispiel zeigt die kostenlose Version nicht den nächsten oder vorherigen Beitragstitel an.

Wenn Sie mehr Flexibilität brauchen, dann lesen Sie weiter.

Für diese Methode müssen Sie die Dateien Ihres WordPress-Themes bearbeiten. Wenn Sie dies noch nicht getan haben, werfen Sie einen Blick auf unsere Anleitung zum Kopieren und Einfügen von Code in WordPress.

Als Nächstes müssen Sie eine Verbindung zu Ihrer WordPress-Website herstellen , indem Sie einen FTP-Client oder die Dateimanager-App in Ihrem WordPress-Hosting-Control Panel verwenden.

Sobald Sie verbunden sind, müssen Sie zum Ordner /wp-content/themes/ihr-aktuelles-Thema/ navigieren.

Editing single.php template

Jetzt müssen Sie die Datei single.php finden. Dies ist die Datei, die für die Anzeige der einzelnen Beiträge auf Ihrer Website verantwortlich ist.

Einige WordPress-Themes verweisen auf andere Dateien innerhalb der Datei single.php. Diese Dateien werden Template-Teile genannt und befinden sich im Ordner template-parts Ihres WordPress-Themes.

Weitere Einzelheiten finden Sie in unserem Artikel darüber, welche Dateien im WordPress-Theme bearbeitet werden müssen.

Kopieren Sie dann einfach den folgenden Code und fügen Sie ihn an der Stelle in der Vorlagendatei ein, an der Sie die nächsten und vorherigen Links anzeigen möchten.

<?php the_post_navigation(); ?> 

Sie können nun Ihre Änderungen speichern und Ihre Website besuchen, um die Links „Weiter“ und „Zurück“ in Aktion zu sehen.

Simple next and previous links

Das obige Template-Tag zeigt einfach den Link zum nächsten und vorherigen Beitrag mit dem Beitragstitel als Ankertext an. Es besagt nicht, dass dies die Links zu den nächsten und vorherigen Artikeln sind.

Lassen Sie uns dies ein wenig ändern und den Nutzern etwas Kontext zu diesen Links bieten. Dazu fügen wir die verfügbaren Parameter für das Template-Tag the_post_navigation hinzu.

Ersetzen Sie einfach den obigen Code durch den folgenden:

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

Sie können nun Ihre Änderungen speichern und eine Vorschau Ihrer Website anzeigen.

So sah es auf unserer Testseite aus:

Next and previous links with context

Sie können auch Sonderzeichen und Pfeile zusammen mit dem Titel des nächsten und vorherigen Beitrags verwenden.

Ersetzen Sie den Code einfach durch den folgenden:

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

So sah dieser Code auf unserer Test-Website aus:

Next and previous links with arrow

Nehmen wir an, Sie möchten die Links zum nächsten und vorherigen Artikel, den der Benutzer gerade liest, relevanter gestalten.

Sie können dies tun, indem Sie die nächsten und vorherigen Links aus derselben Kategorie oder denselben Tags anzeigen.

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

Dieser Code weist WordPress an, die nächsten und vorherigen Beiträge in derselben Kategorie anzuzeigen. Sie können den Taxonomie-Parameter in Tags oder eine andere benutzerdefinierte Taxonomie ändern, falls erforderlich.

Gestaltung der nächsten/vorherigen Links in WordPress

Nachdem wir nun gelernt haben, wie man in WordPress „Next / Previous“-Links hinzufügt, wollen wir uns ansehen, wie man sie richtig gestaltet.

Standardmäßig fügt WordPress automatisch mehrere Standard-CSS-Klassen zu den Links der Beitragsnavigation hinzu. Sie können diese CSS-Klassen in Ihrem WordPress-Theme verwenden, um diese Links zu gestalten.

Hier sind einige grundlegende CSS, die Sie zu Ihrem Thema hinzufügen können.

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

Dieses einfache CSS zeigt einfach die nächsten und vorherigen Links nebeneinander an, aber auf den verschiedenen Seiten der gleichen Zeile.

Sie können auch Ihre Navigationslinks durch Hinzufügen von Hintergrundfarbe, Hover-Effekt und mehr hervorheben.

Hier finden Sie einige Beispiele für CSS-Code, die Sie als Ausgangspunkt verwenden können.

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

Dieser Code formatiert den Linktext und fügt eine Hintergrundfarbe und einen Hover-Effekt hinzu, um die nächsten und vorherigen Links hervorzuheben.

Next and previous link CSS style

Hinzufügen von nächsten/vorherigen Links zu WordPress-Seiten

Normalerweise werden in WordPress die Links zur Beitragsnavigation für Blogbeiträge verwendet. Das liegt daran, dass diese Artikel in umgekehrter chronologischer Reihenfolge veröffentlicht werden.

Andererseits werden WordPress-Seiten in der Regel nicht in chronologischer Reihenfolge veröffentlicht. Weitere Einzelheiten finden Sie in unserem Leitfaden über den Unterschied zwischen Beiträgen und Seiten in WordPress.

Manche Benutzer müssen jedoch eine Seitennavigation anzeigen, damit sie die nächste Seite leicht finden können.

Glücklicherweise können Sie denselben Code verwenden, den wir zuvor für Seiten verwendet haben. Allerdings müssen Sie den Code in die Vorlage page.php einfügen.

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

So sah es auf unserer Demo-Website aus:

Next and previous links for a WordPress paage

Hinzufügen von nächsten/vorherigen Links in WordPress mit Vorschaubildern

Möchten Sie Ihre nächsten und vorherigen Links auffälliger gestalten? Bilder sind der einfachste Weg, um die Aufmerksamkeit der Nutzer zu erregen und diese Links interessanter zu gestalten.

Fügen Sie die Links „Nächster“ und „Vorheriger“ mit einem Thumbnail oder einem Bild d aneben hinzu.

Zunächst müssen Sie den folgenden Code in die Datei functions.php des Themes oder in ein site-spezifisches Plugin einfügen.

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

Dieser Code erstellt einfach eine Funktion, die den nächsten und den vorherigen Beitrag mit einem Bild oder einer Miniaturansicht anzeigt.

Als nächstes müssen Sie die Funktion wpb_posts_nav() in die Datei single.php Ihres Themes einfügen, in der Sie die Links anzeigen möchten.

Wenn Ihr Theme bereits Links zu „next“ und „previous“ hat, sollten Sie die Zeile finden, die die Funktion the_post_navigation() enthält, und diese löschen.

Remove existing post navigation code

Fügen Sie nun den folgenden Code ein, um die benutzerdefinierten Links „Weiter“ und „Zurück“ anzuzeigen.

<?php wpb_posts_nav(); ?>

Nachdem Sie den Code hinzugefügt haben, vergessen Sie nicht, Ihre Änderungen zu speichern und Ihre Website zu besuchen, um die Links in Aktion zu sehen.

Next and previous links without styling

Sie werden feststellen, dass diese Links nicht sehr sauber aussehen.

Ändern wir das, indem wir einige benutzerdefinierte CSS hinzufügen, um sie zu gestalten.

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

Sie können nun Ihre Änderungen speichern und Ihre Website besuchen, um die nächsten und vorherigen Links mit Miniaturansichten anzuzeigen.

So sah es auf unserer Testseite aus:

Next and previous links with thumbnails

Weitere Einzelheiten finden Sie in unserer Anleitung zum Hinzufügen von Miniaturbildern zu den Links für vorherige und nächste Beiträge.

Bonus: Nächste und vorherige Links in WordPress entfernen

Einige Benutzer möchten vielleicht die Links zum nächsten und vorherigen Eintrag in WordPress entfernen.

Manche Nutzer finden diese Links zum Beispiel weniger hilfreich. Manche möchten stattdessen verwandte Beiträge oder beliebte Beiträge anzeigen.

Es gibt zwei Möglichkeiten, wie Sie in WordPress die nächsten und vorherigen Links entfernen können.

Methode 1. Löschen Sie den Code in Ihrem WordPress-Theme

Um die nächsten und vorherigen Links in WordPress zu entfernen, müssen Sie den Code entfernen, der für die Anzeige der Links in Ihrem WordPress-Theme verantwortlich ist.

Das Problem bei diesem Ansatz ist, dass der gelöschte Code wieder auftaucht, sobald Sie Ihr Thema aktualisieren.

Um dies zu vermeiden, müssen Sie ein Child-Theme erstellen.

Als Nächstes müssen Sie den Code finden, der für die Anzeige der nächsten und vorherigen Links in Ihrem übergeordneten Thema verantwortlich ist.

Normalerweise befindet sie sich in den Vorlagen single.php oder content-single.php.

Im Wesentlichen suchen Sie nach dem Code, der die folgende Funktion enthält.

<?php the_post_navigation() ?> 

Dieser Code kann ein etwas anderes Format und andere Parameter haben. Auf unserer Testseite verwendete das Thema beispielsweise diesen Code, um die Links anzuzeigen:

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

Wenn Sie ein Child-Theme verwenden, müssen Sie diese spezielle Vorlage in Ihrem Child-Theme duplizieren und dann die Zeilen löschen, die für die Anzeige der nächsten oder vorherigen Links verwendet werden.

Wenn Sie es lieber einfach in Ihrem übergeordneten Thema löschen möchten, können Sie auch das tun.

Das Löschen des Codes verhindert, dass WordPress den nächsten und vorherigen Link anzeigt.

Methode 2. Die Links zu den nächsten und vorherigen Beiträgen ausblenden

Bei dieser Methode werden die nächsten und vorherigen Links nicht wirklich entfernt. Stattdessen werden sie für menschliche Leser einfach unsichtbar gemacht.

Fügen Sie einfach das folgende benutzerdefinierte CSS zu Ihrem WordPress-Theme hinzu.

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

Vergessen Sie nicht, Ihre Änderungen zu speichern und Ihre Website zu besuchen, um zu sehen, wie die Navigationslinks verschwinden.

Remove next previous links in WordPress using CSS

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie in WordPress ganz einfach nächste und vorherige Links hinzufügen können. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur Auswahl der besten Webdesign-Software oder unseren Expertenvergleich der besten Domain-Registrierungsstellen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

18 KommentareEine Antwort hinterlassen

  1. 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?

  2. 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!

      Admin

  3. George Okinda

    Awesome! this helped. Thanks and God bless you all in Christ Jesus

    • WPBeginner Support

      You’re welcome, glad our guide was helpful!

      Admin

  4. 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.

      Admin

  5. 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!

      Admin

  6. 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,
    ) );

    Admin

  7. 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 )

  8. 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!

      Admin

      • 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.

  9. 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?

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.