loader image

Radiboxes Server machen WordPress Websites bis zu 4x schneller - ohne zusätzliche Optimierung. Raidboxes migriert deine Website und du kannst selbst vergleichen. Wenn du zufrieden bist, wähle einfach das passende Paket in deren Preistabelle.

4.97

Sehr gut

trustedshops.de

Autor

duckducknews

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.

How to add load more posts button in WordPress

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.

Ajax Load More settings

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. Die meisten modernen Themes verwenden den


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

Button label

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.

Disable scroll

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.

Shortcode output

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.

Click to load more posts button preview

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

Die beliebtesten Beiträge

Wie man den ungültigen JSON-Fehler in WordPress behebt (Anleitung für Anfänger)

Versuchen Sie, den ungültigen JSON-Fehler in WordPress zu beheben? Dieser Fehler tritt auf, wenn Sie WordPress-Beiträge oder -Seiten auf Ihrer Website bearbeiten. Sie erhalten die Meldung "Die Antwort ist keine gültige JSON-Antwort" und die Aktualisierung der Seite schlägt fehl. In diesem Artikel zeigen wir Ihnen, wie Sie den ungültigen JSON-Fehler ...

So beheben Sie den Fehler „Verbindung ist nicht privat“ (Anleitung für Website-Besitzer)

Sehen Sie die Fehlermeldung "Ihre Verbindung ist nicht privat" auf Ihrer WordPress-Website? Dies ist die Fehlermeldung, die Sie in Google Chrome sehen. Der gleiche Fehler wird auf allen modernen Browsern mit leicht unterschiedlichen Meldungen angezeigt und kann für Anfänger bei der Fehlerbehebung etwas verwirrend sein. In dieser Anleitung für Website-Besitzer ...

Wie man eine Seite in voller Breite in WordPress erstellt (Anleitung für Anfänger)

Möchten Sie eine Seite in voller Breite in WordPress erstellen, so dass Sie Ihren Inhalt über den Bildschirm strecken können? Die meisten WordPress-Themes verfügen bereits über eine integrierte Vorlage für eine Seite in voller Breite, die Sie verwenden können. Wenn Ihr Theme jedoch keine hat, dann ist es einfach, sie ...
DSGVO Cookie-Einwilligung mit Real Cookie Banner