Jak udělat stránky ve wordpress krok za krokem – Pluginy, CSS, SEO.

Možnosti přizpůsobení wordpressu k obrazu svému jsou takřka neomezené. Přes wordpress běží víc jak 70 000 000 stránek, což je zhruba čtvrtina webu. Hlavní výhodou je jednoduchost. Nemusíte umět vůbec programovat a přesto můžete spravovat internetové stránky. WordPress má ohromnou uživatelskou základnu a spousta lidí dělá pro wordpress šablony, pluginy, návody. Pokud vám návod přijde dlouhý a nemáte čas podle něj postupovat, stačí mi napsat.  Já si tím vydělávám a dělám to dobře. Dělám stránky na míru, renovuji staré weby a doučuji wordpress. Více na Tvorba webu. Pokud si chcete udělat web sami, s chutí do toho, je to hezká činnost a dost se toho naučíte. Návod je to docela dlouhý, ale zato je v něm je všechno, co budete potřebovat. To, kolik vám to zabere času, se nedá moc odhadnout. Mě zabere  základní web okolo 20 hodin, hezký komplexnější web okolo 50 hodin, je to ale tím, že vím co mám dělat. V programování obecně platí to, že uděláte 90 % práce za 2 hodiny a pak se na následujících 10 procentech seknete na půl dne, když něco nefunguje tak jak má. Pro člověka který wordpress nikdy neviděl, může tvorba základního webu trvat okolo 70 hodin a nebude moc hezký a nebude mít některé funkce, které by chtěl. Následné vychytávání much je téměř nekonečný proces a čím více mu věnujete, tím hezčí web bude. Pokud chcete něco udělat, nesnažte se na to sami přijít, ale použijte google (nejlepší budou asi videonávody například na youtube). Obecně zabere nejvíc času hledání a výběr vhodných pluginů a napsání CSS. Pokud chcete web rychle a nemáte moc času, můžete to řešit tak, že si stáhnete nějaké all in one pluginy a vyberete si takovou šablonu, kde vzhled už měnit nemusíte za cenu toho, že váš web nebude “originál” a že přesně takových webů je na sítí vícero.

Když uděláte internetové stránky, dozvíte se při tom spouste věcí, které jste rozhodně měli vědět předtím, než jste je dělat začali, proto než se do toho pustíte, nejdřív si celý návod přečtěte. Může vám to ušetřit spoustu času. Když napíšete dvacet příspěvků, potom ho jeden po druhém upravujete aby se rychle načítal, potom jednomu podruhé měníte SEO a potom musíte znovu všechny otevřít protože jste našli nový skvělý plugin, budete neradi.

Není čas ztrácet čas, takže nasvačit, protáhnout a s chutí do toho, půl je hotovo.

Doména

Prvním krokem je koupě domény, což je vlastně název stránky kterou budete zadávat do prohlížeče, v našem případě je to nicehoseneboj.cz. Při výběru domény je hlavní, aby byla snadno zapamatovatelná, relativně krátká a jednoznačná, aby lidé nepsali jiné, podobně znějící stránky. Dále musíme zjisti, zda je doména volná, což můžeme udělat například na www.nic.cz nebo na www.wedos.cz kde si ji můžete rovnou koupit za 125 Kč na rok. V nabídce jsou domény .cz .com (nejpoužívanější) nebo .eu .net a další. Doménu vybírejte podle toho, pro koho je web určen. V případě, že máte pouze česky psaný blog, je lepší .cz pokud chcete například eshop, kde chcete prodávat do celého světa a budete mít web i v jiných jazycích, volte .com. Doporučuji koupit doménu na stejném místě jako hosting, protože jinak ji budete muset následně převádět.

Hosting

Dalším krokem je koupení hostingu, což znamená, že vám někdo poskytne svůj server (počítač optimalizovaný pro internet, který se nevypíná) na který stránky nahrajete. Důležité údaje, které by vás mohly zajímat jsou například velikost úložného prostoru, možnost aliasů (jiný název domény, který když zadáte do prohlížeče, tak vás pouze přesměruje na doménu hlavní), přístup do souboru htaccess, antivirové ochrany, četnost výpadků (setiny až tisíciny procenta) a podobně. Jednou z hlavních vlastností je to, zda je podporován protokol https (Hypertext Transfer Protocol Secure), což je vlastně běžný http protokol (z rodiny TCP/IP) akorát je navíc šifrovaný, což znamená, že používá certifikát SSL. Dnes je možné dostat certifikát zadarmo na Lets encrypt. Výhody jsou především bezpečnost, dříve i rychlost, ale http 2 rozdíl stáhl, dále o trošičku vyšší page rank (více viz SEO). Hosting můžete mít okolo 400 Kč ročně na již zmíněných stránkách wedos spolu s doménou. Ne že bych chtěl wedosu dělat reklamu, ale tato stránka má hosting i doménu pravě odtamtud a jsem spokojen. Jedinou nevýhodou je zatím složité nastavování SSL cetrtifikátu pro šifrování. Nabídka je široká, pomoct vám může Srovnání 5 hostingů i s jejich vlastnostmi.

Na internetu můžete nalézt i free hostingy, které jsou zadarmo. Samozřejmě za cenu toho, že budete na stránkách mít cizí reklamu (za kterou nice nedostanete), web bude pomalejší a název domény nebude libovolný ale upravený, například jako nicehoseneboj.freehosting.cz. Pokud myslíte web vážně, freehosting nedoporučuji.

Instalace wordpressu

Většina hostingů nabízí instalaci jedním kliknutím. Například na wedosu se příhlásíte, kliknete na zákaznická administrace, potom na webhosting, na seznamu kliknete na hosting s vaším jménem. Po levé straně potom kliknete na instalátor aplikací, kde následně kliknete na wordpress. V úvodním nastavení není nic záludného. Instalujte stejně jako všechen software v kterém hodláte pracovat v angličtině. Veškerá podpora je v angličtině, takže až budete hledat jak něco udělat, najdete to v angličtině a bude rychlejší když budete postupovat přímo podle návodu. Různé termíny se totiž různě překládají. Pokud něco nemůžete najít, na youtube najdete návody přímo pro wedos. Pokud instalace nefunguje, nebo pokud si prostě chcete wordpress nainstalovat manuálně, založte ve wedosu novou databázi přes phpmyadmin. Databázi si můžete představit jako velkou tabulku, kde budou informace o tom jaké máte na stránkách příspěvky, informace o vašich uživatelích a podobně. Databáze je napsaná v jazyce mySQL. Dále je potřeba nainstalovat wordpress na server. To uděláte pomocí FTP přístupu, což si můžete představit jako že si k počítači připojíte další disk a můžete na něj cokoli nahrát. K tomu potřebujete tzv. FTP klienta, což je software který vám umožní se k “disku” – serveru připojit (vypadá to jako total commander) asi nejznámější FTP klienti jsou Filezilla pro Linux a winSCP pro windows. Přístupové údaje máte v emailu od toho, od koho máte hosting. WordPress poté funguje tak, že si zjistí informace z databáze a postaví podle nich stránky, které se vám zobrazí. WordPress je napsán především v jazyce PHP. Máme 2 strany wordpressu. Jedna uživatelská (stránky tak, jak je vidí uživatel) a druhá administrátorská (stránka, kde můžete vytvářet příspěvky, měnit nastavení a podobně). Pokud se chcete dostat do té administrátorské a nechcete pokaždé hledat email s přihlašovacími údaji (zezačátku nemusíte mít na stránkách nastavené přihlašovací pole), stačí napsat do prohlížeče název stránky a přidat následující www.nazevstranky.cz/wp-login.php (v novějších verzích wordpressu možná trochu jinak). Nastavení se zatím příliš nevěnujte. Záleží na tom, jakou máte šablonu a navíc budete muset takjakotak nastavovat pluginy, takže to nechte na později. Nevrhejte se zatím ani na psaní příspěvků, protože následující kapitoly vám změní možnosti a je zbytečné, abyste jednou museli všechny již vytvořené příspěvky otvírat a něco na nich měnit.

Šablona

Pokud si zvolíte vhodnou šablonu, nebudete si jednou muset rvát vlasy z hlavy a ztrácet čas, který nemáte a který jste měli investovat dřív do správného výběru šablony. Šablona není zdaleka jen o vzhledu, ale i o funkčnosti a rozsahu toho co všechno jde na vašich stránkách nastavit. Při výběru se neřiďte tolik vzhledem (fonty, barvy, šířky sloupců a podobně následně změníte pomocí CSS), ale celkovým layoutem, totiž z jakých částí je stránka tvořena. Například z kolika sloupců je šablona tvořena. To znamená, jestli je stránka přes celý monitor, nebo jestli má postranní panel, tzv. widget. Dále jak často je aktualizována (zjistíte podle data poslední aktualizace), což je důležité hlavně z bezpečnostních důvodů. Díky náhledům není důvod šablonu pokaždé instalovat. Až si vyberete šablonu, která vám sedí, instalujte jí a poté klepněte nahoře na možnost přizpůsobit a podívejte se, co všechno šablona nabízí a porovnejte s dalšími favority. To co chybí je poměrně těžké následně přidat a musíte umět php, takže je lepší si vybrat rovnou dobře. Šablonu si můžete vybrat přímo ve wordpressu pod tlačítkem vzhled. Je jich tolik, že si všechny nikdy neprohlídnete a jsou zadarmo. Lepší a hezčí šablony jsou například na Themeforest, nejsou však zadarmo ale většinou mezi 30 až 60 dolary. Většinu z uvedených šablon můžete najít jinde na internetu zadarmo (někdo tvrdí, že to může být bezpečnostní problém, protože pirátské šablony nemá nikdo moc čas kontrolovat). Podle mne kupovat šablonu nemá cenu, protože volné šablony přímo na wordpressu, které udělali nadšenci, jsou zadarmo a dnes již stejně kvalitní jako ty placené. Akorát musíte déle hledat. Nutno však říct, že každému sedí něco jiného a hodně záleží na tom, co je cílem webu, což je potřeba si velmi dobře rozmyslet než web dělat začnete. Jinak bude vypadat web pro publikování fotek, jinak bude vypadat web s recepty a jinak eshop. A pokud budete web dělat 50 hodin a potom zjistíte, že ve vaší šabloně nemůžete udělat něco co potřebujete, nebo že něco nefunguje, zabere vám potom hodně času než obsah přizpůsobíte nové šabloně.

Následuje seznam šablon, které mne zaujaly

Magnus – Šablona těchto stránek

OneTone

Parallax

Bento

Sydney

Perth

Moesia

Naturelle

Hestia

Coni

Flash

Modern

Arcade basic

Lavander

Everly lite

Freyja lite

Riba light – Pro fotografie

Storefront – Jednoduchý a přehledný e-shop

Auberge – Pro restaurace

Pluginy

Následuje výčet mých nejoblíbenějších pluginů s odkazy a s popisem, co zhruba umí. Chcete-li plugin nainstalovat, stačí pod záložkou pluginy kliknout na instalace pluginů, následně vyhledat daný plugin, kliknout na instalovat a nakonec na aktivovat. Nejdříve pluginy, které budete nutně potřebovat (můžete si samozřejmě najít jiné, které plní stejnou funkci, hodnocení na wordpressu je docela relevantní)

Wordfence Security I tyto stránky už byly napadeny a bohužel úspěšně. Útočníci nemusí mířit přímo na vaši stránku, útoky jsou náhodné na tisíce stránek najednou a je lepší se na to připravit

Page Builder by SiteOriginUmožní snadnější tvoření stránek. Nemusíte používat HTML. Stačí kliknout na – vložit carousel, vložit menu, vložit video. Můžete stránku opticky rozdělit na několik řádek o kolika sloupcích chcete. Můžete tak například video vložit doleva a popis doprava vedle. Nabízí několik layoutů (hotových celých stránek) k inspiraci. Doinstalujte rovnou SiteOrigin Widgets Bundle

Simple Custom CSS and JS – Umožňuje změnu kaskádových stylů pro celé stránky. Pokud nebudete chtít přidávat i javascript, volil bych jiný. Tento není zadarmo v plné verzi a tak například neukládá starší verze, což se hodí.

WP Add Custom CSS – Umožňuje změnu kaskádových stylů pro jednu konkrétní stránku.

Yoast SEO – Optimalizace SEO. Aby byla stránka dobře hodnocena prohlížeči a ty jí dávaly přednost před jinými stránkami.

Plugin Organizer – Umožňuje zapínat a vypínat jednotlivé pluginy na jedntlivých stránkách, čímž zvyšuje rychlost a tím i hodnocení.

Mammoth .docx converter – Umožnuje importovat word dokumenty .doc. včetně obrázků a formátování.

Black Studio TinyMCE Widget – Wysiwyg (what you see is what you get) editor. V základní verzi wordpress editoru není možné přímo nastavit velikost písma, font a tak dále. Tento plugin to umožní.

WP-SpamShield – Na internetu je spousta lidí, kteří neexistují a je potřeba se proti nim bránit

W3 Total Cache – Umožní tzv cachování (prohlížeč uloží stránku přímo do paměti počítače a proto se příště načte rychleji), také umí optimalizovat HTML a CSS

Spacer – Umožní vložit prázdný řádek vysoký jak chcete

Feed Them Social (Facebook, Instagram, Twitter, etc) – Propojí stránku se sociálními sítěmi, což je důležité pro SEO

All-in-One WP Migration – Pokud se se stránkami něco stane, ať už někdo stránku hackne, nebo někde spadne proud ve špatnou dobu, je lepší mít stránky zálohované. Tímto pluginem to jde na pár kliknutí

BuddyPress – Pomáhá mít přehled o registrovaných uživatelých a přidá možnost aby si mohli spravovat svůj účet

Contact form 7 – Pokud chcete nějaká data od uživatelů, tohle vám umožní vytvořit formulář

MailChimp – Pošlete email všem uživatelům najednou

WP Smush – Zmenší velikost všech obrázků, což zrychlí načítání stránek

WP Statistics – Ukazuje kolik lidí na vaše stránky chodí, kdy, jaký mají prohlížeč a podobně

WP Optimize – Vyčistí vaši databázi

WooCommerce – Pokud chcete mít eshop, tak vytvoří košík, způsoby platby, vytvoří kolonky na nové zboží a podobně

Easy Google Fonts – Nastavte si pro různé nadpisy různé fonty

Multilanguage od BestWebSoft – Udělejte stránky ve více jazycích. Nenabízí automatický překlad. To umí například Weglot, který je lepší a hezčí, ale ne zadarmo

Updater by BestWebSoft – Automaticky updatuje vaše pluginy, což je dobré pro bezpečnost i pro SEO

Gmedia Gallery – Můžete do něj uploadovat soubory a z fotek například potom tvořit hezké galerie

Responsive Lightbox – Mějte obrázky responzivní

Shortcodes Ultimate – Umožňuje vložení věcí jako je například vyjížděcí menu, carousel, video a mnoho dalšího

Embed Any Document – Umožní vložit dokumenty ve formátu pdf a doc

Erident Custom Login and Dashboard – Umožní přizpůsobit stránku s přihlášením

Popup Maker – Create pop up windows

Redirection – Pokud narazíte na chybovou stránku, budete přesměrováni na jinou

Head, Footer and Post Injections – Můžete vložit co chcete do hlavičky stránek, anebo něco do všech příspěvků najednou

Pluginů je moře. Nevýhoda pluginů je to, že je všechny musíte vždy načíst a tímpádem zpomalují stránku. Neplatí pravidlo počtu pluginů, to znamená, že jeden špatně napsaný plugin zpomalí stránku víc, než 10 dobře napsaných pluginů. Neplatí tedy, že nejlepší řešení je mít jeden plugin na všechno. Na těchto stránkách je aktivních okolo 40 pluginů a myslím, že jsou rychlé víc než dost. Během mého mládí jsme stahovali 60 kb/s a tehdy to byl problém. S dnešní rychlostí připojení už to žádné zásadní potíže nepůsobí. Zde je výčet dalších pluginů, které by se vám mohly hodit.

Admin Column – Umožní přizpůsobit administrátorskou stranu wordpressu, přidat vlastní pole a podobně

Broken Link Checker – Kontroluje odkazy, zda jsou funkční

Child Theme Configurator – Umožní vytvořit dětské téma u šablony pokud se v ní chcete rýpat

Flickr Album Gallery – Umožní vložit galerii z Flicru

Folders – Umožní třídit položky do složek

Google Drive WP Media – Umožní propojení s google drive

Hatom/hentry remover (Fix errors in Google Webmaster Tools) – Odstraňuje chyby zobrazené v google webmaster

Hide WP Toolbar – Umožní schovat horní panel

iFlyChat – Chat

Installation Profiles – Umožní hromadný import/export pluginů

Optimize Database after Deleting Revisions – Vymaže staré verze stránek a tím uvolní místo

Page Excerpt – Někde fungují špatně náhledy příspěvků, umožňuje napsat nový

Post Tags and Categories for Pages – Umožní příspěvkům a stránkám stejné možnosti jako je přidávání do kategorií

Rating-Widget: Star Review System – Umožňuje hodnotit pomocí hvězd

Schema – Umožňuje dodatečné informace, které pak může použít prohlížeč

Soundcloud is Gold – Import hudby ze soundcloudu

Sticky Menu (or Anything!) on Scroll – Můžete cokoliv udělat sticky (nesjede když sjedete kolečkem)

TinyMCE Advanced – Další editor

Title Remover – Umožní skrýt název příspěvku, což se někdy hodí

WP Hide Post – Umožní schovat příspěvek na různých místech

WPFront Scroll Top – Zobrazí tlačítko, které vás po kliknutí odroluje nahoru

Nastavení

Nyní otevřeme jakoukoliv hotovou stránku, klikneme nahoře na přizpůsobit a podíváme se, co všechno můžeme nastavit. Můžeme si přidat položky do menu a různé funkce do postranního widgetu (napříklat tlačítko pro přihlášení, vyhledávač, přehrávač, odkazy, či text) Můžeme si vybrat fonty pro jednotlivé nadpisy. Inspiraci můžeme najít na Google fonts. Dále otevřem administrativní stránku a podíváme se do položky nastavení. Většinu věcí můžete nechat tak jak je. V základním nastavení nastavte název, emailovou adresu, popis webu a zda se může každý registrovat. V dalších kolonkách je důležité, jakou chcete domovskou stránku. Zda statickou a nebo rubriku nejnovějších příspěvků. Pod kolonkou trvalé odkazy nastavte, jak bude vypadat URL příspševku. Doporučuji název příspěvku. Výsledná URL poté bude www.nazevstranky.cz/nazev-prispevku. Vyhnete se tak dlouhým nezapamatovatelným názvům.  Dále nastavte jednotlivé pluginy. Většina z nich je již nastavena dostatečně. Budeme-li někdy chtít měnit něco v naší šabloně, stačí pod kolonkou vzhled kliknout na editor, kde mám jednotlivé stavební prvky jako home.php, page.php, sidebar.php a podobně. Pokud budete šablonu jakkoliv upravovat, dělejte změny v takzvaném child theme, aby se při aktualizaci nesmazaly a aby se daly změny v případě potřeby kdykoliv vypnout.

Důležité je si wordpress co nejlépe přizpůsobit tak, aby se vám dobře pracovalo. Dobré je na okně Vytvořit příspěvek a Vytvořit stránku kliknout vpravo nahoře na Nastavení zobrazených infomrací, kde můžu schovat okna která nepotřebuji a která překáží a potom kliknout a táhnout na bloky kde co chci. Tím myslím pole jako Štítky, Rubriky, Publikovat a podobně. Taky si můžete přizpůsobit nástěnku. Já používám Plugin CMS Tree Page View, který vytvoří strom stránek, strom příspěvků a  strom událostí. Tudíž můžu hned po prvním kliknutí na stránku rovnou kliknou na jakoukoliv stránku. Dál můžete mít na nástěnce například data o návštěvnosti a podobně. Pokud máte v plánu vytvořit mnoho podobných jednoduchých stránek, můžete využít toho, že importujete data v CSV (Coma separated data), což jsou například i data z Excelové tabulky. Pokud například chcete mít stránky o filmech, je velmi pracnéudělat 200 jednotlivých stránek jednu po druhé. Stačí mít nějaký seznam kde je v jednom sloupci název filmu, v druhém například rok a v třetím obrázek. Potom je možné například pomocí Ultimate CSV Importer importovat data do wordpressu a vytvořit stovky stránek během chvilky. Nevyhnete se tomu, pokud chcete mít e-shop, kde budete přidávat stovky produktů. Pokud chcete mít e-shop, velmi pravděpodobně budete potřebovat Woocomerce plugin.

CSS

Cascading Style Sheets, neboli kaskádové styly určují, jak se budou jednotlivé bloky napsané v HTML zobrazovat. Jakou budou mít velikost, barvu, jestli v ní půjde scrollovat a podobně.

Takto vypadá ukázka

                                          /*header*/
body {
   list-style: none;
}

.header {
   font-size: 24px;
   padding: 18px;
   text-align: center;
   border: solid 1px;
   margin: 10px;
   border-radius: 200px;
   box-shadow: 5px 5px 10px #888888;
   font-family: 'Pacifico', cursive;
} 
                                          /*navigation*/
#button1 {
   height: 60px;
   font-size: 20px;
   padding: 20px;
}
}

Kód se skládá z komentářů ohraničných /* bla bla, to je koment */, z prvního slova tzv. klasifikátoru, který určuje co se má měnit. Jednotlivé elementy, bloky, z kterých je stránka tvořena mohou být popsány buď třídou, id, a nebo se jedná o HTML tagy. Pokud chceme změnit vzhled elementu popsaném pomocí třídy, napíšeme před název třídy tečku . Chceme-li změnit element popsaný pomocí id, napíšeme před název id křížek # Chceme-li změnit vzhled nějakého tagu, nepíšeme před název tagu nic. Následuje závorka se zobáčkem a potom vlastnost kterou chceme měnit, poté dvojtečka a hodnota, totiž co chceme po dané vlastnosti. Napřílad velikost v pixelech, font, barvu a podobně. Následuje středník a uzavření závorek.

Popis pomocí třídy

.site-branding – nápis Ničeho se neboj vlevo nahoře

.header-navigation – položky v menu

.site-header – hlavička stránky

.site-footer – patička stránky

.page-title – název stránky

.sidebar – postranní panel, někdy nazívaný widget

obecně označují více konkrétních elementů a pojmenoval je tak tvůrce šablony. Většinou dává název smysl a bývá na jiných stránkách dost podobný.

Popis pomocí HTML tagu

* – označuje všechno na stránce

html – označuje celou stránku

body – označuje tělo stránky

site – označuje stránku

p – označuje odstavec (všechny odstavce)

h1 – označuje hlavní nadpis (všechny hlavní nadpisy)

Úplně obecné věci, které jsou přítomny na všech stránkách a jsou všude stejné, protože vychází z jazyka HTML.

Popis pomocí id

#button1 – Označuje jeden konkrétní button na nějaké konkrétní stránce

Nikoliv pro obecné věcí, které se vyskytují napříč celými stránkami, ale spíše pro konkrétní věci, které se vyskytují jen jednou.

Výčet nejběžnějších vlastností, co dělají a hodnoty, jakých mohou například nabýt

font-family – změní font [roboto, arial]

font-size – změní velikost písma [20px, 15em]

color – barva písma [blue, #ed7d86, rgba(4, 234, 57, 0)  (označuje kanály RGB plus průhlednost)]

line-height – změní výšku řádku [1, 2, 120%]

background – změní barvu pozdí [transparent, white, #ed7d86]

background-image – když budu chtít jako pozadí obrázek [url(“http://niceho.cz/…..ach.jpg”)]

display – jak bude prvek zobrazen, či ne [block, inline, none]

margin – vnější nevyplněné místo [50px]

padding-top – vnitřní horní nevyplněné místo [400px]

text-align – zarovnání písma [left, center]

width – šířka [100 % (šířky nadřazeného bloku), 1500px, 100vw ( % šířky displeje]

height – výška [100 % (šířky nadřazeného bloku), 1500px, 100vw ( % šířky displeje]

position – jestli je blok umístěn k hornímu okraji, nebo za poslední příspěvek [relative, fixed, absolute]

transform: změní tvar [translate(-50%, 0%)]

V názvu vlastnosti nesmí být mezera a proto jsou tam pomlčky.

Když chceme pro inspiraci zjistit jaké CSS má naše stránka, podívám se do vzhled – editor a tam klikneme dole na style.css. Pokud ale chceme něco změnit, tak musíme měnit přes nějaký plugin. Například výše uvedený Simple custom CSS. Můžeme přepsat původní pravidla ze šablony, která pak budou neaktivní a proto je nemusíme mazat.

Jak CSS měnit? Otevřem si v prohlížeči Dev tools od googlu. Klikněte pravým tlačítkem někam na prohlížeč, zvolte Prozkoumat a hurá do toho

Tvorba stránek ve wordpress 2

V místě kde je na obrázku šipka klikneme a potom najedeme na část kterou chceme upravit. Dev tools můžeme otevřít zkratkou ctrl + shift + c kdy můžeme rovnou označit upravovanou část. Když ji vybereme, zobrazí se nám v dev tools nahoře místo v HTML, kde se daný objekt nachází a pod ním jaká všechna CSS pravidla ho ovlivňují. Pokud danou vlastnost nenajdeme, můžeme jí do Dev tools přímo připsat. Stačí kliknout do poslední vlastnosti naší třídy a odentrovat. Skočí vám to na nové, prázdné. Také můžete přepsat nějakou nedůležitou vlastnost již existující. Enter a změnu přímo uvidíme. Dev toolsCSS načtené v prohlížeči, proto, když stránku aktualizuji, nebo prohlížeč zavřu, všechny změny se vymažou.  Pokud nenajdeme co hledáme, zkusíme v horní části kliknout na jinou část html. Stránka je totiž tvořena z jednotlivých bloků, které se mohou překrývat. Jeden blok může být vnořen do druhého a do toho zase další. Nyní musíme experimentovat. Vpravo je ukázka stejné stránky jako vlevo, akorát s tím rozdílem, že jsem zvětšil font-size. Když nevím, jakou vlastnost upravit, nechám pole prázdné a zmáčknu šipku dolů, vyjede seznam všech možných vlastností. Pokud nevím, jakých hodnot může vlastnost nabývat, nechám pole pro hodnotu prázdné a opět zmáčknu šipku dolů a vyjedou hodnoty, kterých může vlastnost nabýt. Pokud například něco pozicuji, nebo zmenšuji, stačí napsat přibližnou hodnotu a poté šipkou nahoru, nebo dolů přidávat, nebo ubírat po jednom pixelu. Některé vlastnosti jsou provázané, což znamená například to, že vlastnost left, totiž odsazení od levého kraje, můžu použít pouze pro některé hodnoty vlastnosti position, nebo display.

Když chceme použít CSS na něco, co napíšeme v příspěvku, musíme tomu přidělit id nebo třídu, více v kapitole tvorba obsahu. Pokud nějaká změna nefunguje, přidáme za příkaz !important. Pokud chceme, aby se něco stalo po najetí myší, dáme za název třídy :hover. Pokud chceme nějaká pravidla pouze pro mobily a zařízení s malým displayem, stačí kód zabalit do @media only screen and (max-width: 600px) { }. Pokud chceme něco v mobilu nebo tabletu zobrazit pouze na výšku, zabalíme to do @media screen and (orientation:landscape){ }.

Následující postup je, že zkopíruji celý CSS blok, to znamená například

   
                                          /* header responsive */

@media only screen and (max-width: 600px) {
.header:hover {
   font-size: 24px !important;
   padding: 18px !important;
   text-align: center !important;
   border: solid 1px;
   margin: 10px;
   font-family: 'Pacifico', cursive;
}
}

do custom css pluginu. Celý blok kopíruji kvůli tomu, aby byly správně závorky a aby byl kód napsán přehledně. Nechám však pouze řádky, které jsem měnil a zbytek vlastností co zůstávají stejné smažu. Uložím CSS, aktualizuji stránku a kochám se.

Pokud chcete například k nějakému příspěvku přidat pozadí, v dev tools najedu v horní HTML části nahoru a zjistím nějakou třídu, která platí pouze pro náš příspěvek. Může to být například page-id-1327. Nestačí však přidělit CSS pouze této třídě. Musíme přidělit pozadí konkrétnímu oknu v HTML. To znamená například body nebo site. Nelze však přidat pozadí rovnou třídě site, protože by potom byl obrázek na všech stránkách. Když chceme přidělit css více třídám najednou, můžeme to udělat například .site, .sidebar, .archive {….} bude aplikována na všechny elementy, které jsou popsány některou z uvedených tříd, což se někdy dobře hodí, v našem případě ale použiji zápis .site .page-id-1327. Znamená to : uprav třídu .site pokud je vnořena do bloku s třídou .page-id-1327.  Občas pozadí ruší, pokud je display malý, takže obalíme do @media. Dále si zjistíme, jaké vlastnosti a jaké hodnoty se nám hodí. Background-size určí, jak velký obrázek bude, například 100%. Background-attachment určí, jestli bude obrázek připnutý, anebo pokud jestli bude obrázek scrollovat dolů. Background-repeat určí, jestli se bude obrázek opakovat. Background-position určí, kam obrázek umístíme. Výsledek může vypadat třeba takhle. Další možností je plugin. Nedá se říct co je lepší. Občas jedno, občas druhé.

Dnes se k vašim stránkám mnoho lidí dostane přes telefon a procento poroste. Je dobré se na to připravit a udělat stránky responzivními. Udělám-li stránku nádhernou na svém 24 palcovém monitoru, může se stát, že na 15 palcovém monitoru, se některé bloky nevejdou vedle sebe a když se zarovnají pod sebe, nemusí to vypadat hezky. Proto je občas dobré měnit šířku a výšku pro různé velikosti obrazovek. Dobře pomoct vám může například Screenfly, kde si zadáte svou stránku a potom prohlížíte na různých typech obrazovky.

   
@media only screen and (min-width: 1000px) and (max-width: 1000px){
.page-id-4101 .site {
   background-image: url("https://nicehoseneboj.cz/domains/nicehoseneboj.cz/wp-content/grand-media/image/original/kocicky_3.gif");
   background-size: 100%;
   background-position: center 10%;
   background-attachment: fixed;
}
}

Pokud chcete vědět o CSS víc, doporučuji appku Solo learn. Pokud hledáte něco kontrétního, doporučuji stránky W3schools, nebo české Jak psát web.

Následující dva obrázky ukazují rozdíl stránky bez CSS úpravy a s CSS úpravou. Na této stránce je zatím okolo 370 řádek CSS. Změny se vztahují zhruba na  70 elementů.

Tvorba stránek ve wordpress

SEO

Search Engine Optimization je o optimalizaci stránek pro internetové vyhledávače jako jsou google, nebo seznam. V kostce to znamená to, že když si například budu chtít koupit novou kytaru a zadám do prohlížeče koupím kytaru, zobrazí mi to nabídky v určitém pořadí. Lidé v tom hodně soutěží, protože prodejce kytar, který je zobrazen v první desítce bude brzy bohatý a slavný, zatímce ten, který bude 258. brzy zkrachuje i kdyby měl stránky daleko lepší. Pořadí se určujepodle toho, zda si někdo u googlu platí reklamu, a podle toho, čemu říkáme page rank, jakési hodnocení, které udělat bot (virtuální návštěvník) podle docela složitých algoritmů. Mimo jiné podle toho, kolik lidí na ni chodí, rychlosti načítání, členění textu, používání klíčových slov a hodně pomocí tzv. backlinkingu, což znamená podle toho, kolik cizích stránek na mé stránky odkazuje. Proto se hodně spamuje a viruje atak. Vznikaly také odkazové farmy, které vytvářely miliony odkazů aby nespravedlivě zvedaly hodnocení různých stránek. Například google proti tomu docela úspěšně bojuje. Jeho boti jsou velmi chytří, poradí si s různými jazyky a nejen to.

Klíčem pro dobré SEO je

1) Psaní dobrých, zajímavých a zábavných článků

2) Plugin. Například Yoast SEO, kde pak v příspěvcích vždy uvedu metadata (data která nejsou vidět přímo na stránce, ale které bude používat google ke hledání). Těžko říct, jakou váhu mají doporučení dělaná yoastem jako například četnost klíčových slov v příspěvku a nadpisech, množství slov a podobně. Vyexportujte soubor XML Sitemap. Udělejte si účet na Search console a XML sitemaps tam vložte (XML řeknou google jaké všechny stránky máte a on je pak snáze indexuje). Propojte Yoast s vaší Facebookovou stránkou, pokud ji nemáte, tak ji vytvořte. Většina lidí se na vaši stránku dostane pčes sociální sítě. Přidávejte tedy k příspěvkům OG metadata, čili Open graph data. Jsou to data které se zobrazí když vložíte odkaz někam na sociální síť, nebo do chatu. Hlavěn jde o název, popis a obrázek.

3) Search console od Google webmasters. Tam se dozvím, zda byly stránky indexovány, což znamená, jestli o nich google ví a jestli je bude lidem zobrazovat a jestli má google s vašemi stránkami nějaký problém, popřípadě jaký. Vložte XML sitemap generovaný z Yoastu. Bude k tomu potřeba ověření přes FTP přístup. Musíte googlu dokázat, že jsou to vaše stránky tím, že na server přidáte soubor, který vám oni dají. Pokud je stránka nová, indexovaná není, teprve až po nějaké době, kdy se k ní dostane bot přes nějaký odkaz. Pokud nechcete čekat, dejte stránku googlu SEM. Stačí hlavní stránku a jednou, když web spouštíte, a už je na něm nějaký obsah. Dobré je taky zkusit některou stránku, která vaše dílo zanalyzuje. Docela se mi osvědčil Ryte. Všechny chyby které vám to odhalí se pokuste opravit.

4) Dobrý název stránky a popis. Musí býtdobrý jak pro čtenáře, tak pro google. Vhodně dlouhý! Název (SEO title) by měl být okolo 60 znaků a popis (description) do 160 znaků, zbytek uřízne. Například název stránky Prodej bot je zbytečně krátký. Lepší bude Prodej českých kožených bot – Moje boty (…název stránky). Tvrdí se že název stránky je vhodné mít pouze na domovské stránce a jinde být nemusí. V tomto případě již podobný název nepoužívejte na další podstránky, ale použijte například Kvalitní dámská obuv – výprodej, něco lehce jiného pro dětskou a podobně. Najdou vás tak jak lidé co do googlu zadali výprodej, tak ti kteří zadali pánská obuv, tak i ti, kteří zadali česká kvalitní obuv. Čím víc ale, tím spíš se dostanete na přednější příčky pro víc hledaných termínů. Yoast dole ukazuje kolik máte napsáno a ukazatel zezelená, když si myslí, že je dostatečně dlouhý. Důležitá bývala klíčová slova neboli keywords, dnes už takový význam nemají, rozhodně je ale přidávejte. Jedná se o jakési hashtagy, které příspěvek vystihují. V případě této stránky by se jednalo například o Tvorba internetových stránek, Tvorba webu ve wordpress, CSS, SEO a podobně. Zadávejte taková, která patrně někdo zadá do prohlížeče až bude něco hledat. Ideální počet může být od 1 až po 15. Co se běžně dělá, tak je analýza klíčových slov. To znamená, že se podívám, jaká slova lidé nejčastěji hledají, zkouším synonyma a podobné formulace. Logicky pokud trefím formulaci kterou lidé častěji hledají, přijde na mou stránku více lidí. Co kdy kdo vyhledával můžeme najít například na Google adwords, kde ale musíme mít účet. Bez účtu lze na Google Trends, kde toho pro český jazyk často moc nenajdeme. Dalším způsobem je daný termín dát do Seznam vyhledávače a potom úplně vespodu kliknout na Statistika hledanosti. Pokoušejte se vyhnout stop slovům. To jsou slova, která se vyskytují tak často, že je prohlížeč ignoruje a tak se připravujete o prostor. Může jít například o a, aby, aj, ale, anebo, ani, aniz, ano, asi, avsak, az, ba, bez, bude, budem, budes, by… Diakritiku používejte všude kromě názvu v URL, google si ji přidá tam kde se hledá bez ní. Google také umí skloňovat a časovat. Koluje jedno pravidlo, že vyhledávače to mají rády vlevo nahoře, takže nejdůležitější pojmy se snažte dát do názvu, popisu, hlavního nadpisu , vedlejšího a podobně. Nadpisy by měly dávat logický smysl. H1 potom H2, H2, H3, H3. Budete-li například mít hlavní nadpis a potom hned za sebou H5 kvůli tomu, že je to hezký font, není to správně. Slova co jsou v nadpisech anebo tučně, mají větší váhu, než ta v běžném odstavci.

5) Linkbuilding. Silný vliv na váš pagerank, což znamená jak stránku hodnotí prohlížeče, má množství odkazů směřujících na vaše stránky. Proto je dobré odkaz šířit různě po internetu. Asi nejlepším možným řešením jsou sociální sítě. Máte-li e-shop, nebo blog, vytvořte stejnojmennou facebookovou (a ideálně i twitterovou a instagramovou a youtoubovou) skupinu. Skupinu propojte s účtem na facebooku a jiných sítích například pomocí pluginu Social Media Share Buttons, nebo Feed them social a často něco přidávejte. Už když se na to jen někdo podívá, už se vám zvětšuje množství zpětných odkazů (možné najít na Search console). Následně se vám zvedne pagereank a nakonec návštěvnost.

6) Přidání do katalogů. Pokud mám například eshop, tak se přidám do Heuréky, pokud jsem doktor, přidám se do seznamu doktorů na Seznamu, pokud tvořím hudbu, přidám ji na soundcloud, youtube, bandcamp, prostě všude a to i s odkazem na stránky.

7) Reklama. Pokud na to mám, a mám stránky s úmylsem vydělat (například eshop) tak se vyplatí. Pouze však pro krátkou dobu. A pozor, nemusí platit, že když zaplatím dvakrát víc, dvakrát víc lidí na stránku klikne. Stačí i malé obnosy (pár set korun na dejme tomu půl roku) a potom klidně přestat. Nejčastějším zdrojem reklamy je Google Adwords a Facebook Ads (pro ně hlavní zdroj příjmu). Pokud bude na vaši stránku chodit hodně lidí, můžete udělat přesný opak a nechat si na svých stránkách cizí reklamu. Čím víc lidí na vaše stránky chodí, tím víc peněz. Můžete například přes Google AdSense.

8) Rychlost. Google bere hodně v potaz rychlost načítání stránek. Je důležite nastavit tzv cachování, to znamená stáhnout do počítače data, která budou použitá i na dalších podstránkách jako jsou fonty, ikony a podobně. Udělá to za vás například W3Cache plugin. Důležité je také minimalizovat množství skriptů. Říká se tomu minify, a například z 30 různých souborů, které musíte pokaždé po jednom stahovat, jich uděláte například 8.  Udělá to také W3cache a nebo například autoptimize plugin. Proveďte minimalizaci HTML, javascriptu i CSS. Může se stát, že některé věci poté nebudou fungovat správně, je třeba zkoušet různé pluginy a různé možnosti. Pokud máto hodně pluginů, je dobré použít Plugin optimizer, a pluginy, které používám pouze na pár stránkách zakázat a poté povolit pouze na těch, kde je jich potřeba. Pro otestování použijte například GTMetrix stránku. Tipy na pluginy i nastavení můžete najít například tady.

9) Aktualizace pluginů, šablony a především obsahu. Pokud píšete o programování v CSS3, za pár let budete muset poupravit článek, aby byl platný i pro CSS4. Pokud píšete na co si dát pozor v občanském zákoníku, budete muset stránku aktualizovat až vyjde nový zákoník. Pokud píšete o věcech, které se s časem nemění, je dobré alespoň přidávat nové příspěvky. Pokud byla na webu provedena poslední změna v roce 2012, prohlížeče stránku nebudou hodnotit příliš dobře.

10) Ochrana. Není dobré, když se do vašich stránek někdo nabourá. Uživatelé mohou přijít o citlivá data (hlavně u eshopu problém). Například tato stránka byla také napadena. Na provozu to nebylo vůbec znát. Zjistil jsem to až náhodou, když mi google ve hledání u mojí stránky zobrazil červenou ikonku s nápisem stránka byla patrně napadena hackery. Zaprvé většina lidí když něco takové uvidí, tak logicky dál nepůjde a zadruhé prohlížeče okamžitě sníží pagerank. Na wordpressu by měla stačit nějaká antivirová ochrana jako například Wordfence (není to desktopový antivir a tak problémy neodstraňuje automaticky, proto se do něj čas od času podívejte, oskenujte a vymažte). Také potřebujete nějakou spamovou ochranu, jako například WP-SpamShield proti spamům a falešným uživatelům. Oboje můžete najít pod kapitolou pluginy. Bezpečnost je uvedena jako poslední, ale přitom byste ji měli řešit hned nazačátku. Tato stránka byla úspěšně napadena již několikrát a většinou jsem to zjistil až po nějaké době. Google nemusí poznat že je stránka napadena a směje se dál, ale neodmění vás hezkým ohodnocením, když na vás někdo těží nějakou kryptoměnu a bere vám výkon, když vám bude stránka padat kvůli ddos útokům a nebo když budete mít na stránce stovky neviditelných a nehezkých odkazů někam, kam nechcete.

11) Nekopírujte, on to pozná. A nebude vás chtít. Když zkopírujete nějaký zajímavý text z wikipedie, nečekejte, že si ho někdo najde, bude ignorován. Nekopírujte ani od sebe, a když už máte nějaký kus stránek použít víckrát, označte ho tam, kde ho berete jako méně prioritní tagem canonical, viz <link rel=”canonical” href=”http://example….. a tak dál  do hlavičky duplicitní stránky (víc o stavbě HTML v další kapitole), a nebo pokud máte yoast, tak stačí k originálu napsat adresu kopie do kolonky duplicitní stránky.

12) V search console čas od času kontrolujte crawl errors a mažte zdroje odkud je na ně odkazováno, zbytek přesměrujte zpět na hlavní stránku. Pomůže plugin Redirection. Odstraňujeme externí již nefungující linky. Tady nám pomůže plugin Broken link checker.  Dále napište do googlu site:názevašístránky.cz a on vám najde všechny, které oindexoval (nové stránky tam asi nebudou, může to trvat týdny, internet je velký…). Snažte se tam mít všechny důležité, ale nesnažte se jich tam mít zbytečně moc. Například když google bude mít 200 odkazů na tagy, na které když kliknete, tak se vám otevře rubrika s jedním příspěvkem, zbytečně si rozdělujete přízeň googlu mezi moc položek. Pomůže soubor robots.txt do kterého můžete napsat kód, kterým zakážete různým a nebo všem botům (roboti brouzdající vody internetu a shraňující informace), aby na dané stránky nechodili. Otevřít soubor můžete také v yoastu pod kolonkou nástroje – editor souborů. Přidáme-li na konec například

User-Agent: *
Disallow: /bordel/

, zakážeme tak vstup všem botům do adresáře bordel a všeho co v něm je. Yoast to udělá za nás, stačí v nastavení nastavit, jestli chceme, či nechceme indexovat stránky, příspěvky, tagy, katergorie, obrázky, události atd… Záleží jak u koho.

13) Google má rád, pokud jsou stránky přizpůsobené pro mobilní telefony – responzivní. Mladí lidé na telefonu surfují dokonce radši než u počítače. Search console vás možná upozorní na věci jako příliš malý text, objet mimo obrazovku, tlačítka příliš u sebe, takže jedno nepůjde zmáčknout a podobně. Může vytvořit AMP (accelerated mobile pages) přístup, kdy je stránka psaná úplně jiným způsobem vhodným pro mobily a extrémně rychle načítá. WordPress má výhodu, že postačí plugin a nemusíme dělat nic manuálně.

Náš malý google nám roste jako z vody a učí se rychle… bohudík. V roce 2000 jste mohli mít na stránce podprůměrnej nesouvisející patext, ale když jste věděli, jak napsat klíčová slova, jak popisy a podobně, dostali jste se na první místo. Dnes je to jiné a google používá například analýzu toho, jak se návštěvníci na stránce chovají, jak brzy jí opustí a podobně, takže podvodníci mají smůlu. Přesto ale lze spoustu věcí ovlivnit. Udělejte si analýzu například na Seoptimizer a bod po bodu spějte k dokonalosti.

Tvorba obsahu

Nyní, když vím jak bude stránka vypadat a fungovat, začnu ji plnit obsahem. Dobrým základem je si vhodně zvolit strukturu webu. Bude hodně krátkých stránek, nebo pár dlouhých. Budou v menu 3 políčka, nebo 8. Na wordpressu máme dva typy stránek. Statické a rubriky. Statické se nemění. Do rubriky přířadíme vice příspěvků a pak je uvidíme seřazené podle data přídání. Můžeme přidávat buď stránku a nebo příspěvek. K příspěvku bývá možné přidat komentář, ke stránce ne. Já osobně používám příspěvky pro krátká sdělení, krátké články. Stránky pak pro delší věci. Do menu můžeme přidat jak stránku, tak příspěvek, tak rubriku. Rubriky mohou mít své podrubriky. Napište tedy článek. Vhodně označte nadpisy H1 až H6 (v praxi stačí většinou 2). Používejte interní linky na jiné stránky na vaší doméně. Přiřaďte vhodná klíčová slova, přiřaďte do správné rubriky. Máte li stránky ve více jazycích, uveďte překlady. Napište metadata (prvních pár vět, které o vás zobrazí google), napište excerpt (prvních pár slov, které se objeví u článku zařazeného v nějaké rubrice). Automaticky je prvních pár set slov, ale končí v polovině věty, občas když jsou nazačátku odkazy nebo obrázky, tak vypisuje nesmysly. Napíšu CSS pro tuto konrétní stránku a udělám grafiku – přidám pozadí, nebo vložím obrázky. Videa z youtubu, mapy, či články z některých velkých a dobře napsaných stránek můžu vložit přímo pomocí embed. To udělám tak, že zkopíruju adresu a vložím do editoru (nikoliv přímo do HTML). Video se samo aktivuje. Pokud ne, najdu na youtube, google maps, nebo někde jinde, pod položkou sdílet embed odkaz a vložím ten (můžu tak například vložit celý playlist a podobně). Podobnou technikou je Iframe, kdy do stránek vložím okno, v kterých bude zobrazená část, nebo celá jiná stránka. Pokud příspěvek označím jako soukromý, uvidí ho pouze registrovaní uživatelé. Je daleko lepší používat náhled, než stránku pokaždé aktualizovat, protože se ukládají staré verze stránky. Ne všechno však náhled zobrazí. Občas si dejte pozor na cachování. Stránky jsou uložené v počítači a při aktualizaci se nemusí aktualizovat ze serveru, ale jen načíst z počítače. Já, když dělám nějaký delší článek, tak plugin (W3 total cache) na cachování vypnu (plugin je již docela chytrý a na dobrých šablonách ten problém není).

Práci vám zpočátku může hodně ulehčit Mammoth .docx converter. Kde napíšete článek ve wordu a následně ho celý včetně obrázků i formátování importujete pomocí pluginu do příspěvku.

Fotogalerii můžete vytvořit například pomocí Gmedia Gallery. Kalendář s událostmi například pomocí google kalendáře. Můžete také využít například google dokumenty. Prostě přemýšlejte, hledejte pluginy, hledejte řešení.Pokud chci přidat nějaké obrázky a nechci později řešit otázku vlastnických práv, stačí na googlu, pokud hledám obrázky, kliknout na nástroje, vlastnická práva a zvolit jaká potřebuji. Pokud hledáme pozadí, nebo velký obrázek, klikneme rovnou na velikost – velké. Další možností je hledat například na portálu Pexels, kde jsou všechny obrázky volně k použití. Na mnoho obrázků, textů, částí kódu, nápadů a podobně se vztahuje licence Creative Commons, což znamená, že jsou volně dostupné. Poznáme to podle toho, že někde uvidíme CC v kolečku. Na poli softwaru a programování, můžeme volně použít to, co je Open source.

Často se mi stane, že potřebuji napsat něco, co editor neumí. Mnoho z toho zvládne Page builder například od Site origin. Najedu na něj rámečkem v pravém horním rohu textového pole. Nevýhodou je, že pokud se ho někdy rozhodnu přestat používat a vypnu ho, veškeré rozvržení textu a všechna funkčnost zmizí. Pokud nestačí ani page builder, potom musím kliknout na rámeček HTML. HTML je strukturovaný jazyk a vypadá například takto

<div style=“background:black;margin:50px;“> 
   <h1> Pro nadpis </h1>
   <p class=“nazev-tridy“> Pro odstavec </p>
   <a id=“nazev-id“ href=“www.odkaz.cz“> Text odkazu </a> 
   <a href=“#domena“> Doména </a> 
   <span id=“domena“> Joho já jsem kotva </span>   
</div>

HTML tvoří především takzvané tagy o kterých byla lehce řeč již v kapitole CSS, které s tímto jazykem přímo souvisí. HTML určí co se má zobrazit a CSS jak. Tagy nesou jednotlivé významy. Div a span význam nenesou, ale slouží jako kontejnery pro tagy další. Div je blokový element (zalamuje řádku, takže dává elementy pod sebe). Span je řádkový element (dává je za sebe). CSS mohou být definovaná inline, to znamená přímo uvnitř tagů, viz první řádek. Uzavření div tagu následuje úplně na konci a proto budou změny v CSS platit na všechny obsažené elementy uvnitř. Každý nadpis má svůj tag, pokud je něco tučně, či kurzívou, má to také svůj tag a podobně, viz 2. řádek pro nadpis. Když chci například aplikovat nějaké CSS jen na jeden paragraf, stačí text ohraničit tagy <p> a přidělit odstavci nějakou třídu, nebo id, viz 3. řádek výše uvedených tagů. Následně postupujem stejně jako v kapitole CSS a to pomocí třídy kterou jsme vytvořili. Chceme-li vytvořit odkaz, pomůže tag <a>, viz 4. řádek. Před adresu musíme dát href= a adresu samotnou do úvozovek, následuje text odkazu. Když chci vytvořit tzv kotvu, což je odkaz na téže stránku (můžete je vidět na začátku tohoto návodu), stačí namísto adresy odkazu použít #nejaky-nazev a potom obsahu na který chceme odkázat přidělit id stejného názvu, viz poslední dva dlouhé řádky.  HTML je programovací jazyk, proto si prosím nechte diakritiku pro sebe a nedělejte v názvech tříd mezery. Každý znak má své místo v ASCII tabulce, kterou bude používat kódování, které je defaultně nastaveno v hlavičce stránky. Je dobré vědět, když kopíruji nějaký text, zda ho zkopírovat do Editoru, anebo do HTML. Editor funguje jako Word a umí rozeznat věci jako velikosti fontu, odsazení, odkazy a podobně. Do HTML to naopak zkopíruji jako čistý text. Občas se bude hodit jedno, občas druhé. Obrázky, odkazy, videa, části kódu jako například <>, kopíruji vždy do editoru. Text z cizího článku naopak do HTML (aby mi editor nevytvořil paskvil zbytečnými tagy a já měl jednotné formátování) a potom mu přidělím velikosti fontu, nadpisy a podobně. To jak budou příspěvky vypadat neděláte v editoru pro každý příspěvek zvlášť, ale mělo by to být v CSS a fungovat na všechny příspěvky dohromady a automaticky. Pokud byste chtěli někdy psát stránky bez wordpress, museli byste všechen obsah uzavřít do celků tvořených tagy <html>    <head>  (obsahuje informace jako použité kódování, odkazy kde se mají stáhnout fonty, odkazy, kde se mají stáhnout javascriptové knihovny a také popis a název) <body> (obsahuje text článku, obrázky…) a dále například do <navigation>, <header>, <section>, <footer>. Pokud budete někdy vložit něco do hlavičky, nebo do všech článků najednou, použijte například plugin Head, Footer and Post Injections. Dlouhou dobu si ale vystačíte i bez tagů a html a hlaviček a tak… WordPress to za nás udělá automaticky. Výsledek můžeme vidět v již zmíněném Dev tool. Když již mám hodně příspěvků napsaných, musím si po sobě hezky uklidit databázi, k čemuž slouží například WP Optimize.

Chcete-li používat wordpress efektivně a na určité úrovni, a nebo pokud chcete aby vám přispíval články nebo produkty někdo, kdo se WordPressu nechce učit, je dobré použít tzv. Post types. Tak jak máte v levém administrátorském panelu například stránky, média, komentáře, tak tam můžete mít například knihy, filmy, prostě cokoliv vás napadne. Dál když na to kliknete, můžete tam mít například  políčko vložit novou knihu a když na to kliknete, tak tam bude poličko pro vyplnění názvu, data vydání, obrázku a všeho dalšího co si budete sami chtít přidat. Plugin vám s vytvořením hodně pomůže.

Když něco řeším a nevím jak to vyřešit, pomůže google. Dost často vás navede na stránku Stack overflow, což je blog pro programátory. Pokud nenajdete co potřebujete, přidejte vlastní dotaz. Spousta hezkých návodů je také na CSS tricks. Různé články o wordpressu jsou na WPlama. Když chci přidat nějakou animaci, můžu si nějakou najít například na Codepen. Pozor na to, že přidaný kód není často v CSS, ale například v SCSS (obohacené CSS, kde můžeme lehce programovat), který musíme následně převézt zpět do CSS například v Sassmeister. Ne všechny animace však půjdou na wordpressu použít, protože některé volají různé javascriptové knihovny. Když již mám většinu věcí hotovou, stránku si hezky analyzuji. Například zmíněné stránky Search Console, GTMetrix, a Seoptimizer. Pro funkčnost kódu použiji W3 Validátor. No a nyní pokud na to mám čas odstraňuji jednu chybu po druhé. Postup hledejte na zmíněných fórech, pomoci vám můžou pluginy. Uvedy příklad jeden z milionu. Neměl jsem alt atributy u obrázků – doplním. U rychlosti jsem měl chybu Remove query strings, nainstaluji plugin remove query strings… a tak dále a tak dále. Měl jsem několik neplatných odkazů, měl jsem špatné poměry různých nadpisů H1 až H6… ne všechno asi odstraníte, věnujte se vždy jen tomu, co vypadá nejzávažněji. Google vám bude hlásit stovky podstánek s chybou 404. Dobré je nastavit přesměrování, například pluginem Redirection. Google vám bude hlásit hentry erory, pomůže plugin Hatom/hentry remover… a tak dál a tak dál. Je to nikdy nekončící boj člověka s nedokonalostmi.

Pokud jste udělali dobře všechny předchozí kapitoly, bude už tvoření obsahu docela rychlé. Nic již nastavovat nepotřebujete, budete klikat vždy na to samé a brzy velmi rychle. Přizpůsobte si wordpress jak vám vyhovuje. Například při psaní příspěvků si vpravo nahoře pod kolonkou nastavení zobrazených informací schovejte vše, co nepotřebujete. Naučte se zkratky jako například ctrl + b pro tučné písmo a podobně. Když procházím hotovými stránkami a chci něco poupravit, stačí kliknout v horní liště na upravit stránku. Pro nový příspěvek stačí v horní liště kliknout na + a na vytvořit příspevek, nebo stránku. Nezapomeňte si stránku zálohovat, kdyby cokoli. Můžete například jedním kliknutím pomocí pluginu All-in-One WP Migration.

Doufám, že vám článek Tvorba internetových stránek ve wordpress pomohl jak mohl. Nyní už zbývá jen hodně trpělivosti. Držím palce s veškerým zápolením

Tak a to je vše, tak tvořte