Lekce 2 - WooCommerce - Přizpůsobení vzhledu

V předchozí lekci, WooCommerce - Instalace a základní nastavení, jsme se věnovali instalaci pluginu WooCommerce a jeho základnímu nastavení.

Rozhodli jste se pro váš nový začátek v e-commerce využívat WooCommerce - oblíbený plugin WordPressu a jeho užitečné vlastnosti. Záleží vám na vzhledu stránky a chcete znát každou jednu možnost, jak svůj web lépe přizpůsobit? V téhle lekci se naučíte, jak pracovat se základními prvky šablon a jak měnit jejich vlastnosti.

Jakmile dokončíte základní nastavení elektronického obchodu, je na řadě volba šablony. Ta je ovšem předem vytvořená a přizpůsobená tak, aby byla přehledná a jednoduchá. To nikomu nebrání v tom šablonu změnit a přizpůsobit vlastním potřebám.

Šablony

WordPress nabízí celou řadu placených a neplacených šablon. Několik vybraných šablon máme ihned k dispozici, ale je možné další šablony nainstalovat. Šablony nalezneme v sekci Vzhled v základním menu WordPressu a následně zde zvolíme možnost Šablony:

Zde se nám zobrazí veškeré šablony, které jsou již naistalovány. Pokud se nám výběr šablon nelíbí, klikneme na tlačítko Instalace šablon a z široké nabídky si můžeme vybrat šablonu novou a spustit její instalaci:

WordPress nabízí možnost filtrů, díky kterým je vyhledávání jednodušší. Pokud chceme, aby šablona měla jisté požadované vlastnosti, klikneme na tlačítko Požadované vlastnosti se znakem ozubeného kolečka a následně zaškrtneme konkrétní požadavky:

Jelikož WordPress nabízí širokou nabídku šablon s různými funkcemi, je vhodné filtr Požadované vlastnosti využívat vždy, pokud chceme vytvářet web s potřebnými funkcemi jako například e-shop, zpravodajství, vzdělávání a jiné.

Pokud jsme šablonu stáhli a máme ji uloženou v počítači jako instalační balíček, nahrajeme ji do redakčního systému stejně jako plugin. Navigujeme se opět na Vzhled, dále Šablony a klikneme na tlačítko Nahrát šablonu. Následně zvolíme příslušnou složku a instalujeme:

Přizpůsobení

Často využívanou možností je editace či přizpůsobení šablony. Tuhle možnost nalezneme v sekci Šablony, kde se nám jako první zobrazí aktuálně používaná šablona a její náhled, na kterém nalezneme tlačítko Přizpůsobit:

Kliknutím na tlačítko Přizpůsobit jsme se dostali do editačního módu. Nyní můžeme krok po kroku upravovat šablonu tak, aby se svým vzhledem zavděčila nám i zákazníkům.

Veškeré aktuální možnosti nastavení nalezneme v panelu, který se nám zobrazuje na levé straně obrazovky. V lekci si je postupně popíšeme. Kliknutím na Skrýt ovládací prvky můžeme panel skrýt:

Výchozí zobrazení šablony je ve velikosti počítačové obrazovky. Pokud budeme provozovat internetový obchod, musíme brát na vědomí, že si zákazník bude produkty prohlížet nejen přes počítač či notebook, ale že k tomu využije i jiné zařízení jako mobilní telefon nebo tablet. Pro tyhle případy lze změnit nastavení zobrazení v panelu ovládacích prvků kliknutím na logo monitoru, mobilního telefonu či tabletu:

Výchozí zobrazení šablony Deli:

Uložení změn

Nezapomínejte na průběžné ukládaní změn. Uložení provedete kliknutím na Publikovat v pravém horním rohu panelu ovládacích prvků:

Lze uložit také koncept nebo uložení naplánovat. Klikneme na ikonku ozubeného kolečka vedle možnosti Publikovat a vybereme jednu z možností:

Základní informace

Základní informace obsahují pouze logo, název webu a popis webu. Lze tedy zde nahrát naše logo, které se chystáme při provozování elektronického obchodu používat, jeho název, pod kterým nás zákazníci najdou a popis webu. Pokud máme již připravenou ikonu webu, tak ji zde také nahrajeme:

Záhlaví a zápatí

V záhlaví a zápatí si můžeme nastavit obrázek, který se zobrazí v záhlaví. Většina nastavení zde je hraní si s barvami. Lze tedy změnit barvu navigačního menu, textu, odkazů a nadpisů:

Pozadí

Možnost pozadí nám umožňuje nastavit barvu pozadí nebo chceme-li, můžeme pro web zvolit jako pozadí obrázek a následně nastavit jeho předvolby (výchozí, vyplnit obrazovku, přizpůsobit obrazovce, opakovat a vlastí):

Typografie

Typografie se zabývá grafickou úpravou textu. Tudíž zde nastavujeme barvu nadpisů, textů a odkazů:

Tlačítka

Zde nastavíme úpravu vzhledu tlačítek na naší webové stránce. Můžeme změnit barvu pozadí tlačítek, barvu textu a nastavit alternativní barvu pozadí a textu tlačítek:

Na internetovém obchodě jsou tlačítka jako Hledat nebo Zpět to obchodu:

Grafické rozvržení

V grafickém rozvržení si nastavíme pouze umístění prvků jako vyhledávání, nejnovější příspěvky, nejnovější komentáře atd.:

Menu

Rozlišujeme dva typy menu:

• hlavní menu
• sekundární menu

Hlavní menu

V téhle sekci nastavujeme základní menu, které nás naviguje na další stránky webu. Bývá zde nejčastěji stránka O nás, Kontakty, Blog a jiné. Měníme zde jejich pořadí v menu, přidáváme další nebo je odstraňujeme a případně nastavujeme jejich umístění v šabloně. Pro změnu pořadí stačí kliknout na možnost Přeskupit a šipečkami posouvat jejich pořadí. Po dokončení klikneme na Hotovo:

Umístění v šabloně nastavujeme v případě, kdy chceme měnit polohu zobrazení základního menu:

Nastavení zobrazených informací je funkce, která nám automaticky přidá nově publikované hlavní stránky do menu. Její aktivace nám usnadní čas při další změně nastavení:

Sekundární menu

Zde se nastavení týká taktéž odkazů na jiné webové stránky, ale zaměření je především na sociální sítě a e-mail. Možnosti jsou stejné - lze zde nastavovat pořadí v menu, přidávat či mazat a měnit umístění v šabloně.

Widgety

Do šablony lze umístit widgety, které se budou zobrazovat všem zákazníkům. Přednastavená šablona většinou některé widgety již zobrazuje a my je můžeme upravit nebo smazat. Velmi časté jsou widgety na postranním panelu, které odkazují na vyhledávání, nejnovější příspěvky, archivy atd. Například pro widget vyhledávání lze nastavit výchozí popisek okénka pro vyhledávání a text na tlačítku:

Pokud chceme přidat widget například pod hlavičku webu, navigujeme se v nastavení Widgety na Pod hlavičkou a jestliže zde žádný widget není, klikneme na + a nový widget nastavíme:

Možností máme hned několik - nadpis, média a text, odstavec, obrázek, galerie nebo citace. Tohle je základní výběr widgetů, jestliže chceme přidat widget jiný, klikneme na Procházet vše a zobrazí se nám široká nabídka dalších widgetů.

Nastavení úvodní stránky

V nastavení úvodní obrazovky záleží na funkci našeho webu. Pokud například srovnáme internetový obchod a blog, tak prvky, které se zobrazí na úvodní obrazovce budou u obou webů odlišné. Možnost Nejnovější příspěvky se budou tedy hodit více pro blog a pro náš e-shop zvolíme zobrazení statické stránky:

Zde si jednoduše stačí nastavit, která stránka bude úvodní a která stránka příspěvků.

Pokud teprve začínáte a nemáte web hotový, můžete tohle nastavení přeskočit a vrátit se, jakmile budete mít všechny články vytvořené.

Závěr

WordPress nám nabízí široké spektrum možností, jak svůj obchod co nejvíce přizpůsobit vlastním požadavkům. Během nastavování šablony pro e-shop můžeme rozvinou naši fantazii. Ovšem musíte mít na paměti, že v jednoduchosti je krása a s úpravami se nevyplatí přehánět. Příliš hektický web by mohl zákazníka odradit, a to při podnikání rozhodně nechceme.

V následující lekci, WooCommerce - Přidání produktů, se zaměříme na přidání jednotlivých produktů a jejich základní vlastnosti.