Vlastné vstupné polia v administrácii – custom meta boxes

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.

add_meta_box()

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().

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

Advanced Custom Fields

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

CMB2

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.

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

test-template.zip

functions-extensions.zip

 

 

The following two tabs change content below.

Tomáš Ďurčák

Web dev at AstoundCommerce
Realista, majúci rád turistiku, ktorému gramatika veľa nehovorí.

Pridaj komentár