So fügen Sie Miniaturansichten zu Links für vorherige und nächste Beiträge in WordPress hinzu

Nach all der Arbeit an einem WordPress-Blogbeitrag ist es frustrierend zu sehen, wie Leser nach einer Seite wieder gehen.

Ein wichtiger Grund? Die einfachen Text-Navigationslinks am Ende Ihrer Beiträge werden kaum beachtet.

Das Hinzufügen von Vorschaubildern zu diesen Navigationslinks kann helfen, Aufmerksamkeit zu erregen. Leser können sofort sehen, was als Nächstes kommt, was sie viel eher dazu bringt, zu bleiben und Ihre Inhalte zu erkunden.

Wir haben viele Methoden getestet und festgestellt, dass WPCode das beste Werkzeug für diese Aufgabe ist. Es ermöglicht Ihnen, benutzerdefinierte Code-Snippets sicher hinzuzufügen, ohne Ihre Theme-Dateien zu berühren.

In diesem Leitfaden zeigen wir Ihnen genau, wie Sie Thumbnails zu Ihren Links für den vorherigen und nächsten Beitrag in WordPress hinzufügen. Es ist einfacher, als Sie denken! 💡

Warum Miniaturansichten mit den Links zum vorherigen und nächsten Beitrag anzeigen?

Thumbnails machen Ihre Navigationslinks sofort auffälliger und klickbarer. Sie können Leser dazu anregen, Ihre Website weiter zu erkunden, was potenziell die Seitenaufrufe und die Verweildauer erhöht.

Ihr WordPress-Blog bietet einige hilfreiche Funktionen, um Besuchern zu helfen, neue Inhalte zu finden und Ihre Website zu navigieren.

Diese Funktionen umfassen:

• Navigationsmenüs
• Eine Suchleiste und
• Ein Widget für Beitragsarchive.

Eine weitere hilfreiche Navigationsfunktion finden Sie am Ende jedes Blogbeitrags. Dort finden Sie Links zu den vorherigen und nächsten Beiträgen Ihrer Website.

Diese Links fördern das Engagement der Nutzer, denn wenn Besucher einen Blogbeitrag zu Ende gelesen haben, suchen sie vielleicht nach etwas anderem zum Lesen. Wenn Sie jedoch Miniaturansichten hinzufügen, sehen die Links interaktiver aus.

Es ist auch eine großartige Möglichkeit, Ihre leistungsstärksten oder beliebtesten Blogbeiträge hervorzuheben.

Zum Beispiel haben Sie möglicherweise wichtige Inhalte, die bereits viel Traffic generieren und diese Leser in E-Mail-Abonnenten umwandeln. Das Hinzufügen von Thumbnails mit Beitragslinks würde Ihnen nur helfen, Ihre E-Mail-Liste aufzubauen und Ihr kleines Unternehmen auszubauen.

In diesem Sinne zeigen wir Ihnen, wie Sie Thumbnails zu den Links für vorherige und nächste Beiträge in WordPress hinzufügen. Hier sind alle Themen, die wir in diesem Artikel behandeln werden:

Lass uns anfangen!

Thumbnails mit vorherigen und nächsten Beitragslinks in WordPress verwenden

Um Thumbnails zu Ihren Links zu vorherigen und nächsten Beiträgen hinzuzufügen, müssen Sie Code zu den Dateien Ihres WordPress-Themes hinzufügen.

Wir empfehlen die Verwendung von WPCode, dem besten Plugin für Code-Snippets für WordPress. Es ermöglicht Ihnen, Code hinzuzufügen, ohne Ihre Website zu beschädigen, und wird mit vielen vorgefertigten Vorlagen geliefert, sodass Sie keinen Code von Grund auf neu schreiben müssen.

Auf unseren Websites verwenden wir WPCode, um benutzerdefinierte Code-Snippets zu erstellen und zu verwalten. Es hat für uns unglaublich gut funktioniert, und Sie können sich unsere vollständige WPCode-Bewertung ansehen, um seine Funktionen zu erkunden.

Wenn Sie dies noch nie zuvor getan haben, lesen Sie unseren Leitfaden zum Kopieren und Einfügen von Code in WordPress.

Um zu beginnen, müssen Sie das WPCode-Plugin installieren und aktivieren. Gehen Sie in Ihrem WordPress-Adminbereich zu Plugins » Plugin hinzufügen.

Verwenden Sie auf dem nächsten Bildschirm das Suchfeld, um das WPCode-Plugin schnell zu finden.

Klicken Sie in den Suchergebnissen auf „Jetzt installieren“ und dann auf „Aktivieren“.

Wenn Sie Hilfe benötigen, können Sie unseren Artikel über die Installation eines WordPress-Plugins lesen.

Nach der Aktivierung gehen Sie in Ihrem WordPress-Dashboard zu Code-Snippets » + Snippet hinzufügen.

Sie werden zu einer Code-Snippet-Bibliothek weitergeleitet, wo Sie aus einer Vielzahl von vorgefertigten Vorlagen wählen können.

Um Thumbnails zu den Links für vorherige und nächste Beiträge hinzuzufügen, laden wir einen benutzerdefinierten Code-String hoch.

Klicken wir also unter „Eigene benutzerdefinierte Codes hinzufügen (Neues Snippet)“ auf „+ Benutzerdefiniertes Snippet hinzufügen“.

Im erscheinenden Popup wählen Sie den Code-Typ aus.

Hier möchten Sie „PHP-Snippet“ auswählen, ein kleiner Code-Teil, der zur Erweiterung der WordPress-Funktionalität verwendet wird.

Der nächste Schritt besteht darin, dem Code-Snippet einen Namen zu geben, damit Sie später darauf zurückgreifen können.

Kopieren Sie dann einfach den folgenden Code in den WPCode-Texteditor:

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

So könnte es auf Ihrem Bildschirm aussehen:

Scrollen Sie vor der Aktivierung nach unten zum Abschnitt „Einfügen“, um die Einstellungen zu überprüfen.

Stellen Sie hier sicher, dass die „Einfügemethode“ auf „Automatisch einfügen“ und der „Speicherort“ auf „Überall ausführen“ eingestellt ist.

Dann können Sie wieder nach oben scrollen und den Schalter von „Inaktiv“ auf „Aktiv“ umlegen.

Vergessen Sie nicht, auf die Schaltfläche „Snippet speichern“ oder „Aktualisieren“ zu klicken, um Ihre neue Funktion zu aktivieren.

Jetzt, da die Funktion erstellt ist, müssen wir ein zweites Snippet erstellen, um WordPress genau mitzuteilen, wo es auf der Seite angezeigt werden soll. Indem wir dies in zwei Snippets aufteilen, erstellen wir zuerst sicher die Funktion und platzieren sie dann einfach, ohne Ihre Website zu überlasten oder Ihr Layout zu beschädigen.

Gehen wir zurück zur Seite Code Snippets » + Snippet hinzufügen.

Klicken Sie erneut unter der Option „Benutzerdefinierten Code hinzufügen (Neues Snippet)“ auf „+ Benutzerdefiniertes Snippet hinzufügen“.

Im erscheinenden Popup fragt WPCode nach Ihrem Code-Typ.

Sie können „PHP-Snippet“ auswählen.

Dies öffnet denselben Texteditor wie zuvor.

Geben Sie Ihrer neuen benutzerdefinierten Snippet einen beschreibenden Namen, damit Sie später leicht darauf zurückgreifen können.

Nun können Sie den folgenden Code in den WPCode-Texteditor kopieren und einfügen. Dieser Code teilt WordPress mit,  wo  die Navigation mit dem Vorschaubild angezeigt werden soll.

wpb_posts_nav();

So könnte es auf Ihrem Bildschirm aussehen:

Wenn das erledigt ist, scrollen Sie nach unten zum Abschnitt „Insertion“ und klicken Sie auf das Dropdown-Menü neben „Location“.

Gehen Sie von hier aus zu 'Seiten-spezifisch' und wählen Sie 'Nach Beitrag einfügen'. Auf diese Weise werden die Thumbnails ordnungsgemäß neben den Links angezeigt.

Schließlich können Sie den Schalter für 'Aktiv' umlegen und auf 'Snippet speichern' (oder 'Aktualisieren') klicken.

Nach dem Speichern Ihrer Änderungen können Sie diese Funktion in der Vorlage verwenden, in der Sie Links zu vorherigen und nächsten Beiträgen mit Thumbnails anzeigen möchten.

Da Sie den Speicherort auf „Nach Beitrag einfügen“ gesetzt haben, kümmert sich WPCode automatisch um die Platzierung. Sie müssen Ihre Theme-Dateien nicht bearbeiten.

Und das war's – Sie haben Ihre Miniaturansichten für vorherige und nächste Beiträge hinzugefügt und konfiguriert!

Wenn Sie nun einen Beitrag auf Ihrer Website aufrufen, sehen Sie, dass die Links für den vorherigen und nächsten Beitrag am Ende des Beitrags nun Miniaturansichten haben.

Alternative: Beliebte Beiträge mit Miniaturansichten anzeigen

Eine weitere Möglichkeit, Ihre Leser zu binden, nachdem sie einen Beitrag gelesen haben, ist die Anzeige einer Liste beliebter Beiträge nach jedem Artikel. Dies ermöglicht es Ihren Lesern, Ihre besten Inhalte zu sehen, anstatt nur die vorherigen und nächsten veröffentlichten Artikel.

Ihre beliebten Beiträge enthalten Ihre erfolgreichsten Inhalte. Die Anzeige dieser Inhalte für Ihre Besucher hilft dabei, Ihre Seitenaufrufe zu erhöhen und das Benutzerengagement zu steigern.

Während vorherige und nächste Links für chronologisches Lesen großartig sind, ermöglicht Ihnen ein Tool wie MonsterInsights, Ihre absolut besten, umsatzstärksten Inhalte automatisch hervorzuheben, um die Leser zu fesseln.

Bei WPBeginner verwenden wir MonsterInsights, um die Leistung unserer Website genau zu überwachen. Sie können unsere vollständige MonsterInsights-Bewertung lesen und sehen, warum es unser bevorzugtes Tool für datengesteuerte Entscheidungen ist.

MonsterInsights' Widget für beliebte Beiträge bietet eine breite Palette attraktiver Themes und viele Anpassungsoptionen.

Sie können in unserem Leitfaden erfahren, wie einfach Sie dies einrichten können: So zeigen Sie Beiträge nach Aufrufen in WordPress an.

Oder Sie können unseren Leitfaden lesen: So fügen Sie benutzerdefinierte Nach-Beitrags-Widgets in WordPress hinzu, wo Sie lernen, wie Sie verschiedene Arten von Inhalten am Ende jedes Blogbeitrags hinzufügen.

Häufig gestellte Fragen zu Beitragsnavigations-Thumbnails

Haben Sie Fragen zum Hinzufügen von Thumbnails zur Beitragsnavigation? Hier sind einige Dinge, die Leser oft fragen, bevor sie beginnen.

Bonus-Links für die Verwendung von Bildern und anderen Mediendateien in WordPress

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie Thumbnails mit vorherigen und nächsten Beitragslinks in WordPress verwenden.

Als Nächstes möchten Sie vielleicht auch lernen:

• So schneiden und bearbeiten Sie WordPress Beitrags-Thumbnails
• So fügen Sie Featured-Video-Thumbnails in WordPress hinzu
• Bild-Alt-Text vs. Bildtitel in WordPress
• Wie man behebt, dass das Beitragsbild in WordPress nicht angezeigt wird
• Wie man Bilder für Web-Performance optimiert, ohne Qualität zu verlieren

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.