Průvodce možnostmi tvorby témat pro WordPress
- 14 min čtení
- WordPress,Techniky (WP)
- Uloženo pro offline čtení
- Sdílet na Twitteru, LinkedIn
Na nedávném WordCamp Edinburgh jsem se zúčastnil panelové diskuse o vývoji témat WordPress a možnostech, které mají vývojáři k dispozici při vytváření témat. Převládajícím závěrem ze zasedání bylo, že neexistuje univerzální odpověď a že nejlepší metoda závisí na potřebách webu a schopnostech vývojáře.
Jak se ale rozhodnout, který přístup zvolit, pokud s tvorbou témat pro WordPress začínáte nebo chcete vyvinout systém pro jejich efektivnější či robustnější tvorbu? V tomto článku stručně popíšeme, jak témata WordPress fungují, a poté se podíváme na některé z různých přístupů k jejich vývoji s tipy, který přístup by mohl být pro váš web a okolnosti nejvhodnější.
Další čtení na SmashingMag:
- Migrace webu do WordPressu je jednodušší, než si myslíte
- Použití WP_Query ve WordPressu
- Naplánování událostí pomocí WordPress Cron
- Jak zlepšit nasazení webových stránek WordPress
Jak funguje šablona WordPress?
Motivy ve WordPressu řídí webové stránky a určují, co obsahují, jak se chovají a jak vypadají. Motiv je oddělen od obsahu, který je uložen v databázi. To znamená, že stejné téma můžete použít na více než jednom webu bez ohledu na obsah těchto webů – což už možná děláte, pokud jste si stáhli témata z úložiště témat WordPressu.
Téma se skládá z několika souborů šablon, které jsou uloženy ve složce témat, kterou v instalaci WordPressu najdete ve složce wp-content/themes. Každý motiv WordPressu musí obsahovat alespoň dva soubory: index.php a style.css. Soubor index určuje, jaký obsah se pomocí motivu zobrazí, a soubor stylů (hádáte správně) jej stylizuje a také obsahuje metainformace o motivu, které WordPress používá ke správnému fungování motivu.
Ve skutečnosti má většina motivů několik dalších souborů:
-
header.phpObsahuje část<head>každé stránky a navíc hlavičku návrhu webu. -
sidebar.phpObsahuje postranní panel včetně případných oblastí widgetů. -
footer.phpObsahuje patičku, která může, ale nemusí mít oblasti widgetů. -
functions.phpObsahuje všechny funkce, které jsou specifické pro vaše téma. Informace o souborech funkcí najdete v kodexu WordPressu. - Soubory, které obsahují smyčky, které volají obsah z databáze. Podle toho, ve které části webu pracujete, to může být jeden z několika souborů:
-
page.phpPro statické stránky -
single.phpPro jednotlivé příspěvky (například příspěvky na blogu) -
index.php,archive.php,category.phpatd. Pro stránky, které obsahují seznam několika příspěvků
-
Yoast napsal skvělé vizuální znázornění toho, jak soubory témat fungují, a kodex WordPressu obsahuje podrobný popis témat, včetně podrobností o jednotlivých souborech a o tom, kdy se volají.
Tvrdím však, že list stylů je nejdůležitějším souborem a že s ním pravděpodobně začnete, protože „dětské téma“ (o tom více za chvíli) potřebuje list stylů, i když neobsahuje nic jiného. List stylů obsahuje důležité metainformace o samotném tématu, které jsou zakomentovány před všemi styly. Níže jsou uvedeny úvodní komentáře pro aktuální výchozí téma WordPressu, Twenty Eleven:
Tyto informace jsou zakomentovány, takže je prohlížeče nečtou, ale čte je WordPress a poskytuje informace všem, kteří vaše téma používají. K tomu se brzy vrátíme, až se budeme zabývat tím, jak vytvořit podřízené téma.
Teď, když víte, jak témata fungují, je dalším krokem zjistit, jak postupovat při vytváření vlastního tématu. Než začnete, stálo by za to zvážit několik bodů, které vám při rozhodování pomohou.
Co vzít v úvahu při vývoji tématu WordPressu?
Předtím, než se rozhodnete, jaký přístup k vývoji tématu zvolíte, určete svá omezení. Mezi ně pravděpodobně patří následující:
- Čas. Kolik času máte na vývoj tématu nebo na to, abyste se naučili, jak to udělat?
- Rozpočet. To souvisí s časem, ale také s tím, zda si můžete dovolit zaplatit za prémiové téma nebo framework tématu.
- Schopnosti. Jak jste obeznámeni s vývojem témat, s CSS a PHP a s tím, jak témata fungují? Pokud nejste obeznámeni, jak moc se chcete učit?
- Zabezpečení do budoucna. Bude třeba vaše téma v budoucnu aktualizovat? Budou na něm kromě vás pracovat i další vývojáři? Pokud ano, pak váš přístup bude muset být co nejrobustnější.
- Opakování. Počítáte s tím, že budete v budoucnu vyvíjet řadu podobných témat? Pokud ano, váš přístup bude muset umožnit opakované použití kódu.
K těmto úvahám se vrátíme na konci článku a určíme, které možnosti vývoje jsou pro různé situace nejvhodnější.
Vývoj témat: Vaše možnosti
Pro vývoj tématu nebo témat je k dispozici několik možností, které by bylo vhodné prozkoumat dříve, než si vyhrnete rukávy a začnete kódovat. Výběr správného přístupu povede k vytvoření lepšího tématu s robustnějším kódem a minimalizuje množství revizí, které budete muset později provádět. Pomůže vám to také k efektivnějšímu vytváření tématu.
Možnosti, na které se zde podíváme, jsou následující:
- Vytvořit téma od začátku,
- Upravit (někdo by řekl „hacknout“) existující téma,
- Použít nástroj pro přizpůsobení tématu k úpravě existujícího tématu,
- Vytvořit podřízené téma pro provedení změn v existujícím tématu,
- Vytvořit vlastní nadřazené téma (pomocí jednoho z výše uvedených přístupů) a podřízená témata,
- Použít rámec tématu.
1. Vytvoření tématu od nuly
Tento přístup je nejobtížnější, pokud nemáte zkušenosti. Pokud jste však zkušený vývojář WordPressu, poskytne vám největší kontrolu. Může to být nejvhodnější metoda, pokud importujete HTML ze stávajícího statického webu, který se do WordPressu převádí bez dalších změn.
Při převodu webu do WordPressu je však dobré provést v rámci tohoto procesu jeho revizi, a ne pouze překopírovat kód. Pokud kopírujete statickou webovou stránku, budete muset na kód pečlivě dohlížet, aby byl čistý, efektivní a validní.
2. Upravte (nebo hackněte) existující téma
Takto začíná většina lidí s vývojem témat pro WordPress: při práci na tématu, které si stáhli, zjistí, že některé styly nejsou zcela v pořádku, a tak se ponoří do listu stylů a provedou některé úpravy. Začít takto je lákavé, protože to vypadá jako rychlý a snadný způsob, jak dosáhnout požadovaného efektu. Existuje však několik nebezpečí:
- Pokud někdy změníte téma, tato aktualizace přepíše všechny provedené změny.
- Je snadné přidat opakující se kód přidáním nových stylů níže v listu stylů, které přepíší styly výše, místo abyste odstranili to, co nepotřebujete.
- Webová stránka by nakonec mohla mít mnohem více kódu, než potřebuje.
- Pokud není téma na začátku dobře nakódované nebo okomentované, můžete si zadělat na větší problém a zjistit, že musíte provést spoustu oprav.
Hackování tématu však může fungovat, pokud do něj jdete s otevřenýma očima. Může to být možnost, pokud platí následující:
- Téma, které používáte, je dobře napsané, validní a okomentované (např, výchozí téma WP, Twenty Eleven);
- Změny, které provádíte, jsou natolik drastické, že byste původní téma nemuseli aktualizovat;
- Znáte PHP a CSS obsažené v tématu a jste schopni je pohodlně upravovat, doplňovat a odstraňovat, aniž byste téma porušili.
Pokud se rozhodnete jít touto cestou, je důležité uchovávat zálohu původního tématu a důkladně komentovat kód. Doporučuji také zakomentovat veškerý kód, který nechcete, a poté vyzkoušet, co se stane, než cokoli odstraníte.
3. Použijte nástroj pro přizpůsobení tématu k úpravě stávajícího tématu
Přípravek pro přizpůsobení tématu byl vydán s WordPressem 3.4. Tento nástroj pro přizpůsobení tématu se používá k úpravě stávajícího tématu. Dává vám možnost přizpůsobit téma bez psaní kódu, jednoduše pomocí rozhraní WYSIWYG. V závislosti na tom, jak dobře je nástroj pro přizpůsobení napsán v samotném tématu, můžete pomocí něj měnit obrázky, nadpisy, barvy a dokonce i rozvržení. Očekávejte, že se objeví více témat s integrovaným nástrojem pro přizpůsobení.
Přizpůsobení tématu ukládá vaše změny do samostatného souboru, nikoli do listu stylů tématu, takže se bude opakovat kód.
Další informace najdete ve videonávodu Otto on WordPress nebo v průvodci integrací nástroje pro přizpůsobení tématu do vlastních témat.
4. Vytvoření dětského tématu pro provedení změn v existujícím tématu
Tento přístup je podobný úpravám existujícího tématu, ale je bezpečnější. Spočívá ve vytvoření zcela nového motivu, který je definován jako potomek existujícího motivu. Pokud vaše podřízené téma nemá konkrétní soubor, ale rodičovské téma ano, použije se tento soubor. Pokud podřízené téma nějaký soubor má, přepíše tento soubor ekvivalentní soubor v nadřazeném tématu. Podívejme se na příklad:
| Soubory rodičovského motivu | Soubory podřízeného motivu |
|---|---|
. |
|
V uvedeném příkladu, WordPress by k doručení obsahu použil následující soubory:
-
style.cssz podřízeného tématu, -
page.phpz podřízeného tématu, -
single.phpz rodičovského tématu, -
archive.phpz rodičovského tématu, -
header.phpz podřízeného tématu, -
sidebar.phpz rodičovského tématu, -
footer.phpz rodičovského tématu.
Dovedete si představit, jak by to bylo užitečné, kdybyste chtěli použít většinu značek rodičovského tématu, ale změnit obsah záhlaví (přidat například své logo a údaje o adrese) a případné statické stránky (třeba změnit způsob zobrazení metadat).
Jediným souborem, který musí mít každé podřízené téma, aby fungovalo, je list stylů, protože obsahuje informace, které WordPress potřebuje ke správnému fungování podřízeného tématu. Za tímto účelem přidejte do komentářů k listu stylů několik dalších kódů:
Všimnete si řádků navíc? První z nich je:
Template: twentyelevenTento řádek říká WordPressu, že téma je podřízené téma a že Twenty Eleven je jeho rodičem. Měli byste doplnit název adresáře rodičovského tématu, nikoli jeho celý název.
A druhý:
@import url("../twentyeleven/style.css");Tento řádek říká prohlížeči, aby načetl list stylů rodičovského tématu před vykreslením některého ze stylů v aktuálním listu stylů. Tím se zbavíte nutnosti duplikovat všechny styly v rodičovském motivu, které chcete použít.
Takto tedy fungují podřízené motivy. Kdy je však tento přístup nejlepší? Doporučil bych ho použít v následujících případech:
- Již máte téma (které chcete použít jako rodičovské), které obsahuje většinu toho, co potřebujete pro své téma;
- Chcete mít možnost aktualizovat své rodičovské téma (například při vydání aktualizace tématu po aktualizaci WordPressu);
- Nechcete se nechat svázat uzly z hackování existujícího tématu;
- Chcete mít možnost vrátit se k rodičovskému tématu nebo v budoucnu vytvořit jiné podobné téma (což by bylo nové podřízené téma);
- Vyvíjíte několik podobných webů s drobnými stylistickými nebo obsahovými rozdíly (dělal jsem to při tvorbě podobných webů pro klienta, který vlastnil více firem);
- Rozdíl mezi podřízeným a rodičovským tématem není tak velký, abyste museli začít od nuly, nebo není tak velký, aby kód vašeho podřízeného tématu přepsal vše, co ovlivní aktualizace rodičovského tématu.
5. Vytvoření vlastního nadřazeného tématu (jedním z výše uvedených přístupů) a dětských témat
Situace, o které jsem se právě zmínil, tedy vytváření sady webových stránek pro klienta s více společnostmi, je příležitostí, kdy můžete vytvořit nadřazené téma a poté nastavit dětská témata pro jednotlivé webové stránky. Možná to budete chtít udělat i v následujících případech:
- Máte v plánu v budoucnu vytvořit mnoho webů s podobným obsahem a značkováním (nejen pro jednoho klienta);
- Spravujete mnoho webů a musíte se pravidelně nořit do každého z nich a chcete, aby byl kód velmi podobný;
- Pohodlně si vytvoříte vlastní rodičovské téma, upravíte kód a vytvoříte robustní rodičovské téma, které bude dobře fungovat s podřízenými tématy.
Pokud se rozhodnete pro tento přístup, můžete buď vytvořit své rodičovské téma od začátku, nebo hacknout existující téma. Pro většinu webů, které vytvářím, používám rodičovské téma, které jsem vytvořil hacknutím tématu Twenty Ten, bývalého výchozího tématu pro WordPress. Provedl jsem tolik změn, že jsem již nepotřeboval aktivovat aktualizace původního tématu. Také mi vyhovoval kód v tématu a chtěl jsem v něm provést významné změny, omezit kód, restrukturalizovat ho tak, aby vyhovoval mému způsobu práce, a odstranit kód, o kterém jsem věděl, že ho nebudu potřebovat.
Můžete také vytvořit podřízené téma založené na existujícím tématu a pak pro něj vytvořit podřízená témata – v podstatě vnuky původního tématu. Výhodou tohoto postupu je, že nepřepisujete kód v původním tématu a zároveň máte možnost flexibilně provádět úpravy v podřízeném tématu, které se přenesou do témat vnoučat. Zde však jedno varování: se třemi používanými motivy se snadno stane, že se zmýlíte v tom, co se děje, a můžete skončit se spoustou zbytečného kódu.
6. Použijte rámec motivu
Poslední možností je ta, kterou používají tisíce uživatelů a vývojářů WordPressu. Existuje řada rámců témat, které můžete použít jako jakési nadřazené téma, ale s mnohem větší funkčností a v některých případech i s možností provádět poměrně efektní změny rozvržení a stylů bez nutnosti psát řádek kódu. Některé frameworky jsou zdarma, jiné jsou prémiové. Podrobně jsme je již recenzovali na stránkách časopisu Smashing Magazine, ale ty hlavní uvádíme níže:
Free WordPress frameworky:
- Theme Hybrid obsahuje nesčetné množství háčků a oblastí pro widgety, které vám pomohou přizpůsobit si motivy. Má také k dispozici několik podřízených témat. Všechny frameworky a podřízené motivy jsou zdarma, ale pokud chcete podporu, musíte za ni zaplatit registrací na webu Theme Hybrid. Práce s ním může být poměrně složitá, pokud nerozumíte PHP nebo nepoužíváte některé z podřízených témat.
- Wonderflux je založen na flexibilním mřížkovém systému. Má možnosti úpravy rozvržení a stylů bez nutnosti psát kód a obsahuje spoustu háčků a oblastí pro widgety. Je zdarma a je podporován prostřednictvím fóra WordPressu.
- Carrington je nejzavedenější z bezplatných frameworků a má řadu podřízených témat.
- Thematic je vyvinut společností Automattic, která vyvíjí samotný WordPress. Obsahuje řadu háčků, filtrů a oblastí widgetů.
Premiové frameworky WordPress:
- Jeho vývojáři označují Genesis za „průmyslový standard“. Nabízí širokou škálu podřízených témat, možnosti přizpůsobení bez psaní kódu a funkce SEO.
- Dalším velkým prémiovým frameworkem je Thesis, který také nabízí možnost přizpůsobení podřízených témat bez psaní kódu.
Shrnutí: Výběr přístupu
Je pravděpodobné, že po přečtení tohoto článku máte představu, kterým přístupem se vydat. Ale v případě, že se stále škrábete na hlavě, zde je shrnutí, kdy je která metoda vhodná:
| Přístup | Čas | Náklady | Schopnost | Budoucí-proofing | Repetition |
|---|---|---|---|---|---|
| Build from scratch | High | Low | Vysoký | Nízký | Nízký |
| Hack stávajícího tématu | Nízký | Nízký | Střední | Nízká | Nízká |
| Použít nástroj pro přizpůsobení motivu | Nízká | Nízká | Nízký | Nízký | Nízký |
| Vytvořit podřízené téma na základě existujícího rodičovského | Střední | Low | Medium | High | High |
| Vytvořit nadřazené téma | High | Nízký | Vysoký | Vysoký | Vysoký |
| Rámec tématu (zdarma) | Střední | Nízký | Střední | Vysoký | Vysoký |
| Theme framework (premium) | Střední | Vysoký | Nízký až střední | Vysoký | Vysoký |
Celkem, každý přístup má své místo; záleží jen na webových stránkách a na vás. Důležité je zvolit přístup po zvážení všech pro a proti – ne se do toho jen tak vrhnout a zkusit to, jen abyste zjistili, že jste téma rozbili nebo že jste si vytvořili spoustu práce navíc.
A jako vždy, ať už se rozhodnete jakkoli, nezapomeňte na zálohování!
(al)