advanced custom fields wordpress

Wat zijn Advanced Custom Fields (ACF) in WordPress?

"Ken je Advanced Custom Fields (ACF) niet? Zonder ACF zou ik zeker geen WordPress meer gebruiken." Dit schreef een collega me een paar weken geleden via Slack. Hij is echter een ontwikkelaar, ik ben een ontwerper. Op het laatst op dit punt realiseerde ik me echter dat ik het moest (en wilde) aanpakken.

Wat zijn Advanced Custom Fields (ACF)?

WordPress zelf biedt al een groot aantal functies. Met Advanced Custom Fields (ACF) kun je deze functies nog verder uitbreiden - gratis in de standaardversie. Ze geven je volledige controle over de inhoud van je website.

Standaard vinden we typische velden zoals titel, inhoud, datum en auteur in de backend voor posts en pagina's. Advanced Custom Fields , of het hieronder genoemde Plugin, geven u de mogelijkheid om WordPress en daarmee pagina's en berichten vrijwel willekeurig en individueel uit te breiden.

Dit betekent dat zo ongeveer alles mogelijk is met WordPress - Advanced Custom Fields als afstemming voor WordPress, zeg maar.

Waar heb ik Advanced Custom Fields voor nodig?

In een notendop: Je hebt waarschijnlijk Advanced Custom Fields nodig als je niet meer verder komt met de on-board elementen in de WordPress backend. Je staat voor een uitdaging die niet of slechts gedeeltelijk gerealiseerd kan worden met behulp van pagina's of berichten.

Afhankelijk van de wensen van de klant kan dit betrekkelijk snel gebeuren. Als u zelf webdesigner bent, komt dit u vast ook bekend voor.

In mijn geval mocht ik bijvoorbeeld een zoekopdracht bouwen met filtercriteria. Niet een eenvoudige tekstzoekactie die de hele website doorzoekt op geschikte inhoud, maar een zoekactie waarbij vooraf via een formulier specifieke gegevens kunnen worden ingevoerd. De gebruiker heeft verschillende filtercriteria tot zijn beschikking. Dit zijn onder andere:

  • Naam (tekstveld)
  • Postcode (tekstveld)
  • Land (dropdown)
  • Certificaten (selectievakje)

Maar daarover later meer. Deze use case bracht me op het idee om Advanced Custom Fields (ACF) te gebruiken. Zo'n individuele zoektocht is eenvoudigweg niet mogelijk met WordPress on-board elementen zonder ACF.

Advanced Custom Fields: De vrije Plugin

Dus zocht ik naar een oplossing om dit filter zoeken te implementeren met behulp van Advanced Custom Fields .

De gelijknamige plugin in de officiële WordPress plugin directory is afkomstig van Elliot Condon. De Australiër werkt er zeer actief aan en ontwikkelt het voortdurend verder, zodat er steeds weer nieuwe functies verschijnen. Als je dicht bij de actie wilt zijn, kun je ACF volgen op Twitter.

Als je al dapper genoeg bent geweest om de in WordPress 5.0 geïntroduceerde blok-editor (Gutenberg) te gebruiken, zijn er ook blokken voor de nieuwe editor op Advanced Custom Fields .

De ACF plugin is momenteel actief op meer dan 1 miljoen websites. Het is zeer intensief getest en werkt feilloos met de nieuwste WordPress versie. Ook indrukwekkend is dat de plugin al meer dan 1.000 beoordelingen met 5 sterren heeft gekregen. Daarentegen zijn er een miezerige 16 beoordelingen met slechts één ster - zeer waarschijnlijk gebruikers die het na een (zeer) korte tijd hebben opgegeven.

Met zo'n Plugin is het duidelijk: het vergt wat tijd en geduld tot je de toepassing begrijpt. Natuurlijk, ik heb alleen de oppervlakte van Advanced Custom Fields bekrast. Ik wil alleen maar zeggen dat er andere Plugins zijn die je installeert en dan werken ze comfortabel op de achtergrond - het is anders met ACF. Je moet actief ontwerpen en de algemene verbinding zien tussen database, backend en frontend.

Wat ook onontbeerlijk is voor deze Plugin, die vrij technisch is: de ondersteuning.

Ik heb hier zelf nog geen gebruik van hoeven maken. De reden is eenvoudig: de eersteklas documentatie, die veldtypen, functies, filters en FAQ's behandelt.

"*" geeft verplichte velden aan

Toestemming*
Dit veld dient ter validatie en mag niet worden gewijzigd.

Wat zijn Custom Post Types?

Eerder zei ik al dat een actief ontwerp noodzakelijk is. Op Advanced Custom Fields betekent dit ook dat je in bepaalde gevallen niet veel aan deze alleen hebt. Alleen in combinatie met Custom Post Types ontstaan verdere mogelijkheden.

Eerst rijst de vraag: Wat is een (normaal) Post Type?

De twee bekendste in WordPress zijn Pagina's en Blogposts. Voor elke nieuw te maken inhoud voor een website bepaal je welk posttype het meest geschikt is. Dit hangt af van verschillende factoren, waaronder hoe je de informatie zichtbaar wilt hebben en welke velden je in de backend nodig hebt.

Maar hoe zit het als u inhoud wilt bieden die niet door een gewone pagina of post kan worden gedekt?

Je had het misschien al geraden: Je hebt een nieuwe manier nodig om inhoud in te voeren in de backend. Quasi een invoermasker met precies de velden die je nodig hebt. Dat is wat Advanced Custom Fields u kan bieden. Met de hierboven vermelde Plugin kunt u deze velden gemakkelijk in de backend definiëren en aanmaken. Als deze structuur er eenmaal is, komt de volgende stap.

advanced custom fields eigen velden
In de backend van ACF Plugins kunt u gemakkelijk velden definiëren.

Dit is wanneer Custom Post Types in het spel komen. Het is zeer belangrijk om te weten dat het zinvol is om een aangepast post type te maken voor het gebruik van Advanced Custom Fields . In mijn geval, noem ik de Custom Post Type (CPT) gewoon therapeut.

Natuurlijk kun je het Custom Post Type ook zelf programmeren. Ik heb hiervoor echter de plugin "Custom Post Type UI" gebruikt, die ik in de volgende sectie in meer detail zal uitleggen.

eigen posttype maken
Zo ziet de achterkant van de "Custom Post Type UI" plugin eruit.

Custom Post Type UI: gratis plugin

Als dat te weinig magie was voor u tot nu toe met alleen de Advanced Custom Fields (ACF), hier komt het beste: ACF in combinatie met Custom Post Type UI, kort CPT UI.

Hiermee kun je database-inhoud naar wens direct in de frontend weergeven. In mijn geval stond ik voor de uitdaging om een filterzoekopdracht te bouwen met verschillende velden. Ik moest eerst alle gegevens uploaden naar de backend met behulp van een CSV import.

Daarna bouwde ik de basis voor het filter zoeken in de frontend met behulp van het Custom Post Type en de Advanced Custom Fields . Meer hierover in het volgende hoofdstuk.

aangepaste posttype acf combinatie
Bijvoorbeeld, je nieuwe Custom Post Type zou er zo uit kunnen zien.

Praktijkvoorbeeld: Een zoekopdracht opbouwen met filtercriteria

Tot zover het moment naar de achterkant. Nu is het tijd voor de voorkant. Zodat u het geheel kunt toepassen en de afzonderlijke Advanced Custom Fields kunt gebruiken voor uw zaak.

Ik heb het ACF gebruikt om een aangepaste zoekopdracht te bouwen met filtercriteria. Maar hoe is het mogelijk om de inhoud van het backend elegant in het frontend te presenteren, zodat interactie door de gebruiker mogelijk is?

Nogmaals, je hebt de keuze tussen zelf ontwikkelen of een plugin gebruiken. Ik heb weer lang gezocht naar een goed hulpje en vond uiteindelijk "Search & Filter Pro" (is gelinkt aan het eind van de tekst).

Dit geeft me een ingenieuze manier om de in de backend beschikbare gegevens te gebruiken voor weergave in de frontend. In mijn voorbeeld zijn dat:

  • Zoeken (normaal zoekveld)
  • Post Meta (toegang tot en zoeken in het relevante geavanceerde aangepaste veld in de database)
  • Submit knop (knop voor het verzenden van de zoekopdracht of het formulier)

In de backend kan dit er als volgt uitzien:

zoeken en filteren pro backend
Met de plugin "Search & Filter Pro" kun je een individuele zoekopdracht met filtercriteria maken.

Daarna kunt u een shortcode gebruiken om de filterzoekopdracht die u net hebt gemaakt overal in de backend in te voegen (op een pagina, bijvoorbeeld).

U zult echter zien dat dit er dan nog steeds een beetje onaantrekkelijk uitziet. Ik heb dit verbeterd door wat CSS handgrepen en vind, dat het resultaat in de frontend best respectabel is:

praktisch voorbeeld acf

Ik kijk ernaar uit om te zien wat ik in de toekomst nog meer kan implementeren met Advanced Custom Fields. Heb je vragen of opmerkingen over dit artikel? Dan kijk ik uit naar je feedback.

Jouw vragen over ACF

Welke vragen heb je over ACF en WordPress? Gebruik gerust de commentaarfunctie. Wil je op de hoogte blijven van nieuwe artikelen over WordPress en webdesign? Volg ons dan op Twitter, Facebook, LinkedIn of via onze nieuwsbrief.

Vond je het artikel leuk?

Met jouw beoordeling help je ons om onze inhoud nog verder te verbeteren.

Laat een reactie achter

Je e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *.