Vlastní WordPress šablona #1

V rubrice: Tutoriály | Obtížnost:

V první části tutoriálu o vývoji vlastní WordPress šablony se dozvíte, jaké znalosti byste měli mít a jak si připravit pevnou půdu, na které se bude při programování stavět.

Rozhodl jsem se začít s velmi obsáhlým a potenciálně dlouhým tutoriálem, který bude mapovat postup vytváření vlastní šablony ve WordPressu. Udělat „prasácký“ template je relativně jednoduché. Proto se budu snažit vyhnout všem řešením, která nejsou zrovna WordPress friendly,  a které by mohla zbytečně stěžovat použitelnost šablony. Rovněž nebude mým úkolem ji příliš graficky zušlechňovat. Hlavní místo bude v tutoriálech zaujímat backend šablony.

Na začátku si ještě položte otázku, zda a proč vůbec chcete dělat vlastní šablonu. Mnohem jednodušší je totiž použít existující a pouze ji upravit k obrazu svému. Případně vzít jednu z tzv. blank šablon (jeden seznam například na Sixrevisions), které neobsahují mnoho kódu ani stylu a slouží pouze jako základ k vlastnímu vývoji. Vytváření šablony „z ničeho“ není úplně běžný proces, ale na naučení se postupů je skvělý.

Předpoklady

Opravdu ne každý je schopen vytvořit si vlastní WordPress šablonu. Budu předpokládat, že máte pokročilé znalosti HTML a CSS. Jesliže tomu tak není, doporučuji mrknout na jakpsatweb, na tomhle webu jsem vyrůstal. Možná časem jeho design zastaral, ale je tam spousta užitečných informací.

Dále budu předpokládat, že v adminu WordPressu se vyznáte levou zadní. Víte, co to jsou uživatelská pole, jak instalovat pluginy, jak pracovat s wysiwyg editorem. Nevyhnete se ani základní znalosti PHP. Nebudu vysvětlovat jeho syntaxi ani jak si nainstalovat sever na lokální počítač.

Abych shrnul podmínky, které byste měli splňovat, pro pochopení tutoriálu:

  • pokročilá znalost HTML a CSS
  • pokročilá znalost administrace WordPressu
  • základní znalost PHP

Jak připravit svůj WordPress

Vyvíjet budete předpokládám na vlastní mašině. Tj. založit nový WordPress web s čistou databází a bez jakýchkoliv pluginů. Pro účely testování ale musíme mít nějaký obsah. K jeho vygenerování poslouží buď pluginy (např. FakerPress) nebo obyčejný XML import (dobrý je na WPCandy). Plugin má tu výhodu že je variabilní a můžete si dummy obsah vygenerovat podle svého. Naproti tomu XML import je extra rychlý a děcky snadný. Dávám mu přednost.

Díky dummy obsahu získáte články, stránky, komentáře i obrázky pro účely testování. Pro usnadnění práce je ještě užitečné zapnout debugování WordPressu. Do souboru wp_config.php přidejte:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);

Díky těmto konstantám se dozvíte o všech potenciálních chybách. Dokonce vás i upozorní na použití funkcí, které jsou již zastaralé a v blízkých verzích WordPressu zmizí úplně. Díky zapnutí logu se všechny tyto hlášky budou navíc ukládat do souboru wp-content/debug.log

Základní soubory šablony

K souborové struktuře šablony můžete přistupovat flexibilně, tak říkajíc si dělat všechno po svém, nebo využít pevné struktury, kterou vám WordPress nabízí. My se budeme držet druhé metody. Nicméně úplně tu nejzákladnější strukturu musí dodržet šablona každá. Základem jsou následující čtyři soubory:

  • style.css
  • index.php
  • functions.php
  • screenshot.png

Style.css

Asi nejdůležitější soubor je s podivem style.css. V něm totiž nejsou uložené pouze kaskádové styly, ale zároveň i základní informace o šabloně. Na začátku se nachází blokový komentář, který si WordPress automaticky rozparsuje. Vypadá takto:

/*
Theme Name: NÁZEV ŠABLONY
Theme URI: WEB S INFORMACEMI O ŠABLONĚ
Author: AUTOR
Author URI: wEB AUTORA
Description: POPIS ŠABLONY
Version: VERZE ŠABLONY
License: LICENCE ŠABLONY
License URI: WEB S INFORMACEMI O LICENCI
Tags: TAGY ODDĚLENÉ ČÁRKOU
Text Domain: TEXT DOMAIN PRO OZNAČENÍ PŘEKLADŮ

COKOLIV CO CHCETE DODAT. TENTO OBSAH UŽ WORDPRESS NEPARSUJE
*/

Pokud vytvoříte vlastní šablonu, měl by tam být určitě její název. Ostatní položky jsou spíše dobrovolné. V kaskádových stylech by určitě neměly chybět základní WordPress styly, které se používají pro zarovnání obrázků a zobrazení jejich popisků. Jsou k nalezení v Codexu případně si je můžete stáhnout na konci článku

Index.php

Index.php si prozatím necháme prázdný. Později ovšem bude obsahovat části HTML šablon.

functions.php

Opět v první fázi necháme prázdný, později se zde objeví složitější funkce, které globálně ovlivňují chování celé šablony. Napříkad definice velikosti náhledů, umístění menu, použití filtrů na obsah článků apod.

Také bych zmínil, že scripty z toho souboru se nespouští pouze na frontendu, ale rovněž v administraci.

screenshot.png

Posledním základním souborem je screenshot. Ten se zobrazí v seznamu šablon v administraci. Jeho doporučená velikost je 880 na 660 pixelů. Zvládne i jiné formáty, ale png je doporučováný a prioritizováný. Zde není důvod šetřit velikostí, objeví se pouze na jedné stránce v adminu.

Stav

Aktuálně máme připravený WordPress na vývoj šablony. Je zapnuté debugování a dummy obsah je naimportovaný. Šablona zobrazuje pouze bílou stránku, ale to se hned v příštím díle tutoriálu změní.

Současný stav souborů se dá stáhnout na GitHubu.


Návod na vytvoření vlastní šablony ve WordPressu

V rubrice: Tutoriály | Obtížnost:

Komentáře

  1. Dobrý den.Potřeboval bych vytvořit šablonu vč.vloženého eshopu ve wordpressu.Najde se prosím někdo?Spěchá 724313069 p.Maleňák Děkuji

Comments are closed.