Tvorba WP šablony – 4. díl – Osazujeme Index podruhé
05.06.2015 | Tomáš Kocifaj
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 stylové soubory. Stejně tak jsme si připravili vstupy pro uživatele, kteří budou se samotnou šablonou pracovat. Dnes bychom měli vše spojit a osadit potřebné informace uložené v administraci do FE. K tomu budeme potřebovat vytvořit také model šablony a presenter úvodní stránky. Pojďme tedy na to.
Zdroj šablony po dokončení čtvrtého dílu
Co bude dnešním úkolem dílu?
- Definovat model s nastavením šablony.
- Vytvořit presenter úvodní stránky a připravit data pro výpis.
- 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:
|
1 2 3 4 5 6 7 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
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.
- Index presenter bude obsluhovat jenom titulek.
- Budeme potřebovat presenter pro úvodní slider (ten nyní vynecháme pro složitost – ukážeme si v dalších dílech).
- Budeme potřebovat presenter pro hlavní nabídku služeb.
- 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<?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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?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.
Podobné články
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…
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ě…
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…
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…
O autorovi: Tomáš Kocifaj
