Advanced Custom Fields – pokročilá správa obsahu webu

WordPress je snadno přizpůsobitelným redakčním systémem, na kterém lze postavit v podstatě jakékoliv webové stránky – od osobního blogu, přes prezentační web společnosti až po e-shop. Ve svém základu však nenabízí v podstatě žádné možnosti, jak plnohodnotně a jednoduše spravovat obsah webu i při použití složitější šablony, kterou máme na míru připravenou.

Ve verzi WordPress 5.0 sice nastala malá revoluce, kdy byl přidán nový editor nazvaný Gutenberg, ale i ten má poměrně omezené možnosti použití a pro složitější weby nedostačuje.

Možnosti pokročilé správy obsahu WordPress šablony

Abychom tedy jednoduše zajistili to, že si uživatel bude moct sám, bez nutnosti zásahu do kódu, spravovat a rozšiřovat i složitěji strukturovaný obsah webu, musíme sáhnout po nějakém rozšíření WordPressu, tedy pluginu.

Použití Page Builderu

Velice populární je použití různých page builderů, kde máte v podstatě neomezené možnosti, jak si poskládat strukturu a vzhled svých stránek, bez jakékoliv zásahu do kódu šablony. Mezi ty nejznámější patří například Elementor, WPBakery nebo Divi. Pro začátečníky a jednoduché webové prezentace může být použití page builderu dostatečné, nicméně pokud chceme připravit kvalitní web, který bude mít kvalitní kód a bude pěkně optimalizován, použití těchto page builderů není pro nás správnou volbou. Výsledný kód webu bývá totiž většinou pěkný balast, za který by se měl každý kvalitní vývojář stydět.

Custom Fields

Další možností, jak spravovat složitěji strukturovaný obsah webu, je přímé použití tzv. custom fields, které jsou součásti samotného WordPressu. Custom field si můžete představit jako políčko, do kterého můžete zadat libovolnou informaci a tu provázat přímo s konkrétním příspěvkem nebo stránkou. Pokud tedy chcete například u svého příspěvku na blogu zobrazovat dobu potřebnou na přečtení článku, tuto informaci v rámci databáze uložíte právě do custom field a odtud ji pak načtete do šablony.

Využít je můžete opravdu na cokoliv. Můžete zde uložit informaci o počtu zobrazení příspěvku, související články apod. Pokud používáme custom post type, například pro produkty, můžeme pomocí custom field uložit informaci o ceně, dostupnosti a vše ostatní, co u produktu potřebujeme zobrazit.

I WooCommerce, který je nejrozšířenějším pluginem pro vlastní e-shop na WordPressu, ukládá všechny informace pomocí custom fields. A v podstatě i výše zmíněné page buildery je na pozadí využívají.

Práce s těmito custom fields není však v čistém WordPressu moc pohodlná a napojit složitější šablonu dá poměrně zabrat. Právě z toho důvodu vznikl plugin Advanced Custom Fields, aby nám práci s nimi co nejvíce usnadnil a umožnil nám napojit na WordPress v podstatě jakoukoliv šablonu bez toho, aniž by nám jakkoliv ovlivňoval samotný kód šablony. Ten zůstane přesně takový, jak ho kodér připravil.

Co je to Advanced Custom Fields

Jak jsem již zmínil, Advanced Custom Fields je plugin, který rozšiřuje funkcionalitu základních custom fields. U vývojářů se těší čím dál větší oblibě, v době psaní tohoto článku má více než 1 000 000 aktivních instalací a hodnocení 4,9 hvězdiček z 5.

Plugin nabízí jednoduché API (funkce), kterým lze do administrace webu snadno přidávat nová pole, do kterých může uživatel zadávat libovolné informace. Tyto informace pak lze velice snadno zobrazit v naší šabloně. Každé vytvořené pole může mít svůj typ, který uživateli ještě více usnadní vyplňování informací. Můžete využít různé typy polí, od klasického textového, přes výběr data až galerii obrázků.

Zadané informace jsou (ve většině případů) v databázi ukládané jako tzv. post meta, které jsou provázené s konkrétním příspěvkem. Díky tomu můžeme velmi jednoduše, v kombinaci s WP Meta Query, načítat na webu příspěvky na základě zvolených parametrů. Také lze takto jednoduše příspěvky řadit, například produkty podle ceny.

Kdy použit Advanced Custom Fields

Po pluginu Advanced Custom Fields sáhneme především v situacích, kdy potřebujeme:

• napojit na administraci vlastní šablonu a klademe důraz na její kvalitu a rychlost načítání
• u příspěvku nebo stránky zobrazit libovolnou informaci, která není součásti samotného obsahu
• zobrazovat určité příspěvky na základě daných parametrů (filtrace)
• vytvořit stránku s obecnou konfigurací webu

Varianty pluginu ACF

Advanced Custom Fields (ACF) můžete stáhnout zdarma z oficiálního WordPress repozitáře s pluginy nebo ho nainstalovat přímo z administrace vašeho webu.

Plugin můžete získat také v placené variantě Advanced Custom Fields PRO, která oproti variantě zdarma nabízí spoustu funkcionalit navíc a rozhodně se každému vývojáři, který se WordPress weby živí, vyplatí do ní investovat. Roční licenci pluginu lze zakoupit na oficiálním webu již od 49$.

Porovnání placené verze ACF PRO s verzí zdarma

Pokud máte jednoduchý web bez nějakých složitých funkcionalit, vystačíte si ve většině případů s verzí nabízenou zdarma. K dispozici máte kromě základních textových polí k dispozici například i typ pole obrázek, soubor, Wysiwyg editor, checkbox, výběr data, výběr barvy a další.

Jestliže implementujete složitější šablonu, doporučuji využít placenou verzi pluginu. Ta oproti verzi zdarma nabízí navíc hlavně:

• Typ pole Repeater – repeater (česky označován jako opakovač) je skupina polí, která se opakují. Pokud tedy chcete například zobrazit výpis hodnocení od vašich zákazníků, můžete použit právě repeater, do kterého umístíte textové pole pro jméno a textarea pole pro text hodnocení. V šabloně pak vše jednoduše pomocí cyklu zobrazíte a nejste nijak omezeni počtem položek.
• ACF bloky – díky této funkci můžete velice snadno vytvářet vlastní bloky přímo do Gutenberg editoru.
• Pole Flexible Content – tento typ pole je velice podobný již zmíněnému repeateru, ale nabízí toho mnohem více. Pomocí flexibilního obsahu můžete jednoduše vytvářet layouty vaší stránky pomocí skládání jednotlivých sekcí. V podstatě tak můžete velice jednoduše vytvořit vlastní page builder.
• Options Pages – pomocí Options Pages můžete v administraci WordPressu vytvořit vlastní stránku s nastavením webu. Můžete zde přidávat nejrůznější globální informace, které se vyskytují napříč celým webem. Například zde můžete vytvořit pole pro logo webu, pro kontaktní informace apod.
• Galerie – pole pro galerii je opravdu velmi užitečným společníkem. Jednoduše můžete na administraci napojit vlastní galerii obrázků a z pohledu uživatele je práce s ní velmi přívětivá.

Všechny výhody a informace o ACF PRO si můžete přečíst na oficiálním webu.

Nejčastěji používané typy polí v ACF

Text

Text field (textové pole) je úplně tím nejzákladnějším polem, do kterého můžete prostě zadat libovolnou textovou informaci. Většinou se jedná o krátké titulky, nadpisy, kontaktní údaje apod.

Z textového pole přímo vychází i další často používané typy, jako například email, číslo nebo url adresa. Ty se liší pouze ve validaci zadaných dat.

Textarea

Textarea field (textová oblast) slouží také pro zadání textových informací, hodí se ale především pro delší a víceřádkové texty.

Wysiwyg editor

Wysiwyg je klasický editor, ve kterém má uživatel možnost psát textový obsah a formátovat ho dle libosti, podobně jako v textovém editoru.

Selectbox

Selectbox field je rozbalovací nabídka, ze které má uživatel možnost vybrat některou z předdefinovaných hodnot.

Post object

Post object field je velmi užitečným polem, díky kterému může uživatel vybrat jeden nebo více příspěvků, které jsou na webu vytvořené. Můžete tak jednoduše vytvořit například box se souvisejícími příspěvky.

Obrázek

Image field můžete využít pro nahrání libovolného obrázku (např. loga, obrázek do slideru apod.) a ten následně zobrazit v šabloně.

Soubor

File field je velmi podobný, jako předchozí pole pro obrázek, s tím rozdílem, že zde máte možnost vybrat jakýkoliv typ souboru, tedy například nahrávat PDF soubory apod.

Galerie

Gallery field se bude hodit v podstatě u každého webu, kde chcete uživateli dát možnost jednoduše vytvářet galerie s obrázky.

Přepínač

True/false, switch neboli přepínač je jakási varianta klasického checkboxu a můžete díky němu například zapínat / vypínat některé funkce šablony.

Repeater

Repeater field (opakovač) je skupina polí, které se dají opakovat. Pokud máte tedy v šabloně několik stejných komponent (např. kontaktní karty) a liší se pouze v obsahu, repeater bude tou správnou volbou.

A mnohem více…

Mezi další skvělé ACF pole patří například link, date picker, color picker, range, tab a další, které určitě stojí za vyzkoušení a můžou vám usnadnit spousty práce a uživatelům zpříjemnit plnění obsahu webu.

Pokud by vám přeci jen nějaké pole chybělo, můžete navštívit databázi rozšíření pro ACF, kde najdete desítky dalších typů polí.

Group – skupina polí

Kromě samotných polí jsou v ACF dalším důležitým prvkem tzv. skupiny polí. Právě do těchto skupin jednotlivá pole zařazujete a držíte je pohromadě. Skupině pak můžete nastavit různá pravidla, kterými určíte, kde se má i se všemi přiřazenými poli zobrazit.

Pravidla umístění ACF group

K dispozici máte možnost nastavit různé typy pravidel umístění vaší skupiny polí. Můžete tak vytvořit skupinu polí, kam umístíte pole pro výběr souvisejících článků a celé skupině nastavit pravidlo, aby se v administraci zobrazovala pouze na editační stránce Příspěvku.

V jiném případě můžete vytvořit skupinu polí, která bude například obsahovat pole pro nastavení údajů o prodávaném produktu (cena, množství skladem apod.) a skupinu zobrazit pouze na editační stránce vašeho Custom Post Type pro produkty.

Přidání vlastního ACF pole do administrace

Než se konečně pustíme do vytváření vlastních ACF polí, je potřeba zmínit, že existují dva způsoby, jak toho docílit.

Použití ACF průvodce v administraci

Pokud máte plugin Advanced Custom Fields aktivní, zobrazí se vám v administračním menu nová položka Vlastní pole a ta má podpoložku Přidat nové. Po přechodu na tuto stránku se vám zobrazí interaktivní průvodce, v rámci kterého může velice snadno vlastní pole vytvářet a nastavovat jim podmínky zobrazení.

Nejprve zadáme název skupiny polí. Tento název se pak zobrazí v editační stránce daného příspěvku, stránky apod.

Níže můžete už přidávat jednotlivá pole, která pak má uživatel možnost vyplňovat. Pro přidání pole je potřeba vyplnit několik základních údajů:

• Štítek pole – vlastní pojmenování pole, tento štítek se zobrazí uživateli v administraci
• Jméno pole – jedná se o jakýsi „klíč“ (post meta key), pod kterým se zadaná hodnota ukládá do databáze a je pak možné pod stejným klíčem hodnotu pole načíst v rámci šablony
• Typ pole – vybrat zde můžete úplně ze všech typů polí, včetně těch, která jste přidali pomocí rozšíření

Každé pole má pak vlastní možnosti nastavení, které můžete zvolit. Například u selectboxu můžete zadat seznam předdefinovaných hodnot pro výběr, u pole pro výběr souboru můžete omezit výběr pouze na určité typy souborů apod.

Jakmile máme vytvořená všechna pole, která ve skupině chceme, zbývá už jen zvolit pravidlo zobrazení, o kterém jsem se zmiňoval výše. Následně skupinu publikujeme a tím by se měla začít zobrazovat v editační stránce příspěvku (případně jinde, kde jsme si zvolili).

Registrace ACF polí pomocí PHP v šabloně

Druhým způsobem registrace polí je využití ACF API přímo v rámci PHP kódu naší šablony, případně pluginu. Tento způsob oproti registraci polí přes administraci webu přináší spoustu výhod.

Osobně preferuji registraci v rámci .php hlavně kvůli tomu, že mám všechna pole pěkně pod kontrolou. V rámci kódu je můžu verzovat v GITu, uživatel nemá možnost je z administrace „rozbít“ smazáním nebo editací, případně zkušenější vývojáři dokáži tak celkově šablonu připravit kvalitněji. A přeci jen, ve většině případů jsou pole závislá na naší šabloně a tak by tam také měla být vytvořena. Výhod je určitě spousta, za zmínku stojí ještě například i lepší optimalizace rychlosti, protože informace o polích se nemusí nejdříve načítat z databáze a teprve potom registrovat v rámci webu.

Export polí do PHP

Pokud s ACF začínáte, určitě doporučuji využít v administraci dostupný nástroj pro export ACF polí do PHP kódu. Najdete ho v menu Vlastní pole > Nástroje. Zde stačí vybrat skupinu polí, kterou jsme si dříve vytvořili pomocí průvodce a potvrdit tlačítkem „Vytvořit PHP„.

Výsledný kód stačí zkopírovat a umístit ho kdekoliv v rámci šablony, nejjednodušeji do souboru functions.php. Skupinu polí poté můžeme z administrace odstranit a pole se budou registrovat přímo z šablony.

Pokročilejší vývojáři, kteří s Advanced Custom Fields pracují pravidelně, už ani nemusí pole přes administraci vytvářet a mohou je psát přímo pomocí PHP kódu v šabloně. Osobně u svých projektů využívám vlastní PHP objekty, které možnosti ACF rozšiřují, usnadňují práci s nimi a vše je mnohem intuitivnější, než použití výchozích PHP funkcí, které plugin nabízí.

Načtení zadané hodnoty pole v šabloně

Když už máme pole vytvořené, budeme určitě chtít v rámci šablony na nějakém místě zobrazit jeho hodnotu. Toho docílíme jednoduše pomocí funkce the_field(), které předáme parametr s klíčem pole, pro které hodnotu požadujeme.

Tímto do elementu h1 zobrazíme hodnotu ACF pole s klíčem „custom_title„.

Pokud nechceme hodnotu pole ihned na webu, ale potřebujeme ji uložit do proměnné, kde s ní budeme dále pracovat, můžeme použit funkci get_field(). Díky tomu můžeme kromě jiného také vytvářet podmínky.

Všimněte si, že funkci get_field() můžeme předat také druhý parametr, kterým je ID příspěvku, pro který chceme hodnotu načíst. Výchozí hodnotou je vždy ID aktuálního příspěvku. Stejný parametr můžeme použit také i pro dříve zmíněnou funkci the_field().

Třetím parametrem obou funkcí je nastavení, zda chceme navrácenou hodnotu formátovat (například formátování hodnoty datepickeru podle nastaveného tvaru při registraci pole). Parametr je nepovinný a výchozí hodnotou je true, tedy formátovat.

Filtrace příspěvků pomocí meta query

Jak jsem již zmínil na začátku tohoto článku, zadané hodnoty polí se ukládají v databázi jako běžné post meta. Díky tomu můžeme jednoduše v rámci WP_Query (případně funkcí get_posts() apod.) za pomocí meta_query filtrovat načtené příspěvky na základě hodnoty ACF pole.

Na příkladu níže načítáme všechny příspěvky, které mají povoleno zobrazení ve slideru příspěvků na hlavní stránce. V administraci tedy můžeme přidat například pole True / false (přepínač) a v rámci WP_Query porovnáváme jeho hodnotu.