Chcete vytvořit vlastní téma WordPress od začátku?
V minulosti jste museli postupovat podle kodexu WordPress a mít slušné znalosti kódování, abyste mohli vytvořit vlastní téma WordPress. Ale díky novým generátorům motivů WordPress může nyní kdokoli do hodiny vytvořit zcela vlastní téma WordPress (není třeba znalost kódování).
V tomto článku vám ukážeme, jak snadno vytvořit vlastní téma WordPress bez psaní jakéhokoli kódu.
Vytvoření vlastního motivu WordPress pro začátečníky
Na rozdíl od statických stránek HTML jsou motivy WordPress sada souborů šablon napsaných v PHP, HTML, CSS a JavaScriptu. Obvykle byste potřebovali mít slušné znalosti všech těchto jazyků webového designu nebo najmout webového vývojáře, aby vytvořil vlastní téma WordPress.
Pokud jste si najali vývojáře nebo agenturu, pak náklady na vlastní téma WordPress mohou dosáhnout tisíců dolarů.
Protože mnoho majitelů malých podniků si nemohlo dovolit vysoké náklady na vlastní téma WordPress, spousta z nich se vyrovnala s výchozími motivy dodávanými s WordPress.
Ti, kteří se nechtěli vyrovnat a chtěli přizpůsobení, buď použili drag & zruší Tvůrce stránek WordPress, nebo k vytvoření vlastního motivu použili rámec motivu.
Zatímco rámce motivů WordPress usnadnily vytváření motivu WordPress, jsou řešením pro vývojáře, nikoli průměrného vlastníka webu .
Na druhou stranu díky pluginům pro vytváření stránek WordPress bylo velmi snadné vytvářet vlastní rozvržení stránky pomocí drag & drop rozhraní, ale byly omezeny pouze na rozvržení pouze. S tím jste nemohli vytvářet vlastní motivy.
Dokud se Beaver Builder, jeden z nejlepších pluginů pro tvorbu stránek WordPress, rozhodl tento problém vyřešit pomocí svého doplňku s názvem Beaver Themer.
Beaver Themer je doplněk pro tvorbu webů, který umožňuje vytvářet vlastní rozvržení motivů pomocí rozhraní drag and drop a bez nutnosti programování.
Pojďme se podívat na to, jak použít Beaver Themer pro snadné vytvoření motivu WordPress.
Výukový program videa
Pokud se vám video nelíbí nebo potřebujete další pokyny, pokračujte ve čtení.
Nastavení Beaver Themer na Vytvořte si vlastní motiv
Beaver Themer je doplněk pro Beaver Builder, takže pro tento článek budete potřebovat oba pluginy.
Nejprve musíte nainstalovat a aktivovat doplňky Beaver Builder a Beaver Themer. Další informace najdete v našem podrobném průvodci instalací pluginu WordPress.
Beaver Themer vám umožní vytvořit si vlastní motiv, ale pro začátek budete stále potřebovat motiv. Jako úvodní téma doporučujeme použít lehké téma, které obsahuje šablonu stránky v plné šířce.
Mnoho takových motivů najdete v adresáři motivů WordPress.org. Většina moderních témat WordPress obsahuje šablonu plné šířky. Naše nejlepší tipy jsou:
- Astra – bezplatné lehké univerzální téma WordPress, které je dodáváno s integrovanou podporou pro Beaver Builder.
- OeanWP – další oblíbené bezplatné víceúčelové téma WordPress, které přichází s plnou podporou pro tvorbu stránek.
- Témata StudioPress – Všechna jejich témata jsou kompatibilní s Beaver Builder a s Beaver by fungovala skvěle Themer.
Kvůli tomuto výukovému programu budeme používat Astru, která je lehká a snadno přizpůsobitelná WordPress.
Nastavení motivu pro Beaver Themer
Při vytváření vlastního motivu WordPress s Beaver Themer je důležité zajistit, aby měl Beaver Themer přístup k celému tělu stránky (z od okraje k okraji).
Toto je výchozí rozložení Astry. Jak vidíte, toto rozložení obsahuje postranní panel, se kterým je při použití Beaver Themer obtížné pracovat.
Můžete změnit to můžete tak, že navštívíte panel pro správu svého webu a poté přejdete na stránku Vzhled „Přizpůsobit. Odtud je třeba přepnout na kartu Rozvržení“ Postranní panely.
Jakmile tam budete, jednoduše vyberte možnost „Žádný postranní panel“ pod možností výchozího rozvržení a kliknutím na tlačítko Publikovat uložte změny .
Váš motiv nyní začne používat rozložení bez postranních panelů. Toto je nejlepší rozložení, které lze v Beaver Themer použít.
Toto celostránkové rozložení umožňuje Beaver Themer využít každý centimetr na obrazovce, takže můžete vytvořit krásný vizuální zážitek.
Většina motivů WordPress obsahuje soubor šablony pro stránky s plnou šířkou. Pokud používáte jiné téma, můžete v nastavení motivu najít možnost odebrání postranních panelů.
Pokud jej nemůžete najít, obraťte se na svého vývojáře motivů, který vám s tím může pomoci.
Jakmile nastavíte motiv na rozložení na celou šířku, jste připraveni vytvořit si vlastní motiv WordPress pomocí nástroje Beaver Themer.
Základy Quick Beaver Themer
Beaver Themer pracuje nad Beaver Builder. Jako plugin pro vytváření stránek umožňuje Beaver Builder přetahování položek na stránku a vytváření vlastních rozvržení.
Má následující položky, které můžete použít ve svých rozloženích:
- Šablona: Kolekce řádků sloupců a modulů, které tvoří celé rozložení stránky.
- Sloupce: Vertikální moduly rozložení, které pomáhají vodorovně zarovnat obsah.
- Řádky: Horizontální kolekce více modulů
- Modul: Položka, která poskytuje konkrétní informace, jako je nadpis, textový blok, tabulka, galerie atd.
Jednoduše upravte stránku v nástroji Beaver Builder a poté klikněte na tlačítko Přidat v pravém horním rohu. Poté můžete na stránku přetáhnout sloupce, řádky, moduly a ihned je začít upravovat.
Pokud nechcete začít od nuly, vyberte ze seznamu předem připravených šablon. .
Beaver Builder také umožňuje uložit vaše rozložení a poté je použít později jako šablony.
Chcete-li se dozvědět více, přečtěte si náš článek o tom, jak vytvořit vlastní rozvržení stránky pomocí nástroje Beaver Builder.
Nechceme však vytvářet pouze rozvržení stránky. Chceme vytvořit kompletní vlastní téma.
Toto je okamžik, kdy přijde Beaver Themer.
Přidá do nástroje Beaver Builder další položku nazvanou „Themer Layout“.
Themerova rozvržení umožňují vytvářet vlastní rozvržení pro záhlaví, zápatí, oblasti obsahu, stránku 404 a další části šablony .
Toto jsou stavební kameny všech témat WordPressu a jejich použitím budete moci vytvořit vlastní motiv, který bude vyhovovat vašim potřebám.
Použití šablon Beaver Themer k vytvoření vlastního motivu WordPress
V následujících pokynech vás provedeme kroky potřebnými k vytvoření nejoblíbenějších vlastních motivových prvků. V době, kdy budete hotovi, budete zcela transformovat své základní téma na plně vlastní podřízené téma WordPress.
Vytvoření vlastního záhlaví pro váš motiv
Začněme s vaším oblast záhlaví webu. Vlastní záhlaví je základní součástí motivu a jeho sestavení může být obtížné pomocí tradičních metod.
Naštěstí má Beaver Themer zabudované funkce záhlaví. Můžete buď použít předem vytvořenou šablonu, nebo použít moduly nabídek a obrázků se dvěma sloupci.
Abychom se dostali do této oblasti záhlaví, nejdříve budeme muset nastavit rozložení záhlaví v Beaver Themer. Navštivte Beaver Builder „Přidat novou stránku a uveďte název záhlaví.
Poté vyberte jako Themer Layout typ a záhlaví jako možnost rozvržení. Až budete hotovi, pokračujte kliknutím na tlačítko „Přidat Themerovo rozložení“.
Tím se dostanete na stránku nastavení rozvržení. Odtud musíte vyberte Celý web jako místo, kde se bude zobrazovat šablona záhlaví.
Dále klikněte na Spustit Tlačítko Beaver Builder pro otevření rozhraní stavitele.
Beaver Builder se spustí se základním rozložením jednoho sloupce a dvouřadého záhlaví.
Ke změně pozadí, barev, textu atd. můžete použít stejné nástroje pro přetahování Beaver Builder. Můžete také přidat další moduly, načíst předem připravené šablony a přidat řádky / sloupce kliknutím na tlačítko Přidat v pravém horním rohu.
Jakmile jste s designem spokojeni, klikněte na tlačítko Hotovo pro uložení nebo publikování rozvržení.
Nyní můžete navštívit svůj web a zobrazit vlastní záhlaví vlastního motivu v akci. Jak vidíte, na naše vlastní téma jsme použili rozložení záhlaví.
Kromě záhlaví ještě nezobrazíte žádný obsah a pravděpodobně uvidíte oblast zápatí základního motivu .
Pojďme to změnit.
Vytvoření vlastní zápatí pro váš motiv
Můžete vytvořit vlastní zápatí pro svůj motiv pomocí nástroje Beaver Themer, stejně jako jste vytvořili vlastní záhlaví.
Přejděte na Beaver Builder „Přidat novou stránku a uveďte název rozložení zápatí. Dále vyberte jako typ„ Themerovo rozložení „a jako možnost rozložení„ Zápatí „.
Pokračujte kliknutím na tlačítko „Přidat Themerovo rozložení“.
Tím se dostanete na stránku nastavení rozložení. Od zde musíte vybrat „Celý web“ jako umístění, na kterém se šablona zobrazí.
Poté klikněte na tlačítko „Spustit Beaver Builder“ pro otevření rozhraní Tvůrce.
Beaver Builder se spustí s rozložením zápatí pomocí tří sloupců. Toto rozložení můžete použít jako výchozí bod a zahájit úpravy.
Můžete přidat moduly, textové bloky nebo cokoli jiného chcete. Vždy můžete změnit barvy, písma, přidat obrázek na pozadí a další.
Jakmile jste s designem spokojeni, kliknutím na tlačítko Hotovo uložte nebo publikujte své rozložení.
Vytváření oblasti obsahu pro příspěvky a stránky
Nyní pro každou stránku a příspěvek na webu jsme vytvořili záhlaví a zápatí, je čas vytvořit příspěvek nebo tělo stránky (oblast obsahu).
Začneme podobně, jako jsme vytvořili záhlaví a zápatí přidáním rozložení „Singular“ na stránce Přidat nový.
Dále vyberete, kde se má toto rozložení zobrazit. Můžete si vybrat jednotné číslo, které chcete použít pro všechny jednotlivé příspěvky a stránky, nebo si můžete vybrat příspěvky nebo jen stránky.
Poté kliknutím na tlačítko „Spustit stavitele bobrů“ otevřete rozhraní stavitele.
Beaver Builder načte ukázkové singulární rozvržení s nadpisem příspěvku / stránky v horní části, následovaným obsahem, bio rámečkem autora a oblastí komentářů.
Můžete namířit a kliknout a upravit kteroukoli z těchto položek nebo podle potřeby přidat nové moduly, sloupce a řádky.
Jakmile budete s rozvržením spokojeni, klikněte na tlačítko Hotovo uložit a publikovat změny.
Nyní můžete navštívit svůj web a podívat se na něj v akci.
Vytváření rozvržení archivu pro vlastní motiv
Nyní se váš vlastní motiv začal formovat , můžete přejít k vytváření rozvržení pro jiné části vašeho webu. Na stránkách archivu WordPress zobrazuje vaše kategorie, značky, autora a měsíční archivy.
Vytvořme rozvržení pro archivní stránky ve vašem vlastním motivu.
Začnete tím, že navštívíte stránku Beaver Builder „Přidat novou stránku a zadáte název rozložení archivu.
Poté vyberte jako typ „Themerovo rozložení“ a jako možnost rozložení „Archivovat“. Pokračujte kliknutím na tlačítko „Přidat Themerovo rozložení“.
Tím se dostanete do rozložení stránka nastavení. Odtud musíte jako umístění, na kterém se šablona zobrazí, vybrat možnost „Celý archiv“. Můžete také vytvořit samostatná rozvržení pro každý jednotlivý typ archivu, jako je datum, výsledky hledání, kategorie, značky atd.
Poté kliknutím na tlačítko „Spustit Beaver Builder“ otevřete rozhraní stavitele.
Beaver Builder spustit se základním rozložením archivu v jednom sloupci. V horní části se zobrazí název archivu, za nímž následují příspěvky.
Můžete namířit a kliknout na libovolnou položku a upravit její vlastnosti. Podle potřeby můžete také přidat nové moduly, řádky a sloupce.
Poté klikněte na tlačítko „Hotovo“, aby se změny uložily a zveřejnily.
Vytváření dalších rozvržení pro vaše vlastní téma WordPress
Beaver Themer také umožňuje vytvářet rozvržení pro další stránky v hierarchii šablon, například stránka 404, části šablony, stránka s výsledky vyhledávání, a více.
Pomocí vestavěné funkce přetahování a přetahování nástroje Beaver Builder můžete snadno vytvářet vlastní vlastní téma WordPress, aniž byste museli psát kód. Toto je skutečně nejzačátečenější metoda vývoje motivů WordPress, která existuje.
Doufáme, že vám tento článek pomohl naučit se, jak vytvořit vlastní téma WordPress, aniž byste se naučili kódovat. Můžete také navštívit náš průvodce, jak zrychlit web WordPress pro lepší SEO a uživatelský komfort.
Pokud se vám tento článek líbil, přihlaste se prosím k odběru našeho kanálu YouTube pro videonávody WordPress. Najdete nás také na Twitteru a Facebooku.