2. diel - WooCommerce - Prispôsobenie vzhľadu

V predchádzajúcej lekcii, WooCommerce - Inštalácia a základné nastavenia , sme sa venovali inštalácii pluginu WooCommerce a jeho základnému nastaveniu.

Rozhodli ste sa pre váš nový začiatok v e-commerce využívať WooCommerce – obľúbený plugin WordPressu a jeho užitočné vlastnosti. Záleží vám na vzhľade stránky a chcete poznať každú jednu možnosť, ako svoj web lepšie prispôsobiť? V tejto lekcii sa naučíte, ako pracovať so základnými prvkami šablón a ako meniť ich vlastnosti.

Akonáhle dokončíte základné nastavenia elektronického obchodu, je na rade voľba šablóny. Tá je však vopred vytvorená a prispôsobená tak, aby bola prehľadná a jednoduchá. To nikomu nebráni v tom šablónu zmeniť a prispôsobiť vlastným potrebám.

Šablóny

WordPress ponúka celý rad platených a neplatených šablón. Niekoľko vybraných šablón máme ihneď k dispozícii, ale je možné ďalšie šablóny nainštalovať. Šablóny nájdeme v sekcii Vzhľad v základnom menu WordPressu a následne tu zvolíme možnosť Šablóny:

Tu sa nám zobrazia všetky šablóny, ktoré sú už nainštalované. Pokiaľ sa nám výber šablón nepáči, klikneme na tlačidlo Inštalácia šablón az širokej ponuky si môžeme vybrať šablónu novú a spustiť jej inštaláciu:

WordPress ponúka možnosť filtrov, vďaka ktorým je vyhľadávanie jednoduchšie. Pokiaľ chceme, aby šablóna mala isté požadované vlastnosti, klikneme na tlačidlo Požadované vlastnosti so znakom ozubeného kolieska a následne zaškrtneme konkrétne požiadavky:

Keďže WordPress ponúka širokú ponuku šablón s rôznymi funkciami, je vhodné filter Požadované vlastnosti využívať vždy, pokiaľ chceme vytvárať web s potrebnými funkciami ako napríklad e-shop, spravodajstvo, vzdelávanie a iné.

Pokiaľ sme šablónu stiahli a máme ju uloženú v počítači ako inštalačný balíček, nahráme ju do redakčného systému rovnako ako plugin. Navigujeme sa opäť na Vzhľad, ďalej Šablóny a klikneme na tlačidlo Nahrať šablónu. Následne zvolíme príslušnú zložku a inštalujeme:

Prispôsobenie

Často využívanou možnosťou je editácia alebo prispôsobenie šablóny. Túto možnosť nájdeme v sekcii Šablóny, kde sa nám ako prvá zobrazí aktuálne používaná šablóna a jej náhľad, na ktorom nájdeme tlačítko Prispôsobiť:

Kliknutím na tlačidlo Prispôsobiť sme sa dostali do editačného módu. Teraz môžeme krok po kroku upravovať šablónu tak, aby so svojim vzhľadom zavďačila nám aj zákazníkom.

Všetky aktuálne možnosti nastavenia nájdeme v paneli, ktorý sa nám zobrazuje na ľavej strane obrazovky. V lekcii si ich postupne popíšeme. Kliknutím na Skryť ovládacie prvky môžeme panel skryť:

Predvolené zobrazenie šablóny je vo veľkosti počítačovej obrazovky. Pokiaľ budeme prevádzkovať internetový obchod, musíme brať na vedomie, že si zákazník bude produkty prezerať nielen cez počítač či notebook, ale že na to využije aj iné zariadenie ako mobilný telefón alebo tablet. Pre tieto prípady je možné zmeniť nastavenie zobrazenia v paneli ovládacích prvkov kliknutím na logo monitora, mobilného telefónu či tabletu:

Predvolené zobrazenie šablóny Deli:

Uloženie zmien

Nezabúdajte na priebežné ukladanie zmien. Uloženie vykonáte kliknutím na Publikovať v pravom hornom rohu panela ovládacích prvkov:

Je možné uložiť aj koncept alebo uloženie naplánovať. Klikneme na ikonku ozubeného kolieska vedľa možnosti Publikovať a vyberieme jednu z možností:

Základné informácie

Základné informácie obsahujú iba logo, názov webu a popis webu. Dá sa teda tu nahrať naše logo, ktoré sa chystáme pri prevádzkovaní elektronického obchodu používať, jeho názov, pod ktorým nás zákazníci nájdu a popis webu. Pokiaľ máme už pripravenú ikonu webu, tak ju tu tiež nahráme:

Hlavičky a päty

V záhlaví a päte si môžeme nastaviť obrázok, ktorý sa zobrazí v záhlaví. Väčšina nastavení tu je hranie sa s farbami. Možno teda zmeniť farbu navigačného menu, textu, odkazov a nadpisov:

Pozadia

Možnosť pozadia nám umožňuje nastaviť farbu pozadia alebo ak chceme, môžeme pre web zvoliť ako pozadie obrázok a následne nastaviť jeho predvoľby (predvolené, vyplniť obrazovku, prispôsobiť obrazovke, opakovať a vlasťou):

Typografia

Typografia sa zaoberá grafickou úpravou textu. Teda tu nastavujeme farbu nadpisov, textov a odkazov:

Tlačidlá

Tu nastavíme úpravu vzhľadu tlačidiel na našej webovej stránke. Môžeme zmeniť farbu pozadia tlačidiel, farbu textu a nastaviť alternatívnu farbu pozadia a textu tlačidiel:

Na internetovom obchode sú tlačidlá ako Hľadať alebo Späť to obchodu:

Grafické rozvrhnutie

V grafickom rozvrhnutí si nastavíme iba umiestnenie prvkov ako vyhľadávanie, najnovšie príspevky, najnovšie komentáre atď.:

Menu

Rozlišujeme dva typy menu:

• hlavné menu
• sekundárne menu

Hlavné menu

V tejto sekcii nastavujeme základné menu, ktoré nás naviguje na ďalšie stránky webu. Býva tu najčastejšie stránka O nás, Kontakty, Blog a iné. Meníme tu ich poradie v menu, pridávame ďalšie alebo ich odstraňujeme a prípadne nastavujeme ich umiestnenie v šablóne. Pre zmenu poradia stačí kliknúť na možnosť Preskupiť a šípočkami posúvať ich poradie. Po dokončení klikneme na Hotovo:

Umiestnenie v šablóne nastavujeme v prípade, keď chceme meniť polohu zobrazenia základného menu:

Nastavenie zobrazených informácií je funkcia, ktorá nám automaticky pridá novo publikované hlavné stránky do menu. Jej aktivácia nám uľahčí čas pri ďalšej zmene nastavenia:

Sekundárne menu

Tu sa nastavenie týka taktiež odkazov na iné webové stránky, ale zameranie je predovšetkým na sociálne siete a e-mail. Možnosti sú rovnaké - je možné tu nastavovať poradie v menu, pridávať či mazať a meniť umiestnenie v šablóne.

Widgety

Do šablóny je možné umiestniť widgety, ktoré sa budú zobrazovať všetkým zákazníkom. Prednastavená šablóna väčšinou niektoré widgety už zobrazuje a my ich môžeme upraviť alebo zmazať. Veľmi časté sú widgety na bočnom paneli, ktoré odkazujú na vyhľadávanie, najnovšie príspevky, archívy atď. Napríklad pre widget vyhľadávanie je možné nastaviť východiskový popis okienka pre vyhľadávanie a text na tlačidle:

Ak chceme pridať widget napríklad pod hlavičku webu, navigujeme sa v nastavení Widgety na Pod hlavičkou a ak tu žiadny widget nie je, klikneme na + a nový widget nastavíme:

Možností máme hneď niekoľko - nadpis, médiá a text, odsek, obrázok, galérie alebo citácie. Toto je základný výber widgetov, ak chceme pridať widget iný, klikneme na Prehľadávať všetko a zobrazí sa nám široká ponuka ďalších widgetov.

Nastavenie úvodnej stránky

V nastavení úvodnej obrazovky záleží na funkcii nášho webu. Ak napríklad porovnáme internetový obchod a blog, tak prvky, ktoré sa zobrazia na úvodnej obrazovke budú pri oboch weboch odlišné. Možnosť Najnovšie príspevky sa budú teda hodiť viac pre blog a pre náš e-shop zvolíme zobrazenie statickej stránky:

Tu si jednoducho stačí nastaviť, ktorá stránka bude úvodná a ktorá stránka príspevkov.

Ak ešte len začínate a nemáte web hotový, môžete toto nastavenie preskočiť a vrátiť sa, akonáhle budete mať všetky články vytvorené.

Záver

WordPress nám ponúka široké spektrum možností, ako svoj obchod čo najviac prispôsobiť vlastným požiadavkám. Počas nastavovania šablóny pre e-shop môžeme rozvinú našu fantáziu. Avšak musíte mať na pamäti, že v jednoduchosti je krása as úpravami sa neoplatí preháňať. Príliš hektický web by mohol zákazníka odradiť, a to pri podnikaní rozhodne nechceme.

V nasledujúcej lekcii, WooCommerce - Pridanie produktov , sa zameriame na pridanie jednotlivých produktov a ich základné vlastnosti.