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

12.05.2015 | Tomáš Kocifaj

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ě a zároveň rychle. Milujeme WordPress a vše kolem něj, ale byly věci, které jsme vnímali jako překážku WordPressu a ne jako výhodu. Rozhodli jsme se, že to změníme, a tak vznikl KT WP Framework. To, jak v něm vytvářet celé šablony se vším, co byste vy nebo váš klient mohl potřebovat, si ukážeme právě v tomto seriálu.

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

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:

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:

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.