In versie 2.0 hebben we de module Oneindig Scrollen in Jetpack geïntroduceerd. In tegenstelling tot veel van de modules die al in Jetpack zitten, werkt Oneindig Scrollen uitsluitend met thema’s die het ondersteunen. Omdat ieder thema iets anders geconstrueerd is, zal de module Oneindig Scrollen informatie nodig hebben over het thema om goed te kunnen werken.
Ondersteuning Toevoegen
Oneindig Scrollen toevoegen lijkt erg op ondersteuning toevoegen voor je post miniaturen of editor stijlen, omdat we gebruik maken van add_theme_support(). Door een paar belangrijke gegevens te verstrekken bij het oproepen add_theme_support(), zal Oneindig Scrollen naadloos integreren met jouw thema.
Als je een goed gemaakt thema hebt, zoals WordPress standaard thema’s, is het toevoegen van Oneindig Scrollen een koud kunstje. Hier zie je hoe je het moet doen voor Twenty Twelve:
add_theme_support( 'infinite-scroll', array( 'container' => 'content', 'footer' => 'page', ) );
Hiermee krijg je alle functies van Oneindig Scrollen.
container
De container parameter is het centrum voor het toevoegen van Oneindig Scrollen aan je thema, het specificeert het ID van het HTML element waar Oneindig Scrollen additionele posts aan zou moeten toevoegen. De standaardwaarde is content, maar het kan elk geldig CSS ID zijn dat in het ondersteunde thema verschijnt en dat geschikt is om posts aan toe te voegen. Dit is meestal de parent container van de posts in je thema.
footer
Een van de problemen met Oneindig Scrollen is dat je geen toegang hebt tot de voettekst van een pagina, omdat als je bij het einde bent er nieuwe posts zijn opgeladen. Ons oneindig scrollen wordt geleverd met een vaste voettekst die meeglijdt als je naar beneden scrolt op de pagina. De footer parameter helpt om deze voettekst in je thema design in te passen. Als het naar een ander ID gaat, zal de voettekst van oneindig scrollen zich aanpassen aan de breedte, zodat het perfect in jouw ontwerp past. Bekijk het live hier: http://twentytwelvedemo.wordpress.com/blog/. Als je in plaats daarvan een false waarde doorgeeft, zal er geen nieuwe voettekst worden toegevoegd.
Er zijn ook andere parameters die je kunt gebruiken – hier is een voorbeeld dat alle standaardwaardes aangeeft 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 ) );
Elke optie samengevat:
type
type accepteert twee verschillende waardes: scroll of click. Dit beheert het standaardgedrag van Oneindig Scrollen. scroll zorgt dat posts automatisch opladen als de bezoeker de onderkant van de huidige lijst of posts nadert, terwijl click een toets om meer posts te laden weergeeft, waarmee de gebruiker kan controleren wanneer er meer posts geladen worden.
scroll is de standaard, maar als een thema voettekst widgets heeft, kunnen die overschreven worden naar click zodat de widgets toegankelijk zijn.
footer_widgets
Het footer_widgets argument accepteert een verscheidenheid aan waarden en geeft aan of een thema wel of geen voettekst widgets heeft. Als er voettekst widgets zijn, zal scroll type ingesteld worden op click zodat de widgets toegankelijk zijn.
Eenvoudig gezegd, er kan respectievelijk een boolean true of false ingesteld worden als de voettekst altijd of nooit getoond moet worden.
Bovendien, zullen er ofwel een string die een zijbalk ID vertegenwoordigt('sidebar-1', bijvoorbeeld), ofwel een serie zijbalk ID’s geaccepteerd worden door de footer_widgets argument. De Oneindig Scrollen code zal controleren of de zijbalk(en) widgets bevatten, en het footer_widgets argument overeenkomstig instellen.
Indien mogelijk, raden we zeer aan zijbalk ID’s te verstrekken als een thema widget area’s onderaan de post lijst plaatst. Door dit te doen krijgen de gebruikers van het thema de beste ervaring door dynamisch te bepalen of het scroll type scroll moet zijn of click. Dit gezegd hebbende, als een thema click aangeeft als het type van de outset, kan het footer_widgets argument veilig worden weggelaten.
En of al deze opties nog niet genoeg zijn, het infinite_scroll_has_footer_widgets filter is beschikbaar voor geavanceerde logica. Het filter moet een boolean waarde retourneren, en zou gebruikt kunnen worden om de aanwezigheid van menu’s vast te stellen, of van een bezoeker die een mobiel apparaat gebruikt.
wrapper
Het wrapper argument gedraagt zich net zoals footer_widgets, in die zin dat het weinig verschillende waardes accepteert. Dit argument bepaalt of elke set additonele posts bewaard wordt binnen een <div> element of niet als het wordt toegevoegd aan de container die aangegeven is in het voorgaande argument.
Als een boolean waarde (true of false) aangegeven is, wordt of een <div> met de klasse infinite-wrap geplaatst in de additionele posts, of niet.
Om de posts te verpakken in een <div> met een aangepaste klasse, stel het wrapper argument in op een string die de aangepaste klasse vertegenwoordigt.
Het is meestal handig om de toegevoegde posts te verpakken in een <div>, tenzij dit leidt tot een ongeldige markering. Als een thema bijvoorbeeld gebruik maakt van een een lijst element (<ol>, <ul>) om posts weer te geven, moet de inpakker uitgeschakeld worden, zodat <div> elementen niet verschijnen op plekken waar ze niet horen.
render
Oneindig Scrollen maakt gebruik van een standaard WordPress loop om terug te gaan naar de additionele posts die het toevoegt, en maakt gebruikt van sjabloondelen in de content-{post format}.php vorm. Als een thema ten minste content.php bevat, dan kan het render argument weggelaten worden. Onderstaand de standaard render functie die Oneindig Scrollen gebruikt:
while( have_posts() ) {
the_post();
get_template_part( 'content', get_post_format() );
}
Indien meer aanpassingen noodzakelijk zijn, of als een thema geen gebruik maakt van de content sjabloondelen, moet een functienaam worden opgegeven voor het render argument en die functie zal gebruikt worden om de markeringen voor Oneindig Scrollen te genereren. De functie moet beschikken over de while() portie van de loop van WordPress en kan gebruik maken van alle voor het thema beschikbare functies als het posts teruggeeft.
posts_per_page
Het type argument controleert standaard hoeveel posts opgeladen worden, telkens als Oneindig Scrollen werkt. Voor het scroll type worden telkens zeven (7) posts geladen telkens als Oneindig Scrollen geactiveerd wordt. Voor het click type, wordt de waarde “Blog pagina’s tonen als meeste” onder Instellingen → Lezen van een website gebruikt.
Als een indeling van een thema echter een bepaald aantal posts verwacht, zal het posts_per_page argument de standaards overschrijven die in de vorige paragraaf besproken werden. Deze controle is voordelig, bijvoorbeeld in een thema met een indeling van drie kolommen, waar meer of minder dan drie posts zouden leiden tot een oneven indeling.
Voorbeelden
Met deze grote verscheidenheid aan thema’s en themers, proberen we voldoende controle uit te oefenen of Oneindig Scrollen reageert zoals nodig is om verschillende thema’s te ondersteunen. Dat gezegd hebbende, onze ervaring met WordPress.com heeft aangetoond dat elk thema over het algemeen zeer weinig configuratie opties nodig heeft. Als demonstratie hebben we de configuratie van Oneindig Scrollen van WordPress standaard thema’s geleverd.
Twenty Twelve
/**
* Add theme support for infinite scroll
*
* @uses add_theme_support
* @action after_setup_theme
* @return null
*/
function twenty_twelve_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'content'
) );
}
add_action( 'after_setup_theme', 'twenty_twelve_infinite_scroll_init' );
Voor diegenen die onbekend zijn met het Twenty Twelve thema: het maakt gebruik van content-{post format}.php sjabloondelen en heeft geen widget area onder posts, we hebben dus de footer_widgets en render argumenten weggelaten. Aangezien in werkelijkheid de container waarde overeenkomt met de standaard, kan dat argument ook weggelaten worden; we hebben het voor de duidelijkheid erin gelaten.
Twenty Eleven
/**
* Add theme support for infinity scroll
*/
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( 'init', 'twenty_eleven_infinite_scroll_init' );
Twenty Eleven wordt geleverd met voettekst widget areas, die niet bereikbaar zouden zijn als je naar beneden scrolt, omdat er nieuwe posts toegevoegd worden als je de onderkant bereikt. Om dit op te lossen, geven we een serie door met de ID’s van die widget areas aan footer_widgets. Als een van deze zijbalken nu een widget heeft, zal onze Oneindig Scrollen plugin dit detecteren en automatisch overschakelen op het click type (waar je klikt om meer posts op aanvraag op te laden), je voettekst inhoud is dus nog steeds geheel toegankelijk. Als je thema voettekst widgets had, overweeg dan om deze benadering te gbruiken, het zal de ervaring voor je gebruikers aanzienlijk verbeteren.
Twenty Ten
/**
* Add theme support for infinity scroll
*/
function twenty_ten_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'content',
'render' => 'twenty_ten_infinite_scroll_render',
'footer' => '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' );
}
Twenty Ten maakt gebruik van een enigszins verschillende sjabloonstructuur om posts terug te geven, we moeten dus een aangepaste render functie leveren voor Eindeloos Scrollen.
Doe Het Met Stijl
Het laatste ontbrekende stukje is hoe je Oneindig Scrollen perfect in je website design kunt laten passen. Eindeloos Scrollen vertrouwt op het thema dat het ondersteunt body_class, en het biedt thema ontwerpers de grootste flexibiliteit om het te verbeteren, door een paar bepaalde body classes te gebruiken: als oneindig scrollen actief is zal er een infinite-scroll class beschikbaar zijn op body; als het oneindig scrollen type “scroll” is, zal er ook een neverending class zijn. Als de laatste post in een blog is opgeladen, zal er een infinity-end class worden toegevoegd. Hiermee kun je gewone voettekst en navigatielinks verbergen, en ze opnieuw tonen als Oneindig Scrollen klaar is. Voorbeeld:
/* 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;
}
Er zijn ook twee elementen die je kunt stileren, zodat ze in je thema passen:
<span class="infinite-loader">[...]</span>en
<div id="infinite-handle">[...]</div>span.infinite-loader is de ladingsindicator die getoond wordt als nieuwe posts opgehaald worden. Het wordt ingevoegd als een child van container, en het is mogelijk dat als het niet meer nodig is het verborgen zal worden in plaats van verwijderd van de DOM. Zorg dat je CSS beide mogelijkheden aankan.
div#infinite-handle is de toets Meer Posts Laden getoond voor type=click. Je kunt dit negeren als je thema altijd gebruik maakt van type=scroll en nooit voettekst widgets zal hebben.
JavaScript Evenementen
Er zijn onvermijdelijk situaties in een thema waarvoor JavaScript interactie nodig is nadat posts zijn toegevoegd. Een voorbeeld hiervan is in een thema dat gebruik maakt van jQuery Masonry, die die bibliotheek moet triggeren om de additionele posts op de juiste plaats te zetten. We erkennen deze noodzaak en daarom triggeren we een evenement nadat posts zijn toegevoegd. Om gebruik te maken van dit evenement, gebruik je gewoon het post-load evenement als het verschijnt op document.body:
( function( $ ) {
$( document.body ).on( 'post-load', function () {
// Er zijn nieuwe posts aan de pagina toegevoegd.
} );
} )( jQuery );
Overige aantekeningen
We erkennen dat deze functie themaondersteuning nodig heeft om van nut te kunnen zijn, en daarom hebben we ondersteuning voor de laatste drie standaardthema’s, Twenty Ten, Twenty Eleven en Twenty Twelve samengevoegd met Jetpack. Mocht je een van deze thema’s gebruiken, kun je de module Eindeloos Scrollen inschakelen en direct van deze nieuwe functie gebruik maken. Gebruik je een van de Automattic thema’s van WordPress.org, moeten deze eerst bijgewerkt worden met oneindig scrollen ondersteuning (de module kaart zal een prompt leveren aan gebruikers die zichzelf kunnen upgraden als het actieve thema een beschikbare update heeft).
Jetpack door WordPress.com 