Unendlich scrollen

Anstatt auf einen Link klicken zu müssen, um weitere Beiträge zu erhalten, stellt „Unendlich scrollen“ automatisch neue Beiträge zur Verfügung, wenn der Leser das Ende der Seite erreicht.

Im Gegensatz zu vielen anderen Jetpack-Modulen funktioniert „Unendlich scrollen“ nur mit Themes, die dieses unterstützen. Da sich Themes in ihrem Aufbau unterscheiden, benötigt das „Unendlich scrollen“-Modul Informationen über das Theme, um ordnungsgemäß funktionieren zu können. Im Nachfolgenden erhälst du detailliertere Anweisungen dazu, wie du die Unterstützung von „Unendlich scrollen“ in deinem Theme hinzufügst und das Aussehen mittels CSS anpasst.

Unterstützung hinzufügen

Aufgrund der Verwendung von add_theme_support() ähnelt die Aktivierung von unendlichem Scrollen dem Hinzufügen der Unterstützung von Vorschaubildern oder WYSIWYG-Editor-Stylesheets. Durch die Bereitstellung einiger Schlüsselinformationen beim Aufruf von add_theme_support()lässt sich „Unendlich scrollen“ nahtlos in dein Theme integrieren.

Wenn du ein ordentlich gestaltetes Theme verwendest, wie zum Beispiel eines der WordPress Standard-Themes, dann ist die Integration von „Unendlich scrollen“ ein Kinderspiel. So funktioniert es im „Twenty Twelve“-Theme:

add_theme_support( 'infinite-scroll', array(
	'container' =&gt; 'content',
	'footer' =&gt; 'page',
) );

Damit ist „Unendlich scrollen“ voll funktionsfähig.

container
Der container Parameter stellt das Kernelement beim Hinzufügen von „Unendlich scrollen“ in dein Theme dar: Er legt die ID des HTML-Elements fest, in welches „Unendlich scrollen“ weitere Beiträge einfügen soll. Der Standardwert ist content, es kann sich bei diesem aber um jede beliebige gültige CSS-ID des Themes handeln, die sich für das Anhängen von Beiträgen eignet. Für gewöhnlich ist dies das Elternelement für Beiträge in deinem Theme.

footer
Ein Problem beim unendlichen Scrollen ist, dass die Fußzeile einer Seite nicht mehr zugänglich ist, da stets neue Beiträge geladen werden, bevor das Ende der Seite erreicht werden kann. Unser „Unendlich scrollen“-Modul stellt eine feste Fußzeile bereit, die eingeblendet wird sobald du die Seite runter scrollst. Der footer Parameter hilft dabei, diese Fußzeile an das Design deines Themes anzupassen. Durch Übergabe einer weiteren ID, passt sich die „Unendlich scrollen“-Fußzeile in ihrer Breite an und integriert sich damit perfekt in dein Design. Sehe dir das ganze hier in Aktion an: http://twentytwelvedemo.wordpress.com/blog/. Wenn du stattdessen einen false Wert übergist, wird keine Fußzeile angezeigt.

Es gibt noch weitere Parameter, an denen du Veränderungen vornehmen kannst. Das folgende Beispiel zeigt die Standardwerte für die jeweiligen Konfigurationsoptionen:

add_theme_support( 'infinite-scroll', array(
	'type'           =&gt; 'scroll',
	'footer_widgets' =&gt; false,
	'container'      =&gt; 'content',
	'wrapper'        =&gt; true,
	'render'         =&gt; false,
	'posts_per_page' =&gt; false,
) );

Die einzelnen Optionen im Detail:

type
type akzeptiert zwei verschiedene Werte, scroll oder click, und kontrolliert wie „Unendlich scrollen“ sich standardmäßig verhält. Mit scroll werden automatisch neue Beiträge geladen, sobald der Besucher das Ende der aktuellen Beitragsliste erreicht. click hingegen zeigt die Schaltfläche Weitere Beiträge laden an, wodurch der Besucher die Kontrolle darüber hat, wann neue Beiträge geladen werden sollen.

scroll ist als Standardwert festgelegt. Für Themes mit Fußzeilen-Widgets wird dieser aber möglicherweise mit click überschrieben, damit man auf diese weiterhin zugreifen kann.

footer_widgets
Das Argument footer_widgets akzeptiert eine Vielzahl von Werten und zeigt an, ob ein Theme Fußzeilen-Widgets besitzt oder nicht. Wenn Fußzeilen-Widgets vorhanden sind, dann wird click als Scrolltyp bestimmt, sodass die Widgets zugänglich bleiben.

Einfacher ausgedrückt, kann entweder der boolesche Wert true oder false festgelegt werden, wenn die Fußzeile immer bzw. nie eingeblendet werden soll.

Zusätzlich akzeptiert das footer_widgets Argument entweder einen String mit der ID der Seitenleiste (z.B. 'sidebar-1') oder ein Array mit Seitenleisten-IDs. Der „Unendlich scrollen“-Code überprüft, ob die Seitenleiste(n) Widgets beinhalten und passt das footer_widgets Argument dementsprechend an.

Wenn ein Theme Widget-Bereiche unter der Beitragsliste platziert, empfehlen wir dir dringend, wenn möglich, Seitenleisten-IDs bereitzustellen. Dies ist besonders benutzerfreundlich, da dynamisch festgestellt werden kann, ob scroll oder click als Scrolltyp bestimmt werden soll. Wenn in einem Theme also bereits von Anfang an der Typ click festgelegt ist, dann kann das footer_widgets Argument ohne Weiteres weggelassen werden.

Als wären alle diese Optionen noch nicht genug, so steht der Filter infinite_scroll_has_footer_widgets für weiterführende Logik zur Verfügung. Der Filter muss einen booleschen Wert zurückgeben und kann verwendet werden, um zu ermitteln, ob Navigationsmenüs vorhanden sind oder ein Besucher ein Mobilgerät nutzt.

wrapper
Das wrapper Argument verhält sich ähnlich dem footer_widgets Argument, indem es eine Reihe verschiedener Werte akzeptiert. Das Argument stellt fest, ob sich die gruppierten Beiträge jeweils innerhalb eines <div> Elements befinden oder nicht, wenn diese an den Container, der im vorherigen Argument spezifiziert wurde, angehängt werden.

Wenn ein boolescher Werte (true oder false) spezifiziert wird, dann wird ein <div> mit der Klasse infinite-wrap um die zusätzlichen Beiträge entweder gelegt oder nicht gelegt.

Um ein <div> einer benutzerdefinierten Klasse um die Beiträge zu legen, bestimme für das wrapper Argument einen String, der die eigene Klasse repräsentiert.

Es hat sich generell bewährt, ein <div> um die angehängten Beiträge zu legen, augenommen wenn dies in einem ungültigen Markup resultieren sollte. Verwendet ein Theme zur Anzeige von Beiträgen etwa ein Listenelement (<ol>, <ul>), dann sollte das Wrapper-Element deaktiviert werden, sodass keine <div> Elemente angezeigt werden wo sie nicht hingehören.

render
„Unendlich scrollen“ verwendet den gewöhnlichen WordPress Loop und nutzt Bestandteile des Templates in der Form content-{post format}.php, um die hinzukommenden Beiträge anzuordnen . Wenn ein Theme zumindest content.php beinhaltet, dann kann das render Argument weggelassen werden. Unten siehst du die Standardfunktion, die von „Unendlich scrollen“ verwendet wird, um Beiträge anzuordnen:

while( have_posts() ) {
	the_post();
	get_template_part( 'content', get_post_format() );
}

Wenn größere Anpassungen nötig sein sollten oder, wenn ein Theme die content Teile des Templates nicht nutzt, muss ein Funktionsname für das render Argument bestimmt werden. Diese Funktion wird zur Generierung des Markups von „Unendlich scrollen“ verwendet. Die Funktion muss die Komponenten while() des WordPress Loops beinhalten und kann jede dem Theme bei der Anordnung der Beiträge verfügbare Funktion verwenden.

posts_per_page
Für gewöhnlich kontrolliert das type Argument wie viele Beiträge jedes Mal beim unendlichen Scrollen geladen werden. Mit dem Typ scroll werden bei jeder Aktivierung von „Unendlich scrollen“ sieben (7) Beiträge geladen. Für den Typ click wird der Wert verwendet, der für „Blogseiten zeigen maximal“ unter Einstellungen → Lesen festgelegt wurde.

Sollte das Layout eines Themes jedoch eine bestimmte Anzahl an Beiträgen überschreiten, dann überschreibt das Argument posts_per_page die Standardwerte, die im vorherigen Abschnitt diskutiert wurden. Diese Kontrolle ist beispielsweise in Themes mit einem Dreispaltenlayout von Vorteil, in welchem die Anzeige von mehr oder weniger als drei Beiträgen in einem ungleichmäßigen Layout resultieren würde.

Beispiele

Mit der großen Anzahl der verschiedenen existierenden Themes und Themers war es unser Ziel soviel viel Kontrolle wie möglich über „Unendlich scrollen“ zu gewähren, sodass diese Funktion von vielen Themes unterstützt wird. Unsere Erfahrung mit WordPress.com hat uns gezeigt, dass jedes Theme generell nur sehr wenige Konfigurationsoptionen benötigt. Um dies zu demonstrieren, haben wir die Konfiguration von „Unendlich scrollen“ für die WordPress Standard-Themes bereitgestellt.

Twenty Twelve

/**
 * Add theme support for infinite scroll.
 *
 * @uses add_theme_support
 * @return void
 */
function twenty_twelve_infinite_scroll_init() {
	add_theme_support( 'infinite-scroll', array(
		'container' =&gt; 'content',
	) );
}
add_action( 'after_setup_theme', 'twenty_twelve_infinite_scroll_init' );

Das „Twenty Twelve“-Theme, insofern du mit diesem noch nicht vertraut bist, verwendet content-{post format}.php Template-Bestandteile und es befindet sich kein Widget-Bereich unterhalb der Beiträge, weshalb wir die footer_widgets und render Argumente weggelassen haben. Da der Wert für den container dem Standardwert entspricht, hätte dieser ebenfalls weggelassen werden können. Zu Demonstrationszwecken haben wir diesen jedoch beibehalten.

Twenty Eleven

/**
 * Add theme support for infinity scroll.
 */
function twenty_eleven_infinite_scroll_init() {
	add_theme_support( 'infinite-scroll', array(
		'container'      =&gt; 'content',
		'footer_widgets' =&gt; array( 'sidebar-3', 'sidebar-4', 'sidebar-5', ),
		'footer'         =&gt; 'page',
	) );
}
add_action( 'init', 'twenty_eleven_infinite_scroll_init' );

Das „Twenty Eleven“-Theme ist mit Widget-Bereichen in der Fußzeile ausgestattet. Da beim Herunterscrollen stets neue Beiträge geladen werden, bevor das Ende der Seite erreicht werden kann, sind diese jedoch nicht erreichbar. Um dies zu lösen, übergeben wir ein Array mit den IDs dieser Widget-Bereiche an footer_widgets. Wenn nun eine dieser Seitenleisten ein Widget beinhaltet, wird dieses von unserem „Unendlich scrollen“-Plugin entdeckt und es findet ein automatischer Wechsel zum Typ click (dabei können mit einem Klick weitere Beiträge geladen werden) statt, sodass der Inhalt deiner Fußzeile komplett zugänglich ist. Wenn Fußzeilen-Widgets Bestandteil deines Theme sind, solltest du diesen Ansatz in Erwägung ziehen, um die Benutzerfreundlichkeit zu erhöhen.

Twenty Ten

/**
 * Add theme support for infinity scroll
 */
function twenty_ten_infinite_scroll_init() {
	add_theme_support( 'infinite-scroll', array(
		'container' =&gt; 'content',
		'render'    =&gt; 'twenty_ten_infinite_scroll_render',
		'footer'    =&gt; 'wrapper',
	) );
}
add_action( 'init', 'twenty_ten_infinite_scroll_init' );

/**
 * Set the code to be rendered on for calling posts,
 * hooked to template parts when possible.
 *
 * Note: must define a loop.
 *
function twenty_ten_infinite_scroll_render() {
	get_template_part( 'loop' );
}

Das „Twenty Ten“-Themes verwendet eine etwas andere Template-Struktur zur Anordnung von Beiträgen. Um unendlich scrollen zu können, benötigen wir daher eine benutzerdefinierte Funktion zum Ordnen der Beiträge.

Stilvolle Umsetzung

Die perfekte Integration von „Unendlich scrollen“ in das Design deiner Seite ist das letzte fehlende Puzzleteil. „Unendlich scrollen“ baut auf der Theme stützenden body_class auf. Theme-Entwicklern wird durch die Verwendung bestimmter Body-Klassen äußerste Flexibilität geboten: Wann immer „Unendlich scrollen“ aktiviert ist, ist die Klasse infinite-scroll im body verfügbar. Für den Scrolltyp „scroll“ siehst du dort außerdem die Klasse neverending. Sobald der letzte Beitrag eines Blogs geladen wurde, wird die Klasse infinity-end hinzugefügt. Damit kannst du deine reguläre Fußzeile und deine Navigationslinks verstecken und diese wieder zeigen, wenn „Unendlich scrollen“ am Ende angelagt ist. Ein Beispiel:

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

Du solltest zudem das Aussehen von zwei Elementen anpassen, sodass diese mit dem Design deines Themes übereinstimmen:

<span class="infinite-loader">[...]</span>

und

<div id="infinite-handle">[...]</div>

span.infinite-loader zeigt an, dass gerade neue Beiträge geladen werden. Dieses Element wird als Kindelement des Containers eingefügt und, nachdem es nicht mehr länger benötigt wird, möglicherweise eher versteckt als aus dem DOM entfernt werden. Versichere dich, dass deine CSS in beiden Fällen funktioniert.

Bei div#infinite-handle handelt es sich um die Schaltfläche Weitere Beiträge laden, die für type=click angezeigt wird. Wenn dein Theme immer type=scroll verwendet und künftig auch keine Fußzeilen-Widgets beinhalten wird, kannst du dies ignorieren.

JavaScript Events

Unvermeidlicherweise gibt es Situationen in einigen Themes, die nach dem Hinzufügen weiterer Beiträge Javascript erfordern. Beispiel dafür ist ein Theme, das jQuery Masonry verwendet und diese Bibliothek triggern muss, um die hinzukommenden Beiträge positionieren zu können. Aufgrund dessen triggern wir nach dem Anhängen der Beiträge ein Event. Fange einfach das post-load Event, wenn es auf document.body feuert, um von diesem Event Gebrauch zu machen:

( function( $ ) {
	$( document.body ).on( 'post-load', function () {
		// New posts have been added to the page.
	} );
} )( jQuery );

Weitere Anmerkungen

Da wir erkannt haben, dass diese Funktion vom Theme unterstützt werden muss, um verwendet werden zu können, haben wir die Unterstützung für die letzten drei Standardthemes „Twenty Ten“, „Twenty Eleven“ und „Twenty Twelve“ mit Jetpack gebündelt. Solltest du eines dieser Themes benutzen, dann kannst du das „Unendlich scrollen“-Modul aktivieren und sofort verwenden. Die Automattic Themes von WordPress.org sollten unendliches Scrollen bereits unterstützen (die Modulkarte wird Nutzer zur Aktualisierung ihrer Themes auffordern, sobald ein Update für das aktive Theme zur Verfügung steht).

Unendlich scrollen

Unterstützung hinzufügen

Die einzelnen Optionen im Detail:

Beispiele

Twenty Twelve

Twenty Eleven

Twenty Ten

Stilvolle Umsetzung

JavaScript Events

Weitere Anmerkungen

Inhaltsverzeichnis

Kategorien

Unendlich scrollen

Unterstützung hinzufügen

Die einzelnen Optionen im Detail:

Beispiele

Twenty Twelve

Twenty Eleven

Twenty Ten

Stilvolle Umsetzung

JavaScript Events

Weitere Anmerkungen

Ähnliche Beiträge

Inhaltsverzeichnis

Kategorien