Wie man in WordPress die Schaltfläche „Weitere Beiträge laden“ hinzufügt

Möchten Sie einen Button zum Laden weiterer Beiträge in WordPress hinzufügen? Viele beliebte Plattformen ermöglichen es Benutzern, weitere Beiträge zu laden, wenn sie das Ende der Seite erreichen, und das aus gutem Grund.

Unserer Erfahrung nach kann dieser einfache Button die Erfahrung der Benutzer erheblich verbessern. Anstatt sich durch mehrere Seiten zu klicken, können die Benutzer sofort neue Inhalte laden, ohne ihren Browserfluss zu unterbrechen.

In diesem Artikel zeigen wir Ihnen, wie Sie in WordPress ganz einfach einen Button zum Laden weiterer Beiträge hinzufügen können.

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

Wenn Sie Ihre Nutzer bei der Stange halten, erhalten Sie mehr Aufrufe und letztlich mehr Abonnenten.

Viele Blogs verwenden den einfachen Navigationslink „Ältere Beiträge“ am Ende ihrer Home-, Blog- und Archivseiten. Einige Websites verwenden eine numerische Seitennavigation, die mehr Kontext bietet.

Es gibt jedoch bestimmte Arten von Websites, die von einem Button zum unendlichen Scrollen oder zum Laden weiterer Beiträge enorm profitieren können. Einige Beispiele sind Websites mit Fotos, Listen und viralen Inhalten.

Anstatt eine ganz neue Seite zu laden, funktioniert die Schaltfläche „Weitere Beiträge laden“ wie ein unendlicher Bildlauf. Sie verwendet JavaScript, um schnell den nächsten Satz von Inhalten zu holen. Dies verbessert die Nutzererfahrung und gibt ihnen die Möglichkeit, mehr von Ihrem Inhalt zu sehen.

Schauen wir uns also an, wie Sie auf einfache Weise eine Schaltfläche zum Laden weiterer Beiträge in Ihre WordPress-Website einfügen können.

Hinzufügen der Schaltfläche „Weitere Beiträge laden“ in WordPress

Als Erstes müssen Sie das Ajax Load More-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

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

Auf der Einstellungsseite können Sie die Farbe Ihrer Schaltfläche auswählen. Sie können die Schaltfläche auch durch einen unendlichen Bildlauf ersetzen, der den nächsten Stapel von Beiträgen automatisch lädt, ohne dass die Nutzer auf die Schaltfläche 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 kann auf Ihrer Website deplatziert wirken.

Um dies zu beheben, müssen Sie den Code kopieren, den Ihr Thema für die Anzeige von Beiträgen auf Index-, Archiv- und Blogseiten verwendet.

Normalerweise befindet sich dieser Code im Ordner template-parts Ihres Themas. In diesem Ordner finden Sie Vorlagen für die Anzeige verschiedener Inhalte. Zum Beispiel content-page.php, content-search.php, und mehr.

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

<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 erstellen.

Diese Seite enthält viele verschiedene Optionen, die Sie individuell anpassen können. Zunächst müssen Sie den Typ des Containers auswählen. Wenn Sie unsicher sind, sehen Sie sich einfach das Template an, das Sie zuvor kopiert haben. Die meisten modernen WordPress Themes verwenden das <div>; Element.

Danach blättern Sie nach unten zum Abschnitt Schaltflächenbeschriftungen. Hier können Sie den Text ändern, der auf der Schaltfläche erscheint. Standardmäßig verwendet das Plugin den Text „Ältere Beiträge“. Sie können ihn in „Weitere Beiträge laden“ oder einen anderen Text ändern.

Schließlich müssen Sie noch festlegen, ob die Beiträge automatisch geladen werden sollen oder ob Sie warten wollen, bis die Nutzer auf die Schaltfläche „Weitere Beiträge laden“ klicken.

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.

Hinzufügen von mehr Beiträgen in Ihrem WordPress-Theme

Für diesen Teil des Tutorials müssen Sie Code in Ihre WordPress-Theme-Dateien einfügen. Wenn Sie dies noch nicht getan haben, werfen Sie einen Blick auf unsere Anleitung zum Kopieren und Einfügen von Code in WordPress.

Vergessen Sie nicht, Ihr WordPress-Theme zu sichern, bevor Sie Änderungen vornehmen.

Sie müssen die Vorlagendateien finden, in denen Sie die Schaltfläche „Weitere Beiträge laden“ in Ihrem Thema hinzufügen möchten. Je nachdem, wie Ihr Thema organisiert ist, sind diese Dateien in der Regel index.php, archives.php, categories.php, usw.

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

Da wir den Shortcode in eine Themadatei einfügen, müssen wir ihn innerhalb der do_shortcode-Funktion hinzufügen, etwa so:

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

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

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man in WordPress die Schaltfläche „Mehr Beiträge laden“ hinzufügt. Vielleicht interessiert dich auch unsere Mega-Liste mit den nützlichsten WordPress-Tipps, -Tricks und -Hacks für Anfänger und unsere Expertenauswahl der besten WordPress-Facebook-Plugins, mit denen du deinen Blog vergrößern kannst.

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.