Nie ste si istí, či je tento návod pre vás? Otvorte si najprv rozcestník Ktorú tému mám? — zistenie trvá pätnásť sekúnd.
1. Čo to je a na čo slúži
Branike téma je naša vlastná téma postavená na úplnom editovaní webu — na tom, čo WordPress zaviedol ako svoj hlavný smer. Hlavička, pätička aj celé šablóny sú poskladané z blokov v tom istom editore, v akom píšete stránky.
To je celý rozdiel oproti Blocksy. Nie je to iný vzhľad — je to iný spôsob, akým sa web upravuje. Namiesto jedného okna s nastaveniami máte editor, v ktorom kliknete priamo na to, čo chcete zmeniť.
Aby ste nemuseli všetko klikať ručne, téma k tomu pridáva vlastnú stránku s nastaveniami. Veci, ktoré sa nastavujú raz a platia pre celý web — rýchlosť, logo, správanie hlavičky, odznak zľavy v obchode — sú tam ako prepínače a polia s vysvetlivkami.
2. Pre koho a kedy
Branike téma je pre vás, ak:
- Chcete si hlavičku alebo pätičku poskladať sami, do posledného detailu.
- Potrebujete tmavý režim, ktorý sa drží vašich farieb a nemusíte ho kresliť druhýkrát.
- Staviate nový web a chcete začať tam, kam smeruje WordPress.
- Chcete mať istotu čitateľnosti — každá paleta v téme je premeraná proti minimu prístupnosti.
Zostaňte na Blocksy, ak vám web funguje, máte veľa vlastného CSS postaveného na Blocksy triedach alebo teraz nemáte priestor prejsť si po migrácii celý web.
Nechystáme žiadny termín, dokedy by ste museli prejsť.
3. FSE ≠ Blocksy — čo sa kam presunulo
Toto je jediná kapitola, ktorú si prečítajte celú. Väčšina otázok po prechode je „kde je teraz to, čo bolo v Prispôsobiť“.
Vzhľad → Prispôsobiť je preč. Nahradilo ho Vzhľad → Editor. To nie je premenovanie tej istej obrazovky — je to iný nástroj s inou logikou.
| V Blocksy to bolo v… | V Branike téme to nájdete v… |
|---|---|
| Prispôsobiť → Hlavička | Editor → Časti šablóny → Header |
| Prispôsobiť → Pätička | Editor → Časti šablóny → Footer |
| Prispôsobiť → Farby | Editor → Štýly (paleta) |
| Prispôsobiť → Typografia | Editor → Štýly (písmo) alebo Nastavenia témy → Logo a font |
| Prispôsobiť → Blogové príspevky | Editor → Šablóny → Archív / Článok |
| Prispôsobiť → Výkon | Nastavenia témy → Výkon (PageSpeed) |
| Widgety v pätičke | Bloky priamo v časti šablóny Footer |
| Dodatočné CSS | Detská téma Branike Child |
Tri veci, ktoré prekvapia najviac:
- Widgety už nie sú. Čo bolo widgetom v pätičke, je teraz obyčajný blok v pätičke. Výhoda je, že to viete poskladať presne; nevýhoda, že to treba spraviť raz ručne.
- Nastavenie sa nehľadá v strome menu, ale klikom na prvok. Chcete zmeniť medzeru nad pätičkou? Kliknete na pätičku a nastavíte ju v pravom paneli.
- Zmena časti šablóny platí naraz všade. Hlavička je jedna vec použitá na všetkých šablónach. To je väčšinou presne to, čo chcete — ale znamená to, že si ju neupravíte „len na tejto stránke“ bez toho, aby ste si vyrobili druhú.
4. Inštalácia, licencia a detská téma
Tému aj jej aktualizácie rieši Branike HUB. Postup je rovnaký ako pri pluginoch: kľúč do HUB, potom inštalácia.
V zozname tém (Vzhľad → Témy) budú po inštalácii dve položky: Branike Theme ako hlavná a Branike Child ako detská.
Pozor: aktivujte Branike Child, nie hlavnú tému. Do detskej témy patria vaše úpravy — vlastné CSS a vlastné varianty štýlov. Aktualizácia hlavnej témy vám ich neprepíše. Ak je aktívna hlavná téma, prvá aktualizácia vaše zmeny zmaže.
5. Rýchly štart (3 kroky)
- Vzhľad → Editor → Štýly. Vyberte si variantu štýlu. Nastaví paletu aj písmo naraz a je to jediná zmena, ktorú cítiť na celom webe.
- Vzhľad → Branike Theme → Logo a font. Nahrajte logo. Ak plánujete tmavý režim, nahrajte aj svetlú verziu loga do poľa pre tmavý režim.
- Editor → Časti šablóny → Header. Cez Nahradiť si vyberte jednu z hotových hlavičiek. To isté pre Footer.
Uložte. Zvyšok je dolaďovanie.
6. Kde čo nájdete
Nastavenie je rozdelené na dve miesta a oplatí sa vedieť prečo:
- Vzhľad → Editor — všetko, čo je vidieť a čo sa skladá z blokov: šablóny, hlavička, pätička, farby, písmo.
- Vzhľad → Branike Theme — všetko, čo je prepínač alebo číslo a platí pre celý web: rýchlosť, správanie hlavičky, rozloženia, nastavenia obchodu.
Editor: štyri veci a kedy sa ktorá použije
Šablóny určujú, ako vyzerá celý druh stránky. Téma ich prináša dvanásť: úvodná stránka, výpis článkov, detail článku, stránka, stránka na celú šírku, stránka bez nadpisu, landing page, výsledky vyhľadávania, stránka 404, výpis produktov, detail produktu a záložná šablóna. Šablónu meníte, keď chcete zmeniť všetky stránky daného druhu.
Časti šablóny sú kusy, ktoré sa v šablónach opakujú — hlavička, pätička, bočný panel. Téma ich prináša sedem: bežná hlavička, hlavička na stred, hlavička pre obchod, bežná pätička, minimálna pätička a dva bočné panely. Meníte ich, keď chcete zmeniť hlavičku alebo pätičku naraz na celom webe.
Vzory sú hotové kusy obsahu na vloženie do stránky — hero sekcie, cenníky, sekcie s ukážkami, hlavičky a pätičky. Téma ich prináša 41. Vzor vložíte a ďalej upravujete ako svoj obsah; nie je to prepojené s originálom.
Štýly sú farby, písmo a medzery pre celý web. Tu sa nastavuje paleta a tu sa prepínajú varianty.
Varianty štýlov — najrýchlejšia cesta k inému vzhľadu
Téma prináša 36 variantov štýlu v štyroch skupinách:
- Odvetvové varianty (20) — hotové ladenie pre advokátsku kanceláriu, autoservis, cestovanie, financie, fitness, gastro, kaviareň, kvetinárstvo, lekáreň, módu, reality, remeslá, stavebníctvo, technológie, umenie, vzdelávanie, wellness, záhradu, zvieratá a základný Branike vzhľad.
- Palety (6) — samotné farebné sady, keď chcete zmeniť len farby.
- Sekčné štýly (6) — nie pre celý web, ale pre jednu sekciu: tmavá, značková, jemný akcent, stlmená, plocha, hero. Použijete ich na skupinu blokov, keď má jedna sekcia vyzerať inak než zvyšok stránky.
- Typografia (3) — samotné písmové sady.
- Tmavý režim — samostatná varianta, ktorá sa dopočíta z vašej palety.
Tip: začnite odvetvovým variantom, ktorý je najbližšie vášmu odboru, a až potom si v ňom dolaďte farby. Ušetríte hodinu klikania.
Nastavenia témy: šestnásť sekcií
Na stránke Vzhľad → Branike Theme nájdete v tomto poradí:
| Sekcia | Čo v nej je |
|---|---|
| Výkon (PageSpeed) | Upratanie hlavičky stránky, vypnutie emoji skriptu, oEmbed, XML-RPC, štíhle WooCommerce assety, vyskakovacie vyhľadávanie |
| Logo a font | Paleta, logo, logo pre tmavý režim, písmo webu |
| Hlavička (logo, názov, menu) | Šírka hlavičky, zlom do menu tlačidla, farba pásu, skrývanie pri rolovaní, šírka loga, názov webu vedľa loga, vyhľadávanie, veľkosť a hrúbka písma menu |
| Pätička | Nastavenia pätičky |
| Navigácia | Správanie menu a rozbaľovacích položiek |
| Rozloženia obsahu | Šírky a rozloženia obsahu |
| Formulárové polia | Vzhľad vstupných polí naprieč webom |
| Články (výpis a detail) | Ako vyzerá blog a detail článku |
| Obchod (výpis produktov) | Katalóg — stĺpce, čo je na karte |
| Obchod (odznak zľavy) | Vzhľad a text odznaku |
| Obchod (detail produktu) | Rozloženie stránky produktu |
| Podmienený header/footer | Iná hlavička alebo pätička pre vybrané stránky |
| Súbory hlavičky a pätičky | Vlastný kód do hlavičky a pätičky |
| Kontaktné údaje | Telefón, e-mail, adresa — použijú ich hlavičky a pätičky |
| Sociálne siete | Odkazy pre ikony sociálnych sietí |
| Tlačidlo v hlavičke | Text, odkaz a vzhľad hlavného tlačidla |
Každé pole má vysvetlivku. Kliknite na otáznik vedľa názvu — je tam napísané nielen čo pole robí, ale aj kedy ho nechať prázdne.
7. Farby: paleta je jediné miesto pravdy
Celý web berie farby z jednej palety. Nadpisy, text, tlačidlá, pás v hlavičke, pätička aj odznak v košíku. Zmeníte paletu a zmení sa všetko naraz.
Dve veci, ktoré to robia iným než obyčajné nastavenie farieb:
- Tmavý režim sa dopočíta z palety. Nemusíte ho nastavovať zvlášť a nemôže sa rozísť so svetlým.
- Kontrast je brána, nie odporúčanie. Každá paleta, ktorá je v téme, je pred vydaním premeraná proti minimu WCAG AA v svetlom aj tmavom režime. Nečitateľnú kombináciu si teda nenastavíte ani omylom.
Pri farbe pásu v hlavičke máte na výber: nechať ju z palety (potom sa hýbe spolu s variantom štýlu a nočnú verziu si dopočíta sama), alebo zvoliť vlastnú presnú farbu (tá zostane, ale nevie sa prispôsobiť, takže nočnú verziu jej musíte dať sami). Farbu textu na páse si téma vyberá sama — vždy tú z dvojice svetlá/tmavá, ktorá je čitateľnejšia.
Pozor: ak nastavíte farbu priamo v bloku, prebije paletu a zostane tam natvrdo. Pri zmene značky ju budete hľadať po celom webe. Farby nastavujte v palete.
8. Hlavička, pätička a menu
Hlavičku a pätičku upravujete ako obsah — kliknete do nej a skladáte bloky. Téma k tomu pridáva štyri vlastné bloky: menu, sociálne siete, oblasť widgetov a stĺpce widgetov.
Najrýchlejšia cesta je Nahradiť: v časti šablóny kliknite na tlačidlo Nahradiť a vyberte si hotový vzor. Hlavičiek aj pätičiek je pripravených niekoľko a líšia sa rozložením, nie farbami — tie si potiahnu z vašej palety.
Zlom do menu tlačidla stojí za vysvetlenie, lebo je to najčastejšia otázka. WordPress štandardne zbalí menu do tlačidla až pri 600 pixeloch, čo je pre hlavičku s logom, ikonami a tlačidlom priúzke — medzi 600 a 1000 pixelmi sa menu zalomí do druhého riadka a hlavička narastie na trojnásobok. Preto si téma zlom dopočíta z počtu položiek menu. Nechajte pole prázdne a bude to fungovať samo; vyplňte ho, len keď chcete zlom posunúť.
Menu tlačidlo pritom nemusí byť len na mobile — dá sa zapnúť aj na počítači, s bočným vysúvacím panelom. Hodí sa to pri veľmi bohatom menu.
Menu s mnohými položkami má vlastné riešenie vrátane hotových mega panelov. Popisuje ho Menu a navigácia.
9. Prechod z Blocksy — krokový zoznam
Téma na to má vlastnú obrazovku: Migrácia na Branike. Nájdete ju v Branike HUB, prípadne pod Vzhľadom.
Táto obrazovka nič nemení sama od seba. Len číta a ukazuje. Po zlej skúsenosti sme z nej odstránili všetky automatické zápisy — rozhodnutia zostávajú na vás.
Čo na nej je:
- Farby. Ak sa dá, vytiahne farby z vášho pôvodného nastavenia a ukáže ich ako referenciu pri nastavovaní palety.
- Hlavička a pätička. V Editore otvorte časti šablóny a cez Nahradiť si vyberte pripravený vzor.
- Menu. Priraďte svoje menu do navigačných blokov v hlavičke a pätičke.
- Úvodná stránka. Nastavte statickú úvodnú stránku a sekcie poskladajte zo vzorov.
- Widgety → bloky. Widgetové oblasti sa neprenášajú. Čo ste mali v bočnom paneli a v pätičke, poskladáte nanovo ako bloky.
- Šablóny na úrovni stránky. Prejdite kľúčové stránky a priraďte im šablónu tam, kde treba — celá šírka, bez nadpisu, landing.
- Kontrola. Úvodná stránka, obchod, jeden produkt, mobil. Potom meranie rýchlosti a prepínač tmavého režimu.
🔴 Migráciu robte na kópii webu, nie naživo. Widgety, nastavenia témy a obsahové bloky z pôvodnej témy sa neprenesú a budete ich skladať nanovo. Na kópii vás to nič nestojí; naživo to vidia zákazníci.
10. Prečo „zmena nezaberie“ — a čo s tým
Toto je najčastejší zmätok v FSE a má jednoduchú príčinu.
Keď v Editore niečo zmeníte, uloží sa to do databázy ako vaše globálne štýly. Tie majú prednosť pred tým, čo je napísané v súboroch témy. Je to správne — vaše rozhodnutie má vyhrať nad výrobným nastavením. Ale znamená to dve veci:
- Keď v téme pribudne nové výrobné nastavenie, na vašom webe sa nemusí prejaviť — prebíja ho vaše uložené.
- Po migrácii z inej témy môžu v databáze zostať staré uložené štýly a ťahať web späť.
Ako sa z toho dostanete: v Editore → Štýly použite návrat k pôvodnému nastaveniu (revízie štýlov, prípadne obnovenie na predvolené). To zmaže vašu uloženú vrstvu a téma sa vráti k tomu, čo má v súboroch.
Podobne to platí pre šablóny. Keď šablónu upravíte, WordPress si spraví vlastnú kópiu v databáze a od tej chvíle číta ju — nie súbor v téme. Ak teda po aktualizácii témy nevidíte zmenu v šablóne, máte na nej vlastnú úpravu. V zozname šablón je taká označená a dá sa vrátiť späť na tému.
Toto je zároveň odpoveď na otázku „prečo mi vlastné CSS nezaberá“. Ak píšete CSS, ktoré má prebiť nastavenie z Editora, musí byť špecifickejšie — samotná existencia pravidla nestačí, musí vyhrať.
11. Rýchlosť
Rýchlosť nie je vec, ktorú robíte na konci. V téme je to sekcia Výkon (PageSpeed) a oplatí sa jej rozumieť:
- Upratanie hlavičky stránky — odstráni odkazy, ktoré WordPress pridáva do hlavičky a váš web ich nepoužíva. Menší a čistejší kód.
- Vypnutie emoji skriptu — moderné prehliadače kreslia emoji samy. Ušetríte požiadavku.
- Vypnutie oEmbed — nechajte zapnuté, pokiaľ nepotrebujete, aby vás vkladali iné weby.
- Vypnutie XML-RPC — staré rozhranie a častý terč útokov. Vypnite, pokiaľ ho nepotrebuje nejaký nástroj.
- Štíhle WooCommerce assety — WooCommerce inak načíta svoje skripty a štýly aj na blogu a kontaktoch. Toto ich necháva len tam, kde patria. Na obsahových stránkach je to veľký rozdiel.
- Vyskakovacie vyhľadávanie — lupa otvorí vyhľadávanie na celú obrazovku a našepkáva výsledky počas písania. Skript sa načíta len na stránkach, kde vyhľadávanie naozaj je.
Písma sú na vašom serveri, nie z cudzej služby. Je to rýchlejšie a čisté z pohľadu ochrany údajov.
12. Riešenie problémov
Zmenil som farbu a nič sa nestalo. Blok má farbu nastavenú v sebe a prebíja paletu. Odoberte ju z bloku.
Upravil som šablónu a po aktualizácii témy sa nič nezmenilo. Máte vlastnú kópiu šablóny v databáze. Vráťte ju na tému v zozname šablón.
Hlavička sa mi na strednej šírke okna zalamuje. Nastavte zlom do menu tlačidla, prípadne nechajte pole prázdne a téma si ho dopočíta.
Logo v tmavom režime zmizlo. Tmavé logo na tmavom pozadí nie je vidieť. Nahrajte svetlú verziu do poľa pre tmavý režim.
Po migrácii web vyzerá napoly staro. V databáze zostali uložené štýly z pôvodnej témy. Vráťte štýly na predvolené a nastavte paletu nanovo.
Vlastné CSS nezaberá. Buď je prebité nastavením z Editora, alebo ho prehliadač drží v pamäti. Skúste anonymné okno; ak sa nič nezmení, CSS pravidlo musí byť špecifickejšie.
Stránka má dva hlavné nadpisy. Pozrite sa, či nadpis nie je aj v šablóne, aj v obsahu stránky. Ak áno, priraďte stránke šablónu bez nadpisu.
13. Súvisiace pluginy a integrácie
- Branike HUB — kľúč a aktualizácie témy
- Branike bloky — vzory a obsahové bloky; fungujú v oboch témach rovnako
- Branike WooKit — e-shop; jeho vzhľad ladia tri sekcie Obchod v nastaveniach témy
- Branike Site Manager — meranie rýchlosti a stav webu
14. Časté otázky
Musím prejsť z Blocksy? Nie. Žiadny termín nie je stanovený.
Prídem o obsah? Nie. Články, stránky, produkty aj médiá zostávajú. Neprenesú sa nastavenia témy, widgety a obsahové bloky.
Kam píšem vlastné CSS? Do detskej témy Branike Child. Nie do hlavnej — tú prepíše aktualizácia.
Ako zapnem tmavý režim? Je to varianta štýlu a dopočíta sa z vašej palety. Nemusíte ho kresliť druhýkrát.
Môžem si spraviť vlastnú variantu štýlu? Áno, patrí do detskej témy. Prežije aktualizácie hlavnej témy.
Prečo je nastavenie na dvoch miestach? Čo je vidieť a skladá sa z blokov, patrí do Editora. Čo je prepínač platný pre celý web, patrí do nastavení témy. Hľadať prepínač rýchlosti klikaním do stránky by nedávalo zmysel.
15. Potrebujete pomoc?
Ak niečo nesedí, napíšte nám cez kontaktný formulár. Pomôže, keď priložíte adresu stránky a snímku obrazovky.