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?

Kurz gesagt, Miniaturansichten machen Ihre Navigationslinks sofort auffälliger und klickbarer. Sie können Leser dazu anregen, Ihre Website weiter zu erkunden.

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

• Navigationsmenüs
• eine Suchleiste, und
• ein Beitragsarchiv-Widget.

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, Aufmerksamkeit auf Ihre leistungsstärksten oder beliebtesten Blogbeiträge zu lenken.

Sie haben möglicherweise beispielsweise Kerninhalte, die bereits viel Traffic generieren und diese Leser in E-Mail-Abonnenten umwandeln. Das Hinzufügen von Miniaturansichten 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:

• Using Thumbnails with Previous and Next Post Links in WordPress
• Alternative: Beliebte Beiträge mit Miniaturansichten anzeigen
• Häufig gestellte Fragen zu Beitragsnavigations-Thumbnails
• Bonus-Links: Bilder und andere Mediendateien in WordPress verwenden

Lass uns anfangen!

Thumbnails mit vorherigen und nächsten Beitragslinks in WordPress verwenden

Um Ihren Links für vorherige und nächste Beiträge Thumbnails hinzuzufügen, müssen Sie Code zu den Dateien Ihres WordPress-Themes hinzufügen. Wenn Sie dies noch nie zuvor getan haben, lesen Sie unseren Leitfaden zum Kopieren und Einfügen von Code in WordPress.

Code mit WPCode hinzufügen

Der erste Schritt ist, den folgenden Code-Schnipsel mit WPCode, dem besten Plugin für Code-Schnipsel, hinzuzufügen. Es ermöglicht Ihnen, Code hinzuzufügen, ohne Ihre Website zu beschädigen, und bietet viele fertige Vorlagen, sodass Sie keinen Code von Grund auf neu schreiben müssen.

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

Um zu beginnen, müssen Sie das WPCode-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, können Sie unseren Artikel zur Installation eines WordPress-Plugins lesen.

Gehen Sie nach der Aktivierung im WordPress-Dashboard zur Seite Code-Snippets » + Snippet hinzufügen.

Klicken Sie dann auf die Schaltfläche „Neu 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 den vorherigen und nächsten Beitrag hinzuzufügen, laden wir einen benutzerdefinierten Code-String hoch. Klicken wir also unter „Add Your Custom Code (New Snippet)“ auf „Use Snippet“.

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

Hier möchten Sie 'PHP-Snippet' auswählen.

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

Sobald Sie den Snippet eingegeben haben, können Sie den Schalter von 'Inaktiv' auf 'Aktiv' umlegen.

Es sollte so aussehen.

Dies ermöglicht die Funktionsweise des Codes.

Dann können Sie einfach auf die Schaltfläche „Aktualisieren“ klicken.

Nun müssen wir zurück zur Seite Code Snippets » + Snippet hinzufügen gehen.

Wiederum unter der Option „Fügen Sie Ihren benutzerdefinierten Code hinzu (neuer Snippet)“ wählen Sie „Snippet verwenden“ aus.

Stellen Sie sicher, dass Sie im erscheinenden Popup „PHP-Snippet“ auswählen.

Danach können Sie ihm einen beschreibenden Namen geben, damit Sie später leicht darauf zurückgreifen können.

Jetzt können Sie den folgenden Code kopieren und in den WPCode-Texteditor einfügen.

wpb_posts_nav();

Dieser Code sagt WordPress wo die Navigation mit dem Beitragsbild angezeigt werden soll.

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 'Aktiv' umschalten und auf '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.

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. Wenn Sie diese Ihren Besuchern anzeigen, schaffen Sie Vertrauen, verbessern den Social Proof und stellen sicher, dass Ihre Besucher länger auf Ihrer Website bleiben.

Wenn Sie die erste Methode in unserem Leitfaden zur Anzeige beliebter Beiträge nach Aufrufen in WordPress überprüfen, erfahren Sie, wie einfach es ist, beliebte Beiträge mit dem MonsterInsights-Plugin hinzuzufügen.

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.

Oder Sie können sich unseren Leitfaden ansehen, wie Sie benutzerdefinierte Widgets nach Beiträgen in WordPress hinzufügen, wo Sie lernen können, 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.

Kann ich die Größe der Thumbnails ändern?

Absolut! Suchen Sie im ersten Code-Snippet nach den Zeilen, die [ 100, 100 ] enthalten. Diese Zahlen stellen die Breite und Höhe in Pixeln dar. Tauschen Sie sie einfach gegen die Abmessungen aus, die am besten zu Ihrem Theme-Design passen.

Verlangsamt das Hinzufügen von Miniaturansichten mit Code meine Website?

Überhaupt nicht. Der Code ist schlank und auf Leistung ausgelegt, sodass Sie keine Verlangsamung bemerken sollten. Außerdem stellt WPCode sicher, dass der Snippet nur auf einzelnen Beitragsseiten geladen wird, wo er benötigt wird.

Was passiert, wenn ein Beitrag kein Beitragsbild hat?

Keine Sorge. Wenn ein verlinkter Beitrag kein Beitragsbild hat, zeigt der Code stattdessen nur den Textlink an. Dennoch hilft es, für jeden Beitrag ein Beitragsbild festzulegen, damit Ihre Website poliert und konsistent aussieht.

Ist es besser, vorherige/nächste Links oder einen Abschnitt mit beliebten Beiträgen anzuzeigen?

Das hängt von Ihrem Ziel ab. Vorherige und nächste Links eignen sich hervorragend, um Leser durch verwandte Inhalte in der richtigen Reihenfolge zu führen.

Aber wenn Sie möchten, dass die Leute Ihre Top-Artikel weiter durchsuchen, kann ein Bereich für beliebte Beiträge (mit einem Tool wie MonsterInsights) Wunder wirken.

Bonus-Links: Bilder und andere Mediendateien in WordPress verwenden

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie Thumbnails mit Links zu vorherigen und nächsten Beiträgen in WordPress verwenden. Als Nächstes möchten Sie vielleicht auch lernen:

• So schneiden und bearbeiten Sie WordPress Beitrags-Thumbnails
• Hintergrundbild in WordPress hinzufügen
• So fügen Sie Featured-Video-Thumbnails in WordPress hinzu
• Wie man ein Audio-Musik-Player-Widget in WordPress hinzufügt
• Wie man PDF-Indizierung und -Suche in WordPress hinzufügt
• 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.