Ako ľahko vytvoriť vlastný motív WordPress (bez kódu)

Chcete vytvoriť vlastnú tému WordPress od začiatku?


V minulosti ste museli zostavovať vlastnú tému programu WordPress podľa kódu WordPress a mať dôkladnú znalosť kódovania. Ale vďaka novým generátorom tém WordPress môže teraz ktokoľvek vytvoriť úplne vlastnú tému WordPress do hodiny (nie sú potrebné žiadne znalosti kódovania).

V tomto článku vám ukážeme, ako ľahko vytvoriť vlastnú tému WordPress bez toho, aby ste museli písať akýkoľvek kód.

Vytvorenie vlastnej témy WordPress bez nutnosti písania kódu

Vytvorenie vlastnej témy WordPress pre začiatočníkov

Na rozdiel od statických stránok HTML sú témy WordPress súborom šablónových súborov napísaných v PHP, HTML, CSS a JavaScript. Zvyčajne by ste mali mať slušné znalosti všetkých týchto jazykov webového dizajnu alebo si najať webového vývojára, aby ste si vytvorili vlastnú tému WordPress..

Ak si najmete vývojára alebo agentúru, náklady na vlastnú tému WordPress môžu dosiahnuť tisíce dolárov.

Pretože mnoho majiteľov malých firiem si nemôže dovoliť vysoké náklady na vlastnú tému WordPress, veľa z nich sa práve uspokojilo s predvolenými témami, ktoré boli dodávané s programom WordPress..

Tí, ktorí sa nechceli vysporiadať a chceli prispôsobenia, použili ťahanie & kvapka nástroja na tvorbu stránok WordPress alebo na vytvorenie vlastnej témy použili rámec tém.

Aj keď tematické rámce WordPress uľahčujú vytváranie témy WordPress, sú riešením pre vývojárov, nie priemerného majiteľa webových stránok..

Na druhej strane, doplnky na vytváranie stránok WordPress uľahčili vytváranie vlastných rozložení stránok pomocou ťahania & drop rozhranie, ale boli obmedzené iba na rozloženie. Nemôžete s tým vytvárať vlastné motívy.

Až do Beaver Builderu sa jeden z najlepších doplnkov na tvorbu stránok WordPress rozhodol vyriešiť tento problém pomocou doplnku s názvom Beaver Themer..

Beaver Builder najlepší WordPress doplnok pre tvorbu stránok

Beaver Themer je doplnok na tvorbu webových stránok, ktorý vám umožňuje vytvárať vlastné rozloženia tém pomocou rozhrania drag and drop a bez naučenia sa kódovania.

Pozrime sa, ako použiť Beaver Themer na ľahké vytvorenie témy WordPress.

Výukový program pre video

Prihláste sa na odber WPBeginner

Ak sa vám video nepáči alebo potrebujete ďalšie pokyny, pokračujte v čítaní.

Nastavenie Beaver Themer na zostavenie vlastnej témy

Beaver Themer je doplnok pre program Beaver Builder, takže pre tento článok budete potrebovať oba doplnky.

Najprv musíte nainštalovať a aktivovať doplnky Beaver Builder a Beaver Themer. Ďalšie informácie nájdete v našej podrobnej príručke o tom, ako nainštalovať doplnok WordPress.

Beaver Themer vám umožňuje vytvoriť si vlastnú tému, budete ju však ešte potrebovať. Ako východiskovú tému odporúčame použiť motív s nízkou hmotnosťou, ktorý obsahuje šablónu stránky s plnou šírkou.

Mnoho takýchto tém nájdete v adresári tém WordPress.org. Medzi najmodernejšie témy WordPress patrí šablóna s plnou šírkou. Naše najlepšie tipy sú:

  • Astra – bezplatná ľahká univerzálna téma WordPress, ktorá sa dodáva so vstavanou podporou pre Beaver Builder.
  • OeanWP – ďalšia obľúbená bezplatná viacúčelová téma WordPress, ktorá prichádza s plnou podporou nástroja na tvorbu stránok.
  • Témy StudioPress – všetky ich témy sú kompatibilné s Beaver Builderom a so Beaver Themerom by fungovali skvele.

Kvôli tomuto tutoriálu budeme používať Astra, ktorá je ľahká a ľahko prispôsobiteľná téma WordPress..

Nastavenie témy pre Beaver Themer

Pri vytváraní vlastnej témy WordPress s Beaver Themerom je dôležité zabezpečiť, aby Beaver Themer mal prístup k celému telu stránky (od okraja k okraju).

Toto je predvolené rozloženie Astra. Ako vidíte, toto rozloženie obsahuje bočný panel, s ktorým je ťažké pracovať, keď používate Beaver Themer.

Predvolené rozloženie témy s bočným panelom

Môžete to zmeniť tak, že navštívite správcovský panel svojej webovej stránky a potom prejdete na Vzhľad »Prispôsobiť str. Odtiaľ je potrebné prepnúť na Rozloženie »Bočné panely pútko.

Vypnutie bočných panelov v téme

V predvolenom nastavení rozloženia jednoducho vyberte možnosť Žiadny bočný panel a uložte zmeny kliknutím na tlačidlo Zverejniť.

Vaša téma začne používať rozloženie bez postranných panelov. Toto je najlepšie rozloženie, ktoré môžete použiť s Beaver Themer.

Rozloženie témy bez postranných panelov

Toto rozloženie na celej stránke umožňuje spoločnosti Beaver Themer používať každý palec obrazovky, takže si môžete vytvoriť krásny vizuálny zážitok medzi koncovými bodmi.

Väčšina tém WordPress obsahuje súbor šablón pre stránky s plnou šírkou. Ak používate nejakú inú tému, môžete nájsť možnosť na odstránenie bočných panelov v nastaveniach témy.

Ak to nenájdete, kontaktujte vývojára témy a môžu vám s tým pomôcť.

Po nastavení témy na rozloženie v plnej šírke ste pripravení vytvoriť svoju vlastnú tému WordPress pomocou Beaver Themer.

Základy funkcie Quick Beaver Themer

Beaver Themer pracuje na vrchole Beaver Buildera. Ako doplnok nástroja na tvorbu stránok vám Beaver Builder umožňuje presúvať položky na stránku a vytvárať vlastné rozloženia.

Obsahuje nasledujúce položky, ktoré môžete použiť vo svojich rozloženiach:

  • Šablóna: Zbierka riadkov stĺpcov a modulov, ktoré tvoria celé rozloženie stránky.
  • Stĺpce: Moduly vertikálneho rozloženia, ktoré pomáhajú horizontálne zarovnanie obsahu.
  • Riadky: Horizontálny zber viacerých modulov
  • Modul: Položka, ktorá vydáva konkrétne informácie, ako je názov, textový blok, tabuľka, galéria atď.

Jednoducho upravte stránku v nástroji Beaver Builder a potom kliknite na tlačidlo Pridať v pravom hornom rohu. Potom môžete presunúť stĺpce, riadky, moduly a presunúť ich na svoju stránku a ihneď ich začať upravovať.

Použitie Beaver Builder

Ak nechcete začať od nuly, vyberte zo zoznamu vopred pripravených šablón, ktoré sa majú začať.

Šablóny Beaver Buildera

Beaver Builder vám tiež umožňuje uložiť rozloženia a neskôr ich použiť ako šablóny.

Ak sa chcete dozvedieť viac, prečítajte si článok o tom, ako vytvoriť vlastné rozloženie stránky pomocou nástroja Beaver Builder.

Nechceme však iba vytvárať rozloženia stránky. Chceme vytvoriť kompletnú vlastnú tému.

Vtedy prichádza Beaver Themer.

Do Beaver Builderu pridá ďalšiu položku s názvom „Rozloženie Themerov“..

Themerov rozloženie

Rozloženia Themer vám umožňujú vytvárať vlastné rozloženia pre záhlavie, pätu, oblasti obsahu, stránku 404 a ďalšie časti šablóny..

Toto sú základné kamene všetkých tém WordPress a pomocou nich budete môcť vytvoriť vlastnú tému, ktorá vyhovuje vašim potrebám.

Použitie šablón Beaver Themer na vytvorenie vlastného motívu WordPress

V nasledujúcich pokynoch vás prevedieme krokmi, ktoré je potrebné na vytvorenie najpopulárnejších prvkov vlastnej témy. Až budete hotoví, úplne zmeníte svoju základnú tému na úplne vlastnú podradenú tému WordPress.

Vytvorenie vlastnej hlavičky pre svoj motív

Začnime oblasťou záhlavia vášho webu. Vlastná hlavička je nevyhnutnou súčasťou témy a jej zostavenie môže byť zložité pomocou tradičných metód.

Našťastie má Beaver Themer vstavané funkcie hlavičky. Môžete použiť buď vopred vytvorenú šablónu, alebo použiť moduly ponuky a obrázkov s rozložením v dvoch stĺpcoch..

Aby sme sa dostali do tejto oblasti hlavičky, musíme najprv nastaviť rozloženie hlavičiek v Beaver Themer. návšteva Beaver Builder »Pridať nový a zadajte názov svojej hlavičky.

Vytvorenie vlastného rozloženia hlavičky

Potom vyberte ako typ rozloženie „Themer Layout“ a ako rozloženie „Header“. Po dokončení kliknite na tlačidlo „Pridať rozloženie Themera“ a pokračujte.

Týmto sa dostanete na stránku s nastaveniami rozloženia. Odtiaľ budete musieť vybrať „Celý web“ ako miesto, kde sa bude zobrazovať šablóna hlavičky.

Nastavenia rozloženia

Potom kliknutím na tlačidlo „Spustiť Beaver Builder“ otvorte rozhranie Builder.

Štart Beaver Builder sa spustí ako základný bod so základným usporiadaním samostatných stĺpcov a dvojradov.

Rozloženie hlavičky

Rovnaké nástroje na presunutie myšou z Beaver Builder môžete použiť na zmenu pozadia, farieb, textu atď. Môžete tiež pridať ďalšie moduly, načítať vopred pripravené šablóny a pridať riadky / stĺpce kliknutím na tlačidlo Pridať v pravom hornom rohu. rohový.

Keď ste s návrhom spokojní, uložte alebo zverejnite rozloženie kliknutím na tlačidlo Hotovo.

Teraz môžete navštíviť svoj web, aby ste videli svoju vlastnú hlavičku témy v akcii. Ako vidíte, na našu vlastnú tému sme použili rozloženie hlavičiek.

Vlastná hlavička vo vašom vlastnom motíve

Okrem hlavičky sa zatiaľ nezobrazí žiaden obsah a pravdepodobne uvidíte oblasť päty základnej témy.

Zmeňte to.

Vytvorenie vlastnej päty pre vaše tému

Môžete vytvoriť vlastné päty pre svoju tému pomocou Beaver Themer, rovnako ako ste vytvorili vlastnú hlavičku.

Zamierte na Beaver Builder »Pridať nový a zadajte názov pre rozloženie päty. Ďalej vyberte ako typ rozloženie „Themer Layout“ a ako možnosť rozloženia „Footer“.

Rozloženie päty

Pokračujte kliknutím na tlačidlo „Pridať rozloženie Themerov“.

Týmto sa dostanete na stránku s nastaveniami rozloženia. Odtiaľ musíte vybrať „Celý web“ ako miesto, na ktorom sa šablóna zobrazí.

Nastavenia rozloženia päty

Potom kliknutím na tlačidlo „Spustiť Beaver Builder“ otvorte rozhranie Builder.

Beaver Builder sa spustí s rozložením päty pomocou troch stĺpcov. Toto rozloženie môžete použiť ako východiskový bod a začať s úpravami.

Úprava rozloženia päty

Môžete pridať moduly, textové bloky alebo čokoľvek iné. Vždy môžete meniť farby, písma, pridať obrázok na pozadí a ďalšie.

Keď ste s návrhom spokojní, uložte alebo zverejnite rozloženie kliknutím na tlačidlo Hotovo.

Vytváranie oblasti obsahu pre príspevok a stránky

Teraz, keď sme vytvorili hlavičky a päty pre každú stránku a príspevok na webe, je čas vytvoriť príspevok alebo telo stránky (oblasť obsahu).

Začneme rovnakým spôsobom, ako sme vytvorili hlavičku a pätu tak, že na stránku Pridať novú pridáme rozloženie „Singular“..

Vytváranie príspevkov a rozloženie stránky

Ďalej si vyberiete, kde sa má toto rozloženie zobraziť. Môžete si zvoliť jednotné číslo, ktoré chcete použiť pre všetky jednotlivé príspevky a stránky, alebo si môžete vybrať príspevky alebo iba stránky.

Nastavenia jedinečného rozloženia

Potom kliknutím na tlačidlo „Spustiť Beaver Builder“ otvorte rozhranie Builder.

Úpravy singulárneho rozloženia

Beaver Builder načíta vzorové jednotné zobrazenie s nadpisom príspevku / stránky v hornej časti, za ktorým nasleduje obsah, pole bio autora a oblasť komentárov.

Ak chcete upraviť niektorú z týchto položiek alebo pridať nové moduly, stĺpce a riadky, podľa potreby môžete ukazovať a klikať.

Keď ste spokojní s rozložením, kliknutím na tlačidlo Hotovo uložte a zverejnite svoje zmeny.

Teraz môžete navštíviť svoj web a pozrieť si ho v akcii.

Rozloženie témy s obsahom

Vytvorenie rozloženia archívu pre vašu vlastnú tému

Teraz, keď sa vaša vlastná téma začala formovať, môžete prejsť na vytváranie rozložení pre ďalšie časti vášho webu. Stránky archívu sú miestom, kde program WordPress zobrazuje vaše kategórie, značky, autora a mesačné archívy.

Vytvoríme rozloženie pre archívne stránky vo vašej vlastnej téme.

Začnete návštevou Beaver Builder »Pridať nový stránku a zadajte názov pre rozloženie archívu.

Vytvorenie rozloženia archívu pre svoju vlastnú tému

Potom vyberte ako typ rozloženie „Themerov rozloženie“ a ako možnosť rozloženia „Archivovať“. Pokračujte kliknutím na tlačidlo „Pridať rozloženie Themerov“.

Týmto sa dostanete na stránku s nastaveniami rozloženia. Odtiaľ budete musieť vybrať „Všetky archívy“ ako miesto, na ktorom sa šablóna zobrazí. Môžete tiež vytvoriť samostatné rozloženia pre každý typ archívu, napríklad dátum, výsledky vyhľadávania, kategóriu, značky atď.

Nastavenia rozloženia archívu

Potom kliknutím na tlačidlo „Spustiť Beaver Builder“ otvorte rozhranie Builder.

Spustí sa Beaver Builder so základným usporiadaním archívu v jednom stĺpci. V hornej časti sa zobrazí názov archívu, za ktorým nasledujú príspevky.

Úprava rozloženia archívov pre vaše tému

Ak chcete upraviť jeho vlastnosti, môžete ukázať a kliknúť na ktorúkoľvek položku. Podľa potreby môžete tiež pridať nové moduly, riadky a stĺpce.

Potom kliknutím na tlačidlo „Hotovo“ uložte a zverejnite svoje zmeny.

Vytváranie ďalších rozložení pre váš vlastný motív WordPress

Beaver Themer vám tiež umožňuje vytvárať rozloženia pre ďalšie stránky v hierarchii šablón, napríklad stránka 404, časti šablón, stránka s výsledkami vyhľadávania a ďalšie.

Pomocou vstavanej funkcie drag and drop aplikácie Beaver Builder si môžete ľahko vytvoriť svoju vlastnú tému WordPress od začiatku bez toho, aby ste museli písať kód. Toto je skutočne najzaujímavejšia metóda vývoja témy WordPress.

Dúfame, že tento článok vám pomohol naučiť sa vytvárať vlastnú tému WordPress bez toho, aby sa naučil kódovať. Môžete tiež navštíviť nášho sprievodcu o tom, ako zrýchliť vaše webové stránky WordPress, aby ste dosiahli lepší SEO a užívateľský komfort.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map