Wat zijn Advanced Custom Fields (ACF) in WordPress en waar heb ik ze voor nodig?

Michael Hörnlimann Laatst bijgewerkt op 21.10.2020
6 Min.
Advanced Custom Fields tekstdruk
Laatst bijgewerkt op 21.10.2020

"Je weet het Advanced Custom Fields niet? Zonder ACF, zou ik WordPress zeker niet meer gebruiken." Een collega van mij stuurde me dit via Slack een paar weken geleden. Hij is een ontwikkelaar, ik ben een ontwerper. Maar op zijn laatst op dit punt realiseerde ik me dat ik er mee om moest (en wilde) gaan.

Wat zijnAdvanced Custom Fields?

WordPress biedt op zich al een breed scala aan functies. Hiermee Advanced Custom Fieldskunt u deze functies nog verder uitbreiden - in de standaardversie gratis. Ze geven u volledige controle over de inhoud van uw website.

Standaard vinden we in de backend voor artikelen en pagina's typische velden als titel, inhoud, datum en auteur. Advanced Custom FieldsDe backend, respectievelijk de Pluginhieronder genoemde, geeft u de mogelijkheid om pagina's en artikelen individueel en praktisch naar believen uit te WordPress breiden.

Dat is met WordPress zo goed als alles wat mogelijk is - Advanced Custom Fieldsquasi als tuning voor WordPress .

Wat heb ik Advanced Custom Fieldseigenlijk nodig?

In het kort: U zult Advanced Custom Fieldswaarschijnlijk de bord-elementen in de WordPress backend moeten gebruiken als u vast komt te zitten. U staat voor een uitdaging die niet of slechts gedeeltelijk kan worden gerealiseerd met behulp van pagina's of bijdragen.

Dit kan relatief snel gebeuren, afhankelijk van de wensen van de klant. Als u zelf webdesigner bent, kan dit u ook bekend voorkomen.

In mijn geval mocht ik bijvoorbeeld een zoekopdracht met filtercriteria opbouwen. Het is dus geen eenvoudig zoeken in tekst, waarbij de hele website wordt doorzocht naar geschikte inhoud, maar een zoekopdracht, waarbij specifieke gegevens via een formulier kunnen worden ingevoerd. De gebruiker heeft verschillende filtercriteria beschikbaar. Dit zijn onder andere:

  • Naam (tekstveld)
  • Postcode (tekstveld)
  • Land (drop-down)
  • Certificaten (selectievakje)

Hierover later meer. Deze use case gaf me het idee om (ACFAdvanced Custom Fields) te gebruiken. Zo'n individuele zoekactie is eenvoudigweg niet mogelijk met WordPress on-board elementen zonder ACF.

Advanced Custom FieldsDe vrije Plugin

Ik was dus op zoek naar een oplossing om dit filteronderzoek uit te Advanced Custom Fieldsvoeren met behulp van .

De gelijknamige Plugin in de officiële WordPress -Plugin-gids werd geschreven door Elliot Condon. De Australiër werkt er zeer actief aan en ontwikkelt het voortdurend verder, zodat er steeds weer nieuwe functies verschijnen. Als je heel dicht bij de actie wilt zijn, kun je Volg ACF op Twitter.

Als je al dapper bent geweest en volledig vertrouwt op de in 5WordPress .0 geïntroduceerde blok-editor (Gutenberg), zijn er ook Advanced Custom Fieldsblokken voor de nieuwe editor.

De ACF Plugin is momenteel actief op meer dan 1 miljoen websites. Het is zeer intensief getest en werkt perfect met de nieuwste WordPress versie. Ook indrukwekkend is dat de Plugin heeft al meer dan 1.000 5-sterren beoordelingen gekregen. Dit in vergelijking met een miezerige 16 reviews met slechts één ster - hoogstwaarschijnlijk gebruikers die het na een (zeer) korte tijd hebben opgegeven.

Met een van deze Pluginis het duidelijk dat het enige tijd en geduld kost om de toepassing te begrijpen. Natuurlijk, ook ik heb alleen maar Advanced Custom Fieldskrassen op het oppervlak gemaakt. Ik wil alleen maar zeggen dat er anderen Pluginszijn die je installeert en dan werken ze comfortabel op de achtergrond - dit is anders met ACF. Je moet actief ontwerpen en de algehele verbinding tussen database, backend en frontend herkennen.

Wat daarbij ook onontbeerlijk isPlugin, en dat is vrij technisch, is de ondersteuning.

Ik heb dit zelf nog niet hoeven te claimen. De reden is heel eenvoudig: De eersteklas documentatiedie zich bezighoudt met veldtypes, functies, filters en FAQ.

Wat zijn aangepaste posttypes?

Ik had al eerder gezegd dat een actief ontwerp noodzakelijk is. Dit betekent Advanced Custom Fieldsook dat deze alleen in bepaalde gevallen niet veel nut voor u zullen hebben. Alleen in combinatie met Custom Post Types zijn er meer opties.

De eerste vraag is: Wat is een (normaal) Posttype?

De twee meest bekende WordPress zijn Pages en Blog Posts. Dus voor elke nieuwe inhoud die voor een website wordt gemaakt, bepaalt u welk type bericht het juiste is. Dit hangt af van verschillende factoren, waaronder hoe de informatie zichtbaar moet zijn en welke velden u nodig heeft in de backend.

Maar wat als u inhoud wilt aanleveren die niet door een normale pagina of post kan worden gedekt?

Je hebt het misschien al geraden: je hebt een nieuwe manier nodig om inhoud aan de achterkant toe te voegen. Een soort invoermasker met precies die velden die je nodig hebt. Dit is wat ze je kunnen Advanced Custom Fieldsbieden. Met het bovenstaande Pluginkunt u deze velden op een comfortabele manier definiëren en creëren in de backend. Als deze structuur eenmaal op zijn plaats is, komt de volgende stap.

Advanced Custom Fields eigen velden
In de backend van ACF Pluginskunt u eenvoudig velden definiëren.

Dat is wanneer er Custom Post Types worden gebruikt. Heel belangrijk hierbij is dat het zinvol is om een eigen Custom Post Type te maken voor het gebruik van Advanced Custom Fieldseen Custom Post. In mijn geval bel ik gewoon de Custom Post Type (CPT) therapeuten.

Natuurlijk kunt u de Custom Post Type ook zelf programmeren. Maar ik heb hiervoor de "Custom PluginPost Type UI" gebruikt, die ik in de volgende paragraaf zal uitleggen.

aangepaste postsoort creatie
Zo ziet de achterkant van de "Custom PluginsPost Type UI" eruit.

Aangepaste Post Type UI: GratisPlugin, de tweede

Als dat alleen met de (ACFAdvanced Custom Fields) niet genoeg magie voor je was tot nu toe, dan komt hier het beste: ACF in combinatie met Custom Post Type UI, korte CPT UI.

Hierdoor kunt u de inhoud van de database naar wens direct in de frontend weergeven. In mijn geval stond ik voor de uitdaging om een filteronderzoek met verschillende velden op te bouwen. Ik moest dus eerst alle gegevens uploaden naar de backend met behulp van een CSV-import.

Daarna heb ik gebruik gemaakt van de Custom Post Type en de Advanced Custom Fieldsfilter zoekopdracht in de voorkant. Meer hierover in de volgende paragraaf.

aangepaste post type acf combinatie
Zo zou uw nieuwe Custom Post Type er bijvoorbeeld uit kunnen zien.

Praktisch voorbeeld: Zoekopdracht opbouwen met filtercriteria

Tot zover de achterkant voor nu. Nu is het aan de voorkant. Dus u kunt het geheel gebruiken en de individuele Advanced Custom Fieldsexemplaren voor uw zaak gebruiken.

Ik heb de ACF gebruikt om een individuele zoekopdracht met filtercriteria op te bouwen. Maar hoe is het mogelijk om de inhoud van de achterkant elegant te presenteren in de voorkant, zodat interactie met de gebruiker mogelijk is?

Ook hier heb je de keuze tussen het zelf ontwikkelen en een Plugin. Ook hier heb ik lang gezocht naar een goede helper en uiteindelijk heb ik "Search & Filter Pro" gevonden (gelinkt aan het einde van de tekst).

Dit geeft me een ingenieuze manier om de gegevens die beschikbaar zijn in de backend te gebruiken voor de display in de frontend. In mijn voorbeeld zijn dit:

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

In de achterkant kan dit er als volgt uitzien:

zoeken en filteren per backend
Met de "Search Plugin& Filter Pro" kunt u een individuele zoekopdracht met filtercriteria maken.

Daarna kunt u met behulp van shortcode het zojuist aangemaakte filter zoeken op elke willekeurige plaats in de backend (bijvoorbeeld op een pagina).

U zult echter zien dat deze er een beetje onaantrekkelijk uit zal zien. Ik heb dit verbeterd met enkele CSS-handgrepen en ik denk dat het resultaat aan de voorkant vrij goed is:

praktijkvoorbeeld acf

Aanvullende links

Ik ben benieuwd wat ik in de toekomst nog meer kan Advanced Custom Fieldsimplementeren. Heeft u vragen of opmerkingen over dit artikel? Dan zou ik graag veel feedback krijgen.

Afbeelding: Shane Aldendorff | Ontspatten

Michael Hörnlimann, geboren in 1991 in Zürich, houdt van de natuur en lekker eten. Sinds april 2018 werkt hij uitsluitend zelfstandig en maakt hij WordPress-websites voor klanten. Zo combineert hij zijn werk met zijn grote passie, reizen naar onbekende landen en culturen. Hij woont en werkt locatieonafhankelijk, soms in de bergen, soms aan zee.

Gerelateerde artikelen

Commentaar op dit artikel

Schrijf een opmerking

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