Jak jsem si vyrobil vlastní WordPress šablonu, aniž bych to uměl

Jak jsem si vyrobil vlastní WordPress šablonu, aniž bych to uměl

Reading Time: 7 minutes

Mezi blogery je oblíbené téma blogových platforem. Je běžné, že člověk začne na nějaké klikací platformě a později se přesune na WordPress s vlastní doménou. Tam si najde nějakou hezkou šablonu a v průběhu let je schopný si blog více či méně upravovat. 

V dnešním článku bych chtěl blogery a affiláky nasměrovat k ještě větší individualitě. K vlastní šabloně. 

Než to zavrhnete, dejte mi chvilku. Já vím, že někoho, kdo není profesionální kodér, bych tímhle nápadem spolehlivě odradil. Vyrobit si vlastní WP šablonu není sranda. Obzvlášť pro někoho bez zkušeností. Na druhou stranu mně se to podařilo. I když ne úplně od základu. Ukážu vám, že to nemusí být tak těžké. Nemusí to dělat profík a postupy nemusí být bez chybiček. A hlavně to má spoustu výhod.

Proč mít vlastní WordPress šablonu?

Získal jsem tím dost nových zkušeností a hlavně pochopení WordPressu. Díky tomu si dnes můžu přidat na blog jakoukoliv funkci, jakýkoliv prvek, změnit cokoliv, co se mi nelíbí a třeba implementovat část nějaké jiné šablony, která se mi líbí. To vše bez otravných pluginů a hezky čistě v kódu.

Ne, že bych uměl programovat, to ne. Jen vím, kam pro co šáhnout a kam vložit vygooglený odstavec toho rozsypaného čaje. To je velká svoboda pro neprogramátora.

Jak jsem se v tom hrabal, narazil jsem na spoustu věcí. Díky tomu mám přehled, co který kus kódu dělá. Jakmile budu dnes chtít upravit nějaké chování, vím přesně, do jakého souboru se podívat.

Facebook skupiny jsou plné dotazů, kde v té a té šabloně upravit jaký prvek, jaký plugin instalovat na primitivní funkce a dotazy na šílené buildery. Lidé se chtějí vyhnout šahání do kódu. Chtějí si usnadnit život kdejakým instalovaným nástrojem, který do kódu sáhne za ně. Kvůli tomu ale bude WordPress bobtnat a zpomalovat se. Díky své zkušenosti s vlastní šablonou se tomu můžu vyhnout.

Jak začít

Pro pořádek, nejsem žádný kodér. Jsem něco jako copy&paste lepič vygooglených řešení. Učil jsem se úpravy za pochodu. 

Začalo to lehkou změnou textů přímo v editoru administrace WordPressu. Ten byste měli mít deaktivovaný z bezpečnostních důvodů. Takhle jsem ale začínal. Odpozoroval jsem, že čím texty začínají a končí. Až mnohem později jsem zjistil, že se to jmenuje párové tagy, a že existují i nepárové. Třeba pro mezeru nebo pro oddělující linku.

Nikdy jsem si nepořídil učebnici, kde by byl nějaký přehled, návod nebo postupy. Prostě jsem jen vždy upravil o kousek víc kódu, než posledně. Metodou pokus – omyl jsem si blog několikrát rozbil. Vždy jsem ale vrátil ten poslední uložený kód před poslední změnou a tím blog opravil. Takhle jsem si osvojil základy. Že můžu hejbat s čímkoliv uvnitř tagů, nesmím je ale rozbít smazáním jedné závorky, uvozovky, nebo lichým počtem divů. To celkem rychle odpozorujete a bude to stát jen pár rozbití blogu 🙂

Vlastní šablona úpravou ne-WP šablony

Jednou jsem narazil na návod, jak na vlastní šablonu, ale ten mě odradil. Byl to čistý postup z prázdné stránky. Nedávalo mi smysl znovu vymýšlet kolo. Psát základní CSS styly na fonty, responzivitu, grid a podobně. Proč proboha. Tak jsem prostě zůstával u koupených šablon z Themeforestu. Vybíral jsem si ale alespoň ty, které používali Bootstrap základ. Ten jsem už uměl upravovat a rychleji jsem poznal, jak se který kousek šablony dělá.

TIP: Ten návod na šablonu si ale odložte, budete ho potřebovat jako nápovědu. Já nejsem kodér, jen vás nasměruju, abyste taky nemuseli být. Jako amatérům nám vzniknou dotazy, které ten návod umí zodpovědět.

Jednou jsem se doslova zamiloval do šablony, kterou jsem původně koupil kvůli Bankonautovi (tam původně nebyl plán, mít WordPress). Takže to nebyla WordPress šablona. Byla to prostě jen šablona. Uklidňoval jsem se, že určitě existuje i verze pro WP. Bohužel neexistovala. Můj plán vznikl proto, protože jsem se jí nechtěl vzdát.

1. Nahrál jsem šablonu do složky s názvem affilak

Tu jsem umístil do adresáře /wp-content/themes/ a nastavil správně práva CHMOD k souborům a složkám uvnitř i samotné složce affilak.

2. Pchopitelně jsem zjistil, že takhle to nefunguje

Musel jsme přidat soubor function.php a style.css.

3. Vyplnil jsem function.php

Do function.php jsem dal pár řádků rozsypaného čaje ze své poslední koupené WP šablony. Profíci tam nemají nic. Já tam měl pár vychytávek z minulosti. Na začátek jsem dal tyhle řádky:
<?php
/**
 * Affilak functions and definitions
 *
 * @package Affilák
 */

4. Hlavička do style.css

Do style.css jsem nemusel kopírovat styl, který šablona používá, a který se nachází někde v podadresářích. Soubor style.css ale musel existovat a musel být ve stejném adresáři jako index.php. V tom stylu stačí mít tuhle hlavičku:

/*
    Theme Name: Affilák
    Author: Affilák
    Description: Affilácká šablonka
    Version: 0.1
*/

5. Obrázek

Do stejného adresáře si dáte obrázek a pojmenujete ho screenshot.png – to bude náhledový obrázek šablony v přehledu šablon v administraci.

6. wp_head

Do hlavičky souboru index.php (později ho rozbijeme na header, index, sidebar a footer) dám tohle:

<?php
/**
* The main template file.
*
* @package Affilák
*/
?>

(asi je vám jasné, že místo Affilák budete do těch hlaviček dávat svůj název šablony) a do head části tohle:

<?php wp_head(); ?>

Bez toho by nemohla pracovat půlka pluginů a WordPress by nedokázal ovlivňovat hlavičku. Zobrazte si zdrojový kód webu a zjistěte, co všechno vám tahle funkce vypsala. Bude tam název webu, popis a další věci z nastavení WordPressu. Smažte duplicity, původně tohle vaše šablona měla natvrdo v kódu a teď je to tam teda dvakrát. My to chceme jen dynamicky od WP.

7. Úprava cest k potřebným souborům šablony

Vznikly nám teď nějaké další chyby. Hlavní problém je, že šablona je zvyklá si své potřebné části tahat z podadresářů a tak nějak očekává, že jsou v rootu. Jenže tam už nejsou. Jsme zahrabaní ve /wp-content/themes/nazev-vasi-sablony/. Nenačtou se proto css styly, obrázky ani scripty. Musíme jim opravit adresy.

Můžete už začít používat WordPress funkce, ať nepíšete adresu ručně. Třeba funkce get_template_directory vypíše adresu vedoucí k vaší šabloně. Takže najdu místa, kde se načítá nějaký soubor a přepíšu adresu tak, aby tahle funkce načetla to /wp-content/themes/affilak. Třeba takhle:

style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/media/photos/photo3@2x.jpg');"

Možná se to tak nemá dělat, ale funguje to a co funguje, to plní účel. Zkuste znovu načíst web po smazání historie a uvidíte, že se správně načetli obrázky, animace a styly.

Obrázky, které budete načítat normálně z uploads složky, prostě jen načtete takhle:

<img src="/wp-content/uploads/affilak_bile_velke.png" alt="Affilák" width="100px">

8. Hurá

Sranda je, že teď už vlastně máte WordPress šablonu. Samozřejmě je pořád dost hloupá a nedynamická, ale to zlepšíme. Od teď budete prostě jen vyčleňovat části indexu do jiných souborů a měnit statické části na dynamické WP příkazy.

9. Hlavička, patička, sidebar

Z indexu vyjmeme část s hlavičkou. Celou část, která se má zobrazovat stejná na všech podstránkách webu. Takže i tu část s menu. Vložíme to do nového souboru header.php. Namísto vyjmuté části v indexu dáme příkaz k načtení hlavičky z nového souboru. To uděláme tak, že ty první řádky upravíme na:

<?php
/**
* The main template file.
*
* @package Affilák
*/
get_header(); ?>

Totéž uděláme s patičkou. Vyčleníme patičku s js scripty, copyrightem a třeba i spodním menu do nového souboru footer.php. V indexu namísto vyjmuté části umístíme

<?php get_footer(); ?>

Totéž uděláme s bočním panelem. Vytvoříme soubor sidebar.php, vložíme do něj kus kódu zobrazující boční panel. Namísto něj v indexu umístíme

<?php get_sidebar(); ?>

10. Nekonečné dokončování

Ve stejném duchu pokračujte podle návodu, na který jsem odkazoval. Bylo by zbytečné ho kopírovat. Zkrátka vytvoříte soubory archive.php, comments.php, 404.php, page.php, single.php, search.php a tag.php. Může jich být víc, ale tohle je takový základ. U comments opět jen vyčleníte část s komentáři. Kde se mají komentáře zobrazovat, tam vložíte dynamickou část podle WP dokumentace. Hádám, že se mají zobrazovat v single.php (to je detail článku) pod článkem. Třeba:
<?php if ( comments_open() || get_comments_number() ) :?>
<?php comments_template();?>
<?php endif;?>

Tady už to začíná být dost individuální podle šablony, kterou předěláváte. Proto vám už nenakopíruju, co mám v comments.php. Můžete se ale inspirovat v základní předinstalované šabloně, kterou má každá WP instalace v sobě.

U ostatních zmíněných souborů dáte opět nahoru hlavičku, dolu patičku, sidebar na bok, pokud se vám hodí. Zvykem je, do page.php (stránka) ho dát a pak vytvořit verzi bez sidebaru a pojmenovat ji page-fullwidth.php.

Pak jdete po dynamických částech. Menu třeba nahradíte <?php wp_nav_menu(); ?> ať si ho můžete upravovat v administraci a ne zásahem do kódu. Nedělám katalog WP funkcí, proto už jen stručně:

Dynamické bude ještě:

• menu
• výpis posledních článků na homepage
• obecný výpis článků v archive.php (archiv konkrétního časového období, kategorie aj.)
• výpis článků konkrétního štítku (tag.php)
• stránkování pod výpisem článků
• vyhledávací formulář
• výpis článků pod výsledkem vyhledávání
• widgety v sidebaru
• u těch výpisů bude ještě dynamicky název, adresa prokliku, perex, náhledový obrázek, autor, počet komentářů, odkaz na komentáře, kategorie, štítky..
• v souboru komentářů podrobnosti jako formulář, výpis komentářů, odkazy na autory atp.
• + určitě jsem na něco zapomněl

Vím, že takhle to vypadá strašně. Postup je ale dost jednoduchý. Napíšete anglicky do googlu „wordpress“ a jeden z výše uvedených bodů, takže třeba „wordpress searchform“ nebo „wordpress post thumbnail“ a vždy vám vyskočí správná stránka z dokumentace WordPressu. Tam uvidíte i s příkladem, co máte pastnout a jaké to může mít parametry. Taky jsem neměl ponětí, co všechno mám nahradit a jak. Zjistil jsem to tak, že jsem to viděl rozbité a řešení poskytl Google. Kód může působit odstrašujícím dojmem, ale většinou jsem ho jen zkopíroval a vložil. Zjistil, jestli funguje a případně googlil dál.

Co dál?

Je to tak trochu nikdy nekončící proces. Vlastně do dneška tu šablonu zdokonaluju. Neustále hledám, co by se v ní dalo udělat lépe, dynamicky nebo nějak zautomatizovat. Vznikl z toho trochu moloch se spoustou podmínek, které už bych dnes udělal jinak, protože se v tom nedá vyznat. Stavím ale verzi 2.0, tak k tomu bude příležitost.

Možná si říkáte, že najít si jinou šablonu je mnohem lepší řešení. Jasně, že je. Ale díky té implementaci se naučíte v šabloně pohybovat. Jak vidíte na obrázku, můžu si třeba vložit funkci na počítání mého věku, abych nemusel přepisovat popisek o mně. Je obrovská svoboda moci si blog ohnout jakýmkoliv způsobem a nebýt odkázán na výrobce a jeho úmysly.

Podívejte se na mé články na mobilu. Obrázky jsou hezky od kraje ke kraji. To se mi moc líbí, viděl jsem to někde v zahraničí a díky této zkušenosti jsem byl schopný si to nastavit taky. Líbí se mi, že cokoliv na blogu můžu mít během pár minut na míru.

Na co dát bacha

Používal jsem bootstrap funkce na repsonzivitu. Různě jsem skrýval a odkrýval části webu na základě rozlišení přes .hidden a .visible. To fungovalo, ale tahle věc skutečně pouze skrývá části. Když jsem třeba individualizovat H1 nadpis, vznikl mi SEO problém. Měl jsem dva H1 nadpisy. Jeden pro desktop, druhý pro mobil a vyhledávač je viděl oba. WordPress má na tohle lepší řešení přes php: funkci <?php if ( wp_is_mobile() ) { ?>

Musím to teď předělávat na různých místech. Těch zdvojených textů je víc.

Technické SEO je obecně moje slabší stránka. Můj blog ale roste spolu s tím, co jsem se naučil. Každou novou zkušenost můžu uvést v praxi.

Vyplatí se to?

Možná přemýšlíte, jestli si raději nenajmout kodéra a všechny úpravy mu zadávat. Výsledek je stejný, i když o hodně dražší. Proč ne. Dělá to tak třeba Pat Flynn s webem smartpassiveincome. Z jeho starších reportů zjistíte, kolik to všechno stálo. Nejde ale jen o peníze.

Kromě toho, že vše můžu mít obratem, především vím, co by se dalo vymyslet. Napadá mě, co individualizovat. Mít kodéra, tak do toho nevidím. Nezískal bych přehled o tom, jak WP funguje, a jak důmyslný nástroj to je. Nenapadlo by mě, jaké chování můžu na WP změnit a jaké je už zásah do jádra. Možná bych vám doporučil si první vlastní šablonu postavit a na další už někoho zaplatit. Budete efektivní a o přehled nepřijdete.