"Ken je Advanced Custom Fields (ACF) niet? Zonder ACF zou ik zeker geen WordPress meer gebruiken." Dit is wat een collega me een paar weken geleden via Slack schreef. Maar hij is een ontwikkelaar, ik ben een ontwerper. Ten laatste op dit punt realiseerde ik me echter dat ik er iets aan moest (en wilde) doen.

Wat zijn Advanced Custom Fields (ACF)?

WordPress zelf biedt al een breed scala aan functies. Met Advanced Custom Fields (ACF) kunt u deze functies nog verder uitbreiden - gratis in de standaardversie. Zij geven u volledige controle over de inhoud van uw 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 zowat alles mogelijk is met WordPress - Advanced Custom Fields als een tuning voor WordPress, om het zo te zeggen.

Waar heb ik Advanced Custom Fields voor nodig?

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

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, bijvoorbeeld, mocht ik een zoekopdracht met filtercriteria opstellen. Geen eenvoudige tekstzoekopdracht waarbij de hele website wordt afgezocht naar geschikte inhoud, maar een zoekopdracht 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. Een dergelijk individueel zoeken is eenvoudigweg niet mogelijk met WordPress boordelementen 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 steeds weer nieuwe functies verschijnen. Als u dicht bij de actie wilt zijn, kunt u 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 te vinden 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 maar 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 betrekking heeft op veldtypes, functies, filters en FAQ's.

Wat zijn Custom Post Types?

Eerder zei ik dat actief ontwerp noodzakelijk is. Op Advanced Custom Fields betekent dit ook dat u er in bepaalde gevallen niet veel aan zult hebben. Alleen in combinatie met Custom Post Types ontstaan verdere opties.

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

De twee bekendste in WordPress zijn Pagina's en Blog Posten. Voor elke nieuwe inhoud die voor een website moet worden gemaakt, beslist u welk posttype het meest geschikt is. Dit hangt af van verschillende factoren, waaronder hoe u wilt dat de informatie zichtbaar is en welke velden u 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 kunt u de inhoud van de database naar wens direct in de frontend weergeven. In mijn geval stond ik voor de uitdaging om een filter-zoekopdracht met verschillende velden op te stellen. Ik moest eerst alle gegevens uploaden naar de backend via 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 met filtercriteria opbouwen

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 de ACF gebruikt om een aangepaste zoekopdracht met filtercriteria op te stellen. Maar hoe is het mogelijk om de inhoud van de backend elegant te presenteren in de frontend, 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 gegevens die in de backend beschikbaar zijn, 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
• Aangepaste 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.