Oneindig scrollen

In plaats van op een link te moeten klikken om naar de volgende reeks berichten te gaan, zorgt Oneindig scrollen ervoor dat de volgende berichten automatisch worden weergegeven wanneer de lezer de onderkant van de site bereikt.

In tegenstelling tot veel Jetpack-functies werkt Oneindig scrollen alleen met thema’s die deze functie ondersteunen. Aangezien elk thema net iets anders is opgebouwd, heeft de functie Oneindig scrollen informatie nodig over het thema om goed te kunnen werken.

OPMERKING: Oneindig scrollen is al geïmplementeerd in de meeste nieuwe thema’s! Om te controleren of je thema Oneindig scrollen ondersteunt, ga je naar Jetpack → Instellingen → Schrijven in het dashboard van je site en kijk je onder het gedeelte “Themaverbeteringen“.

Als Oneindig scrollen niet in je thema is geïntegreerd, lees dan verder voor meer informatie over het toevoegen van ondersteuning aan je thema en het gebruik van CSS om de opmaak aan te passen.

Ondersteuning toevoegen

Het inschakelen van Oneindig scrollen is zeer vergelijkbaar met het toevoegen van ondersteuning voor miniatuurweergaven of editor-stijlen aan berichten, omdat we gebruikmaken van add_theme_support(). Door een klein beetje belangrijke informatie toe te voegen bij het oproepen van add_theme_support() kan Oneindig scrollen naadloos in je thema worden geïntegreerd.
Als je een thema gebruikt dat op een goede manier is opgebouwd, zoals de standaardthema’s van WordPress, is het een peulenschil om Oneindig scrollen toe te voegen. Zo doe je dit voor Twenty Twelve:

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

Als je dit doet, werkt de functie Oneindig scrollen helemaal perfect.

container

De parameter container is cruciaal voor het toevoegen van Oneindig scrollen aan je thema: hiermee wordt het ID-nummer van het HTML-element gespecificeerd waaraan Oneindig scrollen aanvullende berichten moet toevoegen. De standaardwaarde is content, maar dit kan elke geldige CSS ID zijn die in het ondersteunde thema wordt weergegeven en is geschikt om berichten aan toe te voegen. Dit is normaal gesproken de bovenliggende container van de berichten in je thema.

footer

Een van de problemen die zich voordoet bij Oneindig scrollen, is dat je geen toegang kunt krijgen tot de voettekst van een pagina, omdat nieuwe berichten worden geladen wanneer je de onderkant bereikt. Onze functie Oneindig scrollen bevat een vaste voettekst die tevoorschijn komt terwijl je naar beneden scrolt op de pagina. De parameter footer helpt je bij het invoegen van deze voettekst met het ontwerp van je thema. Door een andere ID te gebruiken, wordt de voettekst van Oneindig scrollen automatisch aan de breedte ervan aangepast, zodat deze functie perfect in je ontwerp past. Als je in plaats daarvan de waarde false gebruikt, zou er geen nieuwe voettekst worden toegevoegd.
Er zijn ook andere parameters die je kunt verbeteren. Hieronder staat een voorbeeld van alle standaardwaarden voor elke configuratie-optie:

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

Laten we elke optie eens afzonderlijk bekijken:

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

Voorbeelden

Omdat er zoveel verschillende thema’s en thema-ontwikkelaars bestaan, willen we genoeg controle bieden over hoe Oneindig scrollen zich gedraagt als noodzakelijk is om veel thema’s te ondersteunen. Dat gezegd hebbende, heeft onze ervaring met WordPress.com aangetoond dat vrijwel elk thema nauwelijks geconfigureerd hoeft te worden. Om dat te demonstreren, hebben we de configuratie Oneindig scrollen toegepast op de standaard WordPress-thema’s.

/**
 * Thema-ondersteuning voor oneindig scrollen toevoegen.
 *
 * @uses add_theme_support
 * @return void
 */
function twenty_twelve_infinite_scroll_init() {
 add_theme_support( 'infinite-scroll', array(
 'container' => 'content',
 ) );
}
add_action( 'after_setup_theme', 'twenty_twelve_infinite_scroll_init' );

/**
 * Thema-ondersteuning voor oneindig scrollen toevoegen.
 */
function twenty_eleven_infinite_scroll_init() {
 add_theme_support( 'infinite-scroll', array(
 'container' => 'content',
 'footer_widgets' => array( 'sidebar-3', 'sidebar-4', 'sidebar-5', ),
 'footer' => 'page',
 ) );
}
add_action( 'after_setup_theme', 'twenty_eleven_infinite_scroll_init' );

/**
 * Thema-ondersteuning voor oneindig scrollen toevoegen
 */
function twenty_ten_infinite_scroll_init() {
 add_theme_support( 'infinite-scroll', array(
 'container' => 'content',
 'render' => 'twenty_ten_infinite_scroll_render',
 'footer' => 'wrapper',
 ) );
}
add_action( 'after_setup_theme', 'twenty_ten_infinite_scroll_init' );
/**
 * Stel de code in die moet worden gebruikt voor het oproepen van berichten,
 * waar mogelijk gekoppeld aan sjabloon-onderdelen.
 *
 * Opmerking: moet een loop definiëren.
 *
function twenty_ten_infinite_scroll_render() {
 get_template_part( 'loop' );
}

Doe het met stijl

Het enige wat nog ontbreekt, is hoe Oneindig scrollen perfect in het ontwerp van je site kan worden geïntegreerd. Oneindig scrollen is afhankelijk van het thema dat body_class ondersteunt en voorziet thema-ontwikkelaars van de optimale flexibiliteit om de ervaring te verbeteren door een aantal specifieke tekstindeling-klassen te gebruiken: wanneer Oneindig scrollen actief is, wordt er een klasse infinite-scroll beschikbaar voor body; als het scrolltype ‘scroll’ is, dan moet er ook een klasse neverending zijn. Zodra het laatste bericht in een blog is geladen, wordt er een klasse infinity-end toegevoegd. Hiermee kun je je normale voettekst en navigatielinks verbergen en ze opnieuw weergeven wanneer Oneindig scrollen is voltooid. Voorbeeld:

/* Verbergt navigatielinks en voettekst op de site wanneer oneindig scrollen actief is */
.infinite-scroll #navigation,
.infinite-scroll.neverending #footer {
 display: none;
}
/* Geeft de voettekst opnieuw weer zodra alle berichten geladen zijn */
.infinity-end.neverending #footer {
 display: block;
}

Er zijn ook twee elementen waarvan je de stijl zult willen aanpassen, zodat deze overeenkomt met je thema:

[...]

en

span.infinite-loader is de indicator die wordt weergegeven terwijl nieuwe berichten worden geladen. Deze wordt ondergeschikt aan de container ingevoerd en het is mogelijk dat deze indicator wordt verborgen (in plaats van verwijderd uit de DOM) wanneer deze niet meer nodig is. Zorg dat je CSS geschikt is voor beide gevallen.
div#infinite-handle is de knop Meer berichten laden die voor elke type=click wordt weergegeven. Je kunt deze negeren als je thema altijd type=scroll gebruikt en nooit enige voettekst-widgets bevat.

JavaScript-events

Er zijn ongetwijfeld situaties in een thema waarbij het gebruik van JavaScript is vereist nadat berichten zijn toegevoegd. Een voorbeeld hiervan is het gebruik in een thema dat gebruikmaakt van jQuery Masonry en dat die bibliotheek geactiveerd moet worden om de aanvullende berichten te positioneren. Omdat we deze behoefte maar al te goed kennen, activeren we een event nadat berichten zijn toegevoegd. Om dit event te kunnen gebruiken, hoef je alleen de event post-load te controleren wanneer deze document.body probeert te activeren:

( function( $ ) {
 $( document.body ).on( 'post-load', function () {
 // Er zijn nieuwe berichten toegevoegd aan de pagina.
 } );
} )( jQuery );

Aangepaste argumenten aan de query Oneindig scrollen toevoegen

Sommige thema’s en plugins voegen extra argumenten aan berichtqueries toe om de manier te wijzigen waarop berichten worden gesorteerd of geladen. Je kunt het filter infinite_scroll_query_args ook gebruiken om deze extra argumenten toe te voegen aan Oneindig scrollen. In het voorbeeld hieronder voegen we 2 aangepaste sorteerparameters toe, namelijk order en orderby:

/**
 * Alle resultaten van Oneindig scrollen alfabetisch sorteren op berichtnaam
 *
 * @param array $args
 * @filter infinite_scroll_query_args
 * @return array
 */
function jetpack_infinite_scroll_query_args( $args ) {
 $args['order'] = 'ASC';
 $args['orderby'] = 'name';
 return $args;
}
add_filter( 'infinite_scroll_query_args', 'jetpack_infinite_scroll_query_args' );

Probleemoplossing

Overige opmerkingen

Omdat we weten dat deze functie ondersteund moet worden door thema’s, hebben we de ondersteuning hiervoor opgenomen in Jetpack voor de standaard WordPress-thema’s, Twenty Ten, Twenty Eleven enz. Als je een van deze thema’s gebruikt, kun je Oneindig scrollen inschakelen en gelijk genieten van deze functie. Als je een van de Automattic-thema’s van WordPress.org gebruikt, dan zou deze al ondersteuning voor Oneindig scrollen moeten bieden (in de functiekaart wordt een prompt weergegeven voor gebruikers die thema’s kunnen bijwerken als er een update voor dat thema beschikbaar is).

Privacy-informatie

Deze functie is standaard gedeactiveerd. Als je deze ooit wilt deactiveren, gebruik dan de instelling Meer berichten laden via het standaardgedrag voor thema’s in het gedeelte Thema-verbeteringen in Jetpack — Instellingen — Schrijven.