fbpx

Nastavení a úprava šablony WordPressu (Twenty Seventeen)

V dnešní lekci si povíme, jak nastavit a upravit šablonu. Šablon pro WordPress můžete najít na WordPress.org tisíce. Jejich kvalita je různá. Já jsem pro tuto ukázku vybrala šablonu Twenty Seventeen, kterou byste měli mít automaticky staženou ve WordPressu. Šablona je v češtině a je responzivní, takže bude vhodná pro začátečníky. Pokud se naučíte upravovat tuto šablonu, bude pro vás jednodušší upravovat i další šablony. Ne vždy je ale nastavení stejné. Všechny úpravy v tomto návodu jsou prováděny na cvičném webu Kurz WordPressu.

 


1. Instalace šablony

Nastavení šablony najdete v menu vzhled / šablony

Ještě než budete pokračovat, tak je třeba smazat ostatní šablony. Pokud šablony nepoužíváme a pravidelně neaktualizujete, mohou být neaktivní šablony bezpečnostní hrozbou pro náš web. Proto šablonu aktualizujte co nejčastěji. Vždy je ale dobré web před většími aktualizacemi zálohovat a nejprve deaktivovat pluginy a až potom šablonu aktualizovat

Poté, co ostatní šablony smažete, můžeme kliknout na tlačítko přizpůsobit

Do tohoto nastavení šablony se také můžete dostat, pokud budeme přihlášení do administrace WP. Na jakékoliv stránce webu se zobrazuje lišta, ve které kliknete na tlačítko přizpůsobit

2. Úprava šablony

Zobrazí se vám menu, ve kterém kliknete na Základní informace

Nyní vložíme logo, pokud nějaké máme. Pokud logo nepřidáme, zobrazí se na hlavní stránce text, který vložíte do kolonky název webu a dole pod ním popis webu. Je třeba zatrhnout, že název a popis chceme zobrazit

Protože jste ještě žádné obrázky do WordPressu nevkládali, klikněte na tlačítko Vybrat soubor a vyberete logo z počítače. Pokud je to možné, vyberte průhlednou verzi loga, ve které není vidět pozadí. 

Nyní se vám obrázek vložil do knihovny médií. Proto, abyste ho mohli vložit, musí být označený. Nezapomeňte vyplnit název obrázku, který je důležitý především pro vyhledávače. Řada lidí (především ženy) často vyhledává podle obrázků. Poté klikněte na tlačítko vybrat. V dalším kroku obrázek ořízněte, pokud je to potřeba.

Obdobně vložte ikonu webu. To je ten malý obrázek, který se zobrazuje v záložce prohlížeče. Ikonu webu se také zobrazuje ve vyhledávání na Seznam.cz. 

Nakonec nezapomeňte změny uložit

Další záložkou jsou barvy. Na výběr máte ze tří nastavení. Doporučuji vám být střídmí a ne přehnaně kreativní. 

Další záložkou je záhlaví. Zde nastavíte hlavní obrázek webu. Je třeba aby vybraný obrázek byl v co největším rozlišení. Do záhlaví můžete přidat také video. Klikněte na ikonu přidat obrázek

Klikněte na ikonu vybrat soubory. Pokud při výběru podržíte tlačítko ctrl a budete postupně klikat na obrázky, můžete nahrát najednou několik obrázků

Méně je více. Vyberte si jeden hlavní obrázek, který bude váš web reprezentovat. Prostoru pro vložení krásných fotek budete mít víc než dost.

Zaškrtněte vybraný obrázek a nezapomeňte vyplnit název. Klikněte na tlačítko zvolit obrázek. Obrázek můžete opět oříznout.  

Klikněte na tlačítko uložit a publikovat úpravy

3. Nastavení menu

Nejprve klikněte na tlačítko přidat menu, napište název menu, takový abyste ho poznali (hlavní menu) a klikněte na vytvořit menu. 

Klikněte na tlačítko přidat položky

Protože jste dosud žádné stránky nevytvořili, je třeba vytvořit ty, které chcete na webu mít. Strukturu si předem promyslete

Kliknutím na položku v levém sloupci ji přidáte do menu. Tažením položek můžete měnit jejich pořadí. Pořadí také změníte kliknutím na Reorder

Do menu můžete také přidávat vlastní uživatelské odkazy, u kterých vyplníte url a text odkazu. 

Nyní zaškrtněte zatržítko hlavní menu a klikněte na tlačítko uložit

Pokud má váš projekt své Facebookové stránky nebo jiné profily na sociálních sítích, je vhodné přidat na web jejich odkaz

Proto je třeba vytvořit nové menu, které pojmenujete například sociální sítě

Odkaz na sociální sítě zde vložíme jako uživatelský odkaz. Do názvu napíšeme sociální síť a do url napíšeme odkaz našeho profilu

Zaškrtneme tlačítko menu pro sociální sítě a uložíme

4. Nastavení widgetů

Widgety jsou funkční bloky, které se zobrazují v postranních panelech blogu (případně stránek, pokud to nastavíme) a v zápatí (na konci stránky). O widgetech si povíme v dalších dílech našeho seriálu.

V nastavení sidebaru (postranního panelu) prozatím necháme nastavení tak, jak je. 

Klikneme na zápatí. Poté na přidat widget a z nabízených widgetů vybereme text

Pro tento vzorový příklad jsem se rozhodla vložit kontakty. Do widgetu však můžete vložit jakýkoliv text a nebo do záložky text můžete vložit kód

Klikněte na uložit

5. Zobrazení úvodní strany

V zobrazení úvodní strany se rozhodnete, zda chcete mít zvlášť hlavní stranu a blog na jiné stránce. Nebo chceme blog jako úvodní stránku webu.

Pokud chcete mít blog na jiné straně než na té úvodní, je třeba nastavit úvodní stranu jako statickou stránku a přiřadit jí jednu ze stránek (stránka o nás). Stránka příspěvků je ta, na které se bude zobrazovat blog (stránka blog). Na úvodní straně se bude zobrazovat několika stránek v jedné dlouhé scrollovací stránce (paralaxový efekt).

Další možností je zobrazit na úvodní stránce nejnovější příspěvky.

6. Nastavení rozložení úvodní stránky

Pro nastavení rozložení úvodní stránky je třeba mít otevřenou při těchto úpravách úvodní stránku. Pokud budete mít otevřenou jinou stránku, možnost nastavení jednotlivých sekcí se nezobrazí.

Zaškrtněte jeden sloupec.

Jako úplně první stránka se zobrazí ta úvodní (stránka o nás), i když ji jako první nenastavíte.

Jako obsah první sekce jsem nastavila blog. Tak aby návštěvníci měli možnost hned vidět, co je nového.

Jako druhou sekci jsem nastavila kontakty. Co ale nastavíte je jen na vás. Snažte se ale o jednoduchost, aby úvodní stránka nebyla příliš dlouhá, protože nikomu se nechce dlouho srollovat.

Nastavit můžete i třetí a čtvrtou sekci.

Klikněte na uložit.

7. CSS

CSS je nastavení kaskádových stylů stránky (vzhledu). V základním kurzu je upravovat nebudeme a spokojíme se s tím, co nám nabízí šablona. Pokud vám ale současný stav nevyhovuje a chtěli byste šablonu přeci jen vylepšit, návod najdete v článku Pokročilé úpravy šablony

A to je k úvodnímu nastavení šablony všechno. Příště si povíme, jak upravovat stránky a příspěvky, abychom na webu konečně měli nějaký obsah.

 


TODO:

Připravte si dostatečně velký obrázek na hlavní stranu webu a průhledné logo. Předem promyslete strukturu stránek webu (menu). Poté můžete nastavit šablonu podle tohoto návodu. Na příště si připravte obsah jednotlivých stránek a obrázky k nim. 

Líbí se vám webové stránky s paralaxovým efektem, kdy se celý obsah webu zobrazí na jedné stránce? Nebo dáváte přednost standardnímu rozložení hlavní strany?

Sledovat Martina Havelková:

martinahavelkova.cz

Baví mě tvořit krásné a funkční weby, na které se návštěvníci rádi vracejí, protože na nich našli to, co hledali. Díky mému kurzu WordPressu se to můžeš naučit i ty :)

Napsat komentář