WordPress

Infinite Scroll für WordPress mit Jetpack von Automattic

WordPress Entwickler und Webdesigner

Infinite Scroll für WordPress mit Jetpack von Automattic

Das Plugin Jetpack bietet in der aktuellen Version eine ganz nette Funktion, mit der WordPress-Webseiten auf einfache Weise aufgepeppt werden können. Das entsprechende Jetpack-Modul nenn sich Infinite Scroll, dieser Effekt dürfte fast jedem von Facebook bekannt sein.

Wenn man auf Facebook nach unten scrollt werden über AJAX-Module weitere Statusmeldungen nachgeladen, man muss also keine Seitenzahlen anklicken um so an neue Inhalte zu gelangen.

Genau diese Funktion nennt sich Infinite Scroll und lässt sich jetzt dank des Jetpack Plugins auch relativ einfach in WordPress-Blogs implementieren.

Anzeige:




Grundvoraussetzung für Infinite Scroll über das Jetpack ist natürlich in erster Linie, dass das Jetpack Plugin überhaupt installiert ist. Das Plugin kann über das WordPress Plugin Verzeichnis bzw. im Backend von WordPress über Plugins > installieren installiert werden.

Your Jetpack is almost ready

Nach der Installation des Jetpack Plugins muss dieses über einen kostenlosen WordPress.com Account aktiviert werden, danach können alle Module des Plugins über den Menüpunkt Jetpack genutzt werden.

In der entsprechenden Modul-Übersicht muss dann die Infinite Scroll funktion aktiviert und konfiguriert werden.

Infinite Scroll Jetpack

Bevor diese Funktion genutzt werden kann, müssen allerdings ein paar Anpassungen am Theme vorgenommen werden. Die wichtigsten Anpassungen müssen in der functions.php des Themes vorgenommen werden, falls in dem entsprechenden Theme noch keine functions.php existiert, muss diese angelegt werden:

function infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'type' => 'scroll',
        'footer_widgets' => false,
        'container' => 'content',
        'wrapper' => true,
        'render' => false,
        'posts_per_page' => false
    ) );
}
add_action( 'init', 'infinite_scroll_init' );

Die meisten oben gezeigten Parameter sind optional und stellen die Standard Parameter dar, der Vollständigkeit halber möchte ich einen kurzen Überblick über alle Parameter geben:

type: scroll oder click – Infinite Scroll wird beim scrollen nach unten ausgeführt oder erst bei einem expliziten klick auf einen Button unter den Inhalten.

footer_widgets: Kann den ID-String eines Widget-Bereiches beinhalten, wenn diese verwendet werden.

container: Muss die ID des HTML-Elements enthalten, in der die Artikel liegen.

wrapper: true oder false – Wenn der Wert auf true gesetzt wird, werden die nachgeladenen Inhalte mit einem DIV.infinite-wrap umschlossen.

render: Kann eine Alternative Render Funktion enthalten, wird aber in der Regel nicht benötigt, dazu später mehr.

posts_per_page: Anzahl der Seiten die pro Vorgang nachgeladen werden sollen, wenn dieser Wert nicht gesetzt wird, verwendet das Jetpack Plugin den Standardwert aus „Einstellungen > Lesen“.

Neben diesen Einstellungen in der functions.php ist es wichtig, dass sich in dem Theme eine content.php Datei befindet. Diese Datei muss den Aufbau der Artikel-Vorschau beinhalten, also den Part, der sich im Content-Loop befindet.

Beispiel für eine content.php:

<article>
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
</article>

Sind diese Schritte durchgeführt, kann Infinite Scroll über den Menüpunkt Jetpack aktiviert und verwendet werden.

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

Eine Antwort zu “Infinite Scroll für WordPress mit Jetpack von Automattic”

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden .

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.