Před pár dny jsme měli v Košicích další setkání WordPress nadšence – vývojáře. Setkali jsme se v Halmi caffe , tentokrát is tématem „Custom meta boxes“.
Podívali jsme se na tři způsoby vytvoření vlastních vstupních polí do administrace WP a během diskuse doplnili někteří vlastní zkušenosti, typy a generátory. Začali jsme s využitím klasických WordPress funkcí a popisem v dokumentaci, pokračovali jsme ukázkami postavenými na pluginech Advanced Custom Fields a CMB2. Pár zdrojových kódů na konci článku 😉
Tato vstupní pole jsou využitelná pro speciální hodnoty, které chceme zpracovat a zobrazit na stránce, v článku, profilu, produktu a pod.
Podle WordPress dokumentace
WordPress ve svém jádru ukrývá skvělé funkce, kterými jej můžeme upravit podle našich představ. Jednou z nich je i add_meta_box() , kterou si vytvoříme vlastní vstupní pole.
Podle zadaných parametrů můžeme určit ve které části editace příspěvku se má vstupní pole nacházet a také pro který typ příspěvku bude používáno (článek, stránka, profil..). Funkce nám však vytvoří jen políčko. Ještě je třeba jeho hodnotu ukládat při každém uložení příspěvku a načítat při pokusu o úpravu. My jsme se inspirovali komplexním řešením, které jsme našli v komentářích pod dokumentací.
Hodnota tohoto vstupního pole je v databázi ukládána do tabulky postmeta (případně usermeta apod., podle typu příspěvku) do řádku spolu s ID příspěvku a meta klíčem (slouží k odlišení více typů hodnot pro jeden příspěvek).
Pro další zpracování nebo přímé zobrazení hodnoty na stránce načteme tuto hodnotu z databáze pomocí funkce get_post_meta() .
Konkrétně například takto:
<?php echo get_post_meta( get_the_ID(), '_my_meta_value_key', true ); ?>
Ukázka výsledku na stránce:
S použitím pluginu Advanced Custom Fields
Tento plugin má výhodu v tom, že je možné si vstupní pole doslova naklikat v jeho rozhraní.
Další výhodou je také rozsáhlá dokumentace a bez nutnosti zdlouhavého programování si dokážeme vytvořit vstupní pole pro galerii, mapu, datum a čas, a pod.
V databázi to však trochu přehání. Tím že si v něm vstupní pole nejdříve definujeme, tak nám je uloží jako příspěvky (do tabulky posts ) a následně k nim ukládá hodnoty (například poloha vstupního pole v editaci) do postsmeta . Při uložení úprav stránky nám to v databázi pro jedno vstupní pole uložilo další dva řádky. Při automatickém uložení revize, to byly další dva.
Pro zobrazení hodnoty následně nevyužíváme klasickou WP funkci (get_post_meta), ale funkci pluginu, například:
<?php the_field('acf1'); ?>
Podle dokumentace můžeme použít i shortcode a zobrazovat tak hodnoty i v textu příspěvku.
S použitím pluginu CMB2
Tento plugin již nemá „vyklikávací“ nastavení jak jsme zvyklí u jiných.
Obsahuje předpřipravené třídy a objekty použitelné pro vytvoření vlastních vstupních polí, která výrazně zlehčují psaní kódu. Najdeme k němu rozsáhlou dokumentaci a podobně jako ACF usnadňuje vytvořit pole pro různé typy hodnot (datum, čas, barva, apod.).
Do pozornosti bych dal možnost přidání dalšího textového editoru v kombinaci s opakovačem (group), čímž si můžeme odlišit části textu na stránce, později měnit jejich pořadí a podobně. Použitelná jsou i další volně dostupná rozšíření pro tento plugin.
Do databáze nám hodnoty ukládá s využitím jednoho řádku a pro jejich zpracování používá klasickou WP funkci (příklad):
<?php echo get_post_meta( get_the_ID(), '_yourprefix_text', true ); ?>
Generátory
Toto je pár generátorů zmíněných na setkání. Generují kód pracující se základními funkcemi WP, bez dalších pluginů.
- WordPress Meta Box Generator v2 Beta
- Hasty generator (coming in july 2017)
- GenerateWP (dostupný v rozšířené verzi)
Ukázka kódu použitá na meetupu
Balíčky obsahují:
- plugin, ve kterém jsou ukázky klasických WP funkcí a použití CMB2 (pro správnou funkčnost potřebuje aktivovaný plugin CMB2)
- plugin stačí aktivovat a nová vstupní pole se objeví v editaci stránek
- téma „test“, které je odvozeným tématem Twentyfifteen (pro správné fungování je třeba mít nainstalované téma Twentyfifteen )
- obsahuje šablony stránek s kódy pro zobrazení uložených hodnot
Was this article helpful for you? Support me by sharing, please. 👍
