Jak vytvořit vlastní internetové stránky

jak_vytvorit_internetove_strankyV tomto článku se podíváme na postup jak si vytvořit internetové stránky nebo blog bez jakékoli znalosti programování. Hlavním cílem tohoto návodu je základní přehled co všechno byste měli udělat na úplném začátku, co při samotné stavbě stránek a nakonec se podíváme na zajímavé online nástroje a občas opomíjenou propagaci stránek. Tento článek je také určený všem, kteří chtějí pochopit, co všechno zahrnuje vytvoření internetových stránek.

Cíle

První na co byste si měli odpovědět je otázka “Proč si zřizuji internetové stránky?

  • Jaký je hlavní účel jsou to peníze, informace, propagace nebo něco jiného?
  • Pro koho dané stránky budou, pro jaké skupiny lidí?

Doporučuji definovat k těmto cílům také dílčí měřitelné cíle jako  jsou výdělek, od kdy, kolik měsíčně, jaká návštěvnost a další. Na podobné téma pořádá Petr zajímavý workshop 5 otázek, když plánujete web, který doporučuji všem.

Analýza

Příprava analýzy by měla minimálně obsahovat témata (produkty) o kterých web bude a zkontrolovat hledanost hlavních klíčových slov na Sklik a AdWords. Analýza klíčových slov se může týkat jak produktů které budete prodávat, tak i témat o kterých budete psát. Doporučuji také udělat analýzu konkurence pro lepší znalost trhu.

Kde stránky vytvořit a umístit

wordpress-logo-notext-rgbObecně existují dvě možnosti jak vytvořit své stránky. První je, že si web postavíte na již hotové platformě, kde řešíte akorát obsah a minimum nastavení. Dva nejznámější systémy tohoto typu jsou blogger.com (od Google) a WordPress.com (od Automattic). V Čechách je asi známější webnode.cz. Všechny tři systémy fungují na principu, že Vám zdarma zřídí webové stránky na subdoméně, a vy řešíte obsah stránek a nestaráte se o hosting, bezpečnost a spoustu dalšího nastavování. Alternativou je instalace vlastního redakčního systému (CMS) jako je Drupal nebo WordPress. Velkou výhodou proč instalovat vlastní redakční systém je volnost v nastavování a jeho možnosti přizpůsobení. Díky tomu je třeba, abyste si s instalací redakčního systému (WordPressu) dali práci a nastavili vše potřebné. Ještě je důležité zmínit, že pokud chcete používat variantu vlastního CMS, budete potřebovat webhosting a vlastní doménu. Tento článek se bude dále zabývat instalací vlastního redakčního systému WordPress, který je česky a jednoduše se ovládá.

Výběr hostingové firmy

V předchozí kapitole jsme si řekli, že budeme instalovat redakční systém WordPress a k tomu budeme potřebovat webhosting a vlastní doménu. Jedná se o roční náklad od 500Kč výše. Zde doporučuji využít webhosting, protože oproti ostatním typům hostingů jako je VPS či cloud nemusíte mít žádné technické znalosti na jeho provoz. V Česku je sice dostatek webhostingových firem, ale bohužel zatím u nás neexistuje webhosting s přidanou hodnotou kde by se za vás postarali o věci jako je cachování, testovací verze webu, CDN, pravidelný malware kontrola stránek a měli zaměření na větší bezpečnost. Přesně takový je zahraniční WordPress webhosting od WPengine, který je sice dražší, ale zato se úplně o vše postarají.

Instalace WordPressu

Základní instalace

Většina hostingových firem nabízí instalaci WordPressu na jedno kliknutí, pokud ne akorát zřídíte databázi, stáhnete aktuální verzi WordPressu a tu přes FTP nahrajete na server a propojíte s databází, detailní popis instalace najdete v článku instalace WordPressu.

Šablona

Pro začátek stačí aktivovat základní šablonu WordPressu twentythirteen (2013) již obsaženou v instalačním balíčku. Stačí si vyměnit obrázek v hlavičce stránek a pozměnit trochu barvy v nastavení. Pokud sablona_v_rapozitarichcete použít jinou šablonu, vyberte si takovou u které budete mít jistotu že se o ní autor bude starat (pravidelně aktualizovat). Pokud se chcete podívat po zajímavé šabloně zdarma, na stránce wordpress.org/themes je oficiální WordPress knihovna „repozitář“ šablon od mnoha různých autorů. Až budete vybírat šablonu, vybírejte jí podle počtu stažení, zkontrolujte jestli autor reaguje na dotazy a kdy byla šablona naposledy aktualizovaná.

Při změnách v šabloně doporučuji využít „Childtheme“. Díky Childtheme můžete udělat jakékoli změny v šabloně s jistotou, že po aktualizaci šablony Vám změny zůstanou zachovány. Podívejte se na návod nebo video jak vytvořit childtheme.

Pluginy

Pluginy dělím na tři skupiny “must have” nutné pro každou instalaci, “nice to have“ zajímavé pluginy a “functions” pluginy, které řeší konkrétní funkci potřebnou na daném webu. I u pluginů je důležité vybírat takové pluginy, za kterým někdo stojí (ideálně firma), zdali autor reaguje na supportu, podle počtu stažení a zda je kompatibilní s poslední verzí WordPressu. WordPress nabízí velký výběr z tisíce kvalitních pluginů zdarma v jeho repozitáři wordpress.org/plugins nebo si můžete pluginy koupit na známém webu codecanyon.net.

Nutné pluginy “Must have plugins“

Coming soon page – návštěvníkům ukáže text stránky v rekonstrukci (lze vložit html kód), používám ho na začátku nebo při větší rekonstrukci stránek
iThemes security – komplexní plugin na zabezpečení WordPressu,
Sucuri security – druhý plugin na bezpečnost WordPressu, kombinuji s předchozím
WP Super Cache – plugin na urychlení načítání stránek (komprese, html preload)
Akismet – ochrání Vás před spamem v komentářích
WP Smush.it – plugin na automatické zmenšení velikosti obrázků
WordPress SEO by Yoast – SEO optimalizace stránek
Jetpack – přináší mnoho funkcí ze systému wordpress.com, od autorů samotného WordPressu. Využívám tyto moduly Jetpacku:jetpack-logo

  • Custom CSS pokud je třeba změnit něco deisgnu(CSS) tohle je ideální nejen na rychlé otestování
  • Enhanced Distribution
  • Jetpack Comments – umožnuje využít Facebook, Google+ či Twitter účty ke komentování
  • Related Posts – pod každým článkem ukáže tři nejvíce relevantní články k tématu
  • Publicize – při publikování článku na webu publikuje článek také na Google+, Facebook a Twitter
  • Subscriptions – rozesílá zájemcům informaci o novém článku na Vašich stránkách
  • Shortcode Embeds – používám na jednoduché vkládání prezentací ze Slideshare a videí z Youtube do článků. Funguje i na další podobné služby
  • Tiled Galleries – Upraví základní nudnou galerii WordPressu do nádherné galerie
  • Widget Visibility – velmi důležité nastavení widgetů, kde se mají či nemají zobrazovat
  • WordPress.com Stats – alternativní statistiky ke Google Analytics (využívám oboje), důležité je však zobrazení statistik po přihlášení do nástěnky WordPressu

Doporučené pluginy “Nice to have”

Google Analyticator  – vloží kód Google Analytics a zobrazí statistiky v nástěnce WordPressu
Broken Link Checker – kontroluje funkčnost všech odkazů na webu
Debug Bar – pomáhá s hledáním chyb a kolizí, existuje i rozšíření pro cron
Shortcodes Ultimate – tlačítka, rozložení stránek, zvýraznění a mnoho dalšího
Contact Form 7 – s tímto pluginem vytvoříte jakýkoli kontaktní formulář například i zadání životopisu přes webové stránky a mnohé další

Potřebné pluginy “functions plugins”

Do této třídy řadím pluginy, které řeší konkrétní funkce jako eshop, event manager, katalog odkazů, sociální sítě, fórum a další. Těchto pluginů je opravdu hodně a právě díky nim je ve WordPressu možno vytvořit mnoho různých typů stránek.

Obsah webových stránek

Článek vs. stránka

Při tvorbě stránek rozlišujeme, co má být klasická stránka která popisuje například produkt, či společnost a moc často se nemění oproti článku (příspěvku). Články vydáváte většinou pravidelně, mají kategorii, štítky a je možné pod ně psát komentáře.

Jako první věc při tvorbě obsahu si zvolte, jestli má být hlavní stránka Vašeho webu statická nebo to bude přehled zkrácených příspěvků. U firemního webu je hlavní stránka často statická s popisem důležitých informací oproti tomu klasický blog jako je tento má na hlavní stránce přehled nejnovějších příspěvků.

Menu

Každá šablona má takzvané hlavní menu, které si vytvoříte sami v administraci a v šabloně ho aktivujete. Do menu můžete nastavit jakýkoli odkaz – stránku, článek, kategorii či externí odkaz. Podívejte se na moje hlavní menu, skládá se z odkazů na stránky (SEO, Citáty) na článek (osobní rozpočet), kategorie (ICT, Ekonomika) a externí odkaz (WordPress) na můj druhý blog. Některé šablony mají více typů menu například “top menu”, které je úplně nahoře na stránce nebo „footer menu“ umístěné v patičce (footer).

Sidebar “sloupec” 

Webpage layoutSidebar je sloupec kam lze dát bloky informací pomocí takzvaných “widgetů”, které se zobrazují v základním nastavení u každé stránky nebo příspěvku. Například u firemního webu budete chtít aby se všude zobrazovalo menu s hlavními produkty firmy. U blogu budete zase chtít, aby se všude zobrazovaly kategorie článků a poslední komentáře. Dodatečně se dá pomocí pluginu (Jetpack) upravit zobrazování více individuálně, co se kde má a nemá zobrazovat. U článků i stránek si můžete zvolit, jestli chcete zobrazovat sidebar nebo ne, v základním nastavení je zobrazit sidebar.

Hlavička a patička stránky “Header & Footer”

Hlavička je horní část stránky a tvoří jí hlavní nadpis stránek, logo nebo obrázek s logem a hlavním menu. Většinou lze nastavit vlastní obrázek do pozadí hlavičky a dopředu dáte svůj název stránek. Hlavička se opakuje na všech stránkách webu bez vyjímky.

Footer je oproti tomu zakončení stránky neboli patička, kam můžete stejně jako do sidebaru dát potřebné bloky informací pomocí widgetů. Například tam budete chtít dát menu s odkazy na pravidla a další věci, které je dobré mít až dole na stránce nebo přehled použitých štítků či odkazy na jiné stránky.

Texty a obrázky „content“

Doporučuji si dát velmi záležet na textu, který budete psát a vkládat do stránek. Kvalita a originalita textu jsou velmi důležité věci. Konkrétně kvalita textu je důležitá pro čtenáře a originalita (text jste napsali a neokopírovali ani jednu jeho část) zase pro vyhledávače. Fotky, které budete na stránkách používat, doporučuji kupovat například na cz.depositphotos.com (balíčky fotek) nebo na photodune.net (samostatné fotky od 1 dolaru). Používejte pouze obrázky, kde můžete doložit že jsou Vaše, nebo máte svolení je používat například od výrobce produktu. Na závěr této kapitoly dodávám, že naplnit webové stránky obsahem může být jedna z časově nejnáročnějších prací na tvorbě internetových stránek.

Optimalizace stránek

Poté co máte vytvořené stránky již s obsahem, jsou hotové samotné internetové stránky včetně většiny funkcí. Ovšem tímto práce na vytvoření stránek zdaleka nekončí. V první řadě třeba se podívat na rychlost načítání stránek a za druhé na zabezpečení stránek.

Cachování & HTLM preload (rychlost načítání stránek)

Poté co jste instalovali WordPress, šablonu, pluginy a vytvořili stránky a příspěvky je třeba celý web optimalizovat aby se rychle načítal a to pomocí takzvaného cachovaní a HTML preload. K tomu využijeme plugin WP Super Cache a vy se můžete podívat na skvělou přednášku (návod) v češtině od Jakuba na slideshare nebo youtube.

CDN – obrázky rychle pro celý svět

Hned na začátek uvedu, že tuhle službu využijete, pokud Váš web bude mít návštěvníky rovnoměrně z celého světa a budete chtít, aby se fotky (jako součást stránek) v Austrálii načítali stejně rychle jako na Aljašce. CDN je celosvětová síť serverů která umožní, aby si čtenář stahoval obrázky z nebližšího zdroje (serveru) a měl tak co nejkratší dobu načítání stránek. CDN poskytuje více firem, některé jako CloudFlare jsou zdarma a některé firmy je nabízejí přímo k hostingu stránek.

Zabezpečení stránek

Jako nedílnou částí optimalizace internetových stránek beru zabezpečení stránek. Jelikož je WordPress open source je občas cílem útoků a je vhodné se proti tomu zabezpečit. Nejčastější typ útoku je útok na prolomení hesla – je tedy třeba omezit počet chybných přihlášení pomocí již zmíněného pluginu iThemes Security. Oproti tomu druhý typ útoku je na starší zranitelnosti, kdy se hledají staré verze pluginů a šablon, známé tím že obsahují chybu. Zde Vám pomůže aktualizace WordPressu, pluginů i šablony ale hlavně obezřetnost právě při výběru pluginů a šablon.

Doporučuji se s někým o tom poradit a nastavit základní zabezpečení jako Limit Login, silné heslo, vypnout editaci šablon a pluginů z administrace, změnit prefix databáze při instalaci WordPressu a nastavit dvoufázové přihlašování. Napsal jsem o bezpečnosti článek zabezpečení WordPressu, který můžete použít jako inspiraci. Ono zabezpečení je z velké části zajištěno pluginy iThemes Security a Sucuri Security o kterých se zmiňuji výše.

Využití online aplikací

Vaše internetové stránky lze napojit na mnoho online služeb a využít tak jejich zajímavých možností. Níže uvedený seznam využijte dle Vaší potřeby, první dva však spadají do kategorie “must have” tedy musí mít každá internetová stránka.

Google Webmasters Tools – informace jak Google roboti vidí Váš web, statistiky, chyby a další
Google Analytics – statistiky návštěvnosti stránek
Google Alerts – upozorní Vás pokud se na internetu objeví Vámi zadaná fráze, používám na zjištění kdo zmiňuje můj web
WordPress.com – účet potřebný pro aktivaci pluginů Jetpack a Akismet
CloudFlare – cachování a bezpečnost, základní účet je zdarma
Incapsula – alterativa ke Cloudflare, větší důraz na bezpečnost, základní účet je zdarma
Uptimerobot.com nebo Pingdom.com – kontrola jestli stránky fungují, zasílá alerty
Tynt.com – přidá odkaz na Váš web pokud někdo kopíruje Váš obsah a nekam ho vloží

Propagace stránek

Nyní jsme v situaci, kdy máme kompletně vytvořené stránky a je třeba dávat pravidelně světu vědět, že Vaše stránky jsou tedy a jsou super. Propagaci dělím na několik typů:

Odkazy

Jeden z důležitých faktorů jak vyhledávače hodnotí vaše stránky, jsou odkazy z jiných stránek vedoucí na váš web. Takže pokud máte firemní web, registrujte se v těch hlavních firemních katalozích (firmy.cz a další), oslovte Vaše dodavatele, ať na Vás odkážou ze svého webu, podívejte se na důležité lokální stránky a požádejte o odkaz například stránky města či MěÚ. Tímto chceme dosáhnout, abyste byli na klíčová slova definovaná na začátku v analýze na první stránce ve vyhledávačích.

PPC

PPC (pay per click) je typ reklamy, která funguje na principu odkazování na Vaše stránky (například ve vyhledávači google.cz nebo seznam.cz) na konkrétní klíčové slovo kdy platíte pouze „proklik“ a nezáleží, kolikrát se reklama zobrazí. Cena „prokliku“ je různá od 0.50 Kč až po desítky korun. Pokud něco prodáváte, doporučuji vyzkoušet nebo si někoho najmout kdo Vám udělá prvotní analýzu, nastaví cíle, konverze a podobné věci.

Emailing

Posílání emailů je velmi důležitá forma propagace stránek a lze jí využít více způsoby. První typ emailingu je pokud máte internetové stránky, kde publikujete články. Zde můžete uživatele automaticky upozornit na to, že vyšel nový článek emailem. Stačí, když Vám zadají do formuláře email. Druhý způsob jak využít emailing je nabídnout stáhnutí návodu či knížky zdarma emailem. Hlavní cíl je opět získat email. No a poslední forma je zasílání „newsletterů“ v kterých můžete informovat o novinkách.

Sociální média

Pokud se rozhodnete využívat Facebook, Twitter nebo Google+ měli byste si vytvořit profilovou stránku v dané sociální síti a počítat s tím že se tomu budete muset věnovat a kontrolovat co Vám tam lidi píšou a reagovat na příspěvky.

Základní využití sociálních médií je možnost, nastavit při publikovaní nového článku automatické odeslání článku také na daná sociální média. Opět k tomu využívám Jatpack a jeho modul Publicize.

Pravidelné publikování kvalitních článků

Doporučuji vám si zvolit interval a podle toho psát články na Váše webové stránky. Pokud budete mít firemní stránky věnující se prodeji aut, publikujte články na téma auta. Kvalitní článek je základní stavební kámen každého webu a může Vám pravidelně na Vaše internetové stránky posílat návštěvníky i roky po jeho publikaci.

Tímto končí návod či spíše jednoduchý průvodce tvorbou vlastních internetových stránek zaměřený na tvorbu stránek svépomocí, bez znalosti jakéhokoli programování. Pokud máte připomínky, nebo byste chtěli seznam o něco rozšířit budu velmi rád, pokud mně napíšete zpětnou vazbu do komentáře.

 

Author: Radek

Fanoušek WordPressu, se zájmem o dění okolo internetu a přírody.

Share This Post On

2 komentáře

  1. Z logické podstaty věci by analýza měla předcházet cílům, které by měly být SMART. Než si sednem na projekt, tak bychom si měli říct, co jak pro koho. Výsledkem analýzy může být i zjištění, že web vlastně pro naše podnikání nepotřebujeme.

    Post a Reply
  2. Podle mě před tím než začnete dělat analýzu by jste si měli říct na co web chci? Vydělat (eshop), informovat (blog, magazín), jinak vydělávat (např. affil). Poté analýza pomůže definovat dílčí cíle, jedná se o jednoduchý návod … 🙂

    Post a Reply

Napsat komentář

Přihlašte se k odběru nových článků!

Přihlašte se o odběru a budete dostávat informace o nových článcích emailem.

Hotovo, děkuji za přihlášení.