Home

Jak vytvořit vlastní šablonu pro WordPress – 2 díl

Po několika dnech jsme zpět u seriálu, ve kterém vytvoříme vlastní responsivní WordPress šablonu. V minulém díle jsme si vysvětlili jak šablona postupuje při řazení souborů a které soubory potřebujeme. Dnes si připravíme všechny základní soubory, jenž nám umožní vytvořit již funkční základ šablony.

Ve složce themes vytvoříme novou složku, kterou nazveme dummy-theme (název je zcela na vás). V této složce vytvoříme další, které nazveme assets a v ní podsložky images (složky pro obrázky), js (složka pro javascriptové soubory) a css.

Použití Bootstrap pro základ WordPress šablony

Budeme používat Bootstrap pro responsivní design, protože nám umožní přeskočit vytváření stylů a responzivního gridu. Přestože jeho použití může být omezující, nám urychlí vývoj. Stáheneme si jeho kompilovanou verzi, která je ke stažení zde stáhnout Bootstrap.
Soubory potřebné pro Bootstrap uložíme do složek assets/css a assets/js, tak jak jsou uloženy ve staženém zipu. V případě, že se rozhodnete ve složkách udělat například assets/css/bootstrap a css soubory vložit tam, musíte na to myslet při linkování ze souboru functions.php.

Vytvoření prvních souorů šablony

V editoru si následně vytvoříme první soubory. Osobně používám Sublime, protože jsem na něj zvyklý.

Vytvoříme si následující prázdné soubory:

  • functions.php
  • header.php
  • footer.php
  • sidebar.php
  • style.css
  • index.php

které uložíme do složky složky šablony. Nyní si začneme vytvářet strukturu.

Header.php

Do tohoto souboru vložíme následující kód:

V sekci head jsme vytvořili hlavičku html dokumentu a použili funkci wp_head pro vytvoření hooku.
Následují divy, které budou tvořit tělo šablony. V těchto divech již jsou třídy, které Bootstrap využívá pro responsivitu. Row je div, jenž obaluje nějaký obsah. Container je třída s definovanou šířkou a je zarovnaná na střed. Touto třídou jsme vlastně vymezili šířku obsahu a jeho umístění doprostřed obrazovky.

Dále pokračujeme vytvořením titulku stránky a description, které se budou zobrazovat v hlavičce stránky.
Poslední je vložení menu pomocí wp_nav_menu, což je funkce, která umožňuje vytvořit místo pro menu, konfigurovatelné z administrace WordPressu. Samotné menu musíme ještě aktivovat ve functions.php, jak si ukážeme níže.
Poslední řádek souboru obsahuje začátek divu, který ukončíme ve footer.php a opět obsahuje třídu Bootstrapu, protože musíme odstranit levý margin u prvního divu v obsahu. Pokud se chcete dozvědět více, přečtěte si Bootstrap Grid System – jak funguje Bootstrap není součástí tohoto návodu. Důležité je, že to funguje.

Footer.php

Vytvoříme soubor footer.php, který je opak header.php a celou šablonu uzavírá. Do souboru vložíme následující kód:

První div uzavírá ten, kterým jsme otevřeli na konci header.php, bez uzavření by se nám to celé rozsypalo. Pomocí date(), home_url() a bloginfo() vytvoříme patičku, která se nám bude aktualizovat podle toho, kam šablonu nasadíme a nemusíme nic upravovat. Následně zavoláme wp_footer() a ukončíme html dokument. Footer.php máme nyní připravený.

Index.php

V tuto chvíli si připravíme tělo šablony, soubor index.php, který bude připraven pro výpis příspěvků.

Na začátku souboru načteme header pomocí get_header(), vytvoříme divy col-8 a col-4, čímž rozdělíme obsah na dvě třetiny a třetinu, do třetinové části načteme sidebar pomoci get_sidebar(). Nakonec vložíme footer.php pomocí get_footer().

Samotný obsah vypíšeme pomocí if have_post, což je část označovaná jako loop. WordPress zobrazuje články, nebo stránky, podle toho co se má v danou chvíli zobrazovat, pokud se nic nenalezne, vypíše se not found. Uvnitř loopu použijeme tři funkce, a to the_title() pro název postu, the_permalink() pro odkaz na post a the_excerpt(), který vypíše zkrácenou část postu. Pokud bychom do šablony později nepřidali soubory single.php a page.php, museli bychom použít the_content(), což vypíše celý obsah článku.

Sidebar.php

Nyní vytvoříme sidebar

V tomto souboru nejprve zjistíme, zda je aktivní definovaný sidebar a pokud ne, zobrazíme defaultní kód. Mnoho šablon má takto připraven třeba poslední komentáře, poslední příspěvky a vyhledávací formulář.
Použil jsem pouze vyhledávácí formulář, aby se nám sidebar zobrazil, i když nebude aktivní.
Pozn.: předchozí verze skriptu obsahovala chybu, kterou jem 31.12.2018 opravil.

Functions.php

Tento soubor se někdy nazývá magickým souborem. Pomocí něj můžete ovlivňovat vše co na obrazovce objeví a my si do něj vložíme tři funkce.
V první zaregistrujeme místo pro Primary menu a přidáme šablonš podporu pro náhledové obrázky a další.
Druhou definujeme sidebar a tvar pro widgety.
Třetí načteme pomocí wp_head hooku externí scripty a styly. Jsou to styly Bootstrapu

Funkce rozebírat nebudu, je to myslím jasné, jen připomenu, že pomocí enqueue načítáme soubory Bootstrapu a scritpy, které vyžaduje, bez toho by nám responsivní šablona nefungovala. Kdo neví jak funguje enqueue doporučuji přečíst tento článek.

Style.css

Poslední soubor, který potřebujeme, je style.css, do kterého budeme zapisovat styly šablony. Na počátek souboru vložíme následující kód:

Tento kód identifikuje šablonu a bez něj se vám ji nepodaří nainstalovat. Nejdůležitější je Theme name, podle kterého si pak v administraci šablonu najdete. Zatím soubor necháme kromě tohoto kódu prázdný, vzhledem k tomu, že jsme vložili css soubor Bootstrapu, základní styly šablona převezme.

Úplně nakonec musíme vytvořit png obrázek, může být i jen jedna barva, nazveme jej screenshot a vložíme do složky. Velikost obrázku by měla být 600px x 450px, což je doporučená velikost pro kvalitní zobrazení i na hd přístrojích.

Tím jsme dokončili základní kostru šablony a pokud ji nyní aktivujeme, měla by již fungovat. V příštím díle začneme doplňovat složku o soubory single.php, page.php, archiv.php a další. Přestože jsme to dnes vzali letem světem, bylo to nutné pro vytvoření základu, z kterého budeme dále vycházet.

Pokud jste minuli předchozí díl, doporučuji také přečíst První díl seriálu

Návod byl aktualizován k 5.1.2019

Seriál: Jak vytvořit vlastní šablonu pro WordPress

Tags:

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Související články

35 Comments

  1. Začátečník 007

    Zdravím je to hezky napsaný konečne něco čemu rozumím alespoň z poloviny :) Když už jsem na blogu wp experta, rád bych se něco zeptal. Chci si dát někomu upravit šablonu TwentyTwelve (http://wordpress.org/themes/twentytwelve) teda oficiální wordpress šablonu po dizajnové stránce – jenom upravit vzhled, barvy, CSS. Co se pak stane když časom pro TwentyTwelve přijde nějaká aktualizace šablóny a já ji tedy aktualizuji – ty „moje“ změny jednoduše zmizí? A budu si zase muset zaplatit tutéž úpravu? Děkuji moc :) za odpověď.

    Odpověď
  2. Musilda

    To se řeší pomocí child theme, v podstatě se vytvoří složka šablony, která čerpá všechny zdroje z rodičovské šablony, takže pokud se bude měnit jen styl, tak stačí mít ve složce jen soubor style.css se změnami. Potom se po aktualizaci rodičovské šablony úpravy nesmažou a zároveň budou dostupná vylepšení z aktualizace. Více zde http://codex.wordpress.org/Child_Themes

    Odpověď
  4. Musilda

    Děkuji za upozornění, odkaz jsem upravil. Bez těch souborů se samozřejmě dá obejít, ale pak nebude šablona responsivní.

    Odpověď
  6. JV

    Zdravím,
    stránka Jak vytvořit vlastní šablonu pro WordPress – 2 díl je nějaká rozsypaná.

    Odpověď
  8. Bzzuk

    Ahoj,

    nevím, jestli jsem to špatně okopíroval (zkoušel jsem to 2x), ale celý kód, který je ve functions.php se mi vypisuje na hlavní stránku. Tudíž mi šablona nefunguje.

    Odpověď
  9. Musilda

    Ahoj
    díval jsem se, je to divné. zkus si prověřit kódování souboru, ale v každém případě musí to být php soubory. Tohle se mi ještě nestalo.

    Odpověď
  10. Musilda

    Ano, takto by to mělo vypadat, je to jen základ, bez stylů. Ještě se podívej na kódování souboru footer.php, jsou tam divně české znaky.

    Odpověď
  11. Ondřej Komár

    Dobrý den,

    chtěl bych se zeptat jakým nejefektivnějším způsobem tvořit stránky pomocí wordpressu z nějakého wireframe?
    Je lepší si najít podobnou šablonu a tu posléze upravovat nebo ji vytvářet od začátku, jak popisujete ve svém tutoriálu. Nebo používat nějaký software?

    Děkuji

    Ondra Komár

    Odpověď
    1. Musilda

      Určitě je jednodušší vzít základní šablonu, která je ve WordPressu a na té se učit.

      Odpověď
  12. Petr

    Pěkný článek, moc mi pomohl, při vytváření šablony pro wordpess a doufám že už nikdy nebudu muset šahat na wordpress.
    Trochu mě zaskočilo, když při vytváření šablony se nepoužívá šablonovací systém a pere se tam čisté php, to je jak počítat PI na třetí na dřevěném počítadle.

    Odpověď
  13. PetrK

    Zdravím, v první řadě velké díky za pěkný tutoriál, snad se díky němu konečně dostanu na kobylku WordPressu :-)

    Nicméně mám dva dotazy:
    1) 2x se mi vypisuje sidebar a marně hledám kde co není uzavřené. Nějaký tip ze zkušenosti?
    2) Bootstrap jsem doposud nepoužíval ač už se na něj nějaký ten pátek chystám.. No… možná by to chtělo malý update, či info. Bootstrap 3 už nepoužívá bootstrap-responsive.css. Stáhl jsem si tedy starší verzi, ale menu v této fázi nejeví žádné známky responsivity, je to tak OK? Jen obyčejný seznam. (a vlastně ani třída „sf-menu“ ve stylech nikde není…)

    Díkky
    P.

    Odpověď
    1. rastik1585

      Ahoj
      Bootstrap3 má v sebe všetko čo potrebuješ čo sa týka responsibility a je zbytočné sťahovať staršiu verziu. V documentácii sa dá dobre a pekne naučiť ako sa vytvára responsibilita. Na tomto linku http://getbootstrap.com/getting-started/ nájdeš aj linky na najnovšiu verziu bootstrapu . U neho je veľmi dôležité pridať bootstrap.js bez ktorého responsibilita nefunguje. Ak by si potreboval poradiť kludne napíš mail.

      Odpověď
    2. Kubrt

      Sidebar se vypisuje dvakrát, protože v souboru sidebar.php na prvním řádku je použita podmínka s funkcí dynamic_sidebar(), která sice vrací hodnotu typu bool, ale zároveň vypíše kód sidebaru. Doporučuji tuto funkci nahradi funkcí is_dynamic_sidebar(), která ověří, zda je k dispozici sidebar, ale nevypíše jeho obsah.

      Odpověď
  14. Vojta

    Ahoj v článku píšeš ¨Poslední je vložení menu pomocí wp_nav_menu…¨ v ukázkách kódu, to vložení menu ale chybí…

    Odpověď
  15. Radek

    Zdravím, ve footer se mi špatně zobrazují znaky, nevíte čím by to mohlo být?
    ukázka: V�echna pr�va vyhrazena

    Zkopírované to mám správně.

    Odpověď
  16. Tom

    U kódu functions.php chybí značky pro php a navíc se kód nezobrazuje celý, protože PRE max-height: 600px;

    Odpověď
  18. Zbynek

    Ahoj,
    článek super, ale i po tom co někdo v r. 2015 upozornil na 2 zobrazení sitebaru to nebylo opraveno, takže jsem musel znova tento krok projít a až z diskuze zjistit kde je chyba. Takže na jedná straně by to opravdu chtělo opravit, na druhé straně chybama se člověk učí :-)

    Odpověď

  19. Pingback: Jak vytvořit vlastní šablonu pro WordPress – 3 díl - Musilda.cz

    1. Musilda

      Dobrý den,
      na první pohled vypadá, že se vám stránka načetla. Co přesně nefunguje?

      Odpověď

Přidejte komentář

Vaše e-mailová adresa nebude zveřejněna.