Het kunnen maken van aangepaste velden in WordPress is een belangrijk onderdeel van wat WordPress een flexibel contentmanagementsysteem maakt in plaats van “alleen een blogplatform”.

Als je het hebt over aangepaste WordPress-velden, is de freemium plug-in Advanced Custom Fields een van de bekendste. Het maakt het in elk opzicht makkelijker om met aangepaste velden te werken en het is ook het onderwerp van ons artikel van vandaag.

We leggen uit waarom Advanced Custom Fields zo nuttig is én we laten stap voor stap zien hoe je deze plug-in kan gebruiken op jouw WordPress-site.

Dit lees je allemaal in deze post:

We hebben veel te bespreken, dus laten we beginnen…

Wat zijn aangepaste velden in WordPress? Wat kun je ermee?

Met aangepaste velden in WordPress kun je extra informatie over een stuk content in WordPress toevoegen, opslaan en weergeven. Technisch gezien helpen aangepaste velden je bij het opslaan van metadata.

Zelfs als je niet bekend bent met deze term, zitten aangepaste velden grotendeels achter de functionaliteit in jouw favoriete plug-ins en thema’s.

WooCommerce, de meest populaire manier om een eCommerce winkel te bouwen, gebruikt bijvoorbeeld aangepaste velden om extra informatie over een product op te slaan zoals:

Of als je een WordPress kalender plug-in hebt, zal deze gebruikmaken van aangepaste velden om extra informatie op te slaan over een evenement zoals:

Je kunt ook eigen aangepaste velden creëren om informatie op te slaan op basis van jouw unieke behoeften. En dát is waar dit artikel over gaat.

Aangepaste velden in WordPress zijn cool hè? 👨💻 Leer hoe je ze kunt gebruiken met de geweldige @wp_acf in onze nieuwste handleiding! 💪Click to Tweet

Wanneer moet je aangepaste velden gebruiken?

Nu vraag je je wellicht af waarom je aangepaste velden überhaupt nodig hebt.

Als je bijvoorbeeld een evenement op jouw WordPress-site wilt plaatsen, kun je al die informatie dan niet als gewone tekst in de WordPress-editor zetten?

Dat zou je kunnen doen. Maar het is beter om aangepaste velden te gebruiken en wel om een paar redenen:

WordPress heeft een ingebouwde functionaliteit voor aangepaste velden

WordPress bevat een ingebouwde functionaliteit voor het toevoegen van aangepaste velden aan jouw content. In de klassieke TinyMCE-editor kun je dit inschakelen vanuit het gedeelte Screen Options. Of als je de nieuwe blok-editor gebruikt, kunt je dit inschakelen vanuit het gedeelte Opties:

Hoe je toegang krijgt tot aangepaste velden in de blok-editor

Hoe je toegang krijgt tot aangepaste velden in de blok-editor

Je kunt jouw aangepaste veldgegevens invoeren met behulp van sleutel/waarde-combinaties:

De ingebouwde WordPress functionaliteit aangepaste velden

De ingebouwde WordPress functionaliteit aangepaste velden

Deze ingebouwde functionaliteit voor aangepaste velden is volledig werkzaam, maar niet op de meest gebruiksvriendelijke manier. Vandaar dat veel mensen kiezen voor de Advanced Custom Fields plug-in.

Advanced Custom Fields maakt het een stuk eenvoudiger

Simpel gezegd: Advanced Custom Fields maakt het veel makkelijker om met aangepaste velden te werken in WordPress…in vrijwel alle opzichten. Het vereenvoudigt de interface door het toevoegen en beheren van aangepaste velden in jouw WordPress-dashboard. En het vereenvoudigt ook het proces voor het weergeven van informatie uit aangepaste velden in de front-end van jouw site.

Dat alleen verklaart al waarom het actief is op meer dan 1.000.000 websites met een 4,9-sterrenrating met meer dan 1.000 beoordelingen.

In de back-end kun je gebruiksvriendelijke metavakken maken met vooraf geselecteerde veldtypen. Dus in plaats van de interface met de standaard combinatie van “key” en “value” (zoals hierboven), kun je gebruikmaken van datumkiezers, selectievakjes en meer van dit soort dingen:

Advanced Custom Fields in de blok-editor

Advanced Custom Fields in de blok-editor

Advanced Custom Fields biedt in totaal meer dan 30 verschillende veldtypen die je kunt toevoegen aan elk gebied in jouw dashboard, inclusief berichten, gebruikers, taxonomieën, media, reacties en zelfs aangepaste optiepagina’s.

Je kunt hier gedetailleerde informatie bekijken over elk veldtype.

Met Advanced Custom Fields kun je ook veel makkelijker die informatie weergeven, met functies die goed zijn uitgelegd, shortcodes, Gutenberg-blokken en meer.

Of je kunt integraties met andere tools vinden, zoals sommige drag-and-drop page builders voor WordPress.

Gratis of betaalde Advanced Custom Fields: welke heb je nodig?

Van Advanced Custom Fields heb je een zowel een gratis als een betaalbare premium versie.

Voor de meeste basistoepassingen kom je met de gratis versie een heel eind. Het biedt toegang tot bijna alle typen velden en daarnaast alle tijdbesparende en gebruiksvriendelijke functies waar we het hiervoor over hadden.

Als je puur wat extra informatie over je content wilt kunnen opslaan, dan is de gratis versie alles wat je nodig hebt.

Dat gezegd hebbende, voegt de Pro-versie wel een aantal handige functies toe waarmee je Advanced Custom Fields op interessantere manieren kunt gebruiken:

Er zijn ook nog andere verschillen, zoals optiepagina’s, de mogelijkheid om velden te klonen, verbeteringen aan de relatievelden en andere kleinere aanpassingen.

Je kunt hier alle ACF PRO-functies zien.

ACF PRO begint bij $25 voor levenslang gebruik op een enkele site. Of je kunt $100 betalen voor levenslang gebruik op een onbeperkte aantal sites. Als je nog twijfelt, begin dan met de gratis versie totdat je precies weet welke functionaliteiten je nodig hebt. Indien nodig kun je altijd later nog upgraden.

Handleiding Advanced Custom Fields: hoe je velden toevoegt

Laten we nu met die handleiding van Advanced Custom Fields aan de slag gaan. We zullen laten zien hoe je jouw eerste groep aangepaste velden kunt maken en weergeven.

In dit voorbeeld nemen we aan je een blog hebt over hardlopen. Je vindt hardlopen geweldig en je wilt je dagelijkse trainingen delen met je lezers. Om precies te zijn: je wilt bij elke blogpost de volgende dingen van elke loop delen:

Om die informatie te verzamelen, moet je vijf aangepaste velden toevoegen.

Het is belangrijk om te onthouden dat de principes die je leert in deze handleiding over geavanceerde aangepaste velden van toepassing zijn op elke situatie. We gebruiken nu gewoon een specifiek voorbeeld zodat de informatie tastbaar wordt.

We splitsen deze handleiding op in twee delen:

  1. Hoe je jouw eigen velden in de back-end kunt toevoegen en beheren.
  2. Hoe je aangepaste veldinformatie kan weergeven in de front-end.

1. Creëer een nieuwe Field Group

Zodra je de gratis versie van Advanced Custom Fields van WordPress.org hebt geïnstalleerd en geactiveerd, ga je naar Custom Fields > Add New om jouw eerste Field Group te maken.

Zoals de naam al aangeeft, is een “Field Groep” een groep van een of meer aangepaste velden die samen worden weergegeven in jouw WordPress-dashboard. In dit voorbeeld maak je één veldgroep aan die vijf aangepaste velden bevat.

Geef jouw veldgroep een naam en kies vervolgens de Location. In dit voorbeeld willen we deze aangepaste velden voor gewone WordPress blogberichten weergeven, dus je kunt het als de standaard Post laten staan.

Maar als je jouw aangepaste velden ergens anders wilt weergeven, zoals naast een aangepast posttype of met een taxonomie, dan wil je dit wijzigen. Je kunt ook meerdere regels instellen om jouw velden op meerdere locaties te tonen:

Een nieuwe ACF-veldgroep aanmaken

Een nieuwe ACF-veldgroep aanmaken

2. Custom Fields toevoegen

Klik vervolgens op de knop + Add Field om jouw eerste aangepaste veld toe te voegen:

Een nieuw veld toevoegen

Een nieuw veld toevoegen

Je krijg hier veel opties te zien, maar je hoeft niet noodzakelijkerwijs alles in te vullen. De twee belangrijkste keuzes zijn:

Voor dit eerste veld, heb je een Radio Button veldtype nodig:

Een veld configureren

Een veld configureren

Verder naar beneden kun je de keuzemogelijkheden bij Keuzes invoeren:

Geef de opties van de keuzemogelijkheden

Geef de opties van de keuzemogelijkheden

Er zijn ook andere keuzes die je kunt maken, zoals of een veld verplicht is of niet en een standaardwaarde. Deze kun je naar wens instellen.

Laten we naar een ander voorbeeld kijken: een aangepast veld om de afstand van de loop te verzamelen. Nu heb je een Number veldtype nodig:

Een numeriek veld aanmaken

Een numeriek veld aanmaken

Je kunt het ook wat gebruiksvriendelijker maken door Append te kiezen voor de afstandseenheid. En als je wilt, kun je ook een validatie toevoegen met een minimum- en maximumwaarde. Zo ga je meestal niet een loop van 1.000 km lopen (en als je dat wel doet… dan ben je de ultieme Forrest Gump)!

Meer veldinstellingen

Meer veldinstellingen

Herhaal dit proces voor alle andere aangepaste velden die je wilt verzamelen. Als het klaar is, zou het er ongeveer zo uit moeten zien:

Vijf verschillende ACF-velden

Vijf verschillende ACF-velden

3. Instellingen configureren en publiceren

Om dit af te ronden, scrol je naar beneden naar de Settings. Hier kun je bepalen hoe jouw velden in de WordPress-editor worden weergegeven.

Meestal kun je deze als standaard laten staan. Maar als je wilt, kun je deze veranderen. Je kunt er bijvoorbeeld voor kiezen om jouw eigen velden boven de gewone WordPress-editor weer te geven:

De instellingen voor ACF-veldgroepen configureren

De instellingen voor ACF-veldgroepen configureren

Zodra je je keuzes hebt gemaakt, klik Publish om jouw veldgroep live te zetten.

4. Voeg wat informatie toe in de WordPress Editor

Zodra je jouw veldgroep hebt gepubliceerd, zie je de velden verschijnen wanneer je een nieuw bericht gaat aanmaken.

Standaard verschijnen ze samen onder de editor in zowel de klassieke TinyMCE editor als de nieuwe blok-editor:

Geavanceerde aangepaste velden in de blok-editor

Geavanceerde aangepaste velden in de blok-editor

De informatie die je hier invoert, wordt opgeslagen in de database van jouw site zodat je deze makkelijk kunt terugvinden (dit zul je zien in het volgende deel van onze handleiding over Advanced Custom Fields).

Conditional Logic verkennen

Voordat we verder gaan even iets anders.

Een van de redenen voor de populariteit van Advanced Custom Fields is de veelheid aan interessante toepassingen die je hiermee hebt.

Een sterk voorbeeld hiervan is Conditional Logic waarmee je velden kunt tonen/verbergen op basis van hoe een vorig veld is beantwoord. Laten we snel even kijken naar een voorbeeld van hoe dit werkt….

Laten we zeggen dat je wilt bloggen over eten, reizen of iets anders dan hardlopen. Als je schrijft over een ander onderwerp, dan heeft het niet zo veel zin om de aangepaste velden voor informatie over de loop weer te geven, toch?

Wat als je, in plaats van alle aangepaste velden die je net hebt aangemaakt, eentje kunt toevoegen die zegt: “Is dit een loop?”:

Voorbeeld van Coditional Logic

Voorbeeld van Coditional Logic

Als je het vakje aanvinkt, verschijnen automatisch de informatievelden voor het uitvoeren. Als je dit niet aanvinkt, blijven ze verborgen:

De andere velden worden weergegeven indien aangevinkt

De andere velden worden weergegeven indien aangevinkt

Dat is wat je met Conditional Logic kunt doen!

Om dit in te stellen, moet je jouw veldgroep bewerken en een nieuw True/False veld toevoegen voor “Is dit een loop?”:

Een true/false-veld toevoegen

Een true/false-veld toevoegen

Vervolgens bewerk je de bestaande velden en schakel je Conditional Logic in, zodat elk veld alleen wordt weergegeven als het veld “Is dit een loop?” is aangevinkt:

Custom Logics toevoegen aan andere velden

Custom Logics toevoegen aan andere velden

Advanced Custom Fields weergeven in de front-end

OK, we zijn halverwege met de Advanced Custom Fields. Je bent nu in staat om informatie toe te voegen aan jouw aangepaste velden, deze te koppelen aan het relevante type bericht, en deze op te slaan in jouw database.

Maar er is nog één potentieel probleem: de informatie uit jouw aangepaste velden verschijnt nog nergens in de front-end!

Helemaal klaar met WordPress-problemen en langzame hosting? We leveren met onze WordPress-experts 24/7 support van wereldklasse en onze servers zijn razendsnel. Bekijk onze pakketten

Dat wil zeggen, ook al heb je een aantal aangepaste velden toegevoegd aan de editor voor jouw blogartikelen, deze zien er nog steeds uit als een regulier artikel in de front-end:

Geen aangepaste velden in de front-end

Geen aangepaste velden in de front-end

Dat gaan we oplossen.

Er zijn verschillende manieren waarop je de Advanced Custom Fields-gegevens in de front-end van jouw site kunt weergeven. De exacte methode die je kiest hangt af van jouw behoeften en kennisniveau. Hier zijn drie verschillende opties om dit te doen:

  1. Met de sjabloonbestanden van jouw thema – dit vereist een beetje technische kennis, maar het is meestal de beste aanpak, zeker als je zonder veel moeite met de sjabloonbestanden van jouw thema’s kunt werken.
  2. Met een shortcode – dit is supermakkelijk en een goede optie als je alleen aangepaste veldgegevens wilt invoegen in bepaalde situaties. Maar het vereist wel een stuk meer handmatig werk omdat je aan elk bericht shortcodes moet toevoegen.
  3. Met Elementor Pro – dit werkt heel goed omdat het de noodzaak om met PHP te werken volledig wegneemt. Het is wel een premium product en het betekent ook dat je Elementor Pro moet gebruiken voor jouw templates.

Je kunt hierboven klikken om direct naar een bepaalde methode te springen of je kunt ze allemaal doorlezen. De keus is aan jou.

Hoe je Advanced Custom Fields toevoegt aan sjabloonbestanden voor thema’s

De eerste manier om jouw aangepaste veldinformatie weer te geven is door de PHP-functies van de Advanced Custom Fields direct toe te voegen aan de sjabloonbestanden van jouw childthema. Dit is een beetje geavanceerd omdat je hiervoor door de sjabloonbestanden van jouw thema moet gaan, maar het zorgt ervoor dat jouw aangepaste velden automatisch op dezelfde plek worden weergegeven.

Hier moet je het single sjabloon voor het betreffende berichttype bewerken.

Voor een regulier blogbericht is dit single.php. Bij andere thema’s is dit opgesplitst in sjabloondelen. Bijvoorbeeld bij het thema TwentyNineteeneen moet je echt het deel content- single.php van het sjabloon bewerken. Als dit te lastig is, kun je misschien beter een andere methode gebruiken.

Zodra je het bestand van het themasjabloon voor jouw enkele bericht hebt gevonden, kun je de functie field() van Advanced Custom Fields gebruiken om de informatie van een veld weer te geven. Bijvoorbeeld,

<?php the_field('FIELD_NAME'); ?>

Lees hier meer hierover.Om bijvoorbeeld het veld “Purpose” weer te geven, gebruik je

<?php the_field('purpose'); ?>

Je kunt de veldnaam vinden wanneer je een veldgroep bewerkt:

Waar je de ACF-veldnaam kunt vinden

Waar je de ACF-veldnaam kunt vinden

Dus als je een beetje HTML-opmaak combineert met de PHP kan het zijn dat je het volgende krijgt om alle velden weer te geven:

<div class="run-information">
<ul>
<li><strong>Purpose:</strong> <?php the_field('purpose'); ?></li>
<li><strong>Distance:</strong> <?php the_field('distance'); ?></li>
<li><strong>Start Time:</strong> <?php the_field('start_time'); ?></li>
<li><strong>End Time:</strong> <?php the_field('finish_time'); ?></li>
<li><strong>Location:</strong> <?php the_field('location'); ?></li>
</ul>
</div>

Om dit boven de content van de reguliere post te zetten, kun je dit toevoegen aan je themasjabloonbestand boven the_content():

Waar je code kunt toevoegen in het themasjabloonbestand

Waar je code kunt toevoegen in het themasjabloonbestand

En nu kun je na het verversen van het blogbericht de aangepaste veldgegevens boven de reguliere WordPress content zien:

Je kunt nu de velden in de front-end zien

Je kunt nu de velden in de front-end zien

Voor meer informatie kun je de volledige documentatie van de Advanced Custom Fields raadplegen.

Hoe je data van Advanced Custom Field weergeeft met een shortcode

Als je de data van jouw aangepaste velden op een veel makkelijkere manier wilt weergeven, kun je ook gebruikmaken van shortcodes. Het nadeel hiervan is wel dat je de shortcode elke keer moet toevoegen als je een aangepast veld wilt weergeven. Er is geen eenvoudige manier om dit te automatiseren.

Dit is de shortcode:

[acf field="FIELD_NAME"]

Als je dit bijvoorbeeld in de WordPress-editor hebt ingevoerd…

Sneltoetsen gebruiken om ACF-gegevens weer te geven

Sneltoetsen gebruiken om ACF-gegevens weer te geven

…dan zou de front-end van jouw site er precies hetzelfde uitzien als de vorige methode met het themasjabloon:

De shortcodes lijken identiek aan het themasjabloonbestand

De shortcodes lijken identiek aan het themasjabloonbestand

Hoe je Advanced Custom Fields weergeeft met Elementor Pro

Elementor is een van de meest populaire pagebuilders van WordPress. Hiermee kun je ontwerpen maken met behulp van visuele, drag-and-drop-bewerking. Elementor is trouwens een van Kinsta’s officiële partners.

Met Elementor Pro, de betaalde add-on, kun je ook de sjabloonbestanden van jouw thema bouwen, inclusief een optie om dynamische aangepaste veldgegevens van Advanced Custom Fields in jouw ontwerpen in te voegen.

Dit is een hele goede optie als je wel de flexibiliteit wilt om automatisch aangepaste veldgegevens in sjablonen op te nemen, maar geen zin hebt in het aanpassen van code in de sjabloonbestanden van jouw thema.

Om te beginnen, ga je naar Templates > Theme Builder en maak je een nieuw Elementor-sjabloon aan voor je bericht Single:

Creëer een nieuw Elementor Single-sjabloon

Creëer een nieuw Elementor Single-sjabloon

Je kunt de gewone Elementor-widgets voor jouw Post Title en Post Content toevoegen. Om daarna de aangepaste veldgegevens te tonen, voeg je reguliere tekstverwerkerwidgets toe. Hier is het enige verschil dat je in plaats van de tekst te bewerken, de optie Dynamic selecteert:

De optie

De optie “Dynamic” in Elementor Pro

Hierna kun je ACF Field selecteren uit de drop-down:

Selecteer

Selecteer “ACF Field”

Van daaruit kun je het specifieke veld selecteren dat je hebt toegevoegd met Advanced Custom Fields:

Selecteer het specifieke veld dat je wilt weergeven

Selecteer het specifieke veld dat je wilt weergeven

En je kunt ook het tabblad Advanced Accordion gebruiken om informatie voor te bereiden of bij te voegen, zodat je labels en eenheden kunt toevoegen:

Informatie voorbereiden of bijvoegen

Informatie voorbereiden of bijvoegen

Eitje, toch? Nu kun je dit gewoon herhalen voor andere aangepaste velden!

Samenvatting

Met Advanced Custom Fields kun je jouw pagina’s en blogberichten mooier maken met meer gegevens en informatie via een eenvoudig te gebruiken oplossing. Plus: je kunt beginnen met het verzamelen van aanvullende informatie voor elke vorm van content op jouw site en deze vervolgens weergeven op de front-end voor jouw bezoekers.

Om dat te doen, heb je drie opties:

Met kennis uit deze post kun je het volle potentieel van WordPress benutten om 100% aangepaste sites te bouwen die veel verder gaan dan alleen het bloggen waarmee WordPress ooit begon.

De enige vraag die blijft: wat ga jij maken met Advanced Custom Fields? Deel het met ons in de opmerkingen hieronder.


Als je dit artikel leuk vond, dan ga je Kinsta’s WordPress hosting platform ook heel erg leuk vinden! Of het nu gaat om het versnellen van je website of de 24/7 support van ons ervaren WordPress-team. Onze door Google Cloud aangedreven infrastructuur is gericht op automatische schaalbaarheid, prestaties en beveiliging. Laat ons jou het Kinsta verschil tonen! Bekijk onze pakketten