Eines der neuen Features des Jetpack WordPress-Plugins ist Infinite Scroll, das unendliche Scrollen ohne den “älteren Artikel”-Link klicken zu müssen. Ältere Artikel werden automatisch (oder bei Klick) auf die Seite nach geladen, sobald man ans Seitenende scrollt (hier kannst du dir den Effekt in einer Live-Demo von Twenty Twelve anschauen). Da für die Nutzung des Features allerdings ein paar Anpassung im Theme nötig sind möchte ich hier kurz beschreiben, wie du Infinite Scroll in dein Theme einbinden kannst.

1. Die functions.php erweitern

Wenn dein Theme Infinite Scroll von Jetpack noch nicht standardmäßig unterstützt, musst du als ersten den Theme-Support in der functions.php einfügen. Dazu benötigst du diesen Code:

[code]
// Add support for Jetpack Infinite Scroll
add_theme_support( ‘infinite-scroll’, array(
‘container’ => ‘content’,
) );
[/code]

Der Wert bei Container (im Code-Beispiel content) sollte dabei die ID des Containers sein, der alle Artikel im Theme einschließt.

Infinite Scroll von Jetpack

Wenn Du dir nicht sicher bis, welche ID dieser Div-Container ist deinem Theme hat, kannst du am besten die “Element Untersuchen”-Funktion oder Firebug in deinem Browser nutzen, um nach der ID zu suchen. Diese Container-ID benötigt Infinite Scroll, um zu wissen in welchen Container die weiteren Artikel geladen werden sollen.

2. Weitere Optionen des Infinite Scroll-Features

Da durch das automatische Laden neuer Artikel kein Footer mehr angezeigt wird (bzw. erst ganz am Ende von allen Artikeln), bietet Jetpacks Infinite Scroll einen alternativen, stehenden Footer an, der am Seitenende leicht transparent angezeigt werden kann.

Der leicht transparente Infinte Scroll Footer im Twenty Twelve Theme.

Möchtest du diesen Footer nutzen, musst du deine Funktion noch um die Option “footer” erweitern:

[code]
// Add support for Jetpack Infinite Scroll
add_theme_support( ‘infinite-scroll’, array(
‘container’ => ‘content’,
‘footer’ => ‘page’,
) );
[/code]

Die ID “page” steht hier für die ID des Div-Containers, der die maximale Breite deines Themes definiert. Im Fall von Twenty Twelve also der weiße Seiten-Hintergrund. Wieder kannst du mit Hilfe der Element untersuchen-Funktion im Browser schauen, welche ID das in deinem Theme ist.

Wenn dein Theme Footer-Widgets nutzt, kannst du auch wählen, dass die Seiten erst bei Klick geladen werden sollen. Duzu kannst du die Option type “click” erweitern:

[code]
// Add support for Jetpack Infinite Scroll
add_theme_support( ‘infinite-scroll’, array(
‘container’ => ‘content’,
‘footer’ => ‘page’,
‘type’ => ‘click’,
) );
[/code]

Standardmäßig ist die type Einstellung auf “scroll” gesetzt.

Weitere Einstellungsoptionen sind zum Beispiel “footer_widgets” für das automatische Erkennen von genutzen Footer-Widgets im Theme. Die detaillierte englischsprachige Erklärung zur Integration von Infinite Scroll in WordPress-Themes auf der Jetpack-Seite erwähnt alle zusätzlichen Möglichkeiten noch einmal im Detail.

3. CSS Styles

Mit Hilfe der CSS-Styles für Infinte Scroll kannst du auch noch erreichen, dass dein Seiten-Footer erst angezeigt wird, wenn alle Artikel geladen wurden. Dazu benötigst du die folgenden CSS-Styles:

[css]
/* Hides navigation links and site footer when infinite scroll is active */
.infinite-scroll #navigation,
.infinite-scroll.neverending #footer {
display: none;
}
/* Shows the footer again in case all posts have been loaded */
.infinity-end.neverending #footer {
display: block;
}
[/css]

Wenn du dagegen die Klick-Option von Infinite Scroll nutzt, kannst du mit Hilfe der CSS-ID div#infinite-handle den Klick-Button optisch noch weiter an dein Theme-Design anpassen.

Wie gefällt dir die Infinite Scroll-Funktion in Themes allgemein und hast du bereits Erfahrungen mit der neuen Funktion von Jetpack gemacht? Über weitere Tipps und Feedback freue ich mich sehr!