Metaboxy – 2. Díl – Vlastní stránky s metaboxy

11.03.2015 | Tomáš Kocifaj

V minulém díle jsme si ukázali, jak snadno přidat metabox k post typům – ať už nativním v rámci WordPressu nebo k těm, které si sami registrujete a potřebujete rozšířit jejich parametry. Nyní si ukážeme, jak udělat vlastní stránku v administraci WordPressu, umístit do něj potřebné metaboxy pro uložení nastavení.

Jaké komponenty budeme potřebovat?

KT Admin Screen – pro vytvoření vlastní admin stránky s možností metaboxů
KT Form Fieldset – pro definování fieldů v metaboxů
KT Metabox – hlavní komponenta pro práci s metaboxy

Pojďme si nyní ukázat, jak na to. Začneme s tím, že si vytvoříme v administraci WordPressu vlastní stránku.

Definice vlastní admin stránky s metaboxy

K založení takové stránky (jinak také řečeno „screeny“) budeme potřebovat zmiňovanou komponentu KT Admin Screen, která se nám o tuto záležitost automaticky postará.

Definici stránky a její nastavení zapisujeme do:
/yours/requires/admin_screen/kt_fw_{nazev_stranky}_page.inc.php.
Název stránky obecně nahrazujeme slugem nebo obecně známým názvem pro danou stránku.

Vytvořím si teda soubor na uvedeném místě, který pojmenuji: kt_fw_test_page.inc.php (slug test není vhodný, ale pro použití v tutoriálu nám postačí)

<?php

if( ! is_admin()){
    return;
}

$screen = new KT_Custom_Metaboxes_Page(
        "Testovací stránky s metaboxy", // Titulek stránky, který se zobrazí po najetí myší
        "Test page", // Název stránky, který bude zobrazen v administraci webu
        "manage_options", // Capabilities pro danou stránkuy - zde pouze administrátor
        "kt-test-page", // Slug stránky - měl by být definovaný v constantě - pro tutoriál takto
        "dashicons-admin-settings" // Definuji ikonku, která bude zobrazena u odkazu
);

$screen->register(); // Provedeme registraci a ukončení nastavení stránky

<?php

if( ! is_admin()){

return;

}

$screen = new KT_Custom_Metaboxes_Page(

"Testovací stránky s metaboxy", // Titulek stránky, který se zobrazí po najetí myší

"Test page", // Název stránky, který bude zobrazen v administraci webu

"manage_options", // Capabilities pro danou stránkuy - zde pouze administrátor

"kt-test-page", // Slug stránky - měl by být definovaný v constantě - pro tutoriál takto

"dashicons-admin-settings" // Definuji ikonku, která bude zobrazena u odkazu

);

$screen->register(); // Provedeme registraci a ukončení nastavení stránky

Nyní, když soubor uložíte a provedete obnovu administrace WordPressu, uvidíte naší stránku hned nad položkou „vzhled“.

Vytvoření fieldsetu s potřebnými vstupy pro uživatele

Jak jsme již popisovali v minulém díle, pokud potřebujeme získat od uživatele nějaké data / nastavení, je potřeba mu připravit také formulář. To provedeme v souboru s configem a použijeme komponentu KT Form Fieldset.

Soubor s configem umístíme do: /yours/configs/kt_fw_test_page_config.inc.php

class KT_FW_Test_Page_Config {
    
    const SETTING_PREFIX = "kt-test-page-setting-"; // Prefix společný pro všechny uložené data
    
    const CONTACT_FIELDSET = "kt-test-page-setting-contact-fieldset";
    const CONTACT_NAME = "kt-test-page-setting-contact-name";
    const CONTACT_EMAIL = "kt-test-page-setting-contact-email";
    const CONTACT_PHONE = "kt-test-page-setting-contact-phone";
    const CONTACT_ADRESS = "kt-test-page-setting-contact-adress";
    
    public static function getContactFieldset(){
        $fieldset = new KT_Form_Fieldset(
                self::CONTACT_FIELDSET, // ID Našeho fieldsetu (a také metaboxu)
                "Kontaktní údaje", // Titulek fieldsetu (a také metaboxu)
                "Zadejte prosím své kontaktní údaje" // Popisek fieldsetu
        );
        
        $fieldset->addText(self::CONTACT_NAME, "Jméno")
                ->setPlaceholder("Jan Novák")
                ->setToolTip("Zadejte celé jméno a příjmení")
                ->addRule(KT_Field_Validator::REQUIRED, "Jméno musí být vyplněno"); // Přidám pravidlo, kdy jménu musí být vyplněno
        
        $fieldset->addText(self::CONTACT_EMAIL, "Email")
                ->setInputType(KT_Text_Field::INPUT_EMAIL)
                ->setPlaceholder("novak@seznam.cz")
                ->setToolTip("Zadejte platnou emailovou adresu")
                ->addRule(KT_Field_Validator::EMAIL, "Zadejte platnou emailovou adresu"); // Přidám pravidlo, že vstup musí být platná emailová adresa
        
        $fieldset->addText(self::CONTACT_PHONE, "Telefon")
                ->setPlaceholder("606 808 909");
        
        $fieldset->addTextarea(self::CONTACT_ADRESS, "Adresa")
                ->setRows(10);
        
        return $fieldset;
                
    }
}

class KT_FW_Test_Page_Config {

const SETTING_PREFIX = "kt-test-page-setting-"; // Prefix společný pro všechny uložené data

const CONTACT_FIELDSET = "kt-test-page-setting-contact-fieldset";

const CONTACT_NAME = "kt-test-page-setting-contact-name";

const CONTACT_EMAIL = "kt-test-page-setting-contact-email";

const CONTACT_PHONE = "kt-test-page-setting-contact-phone";

const CONTACT_ADRESS = "kt-test-page-setting-contact-adress";

public static function getContactFieldset(){

$fieldset = new KT_Form_Fieldset(

self::CONTACT_FIELDSET, // ID Našeho fieldsetu (a také metaboxu)

"Kontaktní údaje", // Titulek fieldsetu (a také metaboxu)

"Zadejte prosím své kontaktní údaje" // Popisek fieldsetu

);

$fieldset->addText(self::CONTACT_NAME, "Jméno")

->setPlaceholder("Jan Novák")

->setToolTip("Zadejte celé jméno a příjmení")

->addRule(KT_Field_Validator::REQUIRED, "Jméno musí být vyplněno"); // Přidám pravidlo, kdy jménu musí být vyplněno

$fieldset->addText(self::CONTACT_EMAIL, "Email")

->setInputType(KT_Text_Field::INPUT_EMAIL)

->setPlaceholder("novak@seznam.cz")

->setToolTip("Zadejte platnou emailovou adresu")

->addRule(KT_Field_Validator::EMAIL, "Zadejte platnou emailovou adresu"); // Přidám pravidlo, že vstup musí být platná emailová adresa

$fieldset->addText(self::CONTACT_PHONE, "Telefon")

->setPlaceholder("606 808 909");

$fieldset->addTextarea(self::CONTACT_ADRESS, "Adresa")

->setRows(10);

return $fieldset;

}

Nezapomínejte, že třída s configem se musí jmenovat stejně jako daný soubor, aby jí autoloader byl schopen korektně načíst.

Registrace metaboxu pro námi vytvořenou stránku

Nyní, když máme vytvořený fieldset, je potřeba vytvořit poslední část naší skládanky a použít komponentu KT Metabox pro vytvoření metaboxu, který následně umístíme do příslušné složky metabox, kterou jsme si definovali v minulém díle.

if( ! is_admin()){
    return;
}

KT_MetaBox::create(
        KT_FW_Test_Page_Config::getContactFieldset(), // Fieldset, který bude v metaboxu
        KT_Custom_Metaboxes_Page::getCustomMetaboxPageScreenName("kt-test-page"), // Na jaké stránce se má zobrazit - náš slug
        KT_MetaBox_Data_Type_Enum::OPTIONS // Data chceme ukládat a načítat z wp_options
);

if( ! is_admin()){

return;

}

KT_MetaBox::create(

KT_FW_Test_Page_Config::getContactFieldset(), // Fieldset, který bude v metaboxu

KT_Custom_Metaboxes_Page::getCustomMetaboxPageScreenName("kt-test-page"), // Na jaké stránce se má zobrazit - náš slug

KT_MetaBox_Data_Type_Enum::OPTIONS // Data chceme ukládat a načítat z wp_options

);

Když se nyní podíváme na naší stránku a provedeme obnovení, uvidíme náš metabox s fieldsetem, který jsme mu definovali v našem configu. Všechny data budou dostupné pod klíčem (identifikátorem našeho filedu) v tabulce wp_options – budou se také automaticky validovat dle zadaných pravidel.

Registrace metaboxů s tlačítkem pro uložení dat

Když se na to nyní podíváme, říkáte si určitě, jak ale ty data uložím. Nechybí nám tu nějaké tlačítko? Ano, máte pravdu, je potřeba vytvořit metabox, kterým vše uložíme. Nebojte se ale, na všechno myslí framework. Do našeho souboru kt_fw_test_page.inc.php kde definujeme naší stránku přidáme drobný kód, kterým vše řádně „aktivujeme“.

//...

// Horní část necháme jak máme, pouze upravíme část s registrací.

$screen->setRenderSaveButton()->register(); // Přidáme funkce setRenderSaveButton()

// Jako parametr se předává True / False - defaulní je true.
// Tedy chceme metabox s tlačítkem pro uložení.

//...

// Horní část necháme jak máme, pouze upravíme část s registrací.

$screen->setRenderSaveButton()->register(); // Přidáme funkce setRenderSaveButton()

// Jako parametr se předává True / False - defaulní je true.

// Tedy chceme metabox s tlačítkem pro uložení.

Když se podíváme na naší stránku po této úpravě kódu, vidíme, že již máme připravený metabox pro uložení. Nyní stačí jen přidávat metabox za metaboxem a o zbytek se nám stará Framework.

Nezapomeňte, že i v tomto případě se dá využít funkce na komponentně KT_Metabox::createMultiple(); Metaboxů pro nastavení můžete využít libovolně mnoho. Stačí pouze vše správně vydefinovat na configu a předat do příslušné stránky.

Hotovo! Gratulujeme – právě jste vytvořili svou vlastní stránku s nastavením, která se bude dle chovat jako jednotlivé metaboxy.

Získání dat z nastavení

Pro získávání dat byste měli správně využívat komponentu KT WP Option Base Model. Můžete k datům ale přistupovat běžným způsobem pomocí funkcí get_option().

// Správné získávání dat

$optionModel = new KT_WP_Options_Base_Model(KT_FW_Test_Page_Config::SETTING_PREFIX);

$jmeno = $optionModel->getOption(KT_FW_Test_Page_Config::CONTACT_NAME);
$email = $optionModel->getOption(KT_FW_Test_Page_Config::CONTACT_EMAIL);
$telefon = $optionModel->getOption(KT_FW_Test_Page_Config::CONTACT_PHONE);

/atd.

// Ošklivý a neobjektový přístup

$jmeno = get_option(KT_FW_Test_Page_Config::CONTACT_NAME);
$email = get_option(KT_FW_Test_Page_Config::CONTACT_EMAIL);
$telefon = get_otpion(KT_FW_Test_Page_Config::CONTACT_PHONE);

//atd.

// Správné získávání dat

$optionModel = new KT_WP_Options_Base_Model(KT_FW_Test_Page_Config::SETTING_PREFIX);

$jmeno = $optionModel->getOption(KT_FW_Test_Page_Config::CONTACT_NAME);

$email = $optionModel->getOption(KT_FW_Test_Page_Config::CONTACT_EMAIL);

$telefon = $optionModel->getOption(KT_FW_Test_Page_Config::CONTACT_PHONE);

/atd.

// Ošklivý a neobjektový přístup

$jmeno = get_option(KT_FW_Test_Page_Config::CONTACT_NAME);

$email = get_option(KT_FW_Test_Page_Config::CONTACT_EMAIL);

$telefon = get_otpion(KT_FW_Test_Page_Config::CONTACT_PHONE);

//atd.

Tento přístup však nedoporučujeme – je dosti krkolomný a zbytečně provádíte mnoho dotazů do databáze pro získání jednotlivých hodnot.

Předchozí článek « Metaboxy – 1. Díl – Vytvoření / Implementace

Další článek Metaboxy – 3. Díl – Vlastní zpracování metaboxu »

Podobné články

Metaboxy – 4. Díl – CRUD – napojení na vlastní tabulky v DB

Tento díl nám ukáže, jak je možné vytvářet vlastní typy obsahu – mimo databázovou strukturu. Velmi často nastává situace, kdy…

Metaboxy – 3. Díl – Vlastní zpracování metaboxu

V předchozích dílech jsme si ukázali, jak snadno a rychle vytvořit metabox, jak do něj umístit prvky formuláře proto, abychom…

Metaboxy – 1. Díl – Vytvoření / Implementace

Pokud si někdo není jistý, co to metabox je, rádi bychom udělali malou rekapitulaci. Metabox je ve WordPressu blok, který…

O autorovi: Tomáš Kocifaj

Tomáš aktivně v oboru tvorby webových stránek podniká už 6. rok. Za tu dobu nasbíral spoustu zkušeností, dovedností a představu o tom, jak by měla práce takového člověka probíhat. Čím by se neměl zdržovat, zatěžovat a podle toho také s kolegou Martinem začal psát tento projekt.