WP Offload Media

Ik ben al heel lang fan van Advanced Custom Fields (ACF). Het wordt gebruikt op bijna elke site die ik de afgelopen jaren heb gebouwd of waar ik aan heb gewerkt.

Voor wie het niet weet, ACF is een plugin die je meer controle geeft over je content. Het gebruikt custom post meta om je content te verrijken met gestructureerde data. Het laat je ook de datavelden in meta boxen bouwen en configureren wanneer je posts, pagina’s, custom post types, en nog veel meer update.

In het verleden heb ik de plugin gebruikt als onderdeel van een project op de Delicious Brains website. Echter, deze blog post heeft me laten zien hoe essentieel de third-party oplossing is voor WordPress ontwikkeling. Laat het me uitleggen…

Hoe ACF werkt

Het duurde even voor ik doorhad wat ACF doet, dus hier is een kort voorbeeld. Ik heb het gebruikt op een site van een hondenreddingsorganisatie, waar gebruikers nieuwe honden toevoegen voor adoptie als een aangepast post type. Maar naast de naam van de hond, de beschrijving, de titel van het bericht en de inhoud, willen ze ook het ras en het geslacht van de hond, een link naar een video, en een aantal foto’s opslaan.

Om dit te doen, heb ik een veldgroep voor deze gegevens gemaakt uit het menu Aangepaste velden >Veldgroepen >Nieuw menu toevoegen:

Je kunt velden van verschillende typen toevoegen. Hier heb ik selecties, tekstvakken, een eenvoudig booleaans selectievakje en een galerijveld gebruikt. Dit laatste is een ACF Pro-optie, waarover later meer.

Hier zie je hoe je een selectievakje configureert, compleet met gebruikersopties:

Volgende, ik heb gezegd dat deze groep alleen moet verschijnen op bewerkingsschermen voor het Dog aangepaste posttype. Er zijn allerlei soorten logica die je hier kunt gebruiken, zoals post types, sjablonen, categorieën en gebruikersrollen:

De echte kracht van ACF is echter wanneer je gegevens toevoegt.

Gegevens toevoegen aan ACF-velden

Het bewerkingsscherm ziet er anders uit wanneer je werkt aan een Dog post. Het toont een aangepaste meta box compleet met de gedefinieerde velden:

Dit maakt het toevoegen van alle extra gegevens gemakkelijk voor content editors. Je kunt ook precies aangeven waar in het thema de gegevens moeten worden weergegeven, met behulp van de get_field functiecode:

<div class="columns small-12 medium-9"> <a href="<?php get_permalink(); ?>"> <h2 class="icon paw"><?php get_the_title(); ?> <span class="dog-data"> <?php printf( ‘%s %s, get_field( 'gender' ), get_field( 'breed' ) ); ?> </span> </h2> </a></div>

Zonder de plugin zou ik ofwel de standaard aangepaste metavakken van WordPress moeten gebruiken, ofwel mijn eigen rijkere metavakken moeten coderen, ofwel het ras en het geslacht van de hond in aangepaste taxonomieën moeten opnemen. Misschien moet ik zelfs de galerij gebruiken die in de inhoud van het bericht is opgenomen.

ACF Elevates WordPress

ACF is precies wat WordPress als Content Management Systeem (CMS) heeft gemist als het gaat om meer controle over je content. Met meer dan een miljoen actieve installaties heeft het geholpen het WordPress platform krachtiger te maken, en heeft het misschien zelfs bijgedragen aan de groei ervan.

Wat meer is, ontwikkelaars en bureaus hebben het gebruikt om klanten controle over hun inhoud te geven zonder de noodzaak van shortcodes, pagina bouwers, of zelfs post_content helemaal niet. Ontwikkelaars hebben volledige controle over waar gegevens verschijnen op de voorkant van de site, waardoor de onvermijdelijke klantbewerkingen die de visuals teniet doen, worden vermeden.

In feite is ACF zo populair onder onze klanten, dat we een integratie met WP Offload Media hebben moeten toevoegen. Nu werken afbeeldingen en bijsnijden met media die zijn geoffload naar Amazon S3, DigitalOcean Spaces of Google Cloud Storage.

Extra veldopties toevoegen aan ACF

De gratis versie van de plugin heeft veel functionaliteit. De premium versie is echter essentieel om toegang te krijgen tot velden zoals repeaters, flexibele lay-outs, en galerijen.

Voorbeeld, we gebruiken het Repeater veld om gebruikers een selectie van testimonials te laten weergeven in een slider op productpagina’s. De Repeater bevat een genest postobjectveld:

Het verschijnt vervolgens bij het bewerken van de pagina, zodat we kunnen bepalen welke getuigenissen worden weergegeven:

Dankzij de acties en filters die overal in de codebase te vinden zijn, is ACF altijd een zeer ontwikkelaar-vriendelijke en uitbreidbare tool geweest. Het geeft ook prioriteit aan verbeteringen die belangrijk zijn voor gebruikers.

De lokale JSON-functie gebruiken

Een van de weinige problemen die ik in het verleden heb gevonden, was het opslaan van veldconfiguraties in de database, met name aangepaste post-typen voor veldgroepen en velden.

Dit betekende dat als je de velddefinitie op een ontwikkelsite veranderde, je de database niet met een oplossing als WP Migrate DB Pro terug kon zetten naar live. Je zou merken dat de posts tabel zou veranderen, en je zou de nieuwe data verliezen.

Dit is het eeuwenoude database samenvoeg probleem (laat me niet beginnen…). Ik werkte hier altijd omheen door eerst de velden op de live site te veranderen. Daarna haalde ik de database naar mijn lokale site om verder te gaan met de ontwikkeling. Niet ideaal.

Gelukkig heeft ACF de Local JSON functie geïntroduceerd. Hiermee kunnen veldconfiguraties worden opgeslagen als JSON-bestanden, die kunnen worden gesynchroniseerd met de database.

Deze geweldige functie lost het database-samenvoegprobleem op voor ACF-gegevens. Het betekent ook dat u de JSON-bestanden onder versiebeheer kunt houden en de configuratie een onderdeel kunt maken van uw typische file deployment proces. Tijdens het werken met de plugin op onze site, heb ik een aantal tweaks toegevoegd om het nog meer te integreren met onze Git en multi-environment setup:

• Ik heb de JSON directory gedefinieerd als onze app/data directory buiten het thema (omdat het kan veranderen).
• Het “Custom Fields” menu-item zal alleen worden weergegeven op ontwikkelomgevingen.
• JSON bestanden met een verouderde database configuratie op admin_init worden automatisch gesynchroniseerd.

Ondanks dat we nu de WordPress Block Editor (voorheen bekend als Gutenberg) hebben, zou ik willen stellen dat ACF nog steeds van vitaal belang is voor het creëren van een geweldige editing ervaring.

De Block Editor gebruiken naast ACF

De Block Editor biedt een andere richting voor het bewerken van content dan ACF. Je maakt inhoud met behulp van blokken in plaats van deze op te slaan als metagegevens in berichten, wat je enige ontwerpflexibiliteit geeft.

In het begin ondersteunde de Block Editor geen metavakken. Ze werden zelfs verwijderd uit het scherm “Post bewerken”, wat tot veel verontwaardiging leidde. Nu is er ondersteuning voor meta boxen. Ze verschijnen onder de blok-editor met een minimale, minder verfijnde gebruikersinterface (UI).

Door gebruik te maken van blokken in plaats van velden voor aangepaste gegevens, heeft de nieuwe editor de potentie om een enorme impact te hebben op de toekomst van ACF. Bovendien zullen nieuwe sites veel minder snel een tool van derden installeren nu er een native oplossing is.

Het is echter niet de eerste keer dat voorgestelde kernwijzigingen de toekomst van ACF bedreigen. Een paar jaar geleden werd een nieuw team samengesteld voor Post Meta. Aanvankelijk leek het erop dat dit de doodsteek zou betekenen voor de verschillende oplossingen voor aangepaste velden van derden:

Er zijn een heleboel bibliotheken/frameworks/plugins (CMB, SCB, WPAlchemy, ACF, Pods) geweest, die deze rol voorlopig hebben vervuld. We zullen deze zien als spirituele prequels voor een nieuwe core-waardige plugin.

Toen schreef ik over hoe deze beslissing om nieuwe concurrerende features te introduceren sommige plugins overbodig zou kunnen maken. Uiteindelijk ging het Post Meta project nergens heen, de nieuwe editor kwam er, en ACF doorstond de storm.

ACF keerde niet alleen terug, ze pasten zich aan. Het resultaat was iets dat de kracht van ACF en de flexibiliteit van aangepaste Blocks combineerde. Laten we het daar nu eens over hebben.

Hoe bouw je Blokken met ACF

Het is duidelijk dat aangepaste Blokken nuttig kunnen zijn. Het technische proces om ze te maken is echter complex. ACF-blokken vullen het gat.

ACF-blokken integreren met uw huidige aangepaste velden, zijn dynamisch en aanpasbaar, en laten u twee dingen bereiken:

• U kunt uw huidige aangepaste velden meenemen in het ecosysteem van de Block Editor.
• U kunt aangepaste inline-oplossingen maken.

Ze worden weergegeven met behulp van een PHP-sjabloonbestand of callback-functie – dus het is net als het ontwikkelen van een thema. Ze blijven ook compatibel met de WordPress core, dus je kunt zelfs herbruikbare Blocks maken via het framework.

Hoewel ACF Blocks geen krukken zijn, zou ik zeggen dat als je React-vaardigheden nog niet zo ver zijn, je ze zeker verder wilt onderzoeken. Ze stellen je in staat om de kracht van de Block Editor te benutten, terwijl je binnen het vertrouwde functions.php bestand blijft.

Een ACF Block bouwen

Laten we je zien hoe je een ACF Block bouwt. De Pro versie van de tool bevat deze functionaliteit al vanaf ACF 5.8, dus het is al zo’n twee jaar bij ons. Hier is het supersimpele voorbeeld van een blok registratie code:

add_action('acf/init', 'my_acf_init');function my_acf_init() { // check function exists if( function_exists('acf_register_block_type') ) { // register a testimonial block acf_register_block_type(array( 'name' => 'testimonial', 'title' => __('Testimonial'), 'description' => __('A custom testimonial block.'), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'render_callback' => 'my_acf_bock_render_callback', 'category' => 'formatting', 'icon' => 'admin-comments', 'keywords' => array( 'testimonial', 'quote' ), )); }}

Van hieruit, wil je een veld groep maken en het blok renderen. Voor het eerste doet u dit vanuit het scherm Aangepaste velden >Veldgroepen binnen WordPress:

Hier voegt u uw veldgroep toe en vult u deze zoals gebruikelijk. In het metavak “Locatie” moet je echter de regel “Blok” gebruiken om (in dit geval) het Testimonial-blok te selecteren.

Tot slot moet je het blok renderen. Dit volgt hetzelfde proces dat je misschien al gewend bent met aangepaste velden:

• Maak een sjabloonbestand voor je thema op basis van de parameter die is opgegeven in de render_template-instelling bij de eerste registratie van het blok.
• Choose the right method for rendering the Block.
• Enqueue your styles and scripts.

Note that the acf_register_block_type() function offers enqueue_styleenqueue_script and enqueue_assets settings.

On the whole, Blocks shouldn’t replace every custom field meta box where they’re needed, but they will let you take advantage of crafting content in the editor.

‘InnerBlocks’ Support

The Block Editor also has functionality that helps you work with ACF Blocks. InnerBlocks essentially let you insert any new Block into your ACF Block.

They can be custom or core Blocks, and you’re able to use the current “Title”, “Content”, and “Button” fields in your own ACF Blocks.

Here’s a quick tutorial to get up and running. Om te beginnen met InnerBlocks, neemt u 'jsx' => true op in de supports array:

acf_register_block_type( array( 'name' => 'testimonial', 'title' => __( 'Testimonial' ), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'mode' => 'preview', 'supports' => ));

Je moet dan echo de <InnerBlocks /> HTML-tag in je Block-sjabloon opnemen:

 echo '<div class="block-about__content">'; echo '<InnerBlocks />';

Dit is slechts een eenvoudig voorbeeld, maar er is nog veel meer dat je met InnerBlocks kunt doen.

Alternatieven voor ACF Blokken

Natuurlijk zal ACF niet de enige oplossing zijn voor het maken van Blokken. Als zodanig zal je eerste ingeving waarschijnlijk een custom build zijn.

We hebben in het verleden behandeld hoe je een ‘vanilla’ Block maakt, maar voordat je begint, heb je kennis van React nodig.

Er zijn ook WordPress plugins waarmee je Blocks kunt samenstellen uit verschillende componenten, maar ik zou zeggen dat die niet echt voor ontwikkelaars zijn, maar voor ‘eindgebruikersknutselaars’. Lazy Blocks wordt regelmatig geüpdatet, dus dit is een goede optie als je wilt experimenteren met wat het biedt.

De toekomst van ACF

Sinds zijn release is ACF een onmisbare aanvullende plugin voor WordPress. Het breidt uit, verrijkt, en maakt het platform bruikbaarder. Ik denk niet dat ik websites zou kunnen bouwen zonder.

Het combineren van de Block Editor en ACF Blocks is echter de kers op de taart – het is een uitstekende investering in de toekomst van het CMS. Het zal helpen de drempel te verlagen voor ontwikkelaars om de Block Editor uit te breiden zonder te beginnen aan de steile leercurve van React. Op de lange termijn kunnen degenen die zo hard aandringen op de evolutie van de Block Editor dit als een overwinning beschouwen.