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?

  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:

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:

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.

Registrace WordPress menu lokace

 

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.

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

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.

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

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

Nastínění toho, jak a co využijeme.

 

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:

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:

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

Defaultní stránka pro nastavení šablony

 

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:

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.

Oživení metaboxů na stránce s nastavením

 

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.

 

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 provedli základní vytvoření kostry šablony, načetli jsme do FE externí zdroje, jako jsou obrázky, javascriptové a…

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

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.



Odebírejte novinky z FW

Sledujte nás!

Tyto stránky využívají Cookies. Používáním těchto stránek vyjadřujete souhlas s používáním Cookies.Zjistit víceOK, rozumím