Vlastní vstupní pole v administraci – custom meta boxes

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.

add_meta_box()

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

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

Advanced Custom Fields

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.

CMB2

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

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

test-template.zip

functions-extensions.zip

 

 

WordPress Návod v PDF

LEAVE A REPLY

Please enter your comment!
Please enter your name here