Möchten Sie Thumbnails mit den Links zu den vorherigen und nächsten Beiträgen in WordPress anzeigen?
Am unteren Ende jedes Beitrags zeigt WordPress zur einfachen Navigation Links zu den vorherigen und nächsten Beiträgen an. Wenn Sie diesen Links Miniaturansichten hinzufügen, werden sie für Ihre Leser attraktiver.
In diesem Artikel zeigen wir Ihnen, wie Sie Thumbnails mit Links zum vorherigen und nächsten Beitrag in WordPress verwenden können.
Warum werden Thumbnails mit den Links zum vorherigen und nächsten Beitrag angezeigt?
Ihr WordPress-Blog bietet einige hilfreiche Funktionen, die Ihren Besuchern helfen, neue Inhalte zu finden und auf Ihrer Website zu navigieren.
Zu diesen Funktionen gehören Navigationsmenüs, eine Suchleiste und ein Widget für das Beitragsarchiv.
Eine weitere hilfreiche Navigationsfunktion befindet sich am Ende jedes WordPress-Blogbeitrags. Dort finden Sie Links zu den vorherigen und nächsten Blogeinträgen auf Ihrer Website.
Diese Links fördern das Engagement der Nutzer, denn wenn Ihre Besucher einen Blog-Beitrag zu Ende gelesen haben, suchen sie nach etwas anderem zum Lesen. Die Links sehen jedoch interaktiver aus, wenn Sie Miniaturansichten hinzufügen.
Es ist auch eine gute Möglichkeit, die Aufmerksamkeit auf Ihre leistungsstärksten Blogbeiträge zu lenken. Vielleicht haben Sie zum Beispiel Säuleninhalte, die bereits eine Menge Besucher anziehen und diese Leser in E-Mail-Abonnenten verwandeln. Das Hinzufügen von Miniaturansichten mit Links zu den Beiträgen würde Ihnen nur helfen, Ihre E-Mail-Liste aufzubauen und Ihr kleines Unternehmen zu vergrößern.
Schauen wir uns also an, wie man in WordPress den Links zum vorherigen und nächsten Beitrag Miniaturbilder hinzufügt.
Verwendung von Vorschaubildern mit Links zum vorherigen und nächsten Beitrag in WordPress
Um den Links zum vorherigen und nächsten Beitrag Miniaturbilder hinzuzufügen, müssen Sie Code in die Dateien Ihres WordPress-Themes einfügen. Wenn Sie dies noch nicht getan haben, lesen Sie unsere Anleitung zum Kopieren und Einfügen von Code in WordPress.
Hinzufügen von Code mit WPCode
Der erste Schritt besteht darin, den folgenden Codeschnipsel mit einem Plugin wie WPCode hinzuzufügen.
WPCode ist das beste Code-Snippets-Plugin, mit dem Sie Code hinzufügen können, ohne Ihre Website zu zerstören. Es enthält auch viele vorgefertigte Vorlagen, sodass Sie den Code nicht von Grund auf neu schreiben müssen.
Um loszulegen, müssen Sie das WPCode-Plugin installieren und aktivieren. Weitere Details finden Sie in unserem Artikel über die Installation eines WordPress-Plugins.
Gehen Sie von dort aus auf die Seite Code Snippets „ + Code Snippets. Klicken Sie dann auf „Neu hinzufügen“.
Hier werden Sie zu einer Code-Snippet-Bibliothek weitergeleitet, in der Sie zahlreiche vorgefertigte Vorlagen finden, aus denen Sie auswählen können.
Klicken Sie unter „Fügen Sie Ihren eigenen Code hinzu“ auf „Snippet verwenden“.
Geben Sie dem Codeschnipsel einen Namen, damit Sie später darauf zurückgreifen können.
Kopieren Sie dann den folgenden Code in den WPCode-Texteditor. Stellen Sie sicher, dass Sie „PHP Snippet“ als Codetyp auswählen.
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;
}
Schalten Sie dann die Schaltfläche von „Inaktiv“ auf „Aktiv“ um.
Dadurch wird das Codeschnipsel wirksam.
Dann können Sie einfach auf die Schaltfläche „Aktualisieren“ klicken.
Jetzt müssen wir zurück zur Seite Code Snippets „ +Add Snippet gehen.
Auch hier wählen Sie unter der Option „Eigenen Code hinzufügen“ die Option „Snippet verwenden“.
Geben Sie dem Codeschnipsel einen Namen, damit Sie später darauf zurückgreifen können.
Kopieren Sie dann den folgenden Code in den WPCode-Texteditor. Stellen Sie sicher, dass Sie „PHP Snippet“ als Codetyp auswählen.
wpb_posts_nav();
Dieser Code teilt WordPress mit, wo die Navigation mit dem vorgestellten Bild angezeigt werden soll.
Blättern Sie dann nach unten zum Abschnitt Einfügen. Klicken Sie auf das Dropdown-Menü neben „Standort“.
Gehen Sie von hier aus zu Seitenspezifisch und wählen Sie Nach Beitrag einfügen. Auf diese Weise werden die Miniaturansichten ordnungsgemäß neben den Links angezeigt.
Zum Schluss schalten Sie das Codeschnipsel aktiv, indem Sie die Schaltfläche „Aktiv“ anklicken.
Klicken Sie dann auf „Aktualisieren“.
Sobald Sie Ihre Änderungen gespeichert haben, kann diese Funktion in der Vorlage aufgerufen werden, in der Sie die Links zum vorherigen und nächsten Beitrag mit Miniaturansichten anzeigen möchten.
Wenn Sie nun einen Beitrag auf Ihrer Website ansehen, werden Sie feststellen, dass die Links zum vorherigen und nächsten Beitrag am unteren Rand des Beitrags jetzt Miniaturbilder enthalten.
Wenn Sie nun einen Beitrag auf Ihrer Website ansehen, werden Sie feststellen, dass die Links zum vorherigen und nächsten Beitrag am unteren Rand des Beitrags jetzt Miniaturbilder enthalten.
Hinweis: Wenn einer der verlinkten Beiträge noch kein Bild hat, wird kein Miniaturbild angezeigt.
Wie man Thumbnails zu einem Beitrag hinzufügt, erfahren Sie in unserer Anleitung zum Hinzufügen von Vorschaubildern oder Beitrags-Thumbnails in WordPress.
Alternativ: Beliebte Beiträge mit Vorschaubildern anzeigen
Eine weitere Möglichkeit, Ihre Leser nach dem Lesen eines Beitrags zu binden, besteht darin, nach jedem Artikel eine Liste der beliebtesten Beiträge anzuzeigen. Auf diese Weise haben Ihre Leser die Möglichkeit, Ihre besten Inhalte zu sehen und nicht nur die vorherigen und nächsten Artikel, die veröffentlicht wurden.
Ihre beliebtesten Beiträge enthalten Ihre erfolgreichsten Inhalte. Wenn Sie sie Ihren Besuchern zeigen, schaffen Sie Vertrauen, verbessern den sozialen Beweis und sorgen dafür, dass Ihre Besucher länger auf Ihrer Website bleiben.
Wenn Sie sich die erste Methode in unserem Leitfaden zur Anzeige von Beiträgen nach Ansichten in WordPress ansehen, werden Sie erfahren, wie einfach es ist, beliebte Beiträge mit dem MonsterInsights-Plugin hinzuzufügen.
Das Popular Posts Widget von MonsterInsights bietet eine große Auswahl an attraktiven Themen und viele Anpassungsmöglichkeiten.
Vielleicht interessiert Sie auch unsere Anleitung zum Hinzufügen von benutzerdefinierten After-Post-Widgets in WordPress, in der Sie erfahren, wie Sie verschiedene Arten von Inhalten am Ende jedes Blogposts hinzufügen können.
Wir hoffen, dass dieses Tutorial Ihnen geholfen hat, zu lernen, wie man Thumbnails mit Links zum vorherigen und nächsten Beitrag in WordPress verwendet. Vielleicht möchten Sie auch erfahren, wie Sie die Leistung von WordPress beschleunigen können, oder sich unsere Liste der besten Social Media Plugins für WordPress ansehen.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Atesz says
Hello,
thnak you for this code. I would like to add the post navigation in the middle of my page as a block. So I tried to create a shortcode calling the wpb_posts_nav funtion:
add_shortcode( ‚custom-post-nav‘, ‚wpb_posts_nav‘ );
but if I use the shortcode [custom-post-nav] in the block editor, I cannot publish the post and I get the following: “Updating failed. The response is not a valid JSON response”
The post nav still appears but only If I paste the code at the end of the page and then they go to wrong place (to the top).
Do you know where is the problem?
Thank you in advance!
WPBeginner Support says
For your JSON response error, we would recommend going through our troubleshooting guide below!
https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-invalid-json-error-in-wordpress-beginners-guide/
Admin
Sekh Sahajahan says
Hello sir have you any solution to remove the 3 line navigation bar from menu bar because it automatically added.
Markus Martin says
Hi Syed. Does this still work especally with the new version of wordpress?
patricia says
Hello! How would I do, if i want to use this for custom post type? thanks
MarykeVanRensburg says
I got it to work. It seems the } in this „<?php } ?>“ was the problem. I removed it and it works. Now just to figure out how to only show next and previous in same category. Thanks
bowetech says
HOw would i set it up so that it will actually get the next post from its current category ?
Japh says
Nice and simple solution, I really like it. Great answer for your Facebook asker
Wordpress Themes Labs says
nice guide
MarykeVanRensburg says
Can you tell me how to only show previous and next in the same category? Thanks for this code. I’m going to try it.
wpbeginner says
@MarykeVanRensburg I think the TRUE variable there means in category browsing.
MarykeVanRensburg says
@wpbeginner I used the code, but it doesn’t work in an Artisteer created theme. The code in my theme is as follows:
’next_link‘ => theme_get_previous_post_link(‚« %link‘), ‚prev_link‘ => theme_get_next_post_link(‚%link »‘),
and I need to change it to show a thumbnail and only a certain category. Thanks.
wpbeginner says
@MarykeVanRensburg AFter the link area just add ,true
our code above will do only category browsing. Unfortunately we do not provide support for specific frameworks.
Sugeng Santoso says
I love this.
Dragon Blogger says
Really cool, I do think using thumbnails with latest/next post may be overkill if you already use it with „related posts“ there is limited real estate which is especially true for the growing trend of mobile browsing.
wpbeginner says
@Dragon Blogger That is only if you are assuming that the site has related posts. Some may not. We are using it on our List25 site which is relatively new site, so related articles is not very helpful at the time. That is why we are using single post navigation.
Dragon Blogger says
@wpbeginner @Dragon Blogger
Dragon Blogger says
@wpbeginner your are right and make a good point about newer sites without enough content to do images for related content.