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
- Jak vytvořit vlastní šablonu pro WordPress 1.díl
- Jak vytvořit vlastní šablonu pro WordPress 2.díl
- Jak vytvořit vlastní šablonu pro WordPress 3.díl
- Jak vytvořit vlastní šablonu pro WordPress 4.díl
- Jak vytvořit vlastní šablonu pro WordPress 5.díl
- Jak vytvořit vlastní šablonu pro WordPress 6.díl
- Jak vytvořit vlastní šablonu pro WordPress 7.díl
- Jak vytvořit vlastní šablonu pro WordPress 8.díl
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ěď.
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
Zdravím,
Chtěl bych poukázat že tato webová adresa nefunguje: http://twitter.github.io/bootstrap/
Ptám se je nějaká alternativní stránka pro toto? Jde se bez souborů odtamtud obejít?
Děkuji za upozornění, odkaz jsem upravil. Bez těch souborů se samozřejmě dá obejít, ale pak nebude šablona responsivní.
Mohu se zeptat jaký má pan Musílek email? Děkuji
Zdravím,
stránka Jak vytvořit vlastní šablonu pro WordPress – 2 díl je nějaká rozsypaná.
Děkuji, ještě že jsou ve WordPressu revize.
Zdravím, dal jsem si do záhlaví odkaz pomocí tagu a ve výsledku se před odkazem zobrazuje logo wordpressu (W). Jde někde nastavit, aby se toto logo před odkazem nezobrazovalo?
Děkuji :-)
Dobrý den
nebyl by odkaz na šablonu? Takto vám to nemohu říci.
Šablonu používám základní – Twenty Ten
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.
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.
Ahoj,
zkusil jsem do functions.php doplnit . Kód mi to už nevypisuje a vypadá to teď takhle: http://wptemplate.moxo.cz/
Je to tak správně?
Doplnil jsem tam standardní značky začátku a konce php.
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.
Děkuji moc. Teď už by to mělo být v pořádku.
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
Určitě je jednodušší vzít základní šablonu, která je ve WordPressu a na té se učit.
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.
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.
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.
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.
To je pravda, už bych to měl upravit.
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í…
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ě.
Už jsem to vyřešil, všiml jsem si že jsou v dalším díle soubory ke stažení.
Děkuji za super návody :)
Je to způsobené kódováním souboru.
U kódu functions.php chybí značky pro php a navíc se kód nezobrazuje celý, protože PRE max-height: 600px;
škoda že se kód Header.php nezobrazuje celý :( a nejde rolovat
http://prntscr.com/annzh7
Děkuji za upozornění, opraveno.
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čí :-)
No jo, je to ostuda.
Pingback: Jak vytvořit vlastní šablonu pro WordPress – 3 díl - Musilda.cz
Prosím pomoc. Nemůžu přijít na to, proč mi v localhostu stránky nefungují :-(
Screen: https://ctrlv.cz/2MQK
Děkuji
Dobrý den,
na první pohled vypadá, že se vám stránka načetla. Co přesně nefunguje?