Wat zijn WordPress Custom Fields

Wat zijn WordPress Custom Fields en hoe kan ik die gebruiken? We zullen in dit artikel bespreken hoe we Custom Fields kunnen toepassen en waarom ze nuttig zijn. 

Wat zijn WordPress Custom Fields?

In het kort: met WordPress Custom Fields kan je specifieke elementen toevoegen aan pagina’s of berichten. WordPress heeft standaard een aantal metaboxen om algemene informatie te kunnen toevoegen. Voorbeelden hiervan zijn tags, categorieën, permalinks, en uitgelichte afbeelding, enz. Als je andere velden wilt toevoegen is het gebruik van Custom Fields aanbevolen. Eigenlijk alles wat niet standaard in de hoofdcontent van een bericht staat vormen de zogenaamde metadata van dat bericht. Custom Fields zijn niet alleen velden die te zien zijn in de front-end. Custom Fields kunnen ook ingesteld worden als verplichten velden voor het maken van een bericht, bijvoorbeeld dat een bericht pas gepubliceerd wordt als er bepaalde criteria zijn aangevinkt.

Toevoegen van Custom Fields in een WordPress bericht

Standaard zijn Custom Fields uitgeschakeld, als je de Gutenberg blok editor gebruikt, kun je deze eenvoudig inschakelen. Klik rechtsboven op ‘meer gereedschap en opties’ en vervolgens klik je op ‘Opties‘.

Zodra je de aangepaste velden (Custom Fields) hebt ingeschakeld en de editor opnieuw is geladen, verschijnen de extra velden onder ieder bericht in de Gutenberg editor:

Hoewel aangepaste velden in WordPress erg veel mogelijkheden hebben, zijn de standaard velden beperkt tot een tekst-waarde waardoor de mogelijkheden beperkt zijn. Als je voor je berichten alleen een extra tekst veld nodig hebt, dan kan dat prima door deze aangepaste velden te gebruiken. Wil je meer mogelijkheden zonder dat je veel kennis hebt van PHP dan ben je aangewezen op een plugin die dit kunnen doen.

Advanced Custom Fields plugin

Met de Advanced Custom Fields plugin heb je eindeloos veel opties om aangepaste velden te maken zonder dat je enige PHP code hoeft te wijzigen. Nadat je de ACF plugin hebt geactiveerd, zie je een extra menu item in de linkerzijbalk van je WordPress admin paneel. Hier staan drie opties: Groepen, Nieuwe groep en Tools. Met Tools kan je groepen exporteren en importeren van een andere website.

De basis van Advanced Custom Fields

Om nieuwe aangepaste velden te maken, is de eerste stap om een groep te creëren. Klik hiervoor op ‘Nieuwe Groep‘, in het Extra velden menu. Geef de groep een titel en vervolgens kan je een nieuw veld toevoegen:

Als de nieuwe groep is aangemaakt voeg je een nieuw veld toe door op ‘+ Nieuw veld‘ te klikken. Ieder veld die je in deze groep toevoegt zal in dezelfde meta-box komen. Als voorbeeld voegen we straks een tekst veld toe, maar er zijn veel meer velden die je kan selecteren. Afhankelijk van de geïnstalleerde plugins kan je hier bijvoorbeeld Google Maps kiezen als er een dergelijke plugin is geïnstalleerd.

De locatie regels die je instelt bepalen vervolgens of het veld beschikbaar is in de meta-box. Stel dat je een extra veld wilt toevoegen aan elk bericht. Dan vul je als locatie het volgende in:

Als laatste kan je de instellingen van het veld aanpassen, je kan hier bepalen waar het veld zich bevind in de editor. Ook kan je hier opgeven welke velden je wilt verbergen.

Custom Fields maken met ACF

Nadat je de Custom Fields een naam hebt gegeven, kan je op de knop +Nieuw Veld klikken. Je kan een onbeperkt aantal velden toevoegen, maar zorg wel dat de velden aan de groep gerelateerd zijn. Je kan met ACF bijna ieder veld maken die je kan bedenken, maar laten we voor dit voorbeeld doen alsof we een WordPress website hebben over films. In de aangepaste velden wil je een beoordeling kunnen geven, maar ook vermelden of te film wordt gestreamd en waar deze te vinden is.

Zoals je hierboven kunt zien, is deze keuze vereist om een bericht te kunnen publiceren. Bovendien willen we een extra veld weergeven als de keuze van de checkbox op ‘ja’ gezet wordt. Dit kan eenvoudig door nogmaals een extra veld toe te voegen:

Vervolgens kan je, door de optie ‘Conditionele logica’ op Ja te zetten, dit veld alleen tonen als de gebruiker de vraag ‘Is deze film beschikbaar om te streamen?‘ met ‘Ja’ heeft beantwoord. Dit stel je op de volgende manier in:

Vervolgens kan je nog een extra checkbox veld toevoegen om de film te kunnen beoordelen. Als je nu een nieuw bericht aanmaakt, zal het Custom Field er als volgt uitzien.

Wanneer je nu het bericht publiceert, zal de metadata die je hebt ingevoerd deel uit maken van je bericht. Het probleem is echter: je zal de informatie niet in het bericht kunnen zien, en je bezoekers ook niet.

Custom Fields weergeven in de WordPress front-end

Al heb je alle vorige stappen goed doorlopen, de gegevens die je hebt ingevoerd worden niet weergegeven op je website. Waar zouden ze ook moeten verschijnen? Vaak heeft je thema wel een manier om metagegevens en Custom Fields weer te geven, controleer daarom je thema opties en documentatie. Alle thema’s van Divi zijn sowieso geschikt om Custom Fields weer te geven. Een andere manier om Custom Fields weer te geven is om shortcodes van ACF zelf te gebruiken. Helaas kan je alleen tekst velden toevoegen met een shortcode.

Een voorbeeld van het gebruik van een ACF shortcode:

Met een cms zoals [acf field="name"] kan je een prachtige website bouwen. 
Wist je dat WordPress al [acf field="age"] bestaat?

Helaas beperken de shortcodes zich dus tot tekst velden. Een optie is om te upgraden naar ACF Pro waarmee je toegang krijgt tot een ingebouwde Gutenberg blok. De aangepaste velden zullen vervolgens precies worden weergegeven zoals je ze opbouwt in Custom Fields.

Tot slot

Ondanks dat Custom Fields best ingewikkeld is, is het een oplossing als je geen WordPress ontwikkelaar bent en toch geavanceerde pagina’s wilt bouwen. De mogelijkheid om metadata zo in te richten dat jouw website nieuwe mogelijkheden krijgt is een geweldige manier om je website naar een hoger niveau te tillen.

Beoordeel dit artikel