Advanced Custom Fields: jouw ultieme handleiding

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 plugin 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 plugin 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 plugins 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:

• Prijs
• Gewicht
• Kleur

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

• Plaats
• Start/eindtijd
• Prijs

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.

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:

• Makkelijkere input – in plaats van dingen van vooraf aan te typen, is het veel makkelijker om met een goed uitgewerkte aangepaste veldgroep gegevens in te voeren. In plaats van een datum te typen, kun je bijvoorbeeld gewoon de datum selecteren uit een datumkiezer.
• Consistentie – de informatie die je invoert in jouw aangepaste velden wordt altijd weergegeven op basis van jouw instellingen, wat betekent dat dit wordt doorgevoerd op jouw hele site.
• Eenvoudige updates en onderhoud – als je in de toekomst iets wilt veranderen aan de manier waarop die informatie wordt weergegeven, hoef je maar één ding bij te werken in plaats van elk bericht afzonderlijk.

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:

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

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 plugin.

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 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:

• Repeater fields: hiermee kun je bepaalde (groepen) velden bericht voor bericht herhalen. Als je bijvoorbeeld informatie over een spreker toevoegt aan een event, helpt een repeater field zodra je meerdere sprekers hebt (je kan gewoon het veld of de velden voor de spreker zo vaak als nodig “herhalen”, zodat je bij gevallen met meerdere sprekers goed zit).
• ACF-blokken: geef je velden weer als een Gutenberg-blok, in plaats van een meta-box. Dit is vooral handig als je een site bouwt voor een klant en deze eenvoudig aangepaste veldgegevens wilt laten invoeren en visualiseren.
• Flexibel content veld: maak lay-outs van andere velden. Het is een soort lichtgewicht pagebuilder op basis van aangepaste veldinformatie.
• Galerijveld: meerdere afbeeldingen uploaden naar één veld.

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 $49 per jaar voor gebruik op een enkele site, kost $149 per jaar voor gebruik op 10 sites, en $249 per jaar voor gebruik om een oneindig aantal sites.

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:

• Doel – laten we zeggen dat je twee verschillende typen hebt bij hardlopen: “snelheid” en “conditie”.
• Afstand – hoe lang de loop was.
• Starttijd – toen je begon te hardlopen.
• Finish Time – wanneer je klaar was met hardlopen.
• Locatie – waar je hebt hardgelopen.

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:

2. Custom Fields toevoegen

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

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

• Field Label: dit is wat er in de editor zal verschijnen. Het zal ook gebruikt worden om de Field Name te genereren, wat je zal gebruiken in de code. Je hoeft de veldnaam niet te veranderen (maar het kan wel als je dat wilt).
• Veldtype: dit is het type informatie dat je wilt verzamelen. Je gebruikt bijvoorbeeld een veld Number voor het verzamelen van nummerinformatie of een veld Email voor een e-mailadres.

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

Verder naar beneden kun je de keuzemogelijkheden bij Keuzes invoeren:

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:

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)!

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

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:

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:

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?”:

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

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?”:

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:

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!

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:

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:

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():

En nu kun je na het verversen van het blogbericht de aangepaste veldgegevens boven de reguliere WordPress content 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…

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

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:

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:

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

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

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:

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:

• De sjabloonbestanden van jouw thema’s
• Met een shortcode
• Met Elementor Pro

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.