Tvorba WP šablony – 3. díl – Osazujeme Index

27.05.2015 | Tomáš Kocifaj

V minulém díle jsme naší šablonu zhotovili do stavu, kde již máme potřebné prvky ve WordPressu. Nyní bude potřeba zhotovit pro šablonu různé nastavení, abychom všechny informaci – které budou potřeba – mohli přes administraci nastavit. V dnešním díle tedy hlavně osazení úvodní stránky. Pojďme na to.

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?

Hlavní navigace – využijeme WP Menu
Slider – To je trochu složitější část a ukážeme si ho až v příštích dílech.
Hlavní nadpis šablony
Čtyři sekce s hlavní nabídkou služeb
Část s prezentací naší práce – na to využijeme Custom Post Type
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");

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

// 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>

<!DOCTYPE html>

<head>

<title>Moderna - Bootstrap 3 flat corporate template</title>

<?php wp_head(); ?>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</button>

<a class="navbar-brand" href="<?php echo home_url("/"); ?>"><span>M</span>oderna</a>

</div>

<?php KT::theWpNavMenu(KT_WPFW_MAIN_MENU_KEY, 2); ?>

</ul>

</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:

Název (identifikátor lokace) – zde použijeme právě naší konstantu.
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>

<?php // Pro přehlednost jsem zde schoval kus kódu, který u Vás zůstane stejný ?>

</div>

<h5 class="widgetheading">Pages</h5>

<?php KT::theWpNavMenu(KT_WPFW_FOOTER_MENU_KEY, 1); ?>

</ul>

</div>

<?php // Pro přehlednost jsem zde schoval kus kódu, který u Vás zůstane stejný ?>

</div>

<?php // Pro přehlednost jsem zde schoval kus kódu, který u Vás zůstane stejný ?>

</div>

<?php // Pro přehlednost jsem zde schoval kus kódu, který u Vás zůstane stejný ?>

</div>

</footer>

</div>

<?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>

<li>

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

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

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

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

Vytvořím nastavení pro WP_Options, kde nechám uživatele vybrat 4 stránky.
Tyto stránky si následně vyčtu z databáze.
Jejich název bude titulek „boxu“.
Ikonky nechám pevné tak, jak je v designu.
Krátký popisek využiji funkci perexu (stručný výpis příspěvku stránky).
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;
    }
    
}

<?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

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

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

Předchozí článek « Tvorba WP šablony – 2. díl – Z HTML do WP

Další článek Tvorba WP šablony – 4. díl – Osazujeme Index podruhé »

Podobné články

Tvorba WP šablony – 5. díl – Práce s post_type

Na úvodní stránce nám chybí už jen vytvořit seznam referencí, které chceme prezentovat. K tomu budeme potřebovat vlastní post_type a…

Tvorba WP šablony – 2. díl – Z HTML do WP

V minulém díle jsme si ukázali, jak vytvořit základní kostru šablonu společně s nainstalovaný KT Frameworkem. V dnešním díle bychom…

Tvorba WP šablony – 4. díl – Osazujeme Index podruhé

V minulém díle jsme provedli základní vytvoření kostry šablony, načetli jsme do FE externí zdroje, jako jsou obrázky, javascriptové a…

Tvorba WP šablony – 1. díl – Vytvoření šablony

To, proč jsme s tímto projektem začali, byl důvod, že jsme jednotlivé šablony pro WordPress chtěli vytvářet opravdu efektivně, kvalitně…

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.