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

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.

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.

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.

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:

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:

Aanvullende links

• ACF Plugin: https://de.wordpress.org/plugins/advanced-custom-fields
• Custom Post Type UI Plugin: https://wordpress.org/plugins/custom-post-type-ui
• Uitbreidingen: https://awesomeacf.com
• Zoek & Filter Pro (Premium Plugin): https://searchandfilter.com

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.