De WordPress Loop is een integraal onderdeel van hoe je WordPress site inhoud weergeeft. Als je bepaalde delen van je site wilt kunnen aanpassen (of misschien iets meer wil weten over de werking achter WordPress), dan moet je de WordPress Loop kennen.
Of je nu nog nooit van de WordPress Loop hebt gehoord of er al enigszins mee bekend bent, dit artikel is er om je op de hoogte te brengen van alles wat je moet weten over de WordPress Loop.
We leggen uit wat het is en waarom het handig kan zijn om met de Loop te kunnen werken. Daarna laten we je stap voor stap zien hoe je met de Loop kunt werken in PHP templates (voor klassieke thema’s) en met het Query Loop blok in nieuwere blokthema’s.
Laten we beginnen bij het begin…
Wat is de WordPress Loop?
De WordPress Loop is wat WordPress gebruikt om content op je site weer te geven. Het is traditionele PHP code die je kunt aanpassen met behulp van template tags, hoewel de nieuwere WordPress blokthema’s het Query Loop blok gebruiken in plaats van PHP.
In meer technische termen bevraagt de Loop de database van je site om de gegevens voor elk bericht op te halen en geeft die gegevens vervolgens weer volgens een template. Om dit template aan te passen kun je verschillende template tags of blokken gebruiken, afhankelijk van of je PHP of het Query Loop blok gebruikt.
Stel bijvoorbeeld dat je een pagina hebt met je meest recente blogberichten, zoals je hoofdpagina met blogoverzichten:
- Eerst controleert de Loop of er berichten zijn.
- Als er berichten zijn, wordt het eerste bericht weergegeven volgens je template.
- Daarna wordt gecontroleerd of er nog een bericht bestaat. Als er nog een bericht is, wordt de template opnieuw “doorgeloopt” en wordt het tweede bericht volgens dezelfde template weergegeven.
- Het zal doorgaan met het doorlopen van je berichten totdat er geen berichten meer zijn (of een andere limiet wordt bereikt, zoals paginatieregels).
Hier is een voorbeeld aan de voorkant van hoe de Loop eruit ziet van de Kinsta blog – elk gemarkeerd vak is een andere herhaling van de “loop”. Je kunt zien dat alle zes vakjes dezelfde template gebruiken.
Wanneer gebruikt WordPress de Loop om content weer te geven?
WordPress vertrouwt op de Loop om content weer te geven op elke pagina waarop meerdere stukken content staan (berichten, pagina’s, aangepaste posttypes, enz.).
Hier zijn enkele van de belangrijkste situaties waarin WordPress de Loop gebruikt, hoewel dit geen volledige lijst is:
- Homepage van de website die je recente berichten toont
- Hoofdpagina met blogoverzichten
- Pagina’s met categorieoverzichten
- Pagina’s met tags
- Pagina’s met zoekresultaten
- Pagina’s met custom berichten
Technisch gezien kan WordPress de Loop ook gebruiken om een individueel stuk content weer te geven. In deze situaties eindigt de “loop” nadat het eerste item is opgevraagd.
Wanneer de meeste mensen echter denken aan de WordPress Loop, dan denken ze aan het “doorloopen” van meerdere items om ze weer te geven in een soort lijst.
Waar kun je de WordPress Loop voor gebruiken?
Als je leert hoe je de WordPress Loop kunt bewerken en manipuleren, kun je WordPress gebruiken om gebruiksvriendelijkere, dynamische websites te bouwen.
Hier zijn drie van de belangrijkste manieren waarop je de WordPress Loop kunt gebruiken om je site te verbeteren…
Bepaal hoe de basiscontent en metadata van berichten worden weergegeven
De meest voorkomende reden waarom je de WordPress Loop zou willen aanpassen is om de basislayout van de inhoud van je site te regelen.
Laten we bijvoorbeeld zeggen dat je de layout van je blogpagina wilt regelen. Door de WordPress Loop te manipuleren, kun je de layout van belangrijke elementen zoals de titel van het bericht, de inhoud, de auteur, de metagegevens (bijvoorbeeld de publicatiedatum) enzovoort regelen.
Met conditionals kun je ook verschillende layouts maken voor verschillende soorten inhoud. Je kunt bijvoorbeeld één layout gebruiken om berichten te tonen uit de categorie “Nieuws” en een andere layout om berichten te tonen uit de categorie “Interview”.
Zo kun je het ontwerp optimaliseren voor verschillende soorten inhoud op je site en een geweldige ervaring creëren voor je bezoekers.
Custom veldgegevens invoegen om meer dynamische sites te bouwen
Als je weet hoe je de WordPress Loop moet gebruiken, kun je WordPress ook gebruiken om meer dynamische inhoudssites te bouwen.
Bijvoorbeeld, laten we zeggen dat je een onroerend goed website wilt maken. Als onderdeel daarvan wil je een pagina hebben met informatie over huizen die te koop zijn via een custom berichttype met de naam “Huis” dat je hebt gemaakt.
Als je simpelweg het standaardontwerp voor het weergeven van berichten gebruikt dat bij je thema wordt geleverd, zou het alleen basisinformatie weergeven zoals de titel en de inhoud – net zoals je gewone blogberichten worden weergegeven.
Door de WordPress Loop voor je “Huis” berichttype te bewerken en de relevante template-tags toe te voegen, kun je informatie opnemen uit custom velden die je gebruikt, zoals het aantal slaapkamers en badkamers in elk huis, de vierkante meters, enzovoort.
Niet-bericht content invoegen in je berichtlijsten (bijv. advertenties)
Als je de WordPress Loop leert gebruiken, kun je ook niet-dynamische inhoud invoegen in de lijsten met content van je site. Dat is inhoud die je site niet uit de WordPress database haalt.
Stel bijvoorbeeld dat je een banneradvertentie wilt invoegen tussen elk bericht in de lijst (of een ander soort statische inhoud). Door de Loop te bewerken, kun je gemakkelijk je advertenties op elk punt in de layout invoegen.
Twee opties voor het werken met de WordPress Loop
Bij de moderne ontwikkeling van WordPress thema’s hangt de manier waarop je met de WordPress Loop werkt af van het type thema dat je gebruikt.
In het verleden waren alle WordPress thema’s gebaseerd op PHP templates, dus moest je met de Loop werken door PHP te gebruiken in die templatebestanden. Tegenwoordig worden dit soort thema’s klassieke WordPress thema’s genoemd.
De meeste populaire WordPress thema’s gebruiken nog steeds deze klassieke aanpak, wat betekent dat je PHP gebruikt om met de WordPress Loop te werken. Enkele voorbeelden van klassieke thema’s zijn Astra, GeneratePress, Kadence, Neve, OceanWP, enzovoort.
De nieuwe WordPress blokthema’s die gebouwd zijn op de Site Editor gebruiken echter niet langer PHP templatebestanden zoals klassieke thema’s, dus je kunt PHP niet gebruiken om de Loop aan te passen als je een blokthema gebruikt. In plaats daarvan gebruiken deze nieuwe blokthema’s een speciaal “Query Loop” blok om de WordPress Loop aan te passen.
Je kunt onze lijst met de beste blokthema’s bekijken om voorbeelden te zien van populaire thema’s die deze aanpak gebruiken.
Hieronder laten we je zien hoe je beide benaderingen gebruikt om met de WordPress Loop te werken:
- Als je een klassiek thema gebruikt, gebruik je PHP om te communiceren met de Loop.
- Als je een blokthema gebruikt, dan gebruik je de Query Loop blokmethode voor interactie met de Loop.
Als je niet zeker weet welk type thema je gebruikt, kun je kijken naar de opties onder het Appearance menu in je WordPress dashboard:
- Als je andere opties ziet zoals Customize, Widgets en Theme File Editor, dan gebruik je een klassiek thema.
- Als je een Editor optie ziet zonder de andere opties, dan betekent dat meestal dat je een blokthema gebruikt.
De WordPress Loop gebruiken met klassieke thema’s (code)
Als je een klassiek WordPress thema gebruikt, dan werk je met de WordPress Loop binnen de PHP template bestanden van je thema.
Hier is een voorbeeld van een heel eenvoudige implementatie van de WordPress Loop:
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();
endwhile;
else:
_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif;
?>Om je te helpen begrijpen wat deze code doet, zullen we het opsplitsen in drie secties:
- De loop openen
- Template codes gebruiken om te bepalen welke inhoud wordt weergegeven
- De loop sluiten
Daarna gaan we in op het iets geavanceerdere onderwerp van het gebruik van voorwaardelijke verklaringen om de loop aan te passen op basis van verschillende situaties.
De WordPress Loop te openen
Om de WordPress Loop te openen, heb je vier elementen:
<?php– dit vertelt je webserver dat je PHP gaat gebruiken.if ( have_posts() )– Dit vertelt je server dat hij moet controleren of de database van je site berichten heeft die overeenkomen met de query en dan de volgende code moet uitvoeren als er berichten zijn. Als er geen berichten zijn, kun je een else statement gebruiken om wat fallback tekst toe te voegen, die we hieronder zullen behandelen.while ( have_posts() )– Dit vertelt je server dat hij door moet blijven loopen zolang er berichten zijn om weer te geven. De limiet wordt meestal ingesteld door je keuze in het Settings → Reading gedeelte. Als je bijvoorbeeld je site zo instelt dat er maximaal 10 berichten per pagina worden weergegeven, dan zal de server maximaal 10 berichten blijven weergeven (zolang je minstens 10 berichten hebt gepubliceerd).the_post();– Dit vertelt je server om de gegevens voor elk bericht op te halen uit de database van je site. Je kunt de weergave van deze gegevens regelen met behulp van template-tags, die we in de volgende paragraaf zullen behandelen.
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();De inhoud van de WordPress Loop beheren
Zodra je de WordPress Loop hebt geopend, kun je template-tags gebruiken om te bepalen welke informatie je wilt opnemen voor elk bericht, samen met de algemene layout* van die inhoud.
De template-tags die je gebruikt in de Loop worden herhaald voor elk weergegeven bericht.
Hier zijn enkele van de meest voorkomende template-tags die je misschien wilt gebruiken:
the_title()the_content()the_excerpt()the_post_thumbnail()the_author()next_post_link()the_ID()the_meta()the_shortlink()the_tags()the_time()previous_post_link()the_category()
Als je meer custom WordPress sites bouwt, kun je gegevens van custom velden opnemen in de WordPress Loop. De eenvoudigste manier om dit te doen is via een plugin zoals Advanced Custom Fields (ACF), Meta Box of Pods, die allemaal hun eigen functionaliteit hebben voor template tags die je kunt gebruiken in de WordPress Loop.
Laten we bijvoorbeeld eens kijken naar de syntaxis voor een eenvoudige loop die alleen de titel, een thumbnail van een uitgelichte afbeelding en een uittreksel van elke post weergeeft.
Zo zou het er uit kunnen zien:
// first, we need to open the loop as we showed you in the previous section
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// now, we can use template tags to control what information to display for each post
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();De WordPress Loop sluiten
Om de WordPress Loop te sluiten, moet je de while-loop, het if-statement en PHP sluiten.
Om situaties op te lossen waarin WordPress geen berichten kan retourneren, kun je een else statement toevoegen voordat je het if statement afsluit.
Hier zie je hoe het eruit zou zien om de loop te sluiten voor ons bovenstaande voorbeeld, met de toevoeging van het else statement om situaties op te vangen waarin geen berichten overeenkomen met de query.
// first, we need to open the loop as we showed you in the previous section
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// now, we can use template tags to control what information to display for each post
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();
// once we're finished with the template tags, we can now close the loop
endwhile;
else:
// this tells your site what to do if no posts match the query
_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif;
?>Conditionals gebruiken om gedrag in de WordPress Loop te controleren
Zodra je de basisstructuur van de Loop begrijpt, kun je het op meer geavanceerde manieren gaan gebruiken.
Een van de beste manieren om te beginnen is het gebruik van voorwaardelijke verklaringen. Hiermee kun je eenvoudig het gedrag van de Loop aanpassen voor verschillende soorten inhoud, zoals ons eerdere voorbeeld waarin je één layout kon gebruiken voor het weergeven van berichten in de categorie “Interviews” en een andere voor berichten in de categorie “Nieuws”.
Hier zijn enkele van de voorwaardelijke tags die je kunt gebruiken:
is_home()is_admin()is_single()is_page()is_page_template()is_category()ofin_category()is_tag()is_author()is_search()is_404()has_excerpt()
Als je op de bovenstaande links klikt, kun je codevoorbeelden zien van hoe je de WordPress Loop zou kunnen aanpassen voor verschillende soorten conditionals.
Hier zie je bijvoorbeeld hoe het eruit zou kunnen zien om verschillende stijlen toe te passen op berichten in de categorie met een ID van “3” door in_category te gebruiken en een andere <div> toe te passen op die berichten.
<?php
// Start the Loop.
if ( have_posts() ) :
while ( have_posts() ) : the_post();
/* * See if the current post is in category 3.
* If it is, the div is given the CSS class "post-category-three".
* Otherwise, the div is given the CSS class "post".
*/
if ( in_category( 3 ) ) : ?>
<div class="post-category-three">
<?php else : ?>
<div class="post">
<?php endif;
// Display the post's title.
the_title( '<h2>', ';</h2>' );
// Display a link to other posts by this posts author.
printf( __( 'Posted by %s', 'textdomain' ), get_the_author_posts_link() );
// Display the post's content in a div.
?>
<div class="entry">
<?php the_content() ?>
</div>
<?php
// Display a comma separated list of the post's categories.
_e( 'Posted in ', 'textdomain' ); the_category( ', ' );
// closes the first div box with the class of "post" or "post-cat-three"
?>
</div>
<?php
// Stop the Loop, but allow for a "if not posts" situation
endwhile;
else :
/*
* The very first "if" tested to see if there were any posts to
* display. This "else" part tells what do if there weren't any.
*/
_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
// Completely stop the Loop.
endif;
?>Zo gebruik je de WordPress Loop in blokthema’s (Site Editor)
Zoals hierboven vermeld, gebruiken WordPress blokthema’s de Site Editor om de templates van je thema te beheren in plaats van PHP templatebestanden.
Daarom kun je geen PHP gebruiken om de WordPress Loop aan te passen als je een blokthema gebruikt. In plaats daarvan gebruik je het Query Loop blok.
De basisprincipes zijn echter hetzelfde.
In wezen gebruik je het Query Loop blok om de loop te openen. Binnen het Query Loop blok is een Post Template container en andere containers voor paginering en “geen resultaten”.
Dan, in plaats van het gebruik van template tags zoals je doet met PHP, voeg je WordPress Thema blokken toe in de Post Template container om de layout van elk loop-item te regelen.
Hoe je de Query Loop toevoegt
Om te beginnen ga je naar de Site Editor (Appearance → Editor) en maak of bewerk je het betreffende template. Je kunt de Loop ook toevoegen aan een individueel stuk inhoud, zoals een enkele pagina waarop je berichten wilt weergeven.
In beide gevallen kun je beginnen met het toevoegen van het Query Loop blok. Vervolgens kun je kiezen tussen het gebruik van een van de bestaande Loop-patronen in je thema door te klikken op Choose of begin met een leeg canvas door te klikken op Start blank.
In dit voorbeeld kiezen we voor Start blank.
Je kunt dan kiezen uit een paar verschillende startvarianten, waarbij de eenvoudigste optie is om alleen de titel en inhoud van elk item weer te geven.
Als je dat hebt gedaan, kun je de instellingen in de zijbalk van het Query Loop blok gebruiken om te bepalen welke inhoud je wilt opnemen in de loop (de “query”).
Standaard worden gewone berichten weergegeven, maar je kunt het berichttype wijzigen om andere soorten inhoud weer te geven. Je kunt ook de volgorde veranderen en filters gebruiken om alleen specifieke stukken inhoud op te vragen, zoals inhoud met een bepaalde categorie, van een bepaalde auteur, enzovoort.
Hoe je de template van de loop kunt aanpassen
Nu kun je de blokken in het Thema gedeelte gebruiken om het berichttemplate in de Query Loop verder aan te passen. Nogmaals, deze blokken dienen hetzelfde basisdoel als template-tags in de PHP code.
Als je bijvoorbeeld de auteur wilt weergeven voor elk stuk inhoud, kun je het blok Author Name toevoegen op de plek waar je de auteursnaam wilt laten verschijnen.
Je vindt ook andere blokken voor relevante onderdelen, zoals Featured Image, Date, Categories, Tags, enz.
Als je naar het overzicht kijkt, zie je dat al deze blokken in de groep Post Template vallen.
Er zijn ook andere groepen om de paginering te regelen en situaties waarin de query geen resultaten oplevert.
Tips voor het werken met de WordPress Loop
Omdat de Loop zo’n integraal onderdeel is van WordPress, kan elke fout of vergissing problemen veroorzaken op je site. Dit geldt vooral als je met PHP templates werkt, omdat syntaxisfouten de melding “There has been a critical error on your website” kunnen activeren.
Om problemen te voorkomen, zijn hier een paar tips…
Experimenteer en leer in een lokale ontwikkelomgeving
Als dit de eerste keer is dat je met de WordPress Loop werkt, zul je waarschijnlijk willen experimenteren en spelen met verschillende concepten om beter te begrijpen hoe het werkt.
Om dit veilig te doen, kun je een lokale WordPress ontwikkelomgeving gebruiken, die je een veilige sandbox geeft gevoed door je lokale computer.
Om gemakkelijk lokale WordPress sites te maken om te testen en te leren, kun je de gratis DevKinsta tool gebruiken.
Met ondersteuning voor zowel Windows als Mac kun je met DevKinsta gemakkelijk zoveel lokale ontwikkelsites maken als je nodig hebt.
Werk in een testomgeving voor live sites
Als je werkt aan de WordPress Loop voor een live WordPress website, raden we je ten zeerste aan om alles op een testsite te doen voordat je de wijzigingen toepast op je live WordPress site.
Als je je WordPress site bij Kinsta host, kun je de ingebouwde testtool van Kinsta gebruiken om al je wijzigingen in een veilige sandbox uit te voeren.
Zodra je hebt gecontroleerd of alles werkt, kun je je testwijzigingen eenvoudig naar de live versie van je website pushen.
Plugin-alternatieven voor rechtstreeks werken met de WordPress Loop
Als je het een beetje intimiderend vindt om rechtstreeks met de WordPress Loop te werken, dan zijn er verschillende populaire plugins die je alternatieve manieren geven om inhoud te “loopen” zonder dat je PHP of het Query Loop blok hoeft te gebruiken.
Hier zijn een paar WordPress Loop plugin alternatieven om te overwegen, hoewel dit zeker geen complete lijst is.
Elementor Pro
Elementor is een populaire visuele, drag-and-drop page builder plugin. Met Elementor Pro heb je toegang tot de volledige thema bouw functionaliteit om je thema template bestanden te ontwerpen met Elementor. In 2022 voegde Elementor een Loop Builder feature toe aan Elementor Pro, waarmee je “geloopte” inhoud kunt beheren en aanpassen met behulp van Elementor’s visuele interface.
We hebben een complete handleiding geschreven voor het gebruik van Elementor, samen met veel andere Elementor content op de Kinsta blog.
Bricks
Bricks is een andere populaire visuele sitebouwer voor WordPress. Als onderdeel van de vele ontwerptools bevat het zijn eigen Query Loop builder die een vereenvoudigde code aanpak gebruikt, samen met veel extra opties in de grafische interface.
We hebben ook een handleiding voor het bouwen van WordPress sites met Bricks.
WP Show Posts
WP Show Posts geeft je niet zoveel flexibiliteit als de vorige twee plugins. Maar als je op zoek bent naar een eenvoudige manier om WordPress berichten in verschillende formaten op te sommen, dan is dit misschien wel de eenvoudigste tool.
Het is gratis en komt van dezelfde ontwikkelaar als het populaire GeneratePress thema. Hoewel de ontwikkelaar geen nieuwe features meer toevoegt aan de plugin, onderhoudt hij nog wel de bestaande functionaliteit van de plugin.
Samenvatting
Om je WordPress ontwikkelingsvaardigheden te verbeteren, moet je de WordPress Loop begrijpen. De Loop is een integraal onderdeel van de manier waarop WordPress inhoud weergeeft; als je leert hoe je deze moet gebruiken, krijg je meer controle over de manier waarop inhoud op je site wordt weergegeven.
Nieuwere WordPress blokthema’s zijn niet meer afhankelijk van PHP templates zoals klassieke thema’s, dus je hoeft misschien geen PHP te gebruiken om met de Loop te werken. In plaats daarvan, als je de blokthema-ontwikkelingn omarmt, zul je het Query Loop blok gebruiken om vergelijkbare effecten te bereiken.
Hoe dan ook, het effectiever leren gebruiken van de WordPress Loop zal je later veel opleveren.
Omdat de WordPress Loop zo’n fundamenteel onderdeel van WordPress is, kunnen problemen met de Loop je site kapot maken. Om problemen te voorkomen, raden we je aan om te leren op een lokale ontwikkelsite die wordt aangedreven door DevKinsta of om de testtools te gebruiken die Kinsta WordPress hosting biedt om in een veilige omgeving te werken.
Laat een reactie achter