Kommentare 27

Infinite Scroll von Jetpack im Theme unterstützen

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:

// Add support for Jetpack Infinite Scroll
add_theme_support( 'infinite-scroll', array(
	'container'  => 'content',
) );

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:

// Add support for Jetpack Infinite Scroll
add_theme_support( 'infinite-scroll', array(
	'container'  => 'content',
	'footer'  => 'page',
) );

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:

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

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:

/* 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;
}

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!

Kategorie: Plugins, WordPress

Über den Autor

Veröffentlicht von

Hallo, ich bin Ellen, WordPress-Theme-Entwicklerin und Bloggerin bei Elmastudio. Ich liebe das Internet, Reisen, Vegan-Thaifood, Neuseeland und jede Menge Kaffee grünen Tee. Du findest mich auch auf Twitter, Google+, Flickr und Pinterest.

27 Kommentare

  1. ad

    Wow. Danke für den Artikel. Ich hatte es eben schon mal kurz aktiviert, aber so richtig zufrieden bin ich damit noch nicht. Auf alle Fälle muss ich diese Fußzeile anpassen, sonst gibt das nix.

  2. Infinite Scrolling hat Vor- und Nachteile. Ich persönlich finds zum Beispiel bei Facebook, Twitter, Pinterest oder Instagram-Online super praktisch. Aber bei Blogs find ich es manchmal nicht optimal, da man so schwer ein paar Seiten überspringen kann, oder bei einer Seite weitermachen kann, wo man stehen geblieben ist.

    • Das ist ein Unterschied. Aber worin besteht denn der Unterschied zwischen Facebook oder einem Blog? Blogs haben eine Suchfunktion, Tagwolken oder Kategorien. Damit sollte man bestimmte Themen, die man sucht, doch auch finden können. Ich frage mich, weshalb jemand bei einem Blog gezielt eine bestimmte Seite heraussuchen oder überhaupt blättern sollte. Wahrscheinlich fehlt mir die Fantasie. ;)

      • Damit meinte ich nur das es bei Facebook praktischer ist mit den Infinite-Scrolling. Denn wenn du auf einen Blog-Artikel klickst, der irgendwo unten in einer Infinite-Scroll Liste ist und wieder vom Artikel zurückkommst, musst du erneut ewig scrollen um den nächsten zu finden.

        Infinite Scrolling ist außerdem für die Performance nicht gut, bzw. verbraucht tierisch Browser-Speicher.

        Zudem entfernen sich die Header Elemente (wie Kategorien) wenn man ewig nach unten scrollt.

        Und Suchmaschinen können nur die Inhalte lesen die am Anfang sind, die weiteren Seiten können nicht gelesen werden, da Infinite Scroll auf JavaScript basiert.

    • @Jean:Claude Frick: Ich werde schauen, dass ich das Feature nach und nach bei zukünftigen Theme-Updates unterstützte. Momentan müsstest du es bei Bugis noch so machen, wie hier im Artikel beschrieben. Viele Grüße, Ellen

  3. Auch von mir: herzlichen Dank für den Artikel. Nettes Plugin, werde das später aus Interesse mal beim Waipoa-Theme testen. Muss aber auch ehrlich gestehen, dass ich den Sinn bei einem Blog auch bezweifel. Dafür gibt es, wie oben bereits angesprochen, andere Funktionen. Das sei aber jedem selbst überlassen ;)

  4. Juergen

    Funktioniert leider nicht. Als response bekomme ich immer “{“type”:”empty”}”

    Ich werde jetzt das Jetpack wieder deinstallieren, da es meine Seite leider nur langsam macht und sonst gar nix.

    Danke!

  5. Pingback: 8 aktuelle WebDesign Trends > Webdesign > Selbständig im Netz

Schreibe eine Antwort