WP Offload Media

Hosszú ideje rajongok a speciális egyéni mezőkért (ACF). Az elmúlt években szinte minden olyan webhelyen használtam, amelyet építettem vagy amelyen dolgoztam.

Aki nem tudja, az ACF egy olyan bővítmény, amely nagyobb kontrollt biztosít a tartalom felett. Egyéni poszt-meta használatával strukturált adatokkal gazdagítja a tartalmat. Lehetővé teszi továbbá az adatmezők létrehozását és konfigurálását a meta dobozokban, amikor posztokat, oldalakat, egyéni poszttípusokat és még sok mást frissítesz.

A múltban a Delicious Brains weboldalon egy projekt részeként használtam a plugint. Ez a blogbejegyzés azonban megmutatta nekem, hogy a harmadik féltől származó megoldás mennyire létfontosságú a WordPress-fejlesztés szempontjából. Hadd magyarázzam el…

Hogyan működik az ACF

Egy kis időbe telt, mire megértettem, mit csinál az ACF, ezért íme egy gyors példa. Egy kutyamentő jótékonysági oldalon használtam, ahol a felhasználók egyéni poszttípusként új kutyákat adnak hozzá az újbóli elhelyezéshez. A kutya neve, leírása, a poszt címe és tartalma mellett azonban a kutya fajtáját és nemét, egy videóra mutató linket és néhány fényképet is tárolni akarnak.

Ezért az Egyéni mezők > Mezőcsoportok > Új hozzáadása menüből létrehoztam egy mezőcsoportot ezen adatokhoz:

Az Egyéni mezőkhöz különböző típusú mezőket adhat hozzá. Itt selecteket, szövegdobozokat, egy egyszerű boolean jelölőnégyzetet és egy galéria mezőt használtam. Ez utóbbi egy ACF Pro opció, és erről később még lesz szó.

Íme, hogyan konfigurálhatsz egy select mezőt, felhasználói beállításokkal:

A következőkben azt mondtam, hogy ez a csoport csak a Dog egyéni poszttípus szerkesztési képernyőin jelenjen meg. Itt mindenféle logikát használhatsz, például poszttípusokat, sablonokat, kategóriákat és felhasználói szerepköröket:

Az ACF igazi erejét azonban az adja, amikor adatokat adsz hozzá.

Adatok hozzáadása az ACF-mezőkhöz

A szerkesztőképernyő másképp néz ki, amikor egy Dog poszttal dolgozol. Egy egyéni metamezőt jelenít meg a meghatározott mezőkkel kiegészítve:

Ez megkönnyíti a tartalomszerkesztők számára az összes extra adat hozzáadását. Azt is lehetővé teszi, hogy a get_field függvénykód segítségével pontosan megadja, hogy az adatok hol jelenjenek meg a témában:

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

A plugin nélkül vagy a WordPress alapértelmezett egyéni metamezőit kellett volna használnom, vagy saját, gazdagabb metamezőt kellett volna kódolnom a semmiből, vagy a kutya fajtáját és nemét egyéni taxonómiákba kellett volna beillesztenem. Lehet, hogy még a poszt tartalmába ágyazott natív galériát is használnom kell. Shudders.

Az ACF felemeli a WordPress-t

Az ACF pontosan az, amit a WordPress mint tartalomkezelő rendszer (CMS) eddig hiányolt, amikor a tartalom feletti nagyobb kontrollról volt szó. A több mint egymillió aktív telepítéssel hozzájárult a WordPress platform erősebbé tételéhez, és talán még a növekedéséhez is hozzájárult.

Mi több, a fejlesztők és ügynökségek kiaknázták, hogy ügyfeleiknek kontrollt adjanak a tartalmuk felett, anélkül, hogy shortkódokra, oldalépítőkre vagy akár post_content egyáltalán szükségük lenne. A fejlesztők teljes mértékben kontrollálhatják, hogy az adatok hol jelennek meg az oldal frontendjén, elkerülve az elkerülhetetlen ügyfélszerkesztéseket, amelyek tönkreteszik a látványt.

Sőt, az ACF annyira népszerű az ügyfeleink körében, hogy integrációt kellett hozzáadnunk a WP Offload Mediához. Mostantól a képek és a képkivágás az Amazon S3-ra, a DigitalOcean Spaces-re vagy a Google Cloud Storage-ra feltöltött médiával is működik.

Extra mezőopciók hozzáadása az ACF-hez

A bővítmény ingyenes verziója rengeteg funkcióval rendelkezik. A prémium verzió azonban elengedhetetlen az olyan mezőkhöz való hozzáféréshez, mint az ismétlők, a rugalmas elrendezések és a galériák.

Az ismétlő mezőt például arra használjuk, hogy a felhasználók válogatott ajánlásokat jeleníthessenek meg egy csúszkában a termékoldalakon. A Repeater egy beágyazott post objektum mezőt tartalmaz:

Az oldal szerkesztésekor megjelenik, így szabályozhatjuk, hogy mely ajánlások jelenjenek meg:

A kódbázisban elhelyezett akciók és szűrők révén az ACF mindig is rendkívül fejlesztőbarát és bővíthető eszköz volt. Emellett a felhasználók számára fontos fejlesztéseket is előtérbe helyezi.

A helyi JSON funkció használata

A múltban azonban az egyik kevés probléma, amit találtam, a mezőkonfigurációk adatbázisban való tárolása volt, különösen a mezőcsoportok és mezők egyéni poszttípusai.

Ez azt jelentette, hogy ha egy fejlesztői oldalon megváltoztattad a meződefiníciót, nem tudtad az adatbázisodat olyan megoldással, mint a WP Migrate DB Pro, visszatolni az élesbe. A posztok táblája megváltozna, és elveszítenéd az új adatokat.

Ez az ősrégi adatbázis-összevonási probléma (ne is kezdjem…). Ezt úgy szoktam megkerülni, hogy először az éles oldalon végeztem el a mezőváltozásokat. Ezután áthúztam az adatbázist a helyi oldalamra, hogy folytassam a fejlesztést. Nem ideális.

Szerencsére az ACF bevezette a Local JSON funkciót. Ez lehetővé teszi a mezők konfigurációinak JSON fájlként történő mentését, amely szinkronizálható az adatbázissal.

Ez a nagyszerű funkció megoldja az ACF-adatok adatbázis-összevonásának problémáját. Azt is jelenti, hogy a JSON fájlokat verzióvezérlés alatt tarthatja, és a konfigurációt a tipikus fájltelepítési folyamat részévé teheti. Miközben a bővítménnyel dolgoztam az oldalunkon, hozzáadtam néhány finomítást, hogy még jobban integráljam a Git és a több környezetre vonatkozó beállításunkhoz:

• A JSON könyvtárat a app/data könyvtárunkhoz definiáltam a témán kívül (mivel ez változhat).
• A “Custom Fields” menüpont csak a fejlesztési környezetekben fog megjelenni.
• A admin_init elavult adatbázis-konfigurációjú JSON fájlok automatikusan szinkronizálódnak.

Noha most már van WordPress Block Editor (korábbi nevén Gutenberg), azt állítom, hogy az ACF még mindig elengedhetetlen a nagyszerű szerkesztési élmény megteremtéséhez.

A Block Editor használata az ACF mellett

A Block Editor más irányt kínál a tartalomszerkesztéshez, mint az ACF. A tartalmat blokkok segítségével hozod létre ahelyett, hogy poszt metaadatként tárolnád, ami némi tervezési rugalmasságot biztosít.

A Block Editor kezdetben nem támogatta a meta dobozokat. Még a “Hozzászólás szerkesztése” képernyőről is eltávolították őket, ami nagy felháborodást váltott ki. Most már a meta-dobozok is támogatottak. Ezek a blokkszerkesztő alatt jelennek meg, minimális, kevésbé kifinomult felhasználói felülettel (UI).

Az új szerkesztő az egyéni adatok mezői helyett a blokkokat használja, és hatalmas hatással lehet az ACF jövőjére. Ráadásul az új webhelyek sokkal kisebb valószínűséggel telepítenek majd harmadik féltől származó eszközt, most, hogy van egy natív megoldás.

Mindamellett nem ez az első alkalom, hogy a javasolt alapvető változtatások veszélyeztetik az ACF jövőjét. Néhány évvel ezelőtt új csapatot állítottak össze a Post Meta számára. Eleinte úgy tűnt, hogy ez megöli a különböző harmadik féltől származó egyéni mező megoldásokat:

Volt egy rakás könyvtár/frameworks/plugin (CMB, SCB, WPAlchemy, ACF, Pods), amelyek egyelőre betöltötték ezt a szerepet. Ezekre úgy tekintünk majd, mint egy új core-értékű plugin szellemi előzményeire.

Akkoriban arról írtam, hogy ez a döntés az új, konkurens funkciók bevezetéséről egyes pluginokat feleslegessé tehet. Végül a Post Meta projekt nem ment sehova, az új szerkesztő megérkezett, és az ACF átvészelte a vihart.

Az ACF nem csak visszapattant, hanem alkalmazkodott is. Az eredmény valami olyasmi lett, ami egyesítette az ACF erejét és az egyéni blokkok rugalmasságát. Beszéljünk erről a következőkben.

Hogyan építsünk blokkokat az ACF segítségével

Az egyéni blokkok nyilvánvalóan előnyösek lehetnek. Létrehozásuk technikai folyamata azonban összetett. Az ACF blokkok kitöltik ezt az űrt.

Az ACF blokkok integrálhatók a jelenlegi egyéni mezőiddel, dinamikusak és testreszabhatók, és két dolgot érhetsz el velük:

• A jelenlegi egyéni mezőidet átviheted a Block Editor ökoszisztémába.
• Egyéni inline megoldásokat hozhat létre.

Azokat egy PHP sablonfájl vagy callback függvény segítségével rendereli – tehát olyan, mintha egy témát fejlesztene. Emellett megtartják a WordPress core kompatibilitást is, így akár újrafelhasználható Blockokat is létrehozhatsz a keretrendszeren keresztül.

Míg az ACF Blockok nem mankók, azt mondanám, hogy ha a React készségeid még hiányosak, mindenképpen érdemes lesz tovább vizsgálnod őket. Segítségükkel kihasználhatod a blokkszerkesztő erejét, miközben a megszokott functions.php fájlban maradsz.

Az ACF blokk építése

Mutatjuk, hogyan építhetsz fel egy ACF blokkot. Az eszköz Pro verziója az ACF 5.8-as verziójától kezdve tartalmazza ezt a funkciót, tehát már körülbelül két éve velünk van. Íme a szuperegyszerű példablokk regisztrációs kód:

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' ), )); }}

Ezután létre kell hoznia egy mezőcsoportot, és renderelnie kell a blokkot. Az előbbihez ezt az Egyéni mezők > Mezőcsoportok képernyőn belül, a WordPressen belül fogod megtenni:

Itt add hozzá a mezőcsoportodat, és töltsd fel a szokásos módon. A “Helyszín” metamezőben azonban a “Blokk” szabályt kell használnod, hogy kiválaszd (ebben az esetben) a Testimonial blokkot.

Végül a blokkot kell megjelenítened. Ez ugyanazt a folyamatot követi, amit már megszokhattál az egyéni mezők esetében:

• Készíts egy sablonfájlt a témádhoz a render_template beállításban megadott paraméter alapján a Blokk kezdeti regisztrálásakor.
• 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. Az InnerBlocks használatának megkezdéséhez a 'jsx' => true-t a supports tömbbe kell beépíteni:

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

Ezután a echo a <InnerBlocks /> HTML taget kell a Block sablonodban:

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

Ez csak egy egyszerű példa, de az InnerBlockokkal sokkal többet is tehetsz.

Az ACF blokkok alternatívái

Az ACF természetesen nem lesz az egyetlen megoldás a blokkok létrehozására. Mint ilyen, az első ösztöne valószínűleg az egyéni építés lesz.

A múltban már foglalkoztunk azzal, hogyan hozzon létre egy “vanília” Blockot, de mielőtt elkezdené, szüksége lesz a React ismeretére.

Vannak olyan WordPress pluginek is, amelyek segítségével különböző komponensekből állíthat össze Blockokat, de azt mondanám, hogy ezek nem igazán fejlesztőknek, hanem “végfelhasználói barkácsolóknak” szólnak. A Lazy Blocks rendszeresen frissül, így ez egy jó lehetőség, ha kísérletezni akarsz azzal, amit kínál.

Az ACF jövője

A megjelenése óta az ACF egy létfontosságú kiegészítő plugin a WordPress számára. Kiterjeszti, gazdagítja és használhatóbbá teszi a platformot. Nem hiszem, hogy tudnék weboldalakat építeni nélküle.

A Block Editor és az ACF Blocks kombinálása azonban a hab a tortán – ez egy kiváló befektetés a CMS jövőjébe. Segít csökkenteni a belépési korlátot a fejlesztők számára a Block Editor bővítéséhez anélkül, hogy a React meredek tanulási görbéjén kezdenének el. Hosszú távon azok, akik olyan keményen szorgalmazzák a Block Editor fejlesztését, ezt győzelemnek tekinthetik.