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!

Hi, I'm Ellen, WordPress theme developer and blogger at Elmastudio. I love vegan food, traveling and fluffy puppies. You can also find me on Twitter, Facebook and Instagram.

30 Kommentare

  1. 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.

  3. Schön und Gut das dass mit dem JetPack-Plugin funktioniert, aber was mache ich wenn ich dieses Plugin nicht benutzen will, funktioniert das dann eben so „einfach“ wie beschrieben?

  4. Danke für diesen spannenden Artikel.
    Ist die Funktion in Deinem Bugis Theme schon soweit integriert oder muss dort ebenfalls die Functions.php bearbeitet werden ?

    Danke und herzlicher Gruss aus der Schweiz

    JC

    • @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

      • @Gerhard Schröder: Bei allen Themes, die Footer-Widgets nutzen, ist die automatische Scroll-Funktion höchstwahrscheinlich weniger sinnvoll. Man könnte aber die Option „click“ wählen.

  5. Wow! Klasse. Erstens: Das habe ich noch gar nicht gesehen und zweitens: Damit werde ich mich nachher mal näher befassen! Vielen lieben Dank!

    Liebste Grüße, Daniela

  6. Wie sieht das denn aus SEO Sicht aus?

    Alle Artikel die nicht beim Laden zu sehen sind, sind für Suchmaschinen auch versteckt?

    • @Ratze: In der Struktur der Artikel (also Aufbau auf page 2, page 3 usw.) ändert sich meines Wissens nichts, nur die Inhalte werden mit Hilfe eines Scripts automatisch auf die Startseite nachgeladen.

  7. Hi,

    Any special place in functions.php where to place the code?
    My first attempt failed.

    Perhaps this feature could be added to an updated Waipoua?

    Rgds,
    Johan

  8. @Johan: after the themename_setup should work, there you can also see other add_theme_support functions. Yes, I will definitely include the code in the next Waipoua update. Best, Ellen

  9. 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 ;)

  10. Hallo Ellen, wird das nächste Update für Baylys und Meola den Code bereits enthalten, so dass lediglich die Aktivierung genügt? Gruß

  11. 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!

  12. Funktioniert leider nicht mit eurem Renkon Theme. Ich hätte dort gerne wie beim Jetpack infinite scroll einen load more button bzw. einen Ladehinweis damit der User merkt da kommt gleich noch mehr.

  13. geht das nicht einfacher – mit einem widget das man in eine neue seite mit einem einzigen befehl einbaut, zum beispiel:

    [loadallcontent]

    diese dann als startseite auswählen in wordpress und fertig?

  14. ich verzweile gerade an den dem Button „ältere Beiträge“. Nachdem die Funktion in Jetpack aktiviert wurde, würde ich den Wortlaut gerne umbenennen aber dies lässt sich über kein language file realisieren.
    Gibt es da irgendeinen Trick den ich übersehe :-(

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *