So fügen Sie die Schaltfläche "Weitere Beiträge laden" in WordPress hinzu

Möchten Sie eine Schaltfläche zum Laden weiterer Beiträge in WordPress hinzufügen? Viele beliebte Plattformen ermöglichen es Benutzern, mehr Beiträge zu laden, wenn sie das Ende der Seite erreichen. In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach eine Schaltfläche zum Laden weiterer Beiträge in WordPress hinzufügen können.

Wann und warum eine Schaltfläche zum Laden weiterer Beiträge in WordPress hinzufügen

Wenn Sie Ihre Benutzer mit dem Inhalt beschäftigen, erhalten Sie mehr Aufrufe und letztendlich 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 hinzufügt. Es gibt jedoch bestimmte Arten von Websites, die immens vom unendlichen Scrollen oder der Schaltfläche zum Laden weiterer Beiträge profitieren können.

Einige Beispiele sind: Fotografie-Websites, Listenartikel und Websites mit viralen Inhalten. Anstatt eine ganz neue Seite zu laden, funktioniert die Schaltfläche "Mehr Beiträge laden" wie ein Endlos-Scroll. Er verwendet JavaScript, um schnell den nächsten Satz von Inhalten zu laden.

Dies verbessert die Benutzererfahrung und gibt ihnen die Möglichkeit, mehr von Ihrem Inhalt zu sehen. Schauen wir uns nun an, wie Sie die Schaltfläche "Weitere Beiträge laden" ganz einfach in Ihre WordPress-Website einfügen können.

Hinzufügen der Schaltfläche "Load More Posts" 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 der 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 der Benutzer auf die Schaltfläche klicken muss. 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 Basisvorlage 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 aussehen. Um dies zu beheben, müssen Sie den Code kopieren, den Ihr Theme für die Anzeige 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 für die Anzeige verschiedener Inhalte. Zum Beispiel content-page.php, content-search.php, und mehr. Sie werden nach der generischen Vorlage content.php suchen.

Hier ist ein Beispiel aus der Datei content.php unseres Demo-Themes:

<article id="post-<?php the_ID(); ?>" > <!--?php // Post-Thumbnail. twentyfifteen_post_thumbnail(); ?-->
<!--?php if ( is_single() ) : the_title( ' <h1 class="entry-title"-->', '' ); else : the_title( sprintf( ' <h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ) ), '</a></h2> ' ); endif; ?>


<!--?php /* Übersetzer: %s: Name des aktuellen Beitrags */ the_content( sprintf( __( 'Continue reading %s', 'twentyfifteen' ), the_title( '<span class="screen-reader-text"-->', '', false ) ) ); wp_link_pages( array( 'before' => ' <div class="page-links"><span class="page-links-title">' .


__( 'Seiten:', 'twentyfifteen' ) . '</span>', 'after' => '</div> ', 'link_before' => '<span>', 'link_after' => '</span>', 'pagelink' => '<span class="screen-reader-text">' . __( 'Seite', 'zwanzigfünfzehn' ) .


' </span>%', 'separator' => '<span class="screen-reader-text">, </span>', ) ); ?>


 <!--?php // Autoren-Bio. if ( is_single() && get_the_author_meta( 'description' ) ) : , get_template_part( 'author-bio' ); endif; ?-->


 <!--?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link"-->', '' ); ?>
 

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 sich unsicher sind, schauen Sie sich einfach die Vorlage an, die Sie zuvor kopiert haben.

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 "Ältere Beiträge", und Sie können das in "Weitere Beiträge laden" oder etwas anderes ändern, was Sie möchten.

Zuletzt müssen Sie wählen, ob die Beiträge automatisch geladen werden sollen oder ob Sie warten wollen, bis die Benutzer auf die Schaltfläche "Weitere Beiträge laden" klicken. Ihr Shortcode ist nun bereit, verwendet zu werden.

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 Load More Posts in Ihrem WordPress-Theme

Dieser Teil des Tutorials erfordert, dass Sie Code in Ihre WordPress-Theme-Dateien einfügen.

Wenn Sie dies noch nicht getan haben, dann 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 Theme hinzufügen möchten.

Je nachdem, wie Ihr Theme 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 einer Themedatei hinzufügen, müssen wir ihn innerhalb der do_shortcode-Funktion einfügen, etwa so:

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 "Weitere Beiträge laden" in Aktion zu sehen

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie die Schaltfläche "Load more posts" in WordPress hinzufügen können.