Pred pár dňami sme mali v Košiciach ďalšie stretnutie WordPress nadšencov – vývojárov. Stretli sme sa v Halmi caffe, tento krát aj s témou „Custom meta boxes“.
Pozreli sme sa na tri spôsoby vytvorenia vlastných vstupných polí do administrácie WP a počas diskusie doplnili niektorí vlastné skúsenosti, typy a generátory. Začali sme s využitím klasických WordPress funkcií a popisom v dokumentácii, pokračovali sme ukážkami postavenými na pluginoch Advanced Custom Fields a CMB2. Zopár zdrojových kódov na konci článku 😉
Tieto vstupné polia sú využiteľné pre špeciálne hodnoty, ktoré chceme spracovať a zobraziť na stránke, v článku, profile, produkte a pod.
Podľa WordPress dokumentácie
WordPress vo svojom jadre ukrýva skvelé funkcie, ktorými ho môžeme upraviť podľa našich predstáv. Jednou z nich je aj add_meta_box(), ktorou si vytvoríme vlastné vstupné pole.
Podľa zadaných parametrov môžeme určiť v ktorej časti editácie príspevku sa má vstupné pole nachádzať a aj pre ktorý typ príspevku bude používané (článok, stránka, profil..). Funkcia nám však vytvorí len políčko. Ešte je potrebné jeho hodnotu ukladať pri každom uložení príspevku a načítať pri pokuse o úpravu. My sme sa inšpirovali komplexným riešením, ktoré sme našli v komentároch pod dokumentáciou.
Hodnota tohto vstupného poľa je v databáze ukladaná do tabuľky postmeta (prípadne usermeta a pod., podľa typu príspevku) do riadka spolu s ID príspevku a meta kľúčom (slúži na odlíšenie viacerých typov hodnôt pre jeden príspevok).
Pre ďalšie spracovanie alebo priame zobrazenie hodnoty na stránke načítame túto hodnotu z databázy pomocou funkcie get_post_meta().
Konkrétne napríklad takto:
<?php echo get_post_meta( get_the_ID(), '_my_meta_value_key', true ); ?>
Ukážka výsledku na stránke:
S použitím pluginu Advanced Custom Fields
Tento plugin má výhodu v tom, že je možné si vstupné polia doslova naklikať v jeho rozhraní.
Ďalšou výhodou je aj rozsiahla dokumentácia a bez nutnosti zdĺhavého programovania si dokážeme vytvoriť vstupné polia pre galériu, mapu, dátum a čas, a pod.
V databáze to však trochu preháňa. Tým že si v ňom vstupné polia najskôr definujeme, tak nám ich uloží ako príspevky (do tabuľky posts) a následne k nim ukladá hodnoty (napríklad poloha vstupného poľa v editácii) do postsmeta. Pri uložení úprav stránky nám to v databáze pre jedno vstupné pole uložilo ďalšie dva riadky. Pri automatickom uložení revízie, to boli ďalšie dva.
Pre zobrazenie hodnoty následne nevyužívame klasickú WP funkciu (get_post_meta), ale funkciu pluginu, napríklad:
<?php the_field('acf1'); ?>
Podľa dokumentácie môžeme použiť aj shortcode a zobrazovať tak hodnoty aj v texte príspevku.
S použitím pluginu CMB2
Tento plugin už nemá „vyklikávacie“ nastavenia ako sme zvyknutý u iných.
Obsahuje predpripravené triedy a objekty použiteľné pre vytvorenie vlastných vstupných polí, ktoré výrazne zľahčujú písanie kódu. Nájdeme k nemu rozsiahlu dokumentáciu a podobne ako ACF uľahčuje vytvoriť polia pre rôzne typy hodnôt (dátum, čas, farba, a pod.).
Do pozornosti by som dal možnosť pridania ďalšieho textového editora v kombinácii s opakovačom (group), čím si môžeme odlíšiť časti textu na stránke, neskôr meniť ich poradie a podobne. Použiteľné sú aj ďalšie voľne dostupné rozšírenia pre tento plugin.
Do databázy nám hodnoty ukladá s využitím jedného riadka a pre ich spracovanie používa klasickú WP funkciu (príklad):
<?php echo get_post_meta( get_the_ID(), '_yourprefix_text', true ); ?>
Generátory
Toto je zopár generátorov spomenutých na stretnutí. Generujú kód pracujúci so základnými funkciami WP, bez ďalších pluginov.
- WordPress Meta Box Generator v2 Beta
- Hasty generator (coming in july 2017)
- GenerateWP (dostupný v rozšírenej verzii)
Ukážka kódu použitá na meetupe
Balíčky obsahujú:
- plugin, v ktorom sú ukážky klasických WP funkcií a použitie CMB2 (pre správnu funkčnosť potrebuje aktivovaný plugin CMB2)
- plugin stačí aktivovať a nové vstupné polia sa objavia v editácii stránok
- tému „test“, ktorá je odvodenou témou Twentyfifteen (pre správne fungovanie je potrebné mať nainštalovanú tému Twentyfifteen)
- obsahuje šablóny stránok s kódmi pre zobrazenie uložených hodnôt
Úplne super článok – dosť mi pomohol. Tomáš je asi jediný autor, ktorí tu na wp.sk napísal fakt prínosný článok a nie len nejaký obyčajný textík všeobecný. Viac takých článkov ak je to možné 🙂
v starom editore som videl v administračnom paneli vlastné polia a mohol som ich editovat ako ich zobrazim v administrácii gutebnergu?