Haben Sie schon einmal einen Blog-Beitrag gelesen und wollten einfach zum nächsten Beitrag springen?
Hier kommen die Links “Weiter” und “Zurück” ins Spiel. Diese einfachen Links zur Navigation halten die Besucher bei der Stange, indem sie sie zu weiteren Inhalten auf Ihrer Website führen, ohne dass sie danach suchen müssen.
Standardmäßig enthält WordPress Links zu den nächsten und vorherigen Beiträgen, aber je nach Theme sind sie möglicherweise nicht sichtbar oder nicht so gestaltet, wie Sie es wünschen.
Aber kein Grund zur Sorge, denn wir haben für Sie vorgesorgt! Nachdem wir verschiedene Methoden getestet haben, haben wir einige zuverlässige Möglichkeiten gefunden, um diese Links hinzuzufügen und individuell anzupassen.
In dieser Anleitung zeigen wir Ihnen, wie Sie ganz einfach nächste/vorherige Links in WordPress hinzufügen können, egal ob Sie dies mit einem Plugin oder mit ein wenig individuellem Code tun möchten.
Was sind nächste/vorherige Links in WordPress?
Nächste und vorherige Links sind dynamische Navigationslinks, die in WordPress Themes eingebaut sind. Mit ihnen können Benutzer ganz einfach zwischen Beiträgen hin- und herwechseln und so ohne zusätzliche Klicks weitere Inhalte entdecken.
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.
Die Links “Nächster/Vorheriger” ermöglichen den Benutzern eine einfache Navigation durch die einzelnen Artikel und Seiten des Blog-Archivs. Sie helfen Ihnen auch, mehr Seitenaufrufe in Ihrem Blog zu erhalten.
Die meisten WordPress-Themes verfügen über integrierte Links zu den nächsten und vorherigen Beiträgen, die automatisch am Ende eines jeden Beitrags veröffentlicht werden. Einige Themes zeigen sie jedoch nicht an, oder Sie möchten individuell anpassen, wo und wie sie auf Ihrer WordPress-Website angezeigt werden.
Schauen wir uns also an, wie man in WordPress ganz einfach nächste und vorherige Links hinzufügen kann. Folgen Sie den unten stehenden Links, um zu dem Abschnitt Ihrer Wahl zu springen:
- Adding Next / Previous Links to WordPress Using a Plugin (Easiest Method)
- Adding Next / Previous Links Using Custom Code
- Styling Next / Previous Links in WordPress
- Adding Next / Previous Links for Posts with Thumbnails
- Adding Next / Previous Links to WordPress Pages
- Bonus: Remove Next and Previous Links in WordPress
Hinzufügen von Next / Previous Links zu WordPress mit einem Plugin (einfachste Methode)
Diese Methode ist einfach 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 für die Installation eines WordPress Plugins.
Rufen Sie nach der Aktivierung die Seite Einstellungen ” CBX Nächste Vorherige Seite auf. Hier können Sie auswählen, wo auf Ihrer Website die nächsten und vorherigen Links angezeigt werden sollen.
Das Plugin ermöglicht es Ihnen, Pfeile für den nächsten und vorherigen Link auf einzelnen Beiträgen, Seiten, Archivseiten und mehr anzuzeigen.
Blättern Sie dazu zum Abschnitt “Einstellungen für die Anzeige von Archiven” und wählen Sie “Ja” für die Bereiche, in denen Sie diese Links anzeigen möchten.
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.
Scrollen Sie nun nach unten zum Abschnitt “Einstellungen für die Anzeige einzelner Artikel”. Sie werden sehen, dass Beiträge und Seiten bereits als Standard Inhaltstypen ausgewählt sind, in denen Ihre Pfeile veröffentlicht werden.
Wenn Sie nur einen Pfeil für den vorherigen oder den nächsten Beitrag anzeigen möchten, wählen Sie einfach die Option “Vorheriger” oder “Nächster” in der Einstellung “Beitrag anzeigen”.
Wenn Sie jedoch beide Pfeile anzeigen möchten, wählen Sie die Option “Ja” in der Einstellung “Beide Pfeile anzeigen”.
Mit der kostenlosen Version des Plugins können Sie nur Pfeile für den nächsten und vorherigen Artikel anzeigen. Sie können auf die Pro-Version upgraden, um weitere Optionen wie Slide-in Popup freizuschalten.
Danach können Sie einen Pfeilstil aus dem Dropdown-Menü im Abschnitt “Pfeilstil-Einstellungen” auswählen.
Sobald Sie das getan haben, sehen Sie eine Vorschau der Pfeile unten. Klicken Sie dann auf den Button “Einstellungen speichern”.
Wenn Sie die nächsten/vorherigen Beiträge aus derselben Taxonomie anzeigen möchten, müssen Sie zum Tab Nach Taxonomie navigieren wechseln.
Wählen Sie hier die Taxonomie aus, die Sie für die Auswahl der nächsten und vorherigen Links verwenden möchten. Klicken Sie dann einfach auf den Button “Einstellungen speichern”.
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 zum Tab Google Analytics und aktivieren Sie die Optionen für die Klickverfolgung.
Sie können dann die restlichen Einstellungen so belassen, wie sie sind, oder sie nach Ihren Wünschen konfigurieren. Wenn Sie fertig sind, klicken Sie einfach auf den Button “Einstellungen speichern”, um Ihre Änderungen zu speichern.
Sie können nun Ihre WordPress-Website besuchen, um die nächsten/vorherigen Links in Aktion zu sehen.
Diese Methode ist einfacher, aber sie bietet Ihnen nicht viel Flexibilität. Zum Beispiel zeigt die kostenlose Plugin-Version nicht den Titel des nächsten oder vorherigen Beitrags an.
Hinzufügen von nächsten/vorherigen Links mit individuellem Code
Wenn Sie nach einer flexibleren und anpassbaren Möglichkeit suchen, Navigations Links hinzuzufügen, dann ist diese Methode für Sie geeignet. Um die nächsten/vorherigen Links hinzuzufügen, müssen Sie die Dateien Ihres WordPress-Themes bearbeiten.
Dies kann sehr riskant sein, da der kleinste Fehler dazu führen kann, dass Ihre Website nicht mehr zugänglich ist.
An dieser Stelle kommt WPCode ins Spiel. Es ist das beste WordPress Code Snippets Plugin, weil es Sie sicher individuellen Code hinzufügen lässt, ohne das Risiko, Ihre Website zu zerstören.
Weitere Einzelheiten finden Sie in unserer Rezension zu WPCode.
Zunächst müssen Sie das WPCode Plugin installieren und aktivieren. Einzelheiten finden Sie in unserer Anleitung zur Installation eines WordPress Plugins.
📒Hinweis: WPCode hat einen kostenlosen Plan. Mit einem Upgrade auf die Pro-Version erhalten Sie jedoch Zugriff auf eine Cloud-Bibliothek mit Code-Snippets, erweiterte bedingte Logik und mehr.
Besuchen Sie nach der Aktivierung die Seite Code Snippets ” +Add Snippet vom WordPress-Dashboard aus. Klicken Sie hier auf den Button “+Add Custom Snippet” unter der Option “Add Your Custom Code (New Snippet)”.
Dadurch werden Sie auf die Seite “Individuelles Snippet erstellen” weitergeleitet, wo Sie zunächst einen Titel für Ihren Code hinzufügen können.
Wählen Sie dann aus dem Dropdown-Menü auf der rechten Seite “PHP Snippet” als Codetyp aus.
Fügen Sie dann den folgenden individuellen Code in die Box “Codevorschau” ein:
1 | <?php the_post_navigation(); ?> |
Danach blättern Sie zum Abschnitt “Einfügen” und wählen den Modus “Automatisches Einfügen”.
Ihr Code wird bei der Aktivierung automatisch auf Ihrer Website ausgeführt.
Öffnen Sie dann das Dropdown-Menü “Position” und wechseln Sie zum Tab “Seitenspezifisch”.
Wählen Sie dann als Position des Codes “Nach dem Beitrag einfügen”. Die Links zu Ihren vorherigen/nächsten Beiträgen werden nun am Ende jedes Beitrags veröffentlicht.
Wenn Sie jedoch eine andere Position im Sinn haben, können Sie diese Option wählen.
Blättern Sie schließlich zurück nach oben und schalten Sie den Schalter “Inaktiv” auf “Aktiv” um.
Klicken Sie dann auf den Button “Snippet speichern”, um Ihre Änderungen zu speichern.
Sie können nun Ihre WordPress Website besuchen, um die Links “Weiter” und “Zurück” in Aktion zu sehen.
Hier werden Sie feststellen, dass der individuell angepasste Code, den Sie hinzugefügt haben, nur die Links zu den nächsten und vorherigen Beiträgen mit dem Titel des Beitrags als Ankertext anzeigt.
Es wird nicht hervorgehoben, dass dies die Links zu den nächsten und vorherigen Artikeln sind.
Wenn Sie das ändern möchten, können Sie stattdessen den folgenden individuellen Code in die Box “Codevorschau” einfügen:
1 2 3 4 5 | <?php the_post_navigation( array( 'prev_text' => __( 'Previous Article: %title' ), 'next_text' => __( 'Next Article: %title' ), ) );?> |
Sobald Sie Ihre Änderungen in WPCode gespeichert haben, besuchen Sie einfach Ihre Website.
So sah es auf unserer Testseite aus:
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:
1 2 3 4 5 | <?php the_post_navigation( array( 'prev_text' => __( '← %title' ), 'next_text' => __( '%title →' ), ) );?> |
So sah dieser Code auf unserer Test-Website aus:
Nehmen wir an, Sie möchten die Links “Nächster” und “Vorheriger” für den Artikel, den der Benutzer gerade anzeigt, relevanter machen.
Sie können dies tun, indem Sie die nächsten und vorherigen Links aus derselben Kategorie oder denselben Schlagwörtern anzeigen:
1 2 3 4 5 6 7 | <?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 Parameter für die Taxonomie auf Schlagwörter oder eine andere individuelle 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 für die Navigation in den Beiträgen hinzu. Sie können diese CSS-Klassen in WPCode verwenden, um diese Links zu gestalten.
Gehen Sie zunächst von der Seitenleiste des WordPress-Administrators auf die Seite Code Snippets ” Snippet hinzufügen. Klicken Sie dann auf den Button “+ Individuelles Snippet hinzufügen” unter der Option “Individuellen Code hinzufügen (neues Snippet)”.
Sobald Sie auf der Seite “Individuelles Snippet erstellen” sind, fügen Sie einen Titel für Ihren Code hinzu.
Wählen Sie dann im Dropdown-Menü den Codetyp “CSS Snippet” aus.
Danach können Sie den folgenden CSS-Code in Ihre Box “Codevorschau” einfügen.
Dieses einfache CSS zeigt einfach die nächsten und vorherigen Links nebeneinander an, aber auf den verschiedenen Seiten derselben Zeile:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .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%;} |
Sie können auch Ihre Links in der Navigation hervorheben, indem Sie eine Hintergrundfarbe, einen Mauszeigerkontakt und mehr hinzufügen.
Hier finden Sie einige Beispiele für CSS-Code, die Sie als Ausgangspunkt verwenden können:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .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;} |
Blättern Sie nun zum Abschnitt “Einfügen” und wählen Sie den Modus “Automatisches Einfügen”.
Ihr individueller Code wird bei der Aktivierung automatisch ausgeführt.
Schalten Sie den Schalter “Inaktiv” auf “Aktiv” um.
Klicken Sie anschließend auf den Button “Snippet speichern”, um Ihre Einstellungen zu speichern.
Besuchen Sie nun Ihre WordPress Website, um die gestalteten Links für Ihre Beiträge zu sehen.
Sie werden feststellen, dass der Link-Text jetzt eine Hintergrundfarbe und einen Mauszeigerkontakt hat, um die nächsten und vorherigen Links besser hervorzuheben.
Hinzufügen von nächsten / vorherigen Links für Beiträge mit Vorschaubildern
Wenn Sie Ihre nächsten/vorherigen Beiträge auffälliger machen wollen, können Sie Beitrags-Vorschaubilder zusammen mit den Links veröffentlichen. Bilder sind der einfachste Weg, um die Aufmerksamkeit der Benutzer zu erregen und diese Links ansprechender zu gestalten.
Dazu könnten Sie individuellen Code in Ihre functions.php-Datei einfügen, aber bedenken Sie, dass der kleinste Fehler Ihre Website zerstören kann. Deshalb empfehlen wir, auch hierfür WPCode zu verwenden.
Gehen Sie nach der Aktivierung des Plugins auf die Seite Code Snippets ” +Add Snippet und klicken Sie auf den Button ‘+ Add Custom Snippet’ unter der Option ‘Add Your Custom Code (New Snippet)’.
Sobald Sie die Seite “Individuelles Snippet erstellen” aufgerufen haben, müssen Sie einen Titel für Ihren Code hinzufügen.
Wählen Sie dann aus dem Dropdown-Menü auf der rechten Seite “PHP Snippet” als Codetyp aus.
Fügen Sie anschließend den folgenden individuellen Code in die Box “Codevorschau” ein:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 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.
Sobald Sie das Snippet eingegeben haben, können Sie den Schalter auf “Aktiv” umschalten und auf den Button “Snippet speichern” klicken.
Als Nächstes müssen Sie auf die Seite Code Snippets ” + Snippet hinzufügen zurückkehren und auf den Button “Snippet verwenden” unter der Option “Individuellen Code hinzufügen” klicken.
Sobald sich die Seite “Individuelles Snippet erstellen” öffnet, kopieren Sie den folgenden Code und fügen ihn in die Box “Codevorschau” ein:
1 | <?php wpb_posts_nav(); ?> |
Dieser Code bestimmt, wo die Links angezeigt werden sollen.
Stellen Sie sicher, dass Sie auch “PHP Snippet” aus dem Dropdown-Menü “Codetyp” auswählen.
Blättern Sie dann zum Abschnitt “Einfügen” und wählen Sie den Modus “Automatisches Einfügen” für die automatische Codeausführung.
Sie können auch den Abschnitt ‘Position’ erweitern und zum Tab ‘Seiten-spezifisch’ wechseln. Wählen Sie hier die Option “Nach dem Beitrag einfügen”, damit die Vorschaubilder ordnungsgemäß neben den Links erscheinen.
Schließlich können Sie den Schalter auf “Aktiv” umschalten und auf den Button “Snippet speichern” klicken.
Jetzt können Sie Ihre Website besuchen, um die Links in Aktion zu sehen.
Sie werden feststellen, dass diese Links nicht sehr sauber aussehen.
Sie können das ändern, indem Sie mit WPCode einige individuelle CSS hinzufügen, um sie zu gestalten.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | .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 Vorschaubildern anzuzeigen.
So sah es auf unserer Testseite aus:
Weitere Einzelheiten finden Sie in unserer Anleitung zum Hinzufügen von Vorschaubildern zu Links zu vorherigen und nächsten Beiträgen in WordPress.
Hinzufügen von nächsten/vorherigen Links zu WordPress-Seiten
Normalerweise werden in WordPress Links für die Navigation von Beiträgen in Blogs 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öchten jedoch eine Navigation auf der Seite anzeigen, damit die Besucher die nächste Seite leichter finden. Die gute Nachricht ist, dass der Code, den wir zuvor mit WPCode verwendet haben, die vorherigen und nächsten Links für Seiten anzeigt.
Wenn Sie diese Links sowohl auf Seiten als auch in Beiträgen anzeigen möchten, müssen Sie keine weiteren Änderungen vornehmen.
Wenn Sie jedoch nur die vorherigen/nächsten Links für Seiten anzeigen möchten, gehen Sie auf die Seite Code Snippets ” + Snippet hinzufügen .
Wählen Sie hier die Option “Fügen Sie Ihren individuellen Code hinzu (neues Snippet)”.
Sobald Sie auf der Seite “Individuelles Snippet erstellen” sind, fügen Sie einen Titel für Ihr Snippet hinzu.
Wählen Sie dann aus dem Dropdown-Menü den Codetyp “PHP Snippet” aus.
Fügen Sie dann den folgenden individuellen Code in die Box “Codevorschau” ein.
Dies ist derselbe Code, den Sie verwenden können, um vorherige/nächste Links für Beiträge zu veröffentlichen:
1 2 3 4 5 | <?php the_post_navigation( array( 'prev_text' => __( '← %title' ), 'next_text' => __( '%title →' ), ) );?> |
Blättern Sie anschließend zum Abschnitt “Einfügen” und wählen Sie den Modus “Automatisches Einfügen” für die automatische Codeausführung.
Sie können auch die Position Ihrer Links über das Dropdown-Menü “Position” konfigurieren. Wenn Sie z. B. “Nach dem Beitrag einfügen” wählen, werden Ihre Links am Ende jeder Seite angezeigt.
Wenn Sie eine andere Position im Sinn haben, wählen Sie einfach die entsprechende Option aus der Dropdown-Liste.
Blättern Sie dann zum Abschnitt “Intelligente bedingte Logik” und aktivieren Sie den Schalter “Logik aktivieren”.
🚨Hinweis: Beachten Sie, dass diese Funktion nur in der Pro-Version von WPCode verfügbar ist.
Wählen Sie dann aus dem Dropdown-Menü “Bedingungen” die Option “Anzeigen” und klicken Sie auf den Button “+ Neue Gruppe hinzufügen”.
Daraufhin öffnen sich einige neue Einstellungen, in denen Sie die Bedingungen für die Anzeige des Codeschnipsels festlegen müssen.
Da wir die vorherigen/nächsten Links nur auf Seiten anzeigen wollen, öffnen Sie das erste Dropdown-Menü und wechseln Sie zum Tab “Wo (Seite)” in der linken Spalte.
Wählen Sie dann unter den Optionen “Beitragstyp”, in der mittleren Dropdown-Liste “Ist” und in der letzten Dropdown-Liste “Seiten”.
Scrollen Sie abschließend zurück nach oben, schalten Sie den Schalter “Inaktiv” auf “Aktiv” um und klicken Sie auf den Button “Snippet speichern”. Sie haben nun erfolgreich die vorherigen/nächsten Links zu Ihren Seiten hinzugefügt.
So sah es auf unserer Demo-Website aus:
Bonus: Nächste und vorherige Links in WordPress entfernen
Einige Benutzer möchten vielleicht die Links “Weiter” und “Zurück” 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 Theme aktualisieren, sofern er Teil des ursprünglichen Themes war.
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 innerhalb der Templates single.php oder content-single.php.
Im Wesentlichen suchen Sie nach dem Code, der die folgende Funktion enthält:
1 | <?php the_post_navigation() ?> |
Dieser Code kann ein etwas anderes Format und andere Parameter haben.
Auf unserer Website verwendete das Theme beispielsweise diesen Code, um die Links anzuzeigen:
1 2 3 4 5 6 | 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 untergeordnetes Theme verwenden, müssen Sie dieses spezielle Template in Ihrem untergeordneten Theme duplizieren und dann die Zeilen löschen, die zur 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 die folgenden individuellen CSS zu Ihrem WordPress Theme hinzu:
1 2 3 | nav.navigation.post-navigation { display: none;} |
Vergessen Sie nicht, Ihre Änderungen zu speichern.
Besuchen Sie dann Ihre Website, um zu sehen, wie die Links zur Navigation verschwinden.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie in WordPress einfach nächste und vorherige Links hinzufügen können. Vielleicht interessieren Sie sich auch für unsere Anleitung zur Verwendung von WordPress-Blockvorlagen und unsere Liste der wichtigsten Tipps zur Verwendung von Shortcodes in WordPress.
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.
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.
Admin
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
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
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
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
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
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!
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.
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/
Admin
Tina Filipčič
Hello,
I solved the problem by adding this:
let page = document.querySelector(‘.page’);
page.querySelector(‘.wpb-posts-nav’).style = “display:none”