"Ken je Advanced Custom Fields niet? Zonder ACF zou ik WordPress zeker niet meer gebruiken." Dit is wat een collega me een paar weken geleden schreef via Slack . Maar hij is een ontwikkelaar, ik ben een ontwerper. Ten laatste op dit punt, echter, realiseerde ik me dat ik er iets aan moest (en wilde) doen.
Wat zijn Advanced Custom Fields?
WordPress biedt reeds een brede waaier van functies. Met de Advanced Custom Fields kunt u deze functies nog verder uitbreiden - in de standaardversie gratis. 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.
Dus met WordPress is bijna alles mogelijk - Advanced Custom Fields quasi als afstemming voor WordPress .
Waar heb ik Advanced Custom Fields eigenlijk voor nodig?
In een notendop: Je hebt waarschijnlijk Advanced Custom Fields nodig als je vastzit met de on-board elementen in de WordPress backend. U staat voor een uitdaging die niet of slechts gedeeltelijk kan worden gerealiseerd 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, bijvoorbeeld, mocht ik een zoekopdracht met filtercriteria opstellen. Niet een 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 bordelementen 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 komt van Elliot Condon. De Australiër werkt er zeer actief aan en ontwikkelt het voortdurend, zodat steeds weer nieuwe functies verschijnen. Als u dicht bij de actie wilt zijn, kunt u ACF volgen op Twitter.
Als u al moedig was en volledig vertrouwt op de blokken-editor die sinds WordPress 5.0 (Gutenberg) is ingevoerd, 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 laatste 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 - 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 dit zelf nog niet hoeven gebruiken. De reden is eenvoudig: de eersteklas documentatie, die veldtypes, functies, filters en FAQ behandelt.
Wat zijn Custom Post Types?
Eerder zei ik dat actief ontwerp noodzakelijk is. Dit betekent ook op Advanced Custom Fields dat u in bepaalde gevallen niet veel aan deze alleen hebt. Alleen in combinatie met Custom Post Types krijg je meer mogelijkheden.
Eerst rijst de vraag: Wat is een (normaal) Post Type?
De twee populairste op WordPress zijn pagina's en blog posts. Dus, voor elke nieuwe inhoud die voor een website moet worden gemaakt, beslist u welk post type het meest geschikt is. Dit hangt af van verschillende factoren, waaronder hoe u wilt dat de informatie zichtbaar is en welke velden u ervoor nodig hebt in de backend.
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 kunt u 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, de tweede
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 dat ik een filter-zoekopdracht met verschillende velden wilde maken. Dus moest ik 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 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, u hebt de keuze tussen zelf ontwikkelen of 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
- Zoeken & Filteren Pro (Premium-Plugin): https://searchandfilter.com
Ik ben benieuwd wat ik nog meer kan implementeren met Advanced Custom Fields in de toekomst. Heeft u vragen of opmerkingen over dit artikel? Zo ja, dan ben ik blij met veel feedback.
Afbeelding: Shane Aldendorff | Unsplash
Reacties op dit artikel