Jsem fanouškem pokročilých vlastních polí (ACF) už dlouho. Používám ho téměř na každém webu, který jsem za posledních několik let vytvořil nebo na něm pracoval.
Pro neznalé: ACF je zásuvný modul, který vám dává větší kontrolu nad vaším obsahem. Používá vlastní meta příspěvků k obohacení obsahu o strukturovaná data. Umožňuje také vytvářet a konfigurovat datová pole v meta polích při aktualizaci příspěvků, stránek, vlastních typů příspěvků a mnoho dalšího.
V minulosti jsem plugin používal v rámci projektu na webu Delicious Brains. Tento příspěvek na blogu mi však ukázal, jak zásadní je řešení třetí strany pro vývoj ve WordPressu. Dovolte mi, abych vám to vysvětlil…
Jak ACF funguje
Chvíli mi trvalo, než jsem se zorientoval v tom, co ACF dělá, takže zde je krátký příklad. Použil jsem ho na charitativním webu pro záchranu psů, kde uživatelé přidávají nové psy k opětovnému umístění jako vlastní typ příspěvku. Kromě jména psa, popisu, názvu příspěvku a obsahu však chtějí uložit také jeho plemeno a pohlaví, odkaz na video a několik fotografií.
Pro tyto účely jsem pro tyto údaje vytvořil skupinu polí z nabídky Vlastní pole > Skupiny polí > Přidat nové:
Můžete přidávat pole různých typů. Zde jsem použil výběry, textová pole, jednoduché zaškrtávací pole typu boolean a pole galerie. Poslední jmenované pole je volitelnou součástí ACF Pro a později se mu budu věnovat podrobněji.
Podívejte se, jak byste nakonfigurovali výběrové pole doplněné o uživatelské možnosti:
Dále jsem uvedl, že tato skupina by se měla zobrazovat pouze na obrazovkách úprav pro Dog vlastní typ příspěvku. Můžete zde použít nejrůznější logiku, například typy příspěvků, šablony, kategorie a uživatelské role:
Skutečná síla ACF však spočívá v přidávání dat.
Přidávání dat do polí ACF
Ekranina úprav vypadá jinak při práci s Dog příspěvkem. Zobrazuje vlastní meta pole doplněné o definovaná pole:
Přidávání všech dalších údajů je tak pro editory obsahu snadné. Umožňuje také přesně určit, kde se mají data v tématu zobrazit, a to pomocí kódu funkce get_field:
<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>Bez tohoto doplňku bych musel buď používat výchozí vlastní meta pole WordPressu, kódovat vlastní bohatší meta pole od začátku, nebo obout plemeno a pohlaví psa do vlastní taxonomie. Možná bych dokonce musel použít nativní galerii vloženou do obsahu příspěvku. Chvění.
ACF povyšuje WordPress
ACF je přesně to, co WordPressu jako systému pro správu obsahu (CMS) chybělo, pokud jde o větší kontrolu nad obsahem. S více než milionem aktivních instalací pomohl zvýšit výkon platformy WordPress a možná dokonce přispěl k jejímu růstu.
Vývojáři a agentury jej navíc využívají k tomu, aby klientům poskytli kontrolu nad jejich obsahem bez nutnosti používat zkrácené kódy, nástroje pro tvorbu stránek nebo dokonce post_content vůbec. Vývojáři mají naprostou kontrolu nad tím, kde se data na přední straně webu zobrazují, a vyhnou se tak nevyhnutelným klientským úpravám, které ničí vizuální stránku.
Ve skutečnosti je ACF mezi našimi zákazníky tak populární, že jsme museli přidat integraci s WP Offload Media. Obrázky a ořezávání nyní fungují s médii, která se nahrávají do cloudových úložišť Amazon S3, DigitalOcean Spaces nebo Google.
Přidání dalších možností polí do ACF
Ve verzi pluginu zdarma je spousta funkcí. Prémiová verze je však nezbytná pro získání přístupu k polím, jako jsou opakovače, flexibilní rozvržení a galerie.
Příklad pole Opakovač používáme k tomu, abychom uživatelům umožnili zobrazit vybrané reference v posuvníku na stránkách produktů. Opakovač obsahuje vnořené pole objektu příspěvku:
Při úpravě stránky se pak zobrazí, abychom mohli řídit, která svědectví se zobrazí:
Díky akcím a filtrům rozesetým po celé kódové základně byl ACF vždy mimořádně přívětivým a rozšiřitelným nástrojem pro vývojáře. Také upřednostňuje vylepšení, která jsou důležitá pro jeho uživatele.
Použití funkce Local JSON
Jedním z mála problémů, na které jsem v minulosti narazil, však bylo ukládání konfigurací polí do databáze, konkrétně vlastních typů příspěvků pro skupiny polí a pole.
To znamenalo, že pokud jste změnili definici pole na vývojovém webu, nemohli jste databázi pomocí řešení, jako je WP Migrate DB Pro, přesunout zpět do ostrého provozu. Zjistili byste, že se změnila tabulka příspěvků, a o nová data byste přišli.
Jedná se o odvěký problém slučování databází (nenechte mě začít…). Dříve jsem to obcházel tak, že jsem nejprve provedl změny polí na živém webu. Pak jsem databázi přetáhl na místní web a pokračoval ve vývoji. To nebylo ideální.
Naštěstí ACF zavedla funkci Local JSON. Ta umožňuje ukládat konfigurace polí jako soubory JSON, které lze synchronizovat s databází.
Tato úžasná funkce řeší problém se slučováním databází pro data ACF. Znamená to také, že můžete mít soubory JSON pod kontrolou verzí a konfiguraci učinit součástí typického procesu nasazování souborů. Při práci se zásuvným modulem na našem webu jsem přidal několik vylepšení, abych jej ještě více integroval s naším systémem Git a nastavením pro více prostředí:
- Adresář JSON jsem definoval do našeho
app/dataadresáře mimo téma (protože se může změnit). - Položka nabídky „Vlastní pole“ se zobrazí pouze ve vývojových prostředích.
- Soubory JSON s neaktuální konfigurací databáze na
admin_initse budou automaticky synchronizovat.
I když nyní máme k dispozici blokový editor WordPressu (dříve známý jako Gutenberg), tvrdím, že ACF je stále zásadní pro vytvoření skvělého prostředí pro úpravy.
Používání blokového editoru vedle ACF
Blokový editor nabízí jiný směr úprav obsahu než ACF. Obsah vytváříte pomocí bloků, místo abyste jej ukládali jako metadata příspěvku, což vám dává určitou flexibilitu návrhu.
Zpočátku Editor bloků nepodporoval metaboxy. Byly dokonce odstraněny z obrazovky „Upravit příspěvek“, což vyvolalo velké pobouření. Nyní byla podpora pro metaboxy přidána. Zobrazují se pod editorem bloků s minimálním, méně propracovaným uživatelským rozhraním (UI).
Při použití bloků místo polí pro vlastní data má nový editor potenciál mít velký vliv na budoucnost ACF. Navíc je mnohem méně pravděpodobné, že nové weby budou instalovat nástroj třetí strany, když nyní existuje nativní řešení.
Není to však poprvé, co navrhované změny jádra ohrožují budoucnost ACF. Před několika lety byl sestaven nový tým pro Post Meta. Zpočátku to vypadalo, že to zabije různá řešení vlastních polí třetích stran:
Vznikla řada knihoven/frameworků/pluginů (CMB, SCB, WPAlchemy, ACF, Pods), které tuto roli prozatím plnily. Budeme se na ně dívat jako na duchovní předstupeň nového zásuvného modulu hodného jádra.
V té době jsem psal o tom, že toto rozhodnutí zavést nové konkurenční funkce může způsobit, že některé zásuvné moduly budou zbytečné. Nakonec se projekt Post Meta nikam neposunul, přišel nový editor a ACF bouři přečkalo.
ACF se nejen odrazilo ode dna, ale také se přizpůsobilo. Výsledkem bylo něco, co kombinovalo výkon ACF a flexibilitu vlastních bloků. O tom si povíme dále.
Jak vytvářet bloky pomocí ACF
Je zřejmé, že vlastní bloky mohou být přínosné. Technický proces jejich vytváření je však složitý. Bloky ACF tuto mezeru vyplňují.
Bloky ACF se integrují s vašimi stávajícími vlastními poli, jsou dynamické a přizpůsobitelné a umožňují vám dosáhnout dvou věcí:
- Můžete převzít svá stávající vlastní pole do ekosystému Editoru bloků.
- Můžete vytvářet vlastní inline řešení.
Vytvářejí se pomocí souboru šablony PHP nebo funkce callback – je to tedy stejné jako při vývoji tématu. Zachovávají si také kompatibilitu s jádrem WordPressu, takže prostřednictvím frameworku můžete vytvářet i opakovaně použitelné bloky.
Ačkoli bloky ACF nejsou berličkou, řekl bych, že pokud jsou vaše dovednosti v Reactu zatím jen povrchní, určitě byste je měli prozkoumat hlouběji. Umožní vám využít sílu editoru bloků a zároveň zůstat v rámci známého souboru functions.php.
Stavba bloku ACF
Ukážeme vám, jak blok ACF sestavit. Verze Pro nástroje obsahuje tuto funkci již od verze ACF 5.8, takže je s námi již přibližně dva roky. Zde je superjednoduchý kód pro registraci bloku:
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' ), )); }}Odtud budete chtít vytvořit skupinu polí a vykreslit Blok. V prvním případě to provedete z obrazovky Vlastní pole > Skupiny polí ve WordPressu:
Zde přidejte skupinu polí a vyplňte ji jako obvykle. V meta poli „Umístění“ však budete chtít pomocí pravidla „Blok“ vybrat (v tomto případě) blok Svědectví.
Nakonec budete muset blok vykreslit. Postupuje se stejným způsobem, na jaký jste již možná zvyklí u vlastních polí:
- Vytvořte soubor šablony pro své téma na základě parametru zadaného v nastavení
render_templatepři počáteční registraci Bloku. - 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. Chcete-li začít používat bloky InnerBlocks, zahrňte pole 'jsx' => true do pole supports:
acf_register_block_type( array( 'name' => 'testimonial', 'title' => __( 'Testimonial' ), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'mode' => 'preview', 'supports' => ));V šabloně bloku pak musíte echo vložit značku <InnerBlocks /> HTML:
echo '<div class="block-about__content">'; echo '<InnerBlocks />';Jedná se pouze o jednoduchý příklad, ale s bloky InnerBlocks toho můžete dělat mnohem více.
Alternativy k blokům ACF
Funkce ACF samozřejmě nebude jediným řešením pro vytváření bloků. Jako první vás proto pravděpodobně napadne vytvořit si vlastní sestavu.
V minulosti jsme se zabývali tím, jak vytvořit „vanilkový“ Blok, ale než začnete, budete potřebovat znalost Reactu.
Existují také pluginy pro WordPress, které umožňují sestavit Bloky z různých komponent, ale řekl bych, že nejsou určeny pro vývojáře, ale pro „koncové pleticháře“. Lazy Blocks je pravidelně aktualizován, takže je to dobrá volba, pokud chcete experimentovat s tím, co nabízí.
Budoucnost ACF
Od svého vydání je ACF důležitým doplňkovým pluginem pro WordPress. Rozšiřuje, obohacuje a zvyšuje použitelnost platformy. Myslím, že bych bez něj nemohl vytvářet webové stránky.
Kombinace Editoru bloků a bloků ACF je však třešničkou na dortu – je to vynikající investice do budoucnosti CMS. Pomůže snížit vstupní bariéru pro vývojáře při rozšiřování Editoru bloků, aniž by museli začínat na strmé křivce učení Reactu. Z dlouhodobého hlediska by to ti, kteří tak usilovně prosazují vývoj Editoru bloků, mohli považovat za výhru.