wat zijn ACF in 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?

Kort samengevat: Je hebt waarschijnlijk Advanced Custom Fields waarschijnlijk wanneer je niet verder komt met de on-board elementen in de WordPress backend. Je wordt geconfronteerd met een uitdaging die niet of slechts gedeeltelijk kan worden gerealiseerd met behulp van pagina's of posts. Afhankelijk van de eisen van de klant kan dit relatief snel gebeuren.

In mijn geval mocht ik bijvoorbeeld een zoekopdracht met filtercriteria bouwen. Dus niet een eenvoudige tekstzoekopdracht die de hele website doorzoekt op geschikte content, maar een zoekopdracht waarbij vooraf specifieke gegevens kunnen worden ingevoerd via een formulier. De gebruiker heeft verschillende filtercriteria tot zijn beschikking. Deze omvatten

  • 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

Ik was daarom op zoek naar een oplossing om dit zoeken met filters te implementeren met behulp van Advanced Custom Fields .

De gelijknamige plugin in de officiële WordPress plugin directory wordt voortdurend verder ontwikkeld, dus er verschijnen steeds nieuwe functies. Als je dicht bij de actie wilt zijn, kun je ACF volgen op Twitter.

De ACF plugin is actief op meer dan 1 miljoen websites. Hij is intensief getest en werkt feilloos met de nieuwste WordPress versie. Het is ook indrukwekkend dat de plugin al meer dan 1.000 beoordelingen met 5 sterren heeft ontvangen. Aan de andere kant zijn er een miezerige 40 beoordelingen met slechts één ster - waarschijnlijk gebruikers die het na (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

Ik wil me abonneren op de nieuwsbrief om op de hoogte te blijven van nieuwe blogartikelen, ebooks, features en nieuws over WordPress. Ik kan mijn toestemming te allen tijde intrekken. Bekijk ons Privacybeleid.
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 aangepaste posttypes worden gebruikt. Het is hier heel belangrijk dat het zinvol is om je eigen aangepaste posttype te maken voor het gebruik van Advanced Custom Fields . In mijn geval noem ik het aangepaste posttype (CPT) gewoon"therapeut".

Je kunt het aangepaste posttype natuurlijk ook zelf programmeren. Ik heb hiervoor echter de "Custom Post Type UI" plugin gebruikt, die ik in de volgende paragraaf 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 met filtercriteria te bouwen. Maar hoe is het mogelijk om de inhoud van de backend elegant te presenteren in de frontend zodat de gebruiker ermee kan interageren?

Ook hier heb je de keuze tussen zelf ontwikkelen of een plugin gebruiken. Nogmaals, ik heb lang gezocht naar een goed hulpje en kwam uiteindelijk Search & Filter Pro tegen.

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 "Search & Filter Pro" plugin kun je een aangepaste 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).

Je zult echter zien dat dit er nog steeds een beetje onaantrekkelijk uitziet. Ik heb dit verbeterd met een paar CSS wijzigingen en ik denk dat het resultaat aan de voorkant behoorlijk indrukwekkend 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 *.