So fügen Sie einen „Mehr Beiträge laden“-Button in WordPress hinzu

Wenn Besucher auf Ihrem Blog landen, ist es das Ziel, sie so lange wie möglich zum Lesen zu bewegen. Aber wenn sie ständig auf die nächste Seite klicken müssen, entsteht eine Reibung, die dazu führen kann, dass sie gehen, bevor sie mehr von Ihren Inhalten erkunden.

Hier kommt ein Button „Mehr Beiträge laden“ ins Spiel. Anstatt den Fluss zu unterbrechen, können Leser sofort neue Artikel abrufen, ohne die Seite jemals zu verlassen. Diese einfache Funktion kann die Absprungrate reduzieren, die Verweildauer auf der Website verbessern und das Durchsuchen Ihrer Inhalte mühelos gestalten.

Wir haben gesehen, dass dieser Ansatz besonders gut für Blogs und Websites im Magazin-Stil mit vielen Beiträgen funktioniert. Das Hinzufügen eines „Mehr laden“-Buttons erleichtert es den Lesern, mehr von Ihren Inhalten zu entdecken. Je länger sie bleiben, desto wahrscheinlicher ist es, dass sie abonnieren oder zu treuen Besuchern werden.

In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie eine Schaltfläche „Mehr Beiträge laden“ in WordPress hinzufügen.

Wann und warum Sie die Schaltfläche „Weitere Beiträge laden“ in WordPress hinzufügen sollten

Wenn Sie möchten, dass die Leute mehr Zeit auf Ihrer Website verbringen, müssen Sie es ihnen leicht machen, neue Inhalte zu entdecken. Je länger Besucher mit Ihren Inhalten interagieren, desto mehr Aufrufe erhalten Sie und desto wahrscheinlicher ist es, dass sie abonnieren oder wiederkommen.

Die meisten Blogs verwenden eine einfache Navigation am Ende ihrer Home-, Blog- oder Archivseiten, wie z. B. einen Link 'Ältere Beiträge' oder eine numerische Seitennavigation. Das funktioniert zwar, kann aber den Lesefluss unterbrechen und dazu führen, dass Besucher aufhören zu stöbern.

Deshalb sehen bestimmte Arten von Websites große Vorteile durch das Hinzufügen einer Schaltfläche „Weitere Beiträge laden“. Dies ist besonders effektiv für inhaltsreiche Websites wie Food-Blogs, Fotografie-Websites, Listicles oder virale Nachrichten-Websites.

Nehmen Sie zum Beispiel den Blog So Much Food, sie verwenden eine saubere Schaltfläche „Mehr Beiträge laden“, die sofort neue Rezepte lädt.

Anstatt eine komplett neue Seite zu laden, funktioniert ein Button „Weitere Beiträge laden“ wie unendliches Scrollen. Er verwendet JavaScript, um schnell den nächsten Inhalt abzurufen. Dies verbessert die Benutzererfahrung und gibt den Nutzern die Möglichkeit, mehr Ihrer Inhalte ohne Unterbrechung anzusehen.

Mit diesen Worten, schauen wir uns an, wie Sie ganz einfach einen „Mehr laden“-Button für Beiträge auf Ihrer WordPress-Website hinzufügen können.

Schritt 1: Hinzufügen der Schaltfläche „Mehr Beiträge laden“ in WordPress

Das Erste, was Sie tun müssen, ist, das Ajax Load More Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie Sie ein WordPress-Plugin installieren.

Nach der Aktivierung fügt das Plugin einen neuen Menüpunkt namens „Ajax Load More“ zu Ihrem WordPress-Admin-Menü hinzu. Sie müssen darauf klicken und zur Einstellungsseite des Plugins navigieren.

Auf der Einstellungsseite können Sie die Farbe Ihres Buttons auswählen. Sie können den Button auch durch unendliches Scrollen ersetzen, das die nächste Charge von Beiträgen automatisch lädt, ohne dass Benutzer auf den Button klicken müssen.

Als Nächstes müssen Sie die Seite Ajax Load More » Repeater Template besuchen, um Ihre Vorlage für die Anzeige von Beiträgen hinzuzufügen.

Das Plugin wird mit einer einfachen Vorlage geliefert, die die WordPress-Schleife zur Anzeige von Beiträgen enthält. Sie passt jedoch nicht zu Ihrem Theme und sieht auf Ihrer Website möglicherweise fehl am Platz aus.

Um dies zu beheben, müssen Sie den Code kopieren, den Ihr Theme zum Anzeigen von Beiträgen auf Index-, Archiv- und Blog-Seiten verwendet.

Normalerweise befindet sich dieser Code im Ordner `template-parts` Ihres Themes. In diesem Ordner finden Sie Vorlagen zur Anzeige verschiedener Inhalte. Zum Beispiel `content-page.php`, `content-search.php` und mehr.

Sie suchen nach der generischen Vorlage `content.php`. Hier ist ein Beispiel aus der `content.php`-Datei unseres Demo-Themes:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php
        // Post thumbnail.
        twentyfifteen_post_thumbnail();
    ?>
 
    <header class="entry-header">
        <?php
            if ( is_single() ) :
                the_title( '<h1 class="entry-title">', '</h1>' );
            else :
                the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
            endif;
        ?>
    </header><!-- .entry-header -->
 
    <div class="entry-content">
        <?php
            /* translators: %s: Name of current post */
            the_content( sprintf(
                __( 'Continue reading %s', 'twentyfifteen' ),
                the_title( '<span class="screen-reader-text">', '</span>', false )
            ) );
 
            wp_link_pages( array(
                'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
                'after'       => '</div>',
                'link_before' => '<span>',
                'link_after'  => '</span>',
                'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
                'separator'   => '<span class="screen-reader-text">, </span>',
            ) );
        ?>
    </div><!-- .entry-content -->
 
    <?php
        // Author bio.
        if ( is_single() && get_the_author_meta( 'description' ) ) :
            get_template_part( 'author-bio' );
        endif;
    ?>
 
    <footer class="entry-footer">
        <?php twentyfifteen_entry_meta(); ?>
        <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
    </footer><!-- .entry-footer -->
 
</article><!-- #post-## -->

Sobald Sie diesen Code gefunden haben, müssen Sie ihn in das Feld „Repeater Templates“ in den Plugin-Einstellungen einfügen.

Vergessen Sie nicht, auf die Schaltfläche „Vorlage speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Als Nächstes müssen Sie die Seite Ajax Load More » Shortcode Builder besuchen, um den Shortcode zu generieren.

Diese Seite enthält viele verschiedene Optionen, die Sie anpassen können. Zuerst müssen Sie den Containertyp auswählen. Wenn Sie unsicher sind, schauen Sie sich einfach die Vorlage an, die Sie zuvor kopiert haben. Die meisten modernen WordPress-Themes verwenden das <div>-Element.

Scrollen Sie danach nach unten zum Abschnitt „Button-Beschriftungen“. Hier können Sie den Text ändern, der auf dem Button angezeigt wird. Standardmäßig verwendet das Plugin „Ältere Beiträge“, und Sie können dies in „Weitere Beiträge laden“ oder etwas anderes ändern, das Sie möchten.

Schließlich müssen Sie wählen, ob Beiträge automatisch geladen werden sollen oder ob Benutzer auf die Schaltfläche „Mehr Beiträge laden“ klicken sollen.

Ihr Shortcode ist nun einsatzbereit. In der rechten Spalte sehen Sie die Ausgabe des Shortcodes. Kopieren Sie den Shortcode und fügen Sie ihn in einen Texteditor ein, da Sie ihn im nächsten Schritt benötigen werden.

Schritt 2: Hinzufügen von „Weitere Beiträge laden“ zu Ihrem WordPress-Theme

Dieser Teil des Tutorials erfordert, dass Sie Code in Ihre WordPress-Theme-Dateien einfügen. Wenn Sie dies noch nie getan haben, werfen Sie einen Blick auf unsere Anleitung zum Kopieren und Einfügen von Code in WordPress.

Hinweis: Vergessen Sie nicht, ein Backup Ihres WordPress-Themes zu erstellen, bevor Sie Änderungen vornehmen.

Sie müssen die Vorlagendateien finden, in denen Sie den Button zum Laden weiterer Beiträge in Ihrem Theme hinzufügen möchten. Je nachdem, wie Ihr Theme organisiert ist, sind dies normalerweise die Dateien index.php, archives.php, categories.php usw.

Sie müssen den zuvor kopierten Shortcode in Ihr Theme direkt nach dem Tag endwhile; einfügen.

Da wir den Shortcode in eine Theme-Datei einfügen, müssen wir ihn wie folgt in die do_shortcode-Funktion einfügen:

echo do_shortcode('[ajax_load_more container_type="div" post_type="post"]');  

Sie können nun Ihre Änderungen speichern und Ihre Website besuchen, um die Schaltfläche „Mehr Beiträge laden“ in Aktion zu sehen. So sah sie auf unserer Demoseite aus:

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einen Button zum Laden weiterer Beiträge in WordPress hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zum Auflisten zukünftiger geplanter Beiträge in WordPress und unsere Expertenauswahl der besten Plugins für verwandte Beiträge für WordPress sehen.

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.