Zdroj šablony po dokončení pátého dílu

Co bude dnešním úkolem dílu?

1. Definovat vlastní typ obsahu
2. Vytvořit vlastní model pro prezentaci dat
3. Vytvořit presenter pro detail našeho post_type
4. Osadit úvodní stránku výpisem

Definovat vlastní typ obsahu

Protože se celý post_type a všechny věci kolem něj definují pouze pomocí pole, je to tedy velmi snadné a přímočaré. V rámci frameworku není vytvořeno nic speciálního. Bylo by to jako znovu vymýšlet kolo, které má plnit stejnou funkčnost jako to kolo, které známe. Jediné, co bychom měli správně dodržet je umístění souboru s definicí vlastního typu obsahu.

Všechny definice obsahu se ukládají na místo /yours/requires/definitions a bude se jmenovat jako námi potřebný typ obsahu –  v našem případě kt_wpfw_reference_definitions.inc.php

<?php

add_action("init", "kt_fpfw_register_reference_post_type");

function kt_fpfw_register_reference_post_type() {

    $labels = array(
        "name" => __("Reference", KT_DOMAIN),
        "singular_name" => __("Reference", KT_DOMAIN),
        "add_new" => __("Přidat referenci", KT_DOMAIN),
        "add_new_item" => __("Přidat novou referenci", KT_DOMAIN),
        "edit_item" => __("Změnit referenci", KT_DOMAIN),
        "new_item" => __("Nová reference", KT_DOMAIN),
        "view_item" => __("Zobrazit reference", KT_DOMAIN),
        "all_items" => __("Všechny reference", KT_DOMAIN),
        "search_items" => __("Hledat reference", KT_DOMAIN),
        "not_found" => __("Žádné reference nenalezeny", KT_DOMAIN),
        "not_found_in_trash" => __("Žádné reference v koši", KT_DOMAIN),
        "menu_name" => __("Reference", KT_DOMAIN),
    );

    $args = array(
        "labels" => $labels,
        "public" => true,
        "publicly_queryable" => true,
        "show_ui" => true,
        "show_in_menu" => true,
        "capability_type" => "post",
        "query_var" => true,
        "rewrite" => array("slug" => "reference", "with_front" => false),
        "has_archive" => true,
        "hierarchical" => true,
        "menu_position" => 6,
        "menu_icon" => "dashicons-testimonial",
        "supports" => array(
            KT_WP_POST_TYPE_SUPPORT_TITLE_KEY,
            KT_WP_POST_TYPE_SUPPORT_EDITOR_KEY,
            KT_WP_POST_TYPE_SUPPORT_THUMBNAIL_KEY,
            KT_WP_POST_TYPE_SUPPORT_PAGE_ATTRIBUTES_KEY,
        ),
    );

    register_post_type(KT_WPFW_REFERENCE_KEY, $args);
}

V rámci registrace vznikla nová konstanta KT_WPFW_REFERENCE_KEY která bude uložené v souboru kt_init.inc.php pro náš projekt ve složce yours.

K této operaci asi není co psát. Je to běžná operace při zakládání nového typu obsahu. Nyní, když se podíváme do administrace našeho projektu, uvidíme v levém menu novou položku dle našeho pojmenování v proměnné $labels. Jediné, co stojí za pozornost je část v definici $args položka supports – Pro všechny typy post_type supports jsou na straně wpfw vytvořeny potřebné konstanty.

Protože chceme u post_typu využívat support pro práci s náhledovým obrázekm (KT_WP_POST_TYPE_SUPPORT_THUMBNAIL_KEY) je potřeba obrázky povolit v celé šabloně. Do souboru kt_theme_setup.inc.php ve složce yours/requires/common/ přidáme před metodu initialize() následující aktivaci.

// --- SUPPORT ------------------

$config->addThemeSupport(KT_WP_THEME_SUPPORT_POST_THUMBNAILS_KEY);

Vytvořit vlastní model pro prezentaci dat

Pokud máme vlastní typ obsahu, měli bychom myslet také na to, že dříve nebo později budeme potřebovat pracovat s jeho sadou dat, k tomu budeme potřebovat model. Mohli bychom využít obecný a používat přímo ten, ale je lepší mít logiku oddělenou, kdybychom narazili na případné odlišnosti od modelu výchozího. Nyní nás to bude stát trochu práce – přepisovat a upravovat projekt později může být mnohem náročnější proces.

Jako všechny ostatní modely i ten náš bude umístě v /yours/models/ a subour se bude jmenovat dle pravidel – kt_wpfw_reference_model.inc.php

<?php

class KT_WPFW_Reference_Presenter extends KT_WP_Post_Base_Presenter {
    
    /**
     * Konstruktor presenteru volaný při založení objektu
     * 
     * @author Tomáš Kocifaj
     * 
     * @param \WP_Post $item
     */
    public function __construct(KT_WPFW_Reference_Model $model) {
        parent::__construct($model);
    }
    
    // --- gettery ------------------
    
    /**
     * Vrátí model presenteru
     * 
     * @author Tomáš Kocifaj
     * 
     * @return \KT_WPFW_Reference_Model
     */
    public function getModel(){
        return parent::getModel();
    }
}

Pro tuto chvíli je to vše co potřebujeme – definujeme vlastní model, který dědí všechny vlastnosti modelu obecného. Další funkce nepotřebujeme, budeme využívat převážně ty na obecném modelu.

Nyní, když budeme chtít pracovat s konkrétním záznamem v sekci reference, budeme využívat právě tento náš model.

Vytvořit presenter pro detail našeho post_type

Stejně jako bylo potřeba vytvořit model pro daný typ obsahu, bude dobré myslet i na to, že budeme potřebovat časem i detail daného záznamu (nebo jiným způsobem presentovat data). Ten obsluhuje presenter – pojďme ho tedy vytvořit.

<?php

class KT_WPFW_Reference_Presenter extends KT_WP_Post_Base_Presenter {
    
    /**
     * Konstruktor presenteru volaný při založení objektu
     * 
     * @author Tomáš Kocifaj
     * 
     * @param \WP_Post $item
     */
    public function __construct($item = null) {
        parent::__construct(new KT_WPFW_Reference_Model($item));
    }
    
    // --- gettery ------------------
    
    /**
     * Vrátí model presenteru
     * 
     * @author Tomáš Kocifaj
     * 
     * @return \KT_WPFW_Reference_Model
     */
    public function getModel(){
        return parent::getModel();
    }
}

Prozatím nám opět postačí základní presenter, který dědí presenter obecný. Připíšeme navíc pouze jednu funkci a to metodu getModel() která vrátí model objektu rodičovského – důležité ale je, že v rámci komentářů definujeme, jaký typ objektu (modelu) nám funkce vrací. Ulehčí nám to v budoucnu spousty práce.

Nezapomeňte, že MODEL i PRESENTER mají jasné pravidla pro pojmenování souboru a třídy samotné. Bez správného názvosloví nebude framework schopen korektně načítat třídy.

Osadit úvodní stránku výpisem

Pokud již vše máme, zbývá nám model a presenter implementovat do naší úvodní stránky, kde je potřeba vypisovat poslední 4 reference, které jsme na náš web přidaly.

Napřed si musíme vytvořit loop soubor na základě HTML. Do složky /loops/ v rootu šablony vytvoříme nový soubor loop-reference.php. Pokud se podíváme do složky /partials/ najdeme zde soubor recent-works.php je to přesně ten soubor, který bude naše reference vypisovat. Přesně tam najdeme HTLM strukturu každé reference, která se v daném místě vypíše.

Náš soubor loop-reference.php bude vypadat nějak takto:

<?php $referencePresenter = new KT_WPFW_Reference_Presenter($referenceModel = new KT_WPFW_Reference_Model($post)); ?>

<!-- Item Project and Filter Name -->
<li class="col-lg-3 design" data-id="id-0" data-type="web">
    <div class="item-thumbs">
        <!-- Fancybox - Gallery Enabled - Title - Full Image -->
        <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="<?= $referenceModel->getTitle(); ?>" href="<?= $referencePresenter->getThumbnailImagePermalink(KT_WP_IMAGE_SIZE_THUBNAIL); ?>">
            <span class="overlay-img"></span>
            <span class="overlay-img-thumb font-icon-plus"></span>
        </a>
        <!-- Thumb Image and Description -->
        
        <img src="<?= $referencePresenter->getThumbnailImagePermalink(KT_WP_IMAGE_SIZE_THUBNAIL); ?>" alt="<?= $referenceModel->getContent(); ?>">
    </div>
</li>
<!-- End Item Project -->

V rámci definovaného HTML nám stačilo pouze osadit odkazy na náhledový obrázek (prozatím velikost ze strany WordPress – thumbnail) a dodat popisek naší reference. Vše nám snadno, rychle a efektivně dodá model a presenter.

Presenter pro výpis referencí

Stejně jako v předchozí části šablony, i zde si nyní vytvoříme presenter, který nám vypíše potřebné data. Založíme si tedy nyní presneter, který  pojmenujeme kt_wpfw_references_presenter.inc.php a umístíme ho do složky s ostatními presentery. Náš presenter bude dědit základní base. Jeho struktura bude vypadat takto:

<?php

/**
 * Model pro obsluhu, resp. výpis referencí
 *
 * @author Tomáš Kocifaj
 * @link http://www.ktstudio.cz
 */
class KT_WPFW_References_Presenter extends KT_Presenter_Base {

    const DEFAULT_COUNT = 4;

    private $query;

    public function __construct() {
        parent::__construct();
    }

    // --- getry & setry ------------------------------

    /**
     * @return WP_Query
     */
    public function getQuery() {
        if (KT::issetAndNotEmpty($this->query)) {
            return $this->query;
        }
        return $this->initQuery();
    }

    // --- veřejné metody ------------------------------

    /**
     * @return bool
     */
    public function isQuery() {
        $query = $this->getQuery();
        return KT::issetAndNotEmpty($query) && $query->have_posts();
    }

    public function theQuery() {
        if ($this->isQuery()) {
            self::theQueryLoops($this->getQuery(), KT_WPFW_REFERENCE_KEY);
        }
    }

    // --- neveřejné metody ------------------------------

    private function initQuery() {
        return $this->query = new WP_Query(array(
            "post_type" => KT_WPFW_REFERENCE_KEY,
            "post_status" => "publish",
            "posts_per_page" => self::DEFAULT_COUNT,
            "orderby" => "menu_order title",
            "order" => KT_Repository::ORDER_ASC,
        ));
    }

}

Protože náš presenter dědí základní base pro všechny presentery, máme k dispozici několik klíčových metod, které potřebujeme pouze trochu rozšířit.

getQuery()

Tato metoda nám vrátí objekt WP_Query, který obsahuje dotaz a data, která nám byla vrácena. S objektem WP_Query můžeme pak následně dle potřeby pracovat jak jsme z WordPressu naučení.

isQuery()

Metoda nám vrátí true / false pro případ, že byla WP_Query vytvořena a zároveň má nějaké data pro výpis.

theQuery()

Zde už probíhá trochu „magie“. Abychom nemuseli neustále psát běžnou WordPress loopu, framework má připravenou jednoduchou metodu právě na základním presneteru, která je statická a nazývá se theQueryLoops(). Ta na základě vytvořené query v objektu a předaného klíče post_typu provede celou loopu sama a korektně.

Zde si velmi dobře pamatujte, že soubor s loopou (loop-reference.php) musí mít stejný název jako klíč – v našem případně reference. Framework hledá ve složce /loop/ soubor loop-{post_type}.php

initQuery()

Metoda obstarává právě načtení a vytvoření WP_Query objektu dle našich požadavků a příslušné selekce dat. V našem případě jsme tedy definovali, že chceme pouze náš potřebný typ obsahu, výchozí počet a řazení.

Osazení příslušného partial

Nyní nám už zbývá pouze osadit soubor ve složce /partials/ který jsme si pojmenovali jako recent-works.php

<?php $referencesPresenter = new KT_WPFW_References_Presenter(); ?>

<?php if ($referencesPresenter->isQuery()) : ?>

    <!-- Portfolio Projects -->
    <div class="row">
        <div class="col-lg-12">
            <h4 class="heading">Recent Works</h4>
            <div class="row">
                <section id="projects">
                    <ul id="thumbs" class="portfolio">
                        <!-- Item Project and Filter Name -->
                        <?php $referencesPresenter->theQuery(); ?>
                        <!-- End Item Project -->
                    </ul>
                </section>
            </div>
        </div>
    </div>

<?php endif; ?>

Jak vidíte, stačí již pouze zavolat presenter, zjistit, zda má co vypisovat pomocí metody isQuery() a následně použít vytvořenou metodu theQuery() která se postará o výpis.

Závěrem

V dnešním díle jsme si vytvořili potřebný model a presenter pro námi definovaný post_type – ukázali jsme si, jak se pracuje v případě jeho výpisu a co k tomu v rámci frameworku můžeme použít. Stačí si nyní založit několik referencí a hned uvidíme výsledek.

V dalším díle si ukážeme, jak definovat velikost vlastního obrázků, abychom docílili potřebného rozměru a začneme vytvářet detaily pro stránky.

Zdroj šablony po dokončení čtvrtého dílu

Co bude dnešním úkolem dílu?

1. Definovat model s nastavením šablony.
2. Vytvořit presenter úvodní stránky a připravit data pro výpis.
3. Data vypsat na front-endu.

Definice modelu s nastavení šablony

Všechny modely našeho projektu vkládáme do složky models, kterou vytvoříme v naší složce yours. V této složce nyní vytvoříme nový soubor, který pojmenujeme jako kt_theme_settings_model.inc.php

Abych si usnadnili práci, využijeme připravený model pro tyto účely KT_WP_Options_Base_Model a rozšíříme ním model náš. Obecný Base model zajišťuje snadnou práci s daty, které jsou uloženy v tabulce wp_options a to jsou přesně ty, které potřebujeme. Náš model bude vypadata nějak takto:

class KT_Theme_Settings_Model extends KT_WP_Options_Base_Model {
    
    public function __construct() {
        parent::__construct(KT_Theme_Settings_Config::OPTIONS_PREFIX);
    }
    
}

Každý model by měl mít konstruktor, který se volá jako první funkce po inicializaci modelu. V něm pouze budeme volat rodičovský konstruktor našeho obecného modelu a jako parametr předáme prefix z našeho configu. To nám zajistí, aby model pracoval pouze s určitou sadou dat a my jsme tak ušetřili řadu SQL requestů díky čemu ulehčíme serveru a tím i zrychlíme náš projekt.

Funkce pro získávání dat

Nyní bude potřeba do modelu vypsat několik funkcí, které nám budou vracet námi potřebné data. Protože jsme si v našem configu definovali sadu fieldsetů, pojmenujeme názvy funkcí velmi podobně a trochu je „shlukneme“ k sobě. Pokud je to potřeba, měli bychom také myslet na komentáře, abychom věděli, co jaká funkce dělá, až se k ní vrátíme za nějaký čas nebo kdyby někdo z kolegů potřeboval v kódu provést nějaké změny. Náš model by měl vypadat nějak takto.

class KT_Theme_Settings_Model extends KT_WP_Options_Base_Model {
    
    public function __construct() {
        parent::__construct(KT_Theme_Settings_Config::OPTIONS_PREFIX);
    }
    
    // --- Generic settings fieldset ------------------
    
    public function getGenericSettingHpTitle(){
        return $hpTitle = $this->getOption(KT_Theme_Settings_Config::GENERIC_SETTING_HP_TITLE);
    }
    
    // --- Main offers pages fieldset ------------------
    
    /**
     * Na základě zadaného pořadí požadované stránky vrátí příslušné ID stránky.
     * Pokud je index neplatný nebo nezadaný, funkce vrátí null
     * 
     * @author Tomáš Kocifaj <kocifaj@ktstudio.cz>
     * 
     * @param int $pageIndex
     * @return mixed int | null
     */
    public function getMainOfferPageId( $pageIndex = null){
        
        if(KT::notIssetOrEmpty($pageIndex)){
            return null;
        }
            
        switch ($pageIndex) {
            case 1:
                return  $this->getOption(KT_Theme_Settings_Config::MAIN_OFFER_PAGE_ID_1);
                break;
            
            case 2:
                return  $this->getOption(KT_Theme_Settings_Config::MAIN_OFFER_PAGE_ID_2);
                break;
            
            case 3:
                return  $this->getOption(KT_Theme_Settings_Config::MAIN_OFFER_PAGE_ID_3);
                break;
            
            case 4:
                return  $this->getOption(KT_Theme_Settings_Config::MAIN_OFFER_PAGE_ID_4);
                break;
        }
    }
    
    /**
     * Vrátí objekt WP_Post na základě požadovaného indexu stránky z nastavení.
     * Pokud je chybně zadaný index nebo strána neexistuje, vrátí null
     * 
     * @author Tomáš Kocifaj <kocifaj@ktstudio.cz>
     * 
     * @param int $pageIndex
     * @return mixed \WP_Post | null
     */
    public function getMainOfferPage( $pageIndex = null){
        $pageId = $this->getMainOfferPageId($pageIndex);
        if(KT::issetAndNotEmpty($pageId)){
            return $page = get_page($pageId);
        }
        
        return null;
    }
    
}

Jak jste si jistě všimli, do modelu jsem dodal funkce, které nám vrátí nastavení. Protože jsme náš modul rozšířili o obecný model, je v rámci třídy dostupná funkce getOption(), která z připravené sady dat vrátí ten klíč, který po ní chceme – protože jsme si klíč původně zapsali do konstanty, stačí nám zavolat ji. O ostatní se postará model sám.

Více toho prozatím v modelu potřebovat nebudeme. Můžeme se pustit do vytvoření presenteru.

Vytvoření presenteru pro úvodní stránku

Když se podíváme na náš index.php vidíme, že na samotné úvodní stránce toho moc nemáme. Vše je zabalené v potřebných částí (partials) – tato šablona tedy nemá příliš složitý index a určitě by Vás napadlo, že bychom to mohli udělat prostě bez presenteru. To ale nedělejme. Nikdy nevíme, kam se náš projekt vydá, s čím trh nebo klient přijde. Proto už od začátku tvořme vše správně, čistě a objektově, ať se nám projekt snadno rozšiřuje.

1. Index presenter bude obsluhovat jenom titulek.
2. Budeme potřebovat presenter pro úvodní slider (ten nyní vynecháme pro složitost – ukážeme si v dalších dílech).
3. Budeme potřebovat presenter pro hlavní nabídku služeb.
4. Budeme potřebovat presenter pro výpis našich prací.

Nyní je potřeba se zamyslet nad tím, že v každém z výše popisovaném presenteru, budeme potřebovat náš model šablony – mu v sobě data, který budeme potřebovat. Abychom šetřili výkon naší aplikace, nebudeme ho vždy volat, ale napíšeme si jednoduchou třídu, kam postupně budeme přidávat další metody.

Obecná třída KT_WPFW

Třídu v rámci projektu pojmenujeme vždy s prefixem KT a následně názvem (zkratkou) Vašeho projektu. Je na Vás, jak název zvolíte, ale my to děláme právě takto.

Tato třída bude umístěna ve složce yours/classes a soubor pojmenujeme kt_wpfw.inc.php

Obsah naší třídy bude vypadat nějak takto:

class KT_WPFW {
    
    private static $themeSettingsModel = null;
    
    /**
     * Vrátí theme model setting s potřebným nastavením šablony
     * 
     * @author Tomáš Kocifaj <kocifaj@ktstudio.cz>
     * 
     * @return \KT_Theme_Settings_Model
     */
    public static function getThemeSettingsModel(){
        if(KT::notIssetOrEmpty(self::$themeSettingsModel)){
            self::$themeSettingsModel = new KT_Theme_Settings_Model();
        }
        return self::$themeSettingsModel;
    }
    
}

Co díky této funkci získáme? Protože Theme Settings Model budeme potřebovat na více místech, při prvním zavolání si ho uložíme do statické proměnné. Vždy, když ho budeme potřebovat (včetně dat z DB) se nám vrátí právě z této proměnné. Nebude nutné volat dotazy do DB znovu a znovu.

Index presenter

Všechny presentery ukládáme do yours/presenters/

class KT_WPFW_Index_Presenter extends KT_Presenter_Base {
    
    public function __construct() {
        parent::__construct(KT_WPFW::getThemeSettingsModel());
    }
    
    // --- gettery a settery ------------------
    
    /**
     * @return \KT_Theme_Settings_Model
     */
    public function getModel(){
        return parent::getModel();
    }
    
    // --- obecné funkce ------------------
    
    public function renderWebsiteTitle(){
        echo $this->getModel()->getGenericSettingHpTitle();
    }
    
}

Náš presenter hned aplikujeme na náš index.php

<?php $indexPresenter = new KT_WPFW_Index_Presenter(); ?>
<?php get_header(); ?>
<?php get_template_part("partials/index-slider"); ?>

<section class="callaction">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="big-cta">
                    <div class="cta-text">
                        <h2><?php $indexPresenter->renderWebsiteTitle(); ?></h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="content">
    <div class="container">
        <?php get_template_part("partials/main-offer-list"); ?>
        <?php get_template_part("partials/recent-works"); ?>
    </div>
</section>

<?php get_footer(); ?>

Presenter pro hlavní nabídku

Hlavní nabídka je trochu komplikovanější, ale zároveň velmi jednoduchá. Jedná se o nějaký výpis stránek, kde se nám mění data uložená v databázi u každé stránky. Jediná věc, která je jinak, je ikonka.

Pro snadnější pochopení tutoriálu jsem zvolil jednoduchou formu výpisu, kdy ikonky necháme statické dle grafického návrhu.

<?php

class KT_WPFW_Main_Offer_Presenter extends KT_Presenter_Base {
    
    public function __construct() {
        parent::__construct(KT_WPFW::getThemeSettingsModel());
    }
    
    // --- gettery a settery ------------------
    
    /**
     * @return \KT_Theme_Settings_Model
     */
    public function getModel(){
        return parent::getModel();
    }
    
    // --- obecné funkce ------------------
    
   public function renderMainOfferPagesList(){
       
       // Napřed si vytovřím seznam všech ikonek tak jak jdou zasebou.
       // jedná se o CSS třídy, který ikonky vyzobrazí
       $pagesIcons = array(
           "fa-desktop",
           "fa-pagelines",
           "fa-edit",
           "fa-code"
       );
       
       foreach($pagesIcons as $index => $icon){
           
           // Pří každé iteraci si zavoláme stránku, kterou si uživatel pro danou
           // pozici vybral.

           $offerPage = $this->getModel()->getMainOfferPage($index);

           // Pokud stránka není nastaven, pokračujeme v iteraci dál.
           if(KT::notIssetOrEmpty($offerPage)){
               continue;
           }
           
           // Vytvoříme si základní model příspěvku / stránky, abychom měli
           // dostupné jeho funkce v naší loopě.
           $pageModel = new KT_WP_Post_Base_Model($offerPage);
           
           // Při každé iteraci zavolám PHP soubor, který je umístěn ve složce loops
           // v rootu naší šablony a náš soubor se jmenuje loop-main-offer-page.php.
           
           include(locate_template("loops/loop-main-offer-page.php"));
       }
   }
}

Náš soubor loop-main-offer-page.php bude vypadat nyní takto:

<div class="col-lg-3">
    <div class="box">
        <div class="box-gray aligncenter">
            <h4><?php echo $pageModel->getTitle(); ?></h4>
            <div class="icon">
                <i class="fa <?php echo $icon; ?> fa-3x"></i>
            </div>
            <?php echo $pageModel->getExcerpt(); ?>
        </div>
        <div class="box-bottom">
            <a href="<?php echo $pageModel->getPermalink(); ?>">Learn more</a>
        </div>
    </div>
</div>

Nyní nám už postačí osadit pouze příslušný soubor ve složce partials, který jsme si nazvali jako main-offer-list.php

<?php $mainOfferPresenter = new KT_WPFW_Main_Offer_Presenter(); ?>
<div class="row">
    <div class="col-lg-12">
        <div class="row">
          <?php $mainOfferPresenter->renderMainOfferPagesList(); ?>  
        </div>
    </div>
</div>
<!-- divider -->
<div class="row">
    <div class="col-lg-12">
        <div class="solidline">
        </div>
    </div>
</div>
<!-- end divider -->

Nyní, když si nastavíme stránky v našem nastavíme a obnovíme úvodní stránku, vše uvidíme tak, jak jsme si potřebný obsah nastavili.

Presenter – naše práce

Nyní nás čeká podobné osazení části s naší prací. To si ukážeme ale v dalším díle, protože na tuto část si budeme zakládat vlastní post type, kde bude potřeba vytvořit config, model a presenter samotný. Následně tyto data vypíšeme do této části. Ale to až příště.

Závěrem

Dnes jsme si ukázali, jak snadno pracovat s daty, které si ukládáme do tabulky wp_options. Pokud chcete pracovat s framework opravdu efektivně i do budoucna, logika presenterů a modelů by Vám neměla být cizí a měli byste jí velmi dobře ovládat. Pokud budete používat výchozí modely, zjistíte, že je to velmi snadné.

V příštím díle se pustíme do definice vlastního typu obsahu, kde budeme využívat hlavně KT WP Post Base Model. Provedeme si také nějaké nastaví sloupců v administraci pomocí KT Admin Columns. Následně do naší úvodní stránky přidámé jednotlivé záznamy.

V minulém díle jsme si do naší šablony zatím nepřesunuli obrázky. To uděláme nyní – složku img překopírujeme do naší šablony a přejmenujeme jí na images.

Zdroj šablony po dokončení třetího dílu

Co nás bude při osazení úvodní stránky čekat?

1. Hlavní navigace – využijeme WP Menu
2. Slider – To je trochu složitější část a ukážeme si ho až v příštích dílech.
3. Hlavní nadpis šablony
4. Čtyři sekce s hlavní nabídkou služeb
5. Část s prezentací naší práce – na to využijeme Custom Post Type
6. Patička – tam nás čekají kontaktní údaje, navigace, poslední příspěvky a flicker, který už vesměs funguje.

Pojďme si nyní ujasnit, co budeme všechno potřebovat ze strany WordPressu. Vždy je potřeba začít u administrace WordPressu, abychom měli pro všechen obsah připravené potřebné funkce.

• Založit (registrovat) dvě WordPress lokace pro vlastní menu (hlavička a patička).
• Definovat vlastní Custom Post Type
• Provést některé nastavení, které budeme ukládat do WP_Options a následně vypisovat.

Registrace WP Menu

Proto, aby si mohl uživatel (nebo vy) upravovat menu běžným způsobem, které WordPress nabízí, je potřeba WordPressu říct, že tuto funkci budeme využívat. Otevřeme si náš soubor s nastavením šablony kt_theme_setup.inc.php, který jsme si v minulém díle vytvořili a dodali do něj potřebný kód, který nám načetl externí zdroje. Proto, abychom provedli registraci lokace menu, budeme potřebovat nějaký název, pomocí kterého ho identifikujeme. Protože název budeme používat více než jednou, definujeme si ho jako konstantu v souboru kt_init.inc.php v naší složce yours. Tam všechny tyto constanty patří.

Náš soubor kt_init.inc.php by měl vypadat tedy takto:

define("KT_WPFW_MAIN_MENU_KEY", "kt-wpfw-main-menu");
define("KT_WPFW_FOOTER_MENU_KEY", "kt-wpfw-footer-menu");

kt_initialize_module("WPFW");

Protože vím, že budu jednu lokaci potřebovat i v patičce, založil jsem si konstantu i pro něj.

Nyní provedeme zápis do soubor kt_theme_setup.inc.php:

// Předchozí kód necháme bez editace. Do souboru pouze přidáme následující kód.


// --- WP MENU ------------------

$config->addWpMenu(KT_WPFW_MAIN_MENU_KEY, __("Hlavní navigace", KT_DOMAIN))
        ->addWpMenu(KT_WPFW_FOOTER_MENU_KEY, __("Navigace v patičce", KT_DOMAIN));


// tento zápis bude v souboru pouze jednou. Opakuji ho pouze pro ukázku toho
// že veškeré nastavení musí být před funkcí initiliazce();

$config->initialize();

Pokud si nyní otevřete WP Administraci a podíváte se do sekce Vzhled – bude tam nová položka Menu. Vstupte do ní a vytvořte Vaše první menu a napojte ho na jednu z Vašich lokací. Já jsem zvolil hned první z nich. Nyní můžete vytvořit menu, vložit do něj položky a menu uložit – pro ukázku stačí přidat například zkušební stránku, kterou nám WordPress nabízí. Nyní bude potřeba doplnit výpis menu do front-end části.

Doplnění menu do header.php a footer.php

K tomu, abychom menu efektivně vypsali, použijeme funkci dostupnout na statické třídě KT, která je k snadnému účelu určena. Otevřeme si header.php a provedeme náhradu statického HTML za naší PHP funkci.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Moderna - Bootstrap 3 flat corporate template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="" />
        <meta name="author" content="http://bootstraptaste.com" />

        <?php wp_head(); ?>

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
              <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->

    </head>
    <body>
        <div id="wrapper">
            <!-- start header -->
            <header>
                <div class="navbar navbar-default navbar-static-top">
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="<?php echo home_url("/"); ?>"><span>M</span>oderna</a>
                        </div>
                        <div class="navbar-collapse collapse ">
                            <ul class="nav navbar-nav">
                                <?php KT::theWpNavMenu(KT_WPFW_MAIN_MENU_KEY, 2); ?>
                            </ul>
                        </div>
                    </div>
                </div>
            </header>

Naše hlavička bude vypadat nyní takto. Navíc jsem doplnil funkci home_url(„/“) do odkazu loga tak, aby logo vedlo vždy na úvodní stránku. Následně funkci KT::theWpNavMenu(); Funkce má dva parametry:

1. Název (identifikátor lokace) – zde použijeme právě naší konstantu.
2. Do jaké úrovně se má menu vypisovat. Naše 2 říká, že menu může mít dvě úrovně.

V patičce provedeme to samé:

<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <div class="widget">
                    <?php // Pro přehlednost jsem zde schoval kus kódu, který u Vás zůstane stejný ?>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="widget">
                    <h5 class="widgetheading">Pages</h5>
                    <ul class="link-list">
                        <?php KT::theWpNavMenu(KT_WPFW_FOOTER_MENU_KEY, 1); ?>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="widget">
                   <?php // Pro přehlednost jsem zde schoval kus kódu, který u Vás zůstane stejný ?>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="widget">
                    <?php // Pro přehlednost jsem zde schoval kus kódu, který u Vás zůstane stejný ?>
                </div>
            </div>
        </div>
    </div>
    <div id="sub-footer">
        <div class="container">
            <div class="row">
                <?php // Pro přehlednost jsem zde schoval kus kódu, který u Vás zůstane stejný ?>
            </div>
        </div>
    </div>
</footer>
</div>
<a href="#" class="scrollup"><i class="fa fa-angle-up active"></i></a>
<?php wp_footer(); ?>
</body>
</html>

Pokud jste vše udělali správně a vytvořili jste si zkušební menu ve WordPress administraci, připojili jste ho k jedné z lokací, nyní, když obnovíte stránku, uvidíte vypsané stránky a odkazy na ně.

Slider

Slider je složitější věc a na začátku se s ní nebude zaobírat. V dalších dílech se však k němu dostaneme a ukážeme si, jak na to. Nyní, aby nám ve slideru běhali obrázky, provedeme pouze drobnou korekci kódu. Otevřeme si tedy náš soubor se slidereme, který máme uložený ve složce partials a jmenuje se index-slider.php.

Pro správný odkaz na obrázek využijeme funkci KT::imageGetUrlFromTheme(), která nám vrátí vždy cestu do složky images v naší šabloně. Tuto funkci použijeme na každý obrázek, tedy tag img a jeho parametr src. Tím docílíme toho, aby HTML odkazovalo na správnou cestu k obrázkům. Prozatím slider opustíme.

<section id="featured">
    <!-- start slider -->
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <!-- Slider -->
                <div id="main-slider" class="flexslider">
                    <ul class="slides">
                        <li>
                            <img src="<?php echo KT::imageGetUrlFromTheme("slides/1.jpg"); ?>" alt="" />
                            <div class="flex-caption">
                                <h3>Modern Design</h3> 
                                <p>Duis fermentum auctor ligula ac malesuada. Mauris et metus odio, in pulvinar urna</p> 
                                <a href="#" class="btn btn-theme">Learn More</a>
                            </div>
                        </li>
                        <li>
                            <img src="<?php echo KT::imageGetUrlFromTheme("slides/2.jpg"); ?>" alt="" />
                            <div class="flex-caption">
                                <h3>Fully Responsive</h3> 
                                <p>Sodales neque vitae justo sollicitudin aliquet sit amet diam curabitur sed fermentum.</p> 
                                <a href="#" class="btn btn-theme">Learn More</a>
                            </div>
                        </li>
                        <li>
                            <img src="<?php echo KT::imageGetUrlFromTheme("slides/3.jpg"); ?>" alt="" />
                            <div class="flex-caption">
                                <h3>Clean & Fast</h3> 
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit donec mer lacinia.</p> 
                                <a href="#" class="btn btn-theme">Learn More</a>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- end slider -->
            </div>
        </div>
    </div>	
</section>

Specifikace úvodní stránky a nastavení WP Options

Zde jsem připravil jednoduchý náčrt toho, co budeme a jak osazovat:

U části s hlavní nabídkou je možné zvolit spoustu cest, jak daného výsledku dosáhnout. Zvolím ten velmi jednoduchý způsob, který není ideálním a kdybych to psal sám, udělal bych to trochu jinak. Pro ukázku tutoriálu ale spíše volím tu jednoduší, přehlednější ale ne nejideálnější cestu.

1. Vytvořím nastavení pro WP_Options, kde nechám uživatele vybrat 4 stránky.
2. Tyto stránky si následně vyčtu z databáze.
3. Jejich název bude titulek „boxu“.
4. Ikonky nechám pevné tak, jak je v designu.
5. Krátký popisek využiji funkci perexu (stručný výpis příspěvku stránky).
6. Odkaz povede vždy do detailu stránky.

Vytvoření prvního nastavení

Pokud pracujete s frameworkem, budeme potřebovat config, kde definujeme formuláře pro nastavení, následně model, kde si data připravíme a poté presenter, který nám je na úvodní stránku zhotoví.

Config – nastavení šablony

V první řadě budeme potřebovat soubor, kde naše nastavení definujeme. Vytvoříme novou složku configs v naší složce yours kam budeme soubory tohoto typu umisťovat. Soubor nazveme kt_theme_settings_config.inc.php a bude vypadat takto:

<?php

class KT_Theme_Settings_Config {
    
    const OPTIONS_PREFIX = "kt-wpfw-theme-setting-";
    
    public static function getAllGenericFieldsets(){
        return array(
            self::GENERIC_SETTING_FIELDSET => self::getGenericSettingFieldset(),
            self::MAIN_OFFER_FIELDSET => self::getMainOfferFieldset()
        );
    }
    
    const GENERIC_SETTING_FIELDSET = "kt-wpfw-theme-generic-setting-fieldset";
    const GENERIC_SETTING_HP_TITLE = "kt-wpfw-theme-setting-hp-title";
    
    public static function getGenericSettingFieldset(){
        $fieldset = new KT_Form_Fieldset(self::GENERIC_SETTING_FIELDSET, __("Obecné nastavení šablony", KT_DOMAIN));
        $fieldset->setPostPrefix(self::GENERIC_SETTING_FIELDSET);
        
        $fieldset->addText(self::GENERIC_SETTING_HP_TITLE, __("Titulek úvodní stránky", KT_DOMAIN));
        
        return $fieldset;
    }
    
    const MAIN_OFFER_FIELDSET = "kt-wpfw-main-offer-fieldset";
    const MAIN_OFFER_PAGE_ID_1 = "kt-wpfw-theme-setting-offer-page-id-1";
    const MAIN_OFFER_PAGE_ID_2 = "kt-wpfw-theme-setting-offer-page-id-2";
    const MAIN_OFFER_PAGE_ID_3 = "kt-wpfw-theme-setting-offer-page-id-3";
    const MAIN_OFFER_PAGE_ID_4 = "kt-wpfw-theme-setting-offer-page-id-4";
    
    public static function getMainOfferFieldset(){
        $fieldset = new KT_Form_Fieldset(self::MAIN_OFFER_FIELDSET, __("Nabídka služeb na HP", KT_DOMAIN));
        $fieldset->setPostPrefix(self::MAIN_OFFER_FIELDSET);
        
        $fieldset->addWpPage(self::MAIN_OFFER_PAGE_ID_1, __("1. box", KT_DOMAIN));
        $fieldset->addWpPage(self::MAIN_OFFER_PAGE_ID_2, __("2. box", KT_DOMAIN));
        $fieldset->addWpPage(self::MAIN_OFFER_PAGE_ID_3, __("3. box", KT_DOMAIN));
        $fieldset->addWpPage(self::MAIN_OFFER_PAGE_ID_4, __("4. box", KT_DOMAIN));
        
        return $fieldset;
    }
    
}

V rámci configu jsme využili komponentu KT Forms a její část KT Form Fieldset. Pomocí ní jsme si snadno definovali nastavení, které chceme, aby WordPress nabízel uživateli. Vydefinování samotných formulářů nám ale úplně stačit nebude. Budeme potřebovat ještě vytvořit stránku s nastavením a formuláře tam zobrazit.

Stránka s nastavením v administraci WordPressu

Protože nastavení šablony provádíme prakticky na každém projektu, je připravena již založená stránka, kterou je potřeba pouze aktivovat. To provedeme v našem configurátoru v souboru kt_theme_setup.inc.php. Přidáme tedy další kus kódu:

// Předchozí kód necháme bez editace. Do souboru pouze přidáme následující kód.

// --- THEME SETTING PAGE ------------------

$config->setThemeSettingPage();

$config->initialize(); // Opět pouze pro ukázku - v souboru pouze jednou

Pokud jste všechno správně udělali a podíváte se v administraci do sekce Vzhled, uvidíte novou stránku nastavení šablony. Stránka je zatím bez obsahu, pouze s tlačítkem pro uložení.

Nyní už potřebujeme Frameworku pouze říct, že do této stránky chceme vykreslit naše připravené formuláře. V rámci WordPressu i frameworku probíhá většina věci na úrovni Metaboxů a přesně ty využijeme.

Vykreslení metaboxů do naší stránky

Pro tento účel využijeme komponentu KT Metabox, která je pro tyto dílčí činnosti přesně navržena. V našem adresáři /yours/requires/ si vytvoříme novou složku, kterou pojmenujeme metaboxes a do ní následně založíme soubor, který nazveme kt_theme_settings_metabox.inc.php. Soubor bude mít tento obsah:

<?php

if( ! is_admin()){
    return;
}

KT_MetaBox::createMultiple(
        KT_Theme_Settings_Config::getAllGenericFieldsets(), // Kolekce všech fieldsetů
        KT_WP_Configurator::getThemeSettingSlug(), // Název naší stránky
        KT_MetaBox_Data_Type_Enum::OPTIONS // Typ uložení - tedy WP_Options
);

A je hotovo! O nic víc se starat nemusíme. Framework nám bude data sám ukládat, editovat nebo případně mazat. Když si nyní obnovíme naší stránku s nastavením, uvidíme již připravené formuláře, které jsme si vydefinovali v našem configu.

Závěrem

Dnešní díl ukončím trochu v „polovině“. Myslím, že je toho už dnes dost a bude dobré díl rozdělit spíše na dva. V příštím díle si ukážeme definici modelu, presenteru a vykreslení potřebných dat na samotný front-end. V příštím díle určitě využijeme obecný model pro nastavení KT_WP_Options_Base_Model, který použijeme jako základ pro náš model šablony.

Zdroj šablony po dokončení druhého dílu

HTML a CSS šablona

Každý máme nějaký postup, jak stránky nebo šablonu vytvářet. My si vždy připravíme čistou HTML a CSS šablonu, se všemi podstránkami, včetně javascriptu, fontů a jiných utilit, které naše stránky budou potřebovat. Finální HTML pak následně převedeme do WordPress šablony.

Pro ukázku nám však postačí již nějaká vytvořená HTML šablona, kterých je na internetu spoustu. Já jsem například zvolil tento Bootstrap template, který nám pomůže demonstrovat velkou škálu funkcí. Šablonu jsem stáhl, nahrál ji do svého projektu v NetBeans. Pokud to děláte jako já, mělo by to vypadat nějak takto:

Začneme si tím, že si zhotovíme úvodní stránku – tedy oživíme soubor index.php. V první řadě si budeme muset ujasnit několik věcí, které budou potřeba zařídit, aby naše stránky korektně pracovali.

1. Vytvoření hlavičky a patičky, kterou následně budeme všude používat.
2. Načtení externích zdrojů – JS a CSS soubory.
3. Rozdělení bloků úvodní stránky do přehlednější struktury.

Vytvoření hlavičky a patičky

Nyní vytvoříme základní kostru – bude se jednat o soubory header,php, index.php (ten již máme vytvořený, ale je zatím prázdný) a footer.php. Otevřeme si náš soubor index.html a postupně z něj vykopíruje určité části. Zbytek kódu nakopírujeme do index.php.

Hlavička (header.php)

V tomto souboru budou zapsané všechny informace a data, které se budou zobrazovat na každé podstránce. Především půjde o informace v tagu <head> a již část samotné stránky. Náš soubor header.php by měl tedy vypadat takto:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Moderna - Bootstrap 3 flat corporate template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="http://bootstraptaste.com" />
<!-- css -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/fancybox/jquery.fancybox.css" rel="stylesheet">
<link href="css/jcarousel.css" rel="stylesheet" />
<link href="css/flexslider.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />


<!-- Theme skin -->
<link href="skins/default.css" rel="stylesheet" />

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>
<body>
<div id="wrapper">
	<!-- start header -->
	<header>
        <div class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html"><span>M</span>oderna</a>
                </div>
                <div class="navbar-collapse collapse ">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">Features <b class=" icon-angle-down"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="typography.html">Typography</a></li>
                                <li><a href="components.html">Components</a></li>
								<li><a href="pricingbox.html">Pricing box</a></li>
                            </ul>
                        </li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
	</header>
	<!-- end header -->

Patička (footer.php)

Stejně jako hlavička, i patička budou obsahovat tu část webových stránek, kterou je potřeba opakovat na každé podstránce. V našem případě tedy samotná vzhledová patička a načtení externích zdrojů v podobě javascriptů. Soubor s patičkou bude vypadat nějak takto:

<footer>
	<div class="container">
		<div class="row">
			<div class="col-lg-3">
				<div class="widget">
					<h5 class="widgetheading">Get in touch with us</h5>
					<address>
					<strong>Moderna company Inc</strong><br>
					 Modernbuilding suite V124, AB 01<br>
					 Someplace 16425 Earth </address>
					<p>
						<i class="icon-phone"></i> (123) 456-7890 - (123) 555-7891 <br>
						<i class="icon-envelope-alt"></i> email@domainname.com
					</p>
				</div>
			</div>
			<div class="col-lg-3">
				<div class="widget">
					<h5 class="widgetheading">Pages</h5>
					<ul class="link-list">
						<li><a href="#">Press release</a></li>
						<li><a href="#">Terms and conditions</a></li>
						<li><a href="#">Privacy policy</a></li>
						<li><a href="#">Career center</a></li>
						<li><a href="#">Contact us</a></li>
					</ul>
				</div>
			</div>
			<div class="col-lg-3">
				<div class="widget">
					<h5 class="widgetheading">Latest posts</h5>
					<ul class="link-list">
						<li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
						<li><a href="#">Pellentesque et pulvinar enim. Quisque at tempor ligula</a></li>
						<li><a href="#">Natus error sit voluptatem accusantium doloremque</a></li>
					</ul>
				</div>
			</div>
			<div class="col-lg-3">
				<div class="widget">
					<h5 class="widgetheading">Flickr photostream</h5>
					<div class="flickr_badge">
						<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&amp;display=random&amp;size=s&amp;layout=x&amp;source=user&amp;user=34178660@N03"></script>
					</div>
					<div class="clear">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="sub-footer">
		<div class="container">
			<div class="row">
				<div class="col-lg-6">
					<div class="copyright">
						<p>
							<span>&copy; Moderna 2014 All right reserved. By </span><a href="http://bootstraptaste.com" target="_blank">Bootstraptaste</a>
						</p>
					</div>
				</div>
				<div class="col-lg-6">
					<ul class="social-network">
						<li><a href="#" data-placement="top" title="Facebook"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#" data-placement="top" title="Twitter"><i class="fa fa-twitter"></i></a></li>
						<li><a href="#" data-placement="top" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
						<li><a href="#" data-placement="top" title="Pinterest"><i class="fa fa-pinterest"></i></a></li>
						<li><a href="#" data-placement="top" title="Google plus"><i class="fa fa-google-plus"></i></a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	</footer>
</div>
<a href="#" class="scrollup"><i class="fa fa-angle-up active"></i></a>
<!-- javascript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/google-code-prettify/prettify.js"></script>
<script src="js/portfolio/jquery.quicksand.js"></script>
<script src="js/portfolio/setting.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/animate.js"></script>
<script src="js/custom.js"></script>
</body>
</html>

Načtení externích zdrojů do šablony

Pokud se podíváme do HTML šablony do hlavičky uvidíme, jaké zdroje jsou v rámci šablony vyžadovány. V hlavičce vidíme, že šablona načítá celkem 5 CSS souborů. Neměli bychom zapomenou, že javascript by měl být načítán vždy na konci HTML dokumentu. Pokud tedy sjedeme v editoru více dolů, zjistíme, že šablona načítá také několik JS souborů a to celkem 11. Na všechny tyto zdroje nesmíme při vytváření zapomenout.

K tomu, aby nám vše korektně fungovalo budeme muset ještě doplnit některé důležité PHP funkce do header.php a footer.php

Upravená header.php bude vypadat nyní takto

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Moderna - Bootstrap 3 flat corporate template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="http://bootstraptaste.com" />

<?php wp_head(); ?>

<!-- Zbytek hlavičky ponecháme beze změny -->

Upravená footer.php bude vypadat nyní takto

<!-- Předchozí obsah patičky ponecháme opět stejný -->

	</footer>
</div>
<a href="#" class="scrollup"><i class="fa fa-angle-up active"></i></a>
<?php wp_footer(); ?>
</body>
</html>

Využití komponenty KT Theme Config pro načtení zdrojů

K těmto účelům je připravená komponenta KT Theme Config, která nám pomůže s mnohým nastavení a budeme jí dále ještě velmi aktivně využívat.

Nyní ve složce yours založíme novou složku, kterou pojmenujeme requires a do ní vložíme složku common. Do té poté založíme php soubor, který pojmenujeme kt_theme_setup.inc.php.

Také bude potřeba přesunout všechny naše CSS soubory do složky css, kterou vytvoříme ve složce yours. Naše struktura šablony by měla vypadat nyní takto:

Nezapomeňte, že stejně jako CSS je potřeba dodat i ostatní zdroje – tedy složku JS a v našem případě šablony i FONTS. Stejně jako složku CSS tak vytvoříme složky ostatní a přesuneme do nich potřebné zdroje.

No nově založeného souboru kt_theme_setup.inc.php přidáme sadu kódů. Náš soubor by měl nyní obsahovat tyto informace.

<?php

$config = new KT_WP_Configurator();

// --- CSS Styly ------------------

$config->assetsConfigurator()
        ->addStyle("bootstrap")
        ->setSource(KT_WPFW_CSS_URL . "/bootstrap.min.css")
        ->setEnqueue();

$config->assetsConfigurator()
        ->addStyle("jquery-fancybox")
        ->setSource(KT_WPFW_CSS_URL . "/fancybox/jquery.fancybox.css")
        ->setEnqueue();

$config->assetsConfigurator()
        ->addStyle("jcarousel")
        ->setSource(KT_WPFW_CSS_URL . "/jcarousel.css")
        ->setEnqueue();

$config->assetsConfigurator()
        ->addStyle("flexslider")
        ->setSource(KT_WPFW_CSS_URL . "/flexslider.css")
        ->setEnqueue();

$config->assetsConfigurator()
        ->addStyle("main-style")
        ->setSource(KT_WPFW_CSS_URL . "/style.css")
        ->setEnqueue();

$config->assetsConfigurator()
        ->addStyle("default")
        ->setSource(KT_WPFW_CSS_URL . "/default.css")
        ->setEnqueue();

// --- JS ------------------

$config->assetsConfigurator()->addScript(KT_WP_JQUERY_SCRIPT)->setEnqueue(); // Nemusíme zadávat zdroj, jQuery je součástí WP

$config->assetsConfigurator()
        ->addScript("jquery-easing", KT_WPFW_JS_URL . "/jquery.easing.1.3.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("bootstrap", KT_WPFW_JS_URL . "/bootstrap.min.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("jquery-fancybox", KT_WPFW_JS_URL . "/jquery.fancybox.pack.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("jquery-fancybox-media", KT_WPFW_JS_URL . "/jquery.fancybox-media.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("google-code-prettify", KT_WPFW_JS_URL . "/google-code-prettify/prettify.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("jquery-quicksand", KT_WPFW_JS_URL . "/portfolio/jquery.quicksand.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("setting-js", KT_WPFW_JS_URL . "/portfolio/setting.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("flexslider-js", KT_WPFW_JS_URL . "/jquery.flexslider.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("animate-js", KT_WPFW_JS_URL . "/animate.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("custom-js", KT_WPFW_JS_URL . "/custom.js")
        ->setInFooter()
        ->setEnqueue();


$config->initialize();

Framework sám vytvoří konstanty na cesty pro JS a CSS v rámci šablony. Je ale důležité si uvědomit, že klíč „WPFW“ je použit na základě našeho parametru, který jsme vložili při inicializaci našeho modulu v souboru kt_init.inc.php ve funkci kt_initialize_module();

Dokončení a úprava index.php

Nyní, nám už jen zbývá provést úpravu souboru index.php – ten bychom měli mít zatím úplně prázdný. Vezmeme obsah našeho HTML souboru index.html a vše překopírujeme. Nyní umažeme obsah, který jsme nakopírovali do header.php a nahradíme ho funkci get_header(). Stejnou věc uděláme i v dolní části, kde umažeme stejný obsah jako ve footer.php a nahradíme ho jinou – ale podobnou funkcí – get_footer(). Obě funkce nám zajistí to, že obsah header.php a footer.php se vloží na potřebné místo naší šablony.

<?php get_header(); ?>

<section id="featured">
    .
    .
    .
</section>
<section class="callaction">
    .
    .
    .
</section>
<section id="content">
    .
    .
    .
</section>

<?php get_footer(); ?>

Místo zdlouhavého HTML jsem mezi bloky <section> doplnil pouze tečky pro ukázku struktury souboru index.php. Nyní provedeme to, že si ještě pěkně zpřehledníme náš index.php, aby tam nebylo toho obsahu tolik a my jsme s v tom pěkně vyznali.

V rootu šablony si založíme složku partials a do ní vytvoříme několik souborů. Soubory bychom měli pojmenovat podle funkčních bloků naší šablony, já jsem zvolil tyto názvy:

• index-slider.php – Zde bude část s úvodním „slidrem“.
• main-offer-list.php – Přehled hlavní nabídky služeb.
• recent-works.php – Tady umístíme výpis „referencí“.

Do těchto souborů nyní postupně „vykopírujeme“ HTML obsah našeho souboru index.php dle funkčních bloků, které jsem naznačil. Toto rozdělení do bloků je vždy závislé na tom, jak je Váš design připraven, jak lze funkční bloky rozdělit a jak jste vy nebo kodér HTML připravil.

Můj index.php vypadá nyní takto:

<?php get_header(); ?>

<?php get_template_part("partials/index-slider"); ?>

<section class="callaction">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="big-cta">
                    <div class="cta-text">
                        <h2><span>Moderna</span> HTML Business Template</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="content">
    <div class="container">
        <?php get_template_part("partials/main-offer-list"); ?>
        <?php get_template_part("partials/recent-works"); ?>
    </div>
</section>

<?php get_footer(); ?>

Funkce get_template_part() my vždy vrátí ze složky partials („partials/“) příslušný název souboru, který jsem přidal za lomítko. Do těchto souborů jsem již pouze nakopírovat příslušný obsah HTML. Co to tedy znamená? Neděje se nic jiného, než se na místo, kam jsem zapsal funkci get_template_part() vloží ta část HTML, které je zapsána v souboru, jehož název jsem předal v parametru funkce za lomítkem.

Závěr

V dnešním dílu jsme si udělali základní přípravu úvodní stránky naší šablony. Načetli jsme pomocí komponenty KT Theme Config externí zdroje do šablony. Udělali jsme základní rozdělení HTML do potřebných souborů a šablona nám korektně funguje. Zatím se na ní pouze nezobrazují obrázky, které zatím odkazují na špatnou cestu – to si ale ukážeme příště společně s dalším osazením naší úvodní stránky a dalších potřebných částí.

1. Příprava prostředí

V první řadě budeme potřebovat nějaké prostředí, kde si vše budeme moci otestovat, zkoušet a testovat. Určitě nebudeme dělat to, abychom neustále nahrávali data někam na server (webhosting) a poté zkoušeli, co to udělá. To by nás strašně zdržovalo a moc bychom toho nestihli. Proto použijeme některý z nástrojů, který nám umožní spustit PHP server přímo na našem počítači. To, jak na to, najdete například v článku, který sepsal kolega Martin na našem Netcorex blogu – Jak na PHP pod Windows jednoduše – XAMPP.

Instalace

Věřím, že všichni z Vás již nainstalovat WordPress umí – pokud ne, stačí trochu zapátrat na internetu. Mohl bych celý postup popsat znovu, ale proč to dělat – bylo to již řečeno nesčetněkrát. Není to také nic, co bychom nějak speciálně připravovali a bylo potřeba to významně popisovat. Jedná se o instalaci WordPressu jako všude jinde.

Editor

Měli byste také zvolit nějaký správný editor pro to, co budeme dělat. Určitě Vám nedoporučím jakýkoliv textový editor. Využijte nějaké IDE, které vám práci usnadní a bude vám celou dobu nabízet velké množství užitečných funkcí, které poté nedáte z ruky. My použvíme NetBeans – protože v něm aktivně pracuji, budu všechny ukázky kódů prezentovat právě v tomto prostředí. Přinesu vám také několik dobrých tipů z prostředí.

2. Vytvoření šablony

Když už nám běží WordPress, je potřeba si založit základní kostru naší šablony. To provedeme tak, že ve složce: wp-content/themes/ vytvoříme novou složku, která bude obsahovat soubory naší šablony. Například já jsem zvolil název – mojesablona. Mělo by to tedy vypadat nějak takto:

Samotná složka sama o sobě nám ale nic nepřinese, budeme muset přidat ještě pár souborů, aby se naše šablona začala tvářit jako šablona. Proto do složky (mojesablona) přidáme dva soubory:

• style.css
• index.php

Do souboru style.css ještě zapíšeme základní informace o šabloně, to je potřeba, aby naše šablona začala být skutečně „šablonou“.

/*
Theme Name: MojeSablona na WPFramework.cz
Theme URI:
Author: Tomáš Kocifaj
Author URI: http://wpframework.uhlirradek.cz
Description: Testovací šablona pro tutoriál na WPFramework.cz
Version: 1.0
License: GNU General Public License
License URI: license.txt
*/

Pro ty, kteří chtějí mít ještě šablonu prezentovanou nějakým pěkným obrázkem, stačí do šablony nahrát soubor screenshot.jpg (png) – tento náhled pak bude použit jako náhledový obrázek šablony.

Pokud se nyní podíváme do naší instalace WordPressu, uvidíme již naši šablonu aktivní a připravenou k použití. Bohužel zatím nic neumí, ale pokud šablonu nevidíte tak jako já, zkontrolujte body předtím. Jak vidíte, mojesablona je již připravena k použití – tedy, spíše k přípravě na vývoj. Určitě jste si všimli chybové hlášky – nemám rád základní šablony WordPressu, nevydrží proto déle než 30s po nahrání WordPressu.

3. Instalace WP Frameworku

Pokud máte náš základ šablony připraven, bude potřeba už jenom nainstalovat náš WP Framework. Pokud chcete, můžete se na celou instalaci podívat v našem videu, které naleznete na úvodní stránce našeho projektu. Nicméně pojďme si to pro jistotu projít krok po kroku.

1. V první řadě budeme potřebovat stáhnout zdrojové soubory. To provedeme například na našem GitHub účtu.
2. Ti kteří GitHub neznají dobře, v pravém sloupci jako jedna z posledních položek svítí tlačítko „Download zip“.
3. Nyní bude potřeba zip rozbalit a nahrát zdrojové soubory do šablony.
4. V šabloně si vytvoříme složku kt, do které nahrajeme celý stažený obsah.

Nyní budeme potřebovat poslední úpravu tak, abychom celý WP Framework načetli do naší šablony, a vše nám začalo fungovat. Do naší šablony proto přidáme další soubor:

• functions.php

Do tohoto souboru přidáme tento zápis:

/*
 * Inicializace KT frameworku - nic nemazat !!!
 */
require( TEMPLATEPATH . "/kt/kt_init.inc.php" );

Nyní si zapamatujeme – a to velmi důkladně – že do souboru functions.php již nic více psát nebudeme – NIKDY! I přesto, že jste četli jinde odlišné informace.

4. Založení vlastního modulu

Celý Framework je vymyšlený a situovaný tak, aby se do něj dalo přidávat libovolné množství modulů a vše se důkladně udržovalo přehledné. I přesto, že budete například psát velký projekt. Proto si tedy založíme novou složku, kde budou soubory našeho projektu. Já ji například nazvu „yours“ – je ale na vás, jak ji pojmenujete. Vyhněte se pouze diakritice a velkým písmenům – na PHP serveru to pak nedělá dobrotu. Složku yours umístíme na stejnou úroveň jako složku core – tedy bude ve složce kt.

Do složky yours přidáme ještě jeden důležitý soubor, který bude zajišťovat načítání našeho modulu:

• kt_init.inc.php

Obsahem souboru bude tento zápis:

kt_initialize_module("WPFW");

// NEBO

// Pokud jste zvolili jiný název složky než
// yours, bude potřeba o tom frameworku ještě říct.
// To uděláme tak, že výše popsanou funkci zavoláme s dodatečným parametrem.

kt_initialize_module("WPFW", "moje-slozka");

Naše šablona by měla vypadat nyní v této struktuře:

5. Závěr

Nyní máme skutečně hotovo! Máme vytvořenou šablonu, v ní načtený WP Framework a v něm připraven základ našeho nového modulu, který budeme dále rozvíjet. To je pro dnešek všechno. V příštím díle začneme se základní kostrou šablony.

Pro ty, kteří jsou lačni po dalších informacích, doporučím přečíst následující stránky:

1. Struktura šablony – zde se dočtete, jaké soubory a s jakým obsahem budeme kam umisťovat.
2. Stuktura modu – stejně jako šablona i samotný modul má svá pravidla, které je třeba dodržovat a znát.

Jaké komponenty budeme potřebovat?

1. KT Admin Screen – pro vytvoření vlastní admin stránky s možností metaboxů
2. KT_Metabox – hlavní komponenta pro práci s metaboxy
3. KT Form Fieldset – pro definování fieldů v metaboxech
4. KT_CRUD  – pro napojení dat na vlastní tabulku v DB
5. KT_Catalog_Base_Model – základní model pro položky katalogového listu
6. KT_CRUD_Admin_List – komponenta, která nám vytváří výpis našich záznamů

Vlastní tabulky v DB

V první řadě budeme potřebovat vlastní tabulku v naší DB. To provedeme ručně pomocí některého nástroje, který pro správu s databází používáme. Parametry naší tabulky by měly vypadat nějak takto:

CREATE TABLE IF NOT EXISTS `kt_wp_fw_custom_catalog` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(100) COLLATE utf8_czech_ci NOT NULL,
  `description` text COLLATE utf8_czech_ci,
  `code` varchar(30) COLLATE utf8_czech_ci DEFAULT NULL,
  `menu_order` int(10) NOT NULL DEFAULT '0',
  `visibility` int(1) NOT NULL DEFAULT '1',
  PRIMARY KEY (`id`)
);

Výše popsaný script vám případně vytvoří námi potřebnou tabulku. Script vychází z obecného modelu KT Catalog Base Model.

Vytvoření modelu

Pro správnou komunikaci s databází bude nutné připravit svůj objekt. V tomto případě budeme opět vycházet z našeho obecného modelu KT Catalog Base Model, který byl pro tyto jednoduché „číselníky“ připraven.

class KT_WP_FW_Custom_Catalog_Model extends KT_Catalog_Model_Base {
    
    const TABLE = "kt_wp_fw_custom_catalog";
    const ORDER_COLUMN = self::TITLE_COLUMN;
    const PREFIX = "fw-custom-catalog";
    const FORM_PREFIX = "fw_custom_catalog";
    
    public function __construct($rowId = null) {
        parent::__construct( self::TABLE, self::ID_COLUMN, null, $rowId );
    }
}

Jaké konstanty, a proč jsme si je definovali, najdete v sekci o komponentě KT_CRUD, z této komponenty také vychází KT Catalog Base Model.

Vlastní stránka pro zobrazení dat

V předchozím díle o metaboxech typu WP_OPTION jsme si ukázali, jak definujeme vlastní stránku s metaboxy v administraci WordPressu. Vydáme se stejnou cestou, pouze si upravíme některé parametry tak, aby vyhovovali našemu řešení.

Vytvoříme si soubor, který pojmenujeme jako kt_wp_fw_custom_catalog_screen.inc.php,
tento soubor umístíme do složky: yours/requires/template_pages/.

if (!is_admin()) {
    return;
}

$template = new KT_Custom_Metaboxes_Subpage(
    "themes.php", // Naše stránka bude podstránkou stránky vzhled
    "Naše záznamy", // Anchor text položky v menu
    "Číselník", // Text položky menu
    "manage_categories", // Práva editace
    KT_WP_FW_Custom_Catalog_Model::PREFIX // Slug stránky
);

$template->register();

Když se nyní podíváme do naší administrace, provedeme obnovu, uvidíme naši novou stránku, která zatím nic nezobrazuje – nemá co – ale registrace proběhla úspěšně.

Nyní, když jsme si vytvořili stránku, je potřeba na ni napojit výpis a editaci záznamů.

Napojení záznamů do stránky

Nyní dojde na řadu komponenta KT CRUD Admin List, pomocí které definujeme náš seznam, její sloupce a některé vlastnosti.

if (!is_admin()) {
    return;
}

$template = new KT_Custom_Metaboxes_Subpage(
    "themes.php", 
    "Naše záznamy",
    "Číselník",
    "manage_categories",
    KT_WP_FW_Custom_Catalog_Model::FORM_PREFIX
);

// Založíme nový objekt KT_CRUD_Admin_List

$crudList = new KT_CRUD_Admin_List("KT_WP_FW_Custom_Catalog_Model", KT_WP_FW_Custom_Catalog_Model::TABLE);

// Provedeme některá nastavení crudListu

$crudList->setSortable()
        ->setNewItemButton()
        ->setTemplateTitle("Přehled našich záznamů");

// Do crud listu přidáme dva sloupce

$crudList->addColumn(KT_WP_FW_Custom_Catalog_Model::TITLE_COLUMN)
        ->setLabel("Název")
        ->setType(KT_CRUD_Admin_Column::EDIT_LINK_TYPE)
        ->setDeletable();
        
$crudList->addColumn(KT_WP_FW_Custom_Catalog_Model::VISIBILITY_COLUMN)
        ->setType(KT_CRUD_Admin_Column::SWITCH_BUTTON_TYPE);

// Crud list předáme do naší templaty

$template->setCrudList($crudList);

// Nastavíme defaultní akci na výpis našeho CRUD listu

$template->setDefaultCallbackFunction(KT_Custom_Metaboxes_Base::KT_CRUD_LIST_SCREEN);

$template->register();

Když se v tuto chvíli podíváme na naši stránku, trochu se nám změnila. Již je vidět základní struktura tabulky a tlačítko pro přidání nového záznamu. To nám ale zatím nefunguje.

Přidávání / Editace záznamů

V tuto chvíli budeme potřebovat oživit přidávání a editaci záznamů. K tomu nám pomůže právě náš objekt KT Metabox a jeho datový typ metaboxu typu CRUD. K tomu budeme také potřebovat config pro model, kde definujeme základní KT Form Fieldset, pro vyplnění a úpravu dat pomocí formuláře.

Protože náš model vychází z KT Catalog Model Base, můžeme použít také jeho config k tomu, abychom pro něj definovali formulář. Pokud bychom měli vlastní model bez našeho základního modelu, bude nutné definovat celý config.

Vytvoření metaboxu

Vytvoříme soubor kt_wp_fw_custom_catalog_metabox.inc.php, který umístíme do složky yours/requires/metaboxes.

if(! is_admin()){
    return;
}

$screenName = KT_Custom_Metaboxes_Subpage::getScreenNameForNativeWpPage("themes.php", KT_WP_FW_Custom_Catalog_Model::PREFIX);
$fieldset = KT_Catalog_Base_Config::getCatalogBaseFieldset("kt-wp-fw-custom-catalog", KT_WP_FW_Custom_Catalog_Model::FORM_PREFIX, "Náš detail modelu");

KT_MetaBox::createCrud(
        $fieldset,
        $screenName,
        "KT_WP_FW_Custom_Catalog_Model",
        KT_WP_FW_Custom_Catalog_Model::ID_COLUMN
);

Doplnění stránky o další akce

V tuto chvíli budeme potřebovat rozšířit definici naší stránky o to, aby uměla pracovat s příslušnou akcí pro vytvoření a úpravu záznamů, které si pomocí našeho modelu připravíme. Nezapomeneme také dodat zapnutí tlačítka pro uložení přidaných záznamů.

if (!is_admin()) {
    return;
}

$template = new KT_Custom_Metaboxes_Subpage(
    "themes.php", 
    "Naše záznamy",
    "Číselník",
    "manage_categories",
    KT_WP_FW_Custom_Catalog_Model::PREFIX
);

// Založíme nový objekt KT_CRUD_Admin_List

$crudList = new KT_CRUD_Admin_List("KT_WP_FW_Custom_Catalog_Model", KT_WP_FW_Custom_Catalog_Model::TABLE);

// Provedeme některá nastavení crudListu

$crudList->setSortable()
        ->setNewItemButton()
        ->setTemplateTitle("Přehled našich záznamů");

// Do crud listu přidáme dva sloupce

$crudList->addColumn(KT_WP_FW_Custom_Catalog_Model::TITLE_COLUMN)
        ->setLabel("Název")
        ->setType(KT_CRUD_Admin_Column::EDIT_LINK_TYPE)
        ->setDeletable();
        
$crudList->addColumn(KT_WP_FW_Custom_Catalog_Model::VISIBILITY_COLUMN)
        ->setType(KT_CRUD_Admin_Column::SWITCH_BUTTON_TYPE);

// Crud list předáme do naší templaty

$template->setCrudList($crudList);

// Nastavíme defaultní akci na výpis našeho CRUD listu

$template->setDefaultCallbackFunction(KT_Custom_Metaboxes_Base::KT_CRUD_LIST_SCREEN)
        ->addScreenFunctionForAction("action", "create", KT_Custom_Metaboxes_Base::KT_METABOX_SCREEN) // Akce pro vytvoření záznamu
        ->addScreenFunctionForAction("action", "update", KT_Custom_Metaboxes_Base::KT_METABOX_SCREEN); // Akce pro editaci záznamu

$template->register();

Když nyní klikneme na tlačítko přidat záznam, dostaneme prázdný formulář pro přidání nového záznamu do našeho modelu.

Závěrem

Máme hotovo – vše nyní funguje a můžeme mít vlastní číselník pro uživatele v prostředí, na které je zvyklý. Všechno nás to přitom stálo jen sepsání několika řádků kódu. O ostatní věci se postará framework bez nutností dalšího napojení na databázi.

Když si nyní přidáme několik záznamů, uvidíme, co vše nám crudList dle našeho nastavení připravil.

Více informací o tom, jaké funkce nám KT CRUD Admin List nabízí, se dočtete na popisu samotné komponenty. V našem případě jsme aktivovali možnost řazení záznamů. Pomocí první ikonky je možné záznamy přetahovat a určovat tak jejich pořadí.

Jaké komponenty budeme potřebovat?

1. KT Metabox – hlavní komponenta pro práci s metaboxy

/yours/requires/metaboxes/kt_fw_{post_type}_metabox.inc.php
post_type nahradíme typem post_typu, ke kterému metaboxy budou patřit.

Definice metaboxu s vlastní callback funkcí

Do našeho souboru kt_fw_test_page_metabox.inc.php  – který jsme si definovali v předchozích dílech – přidáme následující kód:

// ...náš předchozí kód z minulého dílu

KT_Metabox::createCustom(
        "id-naseho-custom-metaboxu", // Identifikátor metaboxu
        "Ručně obsluhovaný metabox", // Titulek meatboxu
        KT_Custom_Metaboxes_Page::getCustomMetaboxPageScreenName("kt-test-page"), // Na jaké stránce se má zobrazit - náš slug
        "kt_fw_test_page_custom_metabox_callback" // Název callback funkce
);

V rámci statické třídy na objektu KT_Metabox jsme využili funkci createCustom, která na rozdíl od ostatních provádí vytváření metaboxu s vlastní callback funkcí – ta bude volána v případě vykreslení právě daného metaboxu. Ostatní parametry jsou velmi podobné.

V případě, že zadáte callback funkci, která zatím nebyla definovaná, bude vyhozena běžná chyba! Custom metabox musí mít vždy callback funkci deklarovanou.

Callback funkce

Nyní vzniká otázka, kam bychom měli callback funkci pro náš metabox zapisovat. V případě, že máte těchto funkcí v rámci entity / nebo nastavení více, je dobré pro ně vyčlenit vlastní soubor. Například v našem případě bychom ho zapisovali do /yours/requiers/funcionts/kt_fw_test_page_metabox_functions.inc.php. Pokud se ale jedná o pár funkcí, které nemají složitou strukturu, můžeme je ponechat v našem souboru pro zápis metaboxu.

Pod naší definici metaboxu přidáme další část kódu.

KT_Metabox::createCustom(
        "id-naseho-custom-metaboxu",
        "Ručně obsluhovaný metabox",
        KT_Custom_Metaboxes_Page::getCustomMetaboxPageScreenName("kt-test-page"), // Na jaké stránce se má zobrazit - náš slug
        "kt_fw_test_page_custom_metabox_callback"
);

function kt_fw_test_page_custom_metabox_callback(){
    echo "<p>Zde nechceme žádné vstupy, ale námi definovaný obsah v podobě HTML</p>";

    // Mohu zde například zobrazit uložená data v nastavení
    $form = new KT_Form(); // Založím formulář
    $form->addFieldSetByObject(KT_FW_Test_Page_Config::getContactFieldset()); // Přidám do něj fieldset
    $form->loadDataFromWpOption(); // Načtu data z tabulky wp_options
    
    echo $form->getInputsDataToTable(); // Data zobrazím
}

Když si nyní obnovíme naší stránku, můžeme vidět náš nový metabox s obsahem, který jsme mu v rámci naší funkce určili vykreslit. V našem případě tedy jednu větu a poté obsah fieldsetu z našeho configu. Namísto vykreslení inputů jsme do formuláře data načetli a vykreslili je jako informativní tabulku. Je však ale na Vás, jaký obsah ve funkci vydefinujete.

Tímto způsobem můžete kontrolovat obsah každého metaboxu, který chcete pro zobrazení dat používat. Je již plně na Vás, co do připraveného obsahu metaboxu připravíte, jaké data tam pošlete a necháte vykreslit.

Vlastní obsluha uložení dat

Občas určitě nastane situace, kdy potřebujete například zpracovat nějaké odeslané data z Vašeho formuláře a nechcete, aby byly součástí ostatních dat, které ukládá Framework dle definovaného tipu metaboxů. Například, budete chtít mít metabox, který v případě uložení provede nějakou operaci a Vy potřebujete vyčíst, co si uživatel „nastavil“.

Obecně máme dvě možnosti

1. Provést zpracování přímo v callback funkci – zde ale musíme vědět, že operace nemusí být spuštěna předtím, než dojde k odeslání hlavičky do browseru.
2. Vyvolat operaci ještě před vykreslením stránky a odchytit si globální proměnnou $_POST, kde jsou naše data dostupná.

Myslím, že 1. možnost je zcela jasná, pro tu druhou použijeme definovaný filtr ze strany frameworku

$sreenName = KT_CUSTOM_Metabox_Page::getCustomMetaboxPageScreenName("kt-test-page");
add_filters("kt-custom-metabox-save-$screenName", "kt_fw_custom_metabox_save_function_callback");

function kt_fw_custom_metabox_save_function_callback( $saveResult ){
    // Provedeme zpracování $_POST a uložení dat.

    if($errorPriZpracovani){
        $saveResult[KT_Custom_Metabox_Base::SAVE_RESULT_KEY] = false;
        return $saveResult;
    }
    
    // Pokud je vše v pořádku, odešleme zpět výsledek zpracování
    return $saveResult;
}

Nyní, bude funkce kt_fw_custom_metabox_save_fuction_callback volána vždy (a pouze), když bude docházet k načtení naší stránky se slugem kt-test-page. Akce se ale provede ještě předtím, než WordPress pošle hlavičku do prohlížeče. V případě, že odešleme ve výsledku false, funkce neprovede redirect stránky, ale pouze jí znovu vykreslí pro případ, že je potřeba vypsat například nějakou notifikaci o neprovedení akce a v proměnné $_POST zůstaly data, která uživatel vyplnil.

Hotovo! Právě jsme se naučili používat třetí tip metaboxu s možností vlastního callback funkce pro zobrazení námi definovaného obsahu.

Jaké komponenty budeme potřebovat?

1. KT Admin Screen – pro vytvoření vlastní admin stránky s možností metaboxů
2. KT Form Fieldset – pro definování fieldů v metaboxů
3. 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

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;
                
    }
}

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
);

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

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.

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.

Hlavní objekt pro práci s Metaboxy

Komponentu, kterou budeme pro tuto práci hlavně využívat bude KT Metabox. Tato komponenta nám umožňuje velké možností automatických procesů, které lze využít. Obecně framework dělí metaboxy do několika skupin.

1. POST_META – jedná se o metabox, který je „připojen“ k nějakému post typu – například příspěvek, stránka nebo Váš vlastní. Data jsou ukládána obvykle do tabulky wp_postmeta.
2. OPTIONS – Tyto metaboxy framework využívá pro vlastní stránky v administraci. Jeho data z metaboxů jsou pak často ukládána do tabulky wp_options.
3. CUSTOM – Také často řečeno – bez určení typu – je na Vás, jak Metabox zpracujete – sám o sobě nedělá nic.
4. CRUD – Používá se pro vlastní entity, které jsou napojeny na vlastní tabulky v databázi, které si sami vytvoříte.

V tutoriálu si postupně projdeme všechny typy – včetně toho, jak s nimi snadno a efektivně pracovat. V dnešním díle se podíváme na nejčastěji používaný POST_META

Metabox pro objekty typu – post_type

Metaboxy obecně zapisujeme do:
/yours/requires/metaboxes/kt_fw_{post_type}_metabox.inc.php
post_type nahradíme typem post_typu, ke kterému metaboxy budou patřit.

Definice fieldsetu pro metabox

Proto, abychom mohli využít datový typ POST_META – je potřeba mít připravený nějaký formulář, pomocí kterého zadáme nové informace, které potřebujeme u daného post_typu uložit. Protože již framework počítá (díky datovému typu meatboxu) s tím, že se bude jednat o formulář, bude nám v tomto případě stačit vytvořit pouze fieldset.

Fieldsety se definují do souboru s configem. Název configu by měl být vždy totožný s tím, jaké entitě patří. V našem případě se tedy bude jednat o soubor kt_wp_fw_post_config.inc.php.

Do souboru s configem vytvoříme definici fieldsetu:

class KT_WP_FW_Post_Config {
    
    const POST_FIELDSET = "kt-wp-fw-post-fieldset"; // Název (ID) fieldsetu
    const POST_FIELDSET_FIELD_1 = "kt-wp-fw-post-field-1"; // ID našeho fieldu
    const POST_FIELDSET_FIELD_2 = "kt-wp-fw-post-field-2"; // ID dalšího fieldu
    const POST_FIELDSET_FIELD_3 = "kt-wp-fw-post-field-3"; // ...
    
    public static function getPostFieldset(){
        $fieldset = new KT_Form_Fieldset(
                self::POST_FIELDSET,
                __("Náš první vlastní metabox", KT_DOMAIN), // Titulek fieldsetu (přebírá také metabox)
                __("Toto je popisek našeho prvního metaboxu, který si uživatel může u každého metaboxu přečíst", KT_DOMAIN)
        );
        
        $fieldset->addText(self::POST_FIELDSET_FIELD_1, __("Text", KT_DOMAIN)); // Přídáme intpu typu "text"
        
        $categoryManager = new KT_Taxonomy_Data_Manager(KT_WP_CATEGORY_KEY); 
        $fieldset->addSelect(self::POST_FIELDSET_FIELD_2, __("Výběr rubriky")) // Select s výběrem ID rubriky
                ->setDataManager($categoryManager);
        
        $fieldset->addSwitch(self::POST_FIELDSET_FIELD_3, __("Ano/Ne?")); // Přepínač ANO / NE
        
        return $fieldset;
    }
    
}

Vytvoření metaboxu s definovaným fieldsetem

Nyní provedeme vytvoření metaboxu a jeho napojení na post_type typu příspěvek. Pro tento účel nám bude sloužit následující kód, který umístíme do souboru kt_wp_fw_post_metaboxe.inc.php – viz výše.

if(is_admin()){
    
    KT_Metabox::create(
        KT_WP_FW_Post_Config::getPostFieldset(), // Načtema náš fieldset z configu
        KT_WP_POST_KEY, // Říkáme, že metabox patří k post_type = "post"
        KT_MetaBox_Data_Type_Enum::POST_META // Datový typ pro uložení dat do wp_postmeta
    );
    
}

Nyní, když si obnovíme editor příspěvku, uvidíme náš nový metabox:

Nyní je důležití vědět, že o uložení a editaci dat v metaboxu se již stará framework. Nemusíte řešit žádné zpracování dat, jejich načítání do formuláře nebo jiné zapeklité postupy. Máme hotovo.

Takových to metaboxů můžete vytvořit libovolně mnoho – se všemi různými fieldy, které Vám framework nabízí. Všechny data jsou poté dostupné v tabulce na wp_postmeta pod klíčem, jehož název jsme definovali jako konstantu v configu, kde jsou jednotlivé parametry fieldů a fieldsetu samotného.

Framework bude také provádět automatickou validaci dat, kterou si případně u fieldu vynutíte. Můžete tak snadno kontrolovat obsah, který Vám tam správce webových stránek bude předávat.

Více mtaboxů pro jeden post_type

Napřed je potřeba definovat další fieldset v configu. V configu nám také přibude statická funkce, která nám bude vracet kolekci všech fieldsetů, které chceme takto hromadně přidávat.

class KT_WP_FW_Post_Config {
    
    
    public static function getAllFieldset(){
        return $fieldsetCollection = array(
            self::POST_FIELDSET => self::getPostFieldset(),
            self::POST_SECOND_FIELDSET => self::getSecondPostFieldset()
        );
    }
    
    const POST_FIELDSET = "kt-wp-fw-post-fieldset";
    const POST_FIELDSET_FIELD_1 = "kt-wp-fw-post-field-1";
    const POST_FIELDSET_FIELD_2 = "kt-wp-fw-post-field-2";
    const POST_FIELDSET_FIELD_3 = "kt-wp-fw-post-field-3";
    
    public static function getPostFieldset(){
        $fieldset = new KT_Form_Fieldset(
                self::POST_FIELDSET,
                __("Náš první vlastní metabox", KT_DOMAIN),
                __("Toto je popisek našeho prvního metaboxu, který si uživatel může u každého metaboxu přečíst", KT_DOMAIN)
        );
        
        $fieldset->addText(self::POST_FIELDSET_FIELD_1, __("Text", KT_DOMAIN));
        
        $categoryManager = new KT_Taxonomy_Data_Manager(KT_WP_CATEGORY_KEY);
        $fieldset->addSelect(self::POST_FIELDSET_FIELD_2, __("Výběr rubriky"))
                ->setDataManager($categoryManager);
        
        $fieldset->addSwitch(self::POST_FIELDSET_FIELD_3, __("Ano/Ne?"));
        
        return $fieldset;
    }
    
    const POST_SECOND_FIELDSET = "kt-wp-fw-post-second-fieldset";
    const POST_SECOND_FIELD_1 = "kt-wp-fw-second-field-1";
    const POST_SECOND_FIELD_2 = "kt-wp-fw-second-field-2";
    const POST_SECOND_FIELD_3 = "kt-wp-fw-second-field-3";
    
    public static function getSecondPostFieldset(){
        $fieldset = new KT_Form_Fieldset(
                self::POST_SECOND_FIELDSET,
                __("Náž druhý metabox", KT_DOMAIN),
                __("Popisek našeho druhého metaboxu s tímto fieldsete", KT_DOMAIN)
        );
        
        $fieldset->addTextarea(self::POST_SECOND_FIELD_1, "Textarea") // Textarea
                ->setRows(10);
        
        $fieldset->addMedia(self::POST_SECOND_FIELD_2, "Obrázek"); // Načtení obrázků / souboru z mediální knihovny
        
        $fieldset->addWpPage(self::POST_SECOND_FIELD_3, "Stránka"); // Selectobx s výběrem ID stránky
        
        return $fieldset;
    }
    
}

Nyní trochu změníme kód, v našem souboru s metaboxem. Namísto statické funkce create použijeme funkci createMultiple.

if(is_admin()){
    
    KT_Metabox::createMultiple(
            KT_WP_FW_Post_Config::getAllFieldset(), // Místo jednoho předáváme kolekci fieldsetů
            KT_WP_POST_KEY,
            KT_MetaBox_Data_Type_Enum::POST_META
    );
    
}

Nyní, když se podíváme na editaci našeho příspěvku vidíme, že se naše skupina metaboxů zase rozrostla.

Hotovo. Právě jste provedli implementaci dvou metabxů na základě definovaných fieldestů, které se vždy uloží příslušnému příspěvku do tabulky wp_postmeta.