9. Krokov ako vytvoriť web s CMS WordPress

Ak rozmýšľate o tom ako začať pracovAko vytvoriť webať a zarábať na internete, určite bude provou otázkou to v akej oblasti chcete podnikať. To je čisto individuálna záležitosť, takže tomu sa teraz venovať nebudeme. Ale je tu ďalšia otázka a to je web stránka. Ak chce ktokoľvek cez internet rozbehnúť svoje podnikanie, určite k tomu bude potrebovať webstránku.

Na vytvorenie web stránok existuje veľa možností, no predpokladajme že nechcete zbytočne investovať peniaze za výrobu webu a platiť webdizajnérskej firme. Jedna z možností je zakúpiť si kvalitný software v ktorom výrobu webu zvládne aj začiatočník – napr. Website Design Software MioWeb  alebo WebsiteX5 . V týchto programoch si pohodlne vytvoríte celý web offline na svojom PC a hotový web už len nahráte na svoju www doménu. Tak isto pri ďalších úpravách a zmenách webu si všetko pripravíte v PC a potom len “klik” a všetko sa na stránke online aktualizuje.

Druhou možnosťou je vytvoriť web pomocou redakčného systému (CMS). Týmto spôsobom je možné vytvoriť v podstate akýkoľvek web, či už je to prezentačná firemná stránka, internetový obchod, blog alebo čokoľvek iné. Celosvetovo jeden z najpoužívanejších systémov na tvorbu webu je WordPress. Napríklad aj táto stránka beží na WordPress-e. V nasledujúcom článku nájdete presný postup, ako jednoducho vytvoriť v 9-tich krokoch pekný a funkčný web a to aj bez expertných skúseností a znalosti programovania.

Systém pre správu web stránok WordPress má dlhú históriou, počas ktorej prebehlo viacero zásadných zmien. Základom však zostáva od začiatku snaha o čo najlepšie pochopiteľný systém, ktorý umožňuje spravovať vlastné stránky, aktualizovať ich, upravovať a dopĺňať o ďalší obsah a pluginy jednoducho a aj bez programátorských znalostí.

Svoj vlastný web tak môžete mať vytvorený pokojne v priebehu niekoľko desiatok minút. Chce to mať len vopred pripravenú vlastnú doménu, web hosting, inštalačný balík WordPress a základnú predstavu o obsahu a vzhľade vašich budúcich stránok. Podklady pre tento návod pripravil Tomáš M. (t) a bol doplnený o ďalšie praktické skúsenosti, informácie a odporúčania. Poďme na to…

1. Registrácia domény a webhosting

Stránky fungujúce na akomkoľvek redakčnom systéme (CMS), akým je práve aj WordPress, potrebujú pre svoj chod tri hlavné súčasti. Webový priestor, doménu a databázový server (databázu). Skôr, než sa bude dať pracovať a inštalovať CMS systém, je potrebné vlastniť funkčnú internetovú doménu (www adresu) spolu s hostingom a databázou.

V dnešnej dobe ide už o bežnú ponuku webhostingových služieb a dokonca niektoré spoločnosti ponúkajú inštaláciu systému WordPress online cez ovládací panel k Vašej doméne len na pár kliknutí. Túto možnosť nájdete napr. na Websupport alebo Exohosting – potom môžete kroky 2 až 4 preskočiť a pokračovať až na bode č. 5.

2. Nastavenie FTP a databázy

Cez administračné rozhranie k Vášmu webu, ku ktorému získate prístup po zakúpení domény a hostingu, nahliadnite do nastavení FTP (File Transfer Protocol) prístupu. To slúži na pripojenie z Vášho PC na webový priestor kam následne môžete nakopírovať súbory. Pri vytváraní prihlasovacích údajov odporúčame používať komplikované heslá v tvare aspoň podobnom na „C1rk-kUl4-rT0“.

Rovnako tak vytvorte prihlasovacie údaje aj pre databázu. Väčšina systémov túto sekciu nazýva MySQL, alebo len stručne „Databáza“. Prihlásenie k databáze bude vyžadovať celkovo tri dôležité údaje. Názov databázy, login a heslo. Niekedy sa používajú názov databázy a login rovnaké (napr. db8754user). Všetky tri údaje budú nevyhnutné pri inštalácií vášho WP systému, ako sa WordPress v skrátenom tvare nazýva a sami sa s takouto skratkou budete určite stretávať.

nastavenie ftp a databázy

3. Stiahnutie aktuálneho inštalačného súboru WordPress

wp stiahnutieSystém stránok na redakčnom systéme WordPress je bezplatný a vždy bezplatný bol. Pokusy predávať tento systém v minulosti boli síce ojedinelé, no špekulantom sa podarilo na nevedomosti iných takto zarobiť. Oficiálne stránky systému sa nachádzajú na adrese www.Wordpress.org.

Pre stiahnutie však odporúčame hneď tri verzie. Medzi nimi si vyberajte najmä podľa toho, o aké stránky pôjde. Slovenské stránky by mali prioritne voliť zdroj stiahnutia sk.wordpress.org. Inštaláciou slovenského systému docielite slovenské prostredie administrácie, pomocníka a aj samotného systému. Pri inštalácií anglickej verzie z hlavnej stránky, alebo českej verzie cs.wordpress.org samozrejme docielite daný jazyk a taktiež prostredie.

Inštalačný súbor (.zip) stiahnete pomocou modrého tlačidla na spomenutých stránkach. Jeho veľkosť sa pohybuje okolo 5 až 7 MB, v závislosti od dátumu a verzie. Súbor ZIP stiahnite do svojho počítača a rozbaľte kompletný archív napríklad na pracovnej ploche.

inštalačné subory

4. Kopírovanie súborov cez FTP a inštalácia systému WP

Pre pripojenie na svoj hosting použite aplikáciu, pomocou ktorej je možný presun súborov z vášho počítača na vzdialený server. Aplikácie známe ako FTP klienti budú vyžadovať prihlásenie pomocou údajov, ktoré ste si nastavili v administrácií v rámci nastavenia FTP servera. Pre bežnú prácu je roky zaužívanou aplikáciou Total Commander, prípadne iné bezplatné FTP programy. Vhodný je aj plugin do prehliadača Firefox s názvom FireFTP.

Nastavenie pre Total Commander: V nastaveniach pre FTP, prípadne priamo medzi ikonkami vrchného menu programu sa nachádza malá ikona s drobnými písmenami FTP. Pomocou tejto voľby vyvoláte okno v ktorom sa nachádza vytvorenie nového prihlásenia. Tam zadajte údaje pre prihlásenie k FTP serveru, pričom prvé políčko je názov, ktorý je čisto na vás a slúži napríklad na vloženie názvu projektu alebo webu, ďalej zadáte ftp adresu (napr. ftp.vasadomena.sk), užívateľské meno a heslo.

Po pripojení na vašu stránku (server) v ľavom okne, môžete v pravom otvoriť zložku so súbormi stiahnutého wordpress systému. Pravým tlačidlom myši označíte všetky súbory a stlačením klávesy F5 ich skopírujete na server. Proces kopírovania môže trvať viac ako 10 minút, nakoľko celý systém obsahuje vyše 1000 súborov.

ftp kopirovanie suborov

Pravá inštalácia začína práve teraz. Pri správnom nakopírovaní všetkých súborov systému priamo do vytvorenej domény na hostingu je teraz nutné stránky spustiť. Na rozdiel od starých verzií systému, v  nových verziách stačí zadať do prehliadača vašu adresu (www.vasadomena.sk) a stretnete sa s prvými známkami vašej budúcej stránky.

Čaká vás jediné tlačidlo a krátky text. Pokiaľ sa vám mimo jednej tabuľky s textom a tlačidla zobrazujú aj nejaké chybové hlásenia, systém nie je správne nakopírovaný, alebo je nutné kontaktovať svoj hosting. V prípade, ak sa po stlačení tlačidla úspešne dostávate do ďalšieho okna s piatimi políčkami, venujte im zásadnú pozornosť. Na nasledujúcich obrázkoch si môžete pozrieť jednotlivé obrazovky a kroky pri inštalácii…

Údaje pre prihlásenie do databázy je nutné zadávať presne tie, ktoré ste si zadali pri vytváraní novej databázy vo svojom účte v administrácií hostingu. Názov serveru býva často predpísaný ako „localhost“ a neodporúča sa ho meniť. Ide totiž aj o ochranný prvok, ak ani súboru, kde sa údaje uložia, neprezradíte priamu cestu k serveru. No môžete sa stretnúť aj s priamou adresou servera (napr. sql3.dnsserver.sk). Posledné políčko sa nazýva prefix, ktoré nemusíte vôbec meniť. Ide o odlíšenie názvov súborov prislúchajúcej k danej inštalácii, ak by ste náhodou inštalovali dva wordpress systémy na rovnakú databázu.

Po správnom zadaní údajov a potvrdení sa vám nainštaluje kompletný systém. Nasledujúce okno si od vás vypýta už len názov stránky, vaše prihlasovacie meno a heslo – tie si teraz zvolíte sami a budú slúžiť na prihlasovanie do administrácie vašej web stránky. Meno zadávajte najlepšie bez diakritiky a niečo jednoduché, heslo zapamätateľné, no komplikované a následne tento krok potvrďte.

Ochrana súborov:
Chrániť svoje súbory môžete aj priamo na serveri. Nastavenie CHMOD sa zdá byť komplikované, avšak podľa tohto návodu  s použitím aplikácie Total Commander sa to dá zvládnuť za pár sekúnd. Označenie súborov pomocou pravého tlačidla treba odlišovať od označenia zložiek. Zložkám a súborom sa dávajú odlišné nastavenia. Tie presne definujú, kto má aký prístup. Znemožní tak meniť súbory niekomu z vonku, čo je prejav útoku hackerov, alebo vírusu.

5. Základné nastavenie webu a výber grafickej témy

Aby stránky vôbec mohli fungovať, potrebujete urobiť niekoľko úkonov. Jednou zo základných a často najzaujímavejších zmien vôbec je voľba vlastného dizajnu (témy). Množstvo vzhľadov nájdete aj bezplatne. Je však potrebné vyhľadávať pojmy v spojení „Free WordPress theme“ alebo „Free WP theme“ najlepšie s určením času na posledných pár mesiacov, alebo jediný mesiac. Získate tak vyššiu záruku, že nezvolíte zo zastaraných tém. Stará téma bez aktualizácie tvorí riziko bezpečnostných dier a prieniku vírusov, či hackerov do vášho webu.

Stiahnuté a rozbalené témy je potrebné skopírovať pomocou FTP do nasledovného umiestnenia: doména na serveri “\wp-content\themes\”
Do tejto zložky nakopírujte rozbalené adresáre tém. Prípadne ich môžete nahrávať priamo cez administráciu pomocou sekcie „vzhľad -> témy“. Nové verzie systému umožňujú veľmi rýchly a hladký prístup k veľkej databáze tém z oficiálnych stránok. Nájdete tu veľké množstvo rôznych tém, ktoré by mali fungovať s aktuálnou verziou systému.

Vyberať si však môžete z vašich už nainštalovaných tém a jednoduchým tlačidlom aktivácie, alebo inštalácie, tému okamžite spustíte. Chybné témy a témy, ktoré odmietajú fungovať z hostingu radšej odstráňte.

Profesionálne dizajny pre web
Krajší a profesionálnejší vzhľad môžete docieliť zakúpením svojho vlastného dizajnu, prípadne WP téma MioWeb vďaka ktorej je editácia a tvorna webu veľmi jednoduchá a na profesionálnej úrovni. Pri hľadaní bezplatných dizajnov sa veľmi hravo dostanete aj na stránky ponúkajúce predaj tém.

Takmer vždy sa však na predajných stránkach ocitnete pre fakt, že vás na ne nalákali nezodpovední autori rôznych zavádzajúcich článkov, ktorí síce lákajú na bezplatné „free“ témy, no v konečnom dôsledku vám ponúknu len jednu a za ďalšie musíte platiť. Môžete sa tomu vyhnúť a siahnuť po platených témach rovno. Vybrať si môžete napríklad z týchto svetoznámych databáz dizajnov:
http://www.wpzoom.com
http://themeforest.net/category/wordpress
http://www.theme-junkie.com
http://www.woothemes.com

>> Mohlo by vás zaujímať: Ako na Photoshop – online návody a kurz Photoshop pre začiatočníkov

6. Vytvorenie kategórií článkov a hlavného menu

Web sa štandardne skladá zo stránok a článkov. Stránky tvoria hlavnú štruktúru webu a môžu mať napr. nasledovné názvy: O nás, Naše služby, Produkty, Kontakty, Fórum, Fotogaléria a pod.

Články sú v podstate príspevky, ktoré priebežne na web pridávate a zobrazujú sa na webe postupne za sebou a je vhodné ich rozdeľovať do kategórií podľa témy. Preto je dobré si hneď na začiatku vytvoriť základné kategórie vašich budúcich článkov. Premyslite preto veľmi dobre, aké kategórie obsahu budete potrebovať.

Firemné weby, ktoré často potrebujú len 4 nemenné stránky sa môžu uskromniť vďaka položke menu „Stránky“ (Pages), ktoré nevyžadujú žiadne komplikované úkony a ide o prosté strany s vami vloženým obsahom.

Potrebujete mať na svojom webe presné poradie položiek v menu a chcete, aby ho tvorili konkrétne kategórie, alebo stránky? Pre tento účel existuje konkrétne nastavenie. Stránky môžu tvoriť štruktúru webu aj cez menu. Nastavenie stránok do menu je možné upravovať aj v sekcii „vzhľad“ -> „menu“.

7. Inštalácia vhodných pluginov a modulov

Pluginy, resp. moduly sú dôležitou súčasťou výbavy web stránok, pridávajú rôzne prvky a funkcie. To, čo neobsahuje systém po inštalácií, môžete pomocou pluginu prirobiť. Vytvoriť tak môžete zo svojej stránky eshop, zábavnú sociálnu sieť, katalóg stránok, diskusné fórum, alebo čokoľvek iné. Najmä však slúžia na zdokonaľovanie nedokonalostí, alebo aktuálnych individuálnych potrieb. Svet pluginov je rozsiahly a každý si musí nájsť svoje podľa potreby a zamerania webu. Radi vám však odporučíme niektoré pluginy, ktorým sa oplatí venovať pozornosť.

Odporúčané pluginy/moduly:

  • Google Sitemap generator: Pri budovaní stránok a snahe o dobré pozície v Googli pri vyhľadávaní budete potrebovať vlastnú sitemap (mapa stránky). Ide o súbor, ktorý Googlu odovzdá kompletný zoznam článkov a stránok, ktoré sa nachádzajú na vašom webe, prípadne aj s časom aktualizácie.
  • Contact Form 7: Tento plugin pridáva ľahkú možnosť vloženia kontaktného formulára do stránky – napríklad vhodný na odoslanie správy cez web pre návštevníkov vášho webu. Plugin je bezplatný.
  • SEO All in pack: Rozsiahly balík vylepšení pre WordPress stránky v rámci SEO (Search Engine Optimization), ktorý zo stránok robí o niečo lákavejší web pre vyhľadávače. Je však potrebné vždy túto oblasť viac sledovať a dbať na zadávanie potrebných nadpisov, popisu a obsahu do každého článku.
  • Sociable: Kto dnes nie je sociálny, ako keby ani nebol. Sociálne siete sú potrebné využívať aj pre zvýšenie tematicky cielenej návštevnosti webu. K článkom plugin pridáva tlačidlá a možnosti zdieľania.
  • Simple Lightbox: Plugin umožňuje vytvárať nové prostredie pre otváranie obrázkov na vašich stránkach. Žiada si trochu viac skúseností.
  • Akismet: Jeden z mála kvalitných a platených pluginov, ktorý vo veľkom odporúčajú aj profíci. Pokiaľ si v systéme nezvolíte iné komentáre a máte stále aktívne pôvodné systémové, Akismet zamedzí spamu a hackerom plniť vaše komentáre bezcenným spamom.
  • NK Google Analytics: Modul umožňuje vloženie sledovacieho kódu pre Google Analytics, aby ste mali prehľad o návštevnosti a správaní sa ľudí na vašom webe.
  • Ad Injection: Výborný modul na jednoduché zobrazovanie reklamných bannerov na webe na rôznych pozíciach, kde môžete vkladať čistý HTML kód bannera a tiež napr. reklamy Google, etarget a pod. Umožňuje aj rotáciu viacerých bannerov na jednej reklamnej ploche.
  • Quick Cache: Tento modul je vhodný na zrýchlenie načítania webu pre návštevníkov. Ak má váš web viac ako 10 stránok, tak ho rozhodne skúste. Rýchlosť načítania webu je jeden z parametrov aj pre Google z hľadiska získavania lepších pozícií vo vyhľadávaní.

8. Editácia a rozmiestnenie widgetov na webe

Widget je pojem bežnej verejnosti známy už zo sveta smartphonov. Aj na nich si môžete sami určiť, aký panel bude kde umiestnený, aké ikony budú v ľavo, v pravo, alebo v celkom inom widgete. Podobne je to aj na WordPresse. Tu však widgety tvoria menu, prípadne celú hlavnú stránku a rozmiestnenie jednotlivých blokov na webe. Prístup do sekcie nastavenia nájdete v ľavom menu administrácie v časti „Vzhľad -> Widgety

Pomocou myši dokážete z viacerých nástrojov presúvať na konkrétne miesto a konkrétne poradie požadovaný prvok. Následne sa v tomto poradí objaví aj na vašich stránkach. Môžete tak svoje menu upraviť do podoby, kedy najskôr má čitateľ k dispozícií súhrn kategórií, následne najnovšie články, pripojíte priestor pre reklamu a nakoniec napr. kalendár článkov zoradených podľa mesiaca publikovania.

Z nástrojov a vylepšovákov to však nie je všetko. Možnosti toho, čo možno pomocou widgetu nasadiť na stránky sú nekonečné aj vďaka pluginom, ktoré môžu pridať ďalšie schopnosti vášmu webu. Napríklad pridanie Facebook aplikácie „Like box“, predpovede počasia, náhodné video, posúvajúce sa galérie obrázkov a podobne.

9. Tvorba a publikovanie článkov a obsahu webu

Základom webu je obsah. Potrebujete ho, nech robíte čokoľvek. Písanie obsahu je dostupné v sekcii „Príspevky“ a „Pridať nový“ v anglickej verzii ide o výraz „Posts“ a „Add new“. Názov článku nesmie byť veľmi dlhý a ani krátky – optimálne 30 až 60 znakov. Obsah vo vnútri článku môžete rôzne formátovať a práca je podobná na písanie v programe Microsoft Word. Pozor, nikdy nekopírujte plne formátovaný  text z Wordu priamo do WordPress, pretože tým skopírujete aj niekoľko značiek, ktoré môžu uškodiť čitateľnosti vášho článku pre vyhľadávače.

Článok je možné pripraviť v dvoch rôznych formátoch. Nad hlavným obsahovým panelom v jeho hornom pravom rohu vidíte dve záložky. Vždy je aktívna jedna z nich. „VISUAL“ je formát viditeľný v podobe, ako článok uvidí každý na webe. Formát „TEXT – HTML“ je ideálny pokiaľ chcete vidieť svoj článok po kódovej stránke. Prípadne Youtube videá, alebo mapy Google zadávajte výhradne len v tomto formáte. V ňom využijete aj základy HTML.

Základné ovládacie prvky pre publikáciu článku:
Dôležité nastavenia pre články sa nachádzajú vpravo. Ide o viditeľnosť článku pre verejnosť, alebo len na heslo. Publikovanie článku môžete naplánovať na iný deň a vyjsť pritom môže aj počas vašej neprítomnosti na internete. Tiež býva zobrazená aj položka SEO (je voliteľná). Stretnúť sa s ňou môžete v prípade inštalácie pluginov zameraných na SEO. Ide v tom prípade o indikátor úrovne kvality článku z hľadiska SEO. V tomto panely je možné článok ihneď vydať pomocou tlačidla „Publikovať“ ale aj zmazať do koša cez textové tlačidlo s červeným písmom.

Umiestnenie článku:
Pri písaní článku dbajte na správne zadelenie článku pre zachovanie poriadku a prehľadnosti stránok, ako už bolo spomenuté vyššie v bode 6. Pri vydaní článku zvoľte vhodnú kategóriu sami. V opačnom prípade si ju zvolí systém sám a bude ňou základná kategória, ktorá je vytvorená už pri samotnej inštalácií celého systému WordPress.

Kľúčové slová:
Kľúčové slová, taktiež známe ako „tags“ alebo „značky“ umožňujú mnohým pluginom vyhodnocovať podobnosti a tematicky príbuzné články. Zároveň slúžia aj pre sústredenie kľúčových hesiel konkrétnych článkov do väzieb, ktoré tak docielia napríklad pri využití widgetu „tags“ pomocou jediného slova okamžité vyhľadanie všetkých článkov s daným kľúčovým slovom. Venujte im pozornosť a zadávajte heslá s presnou diakritikou v počte od 2 do maximálne 6.

Obrázky v článkoch:
Priamo do textového obsahového poľa budúceho článku môžete vkladať aj obrázky. Je nevyhnutné používať obrázky pripravené pre publikovanie na webe. Fotografie veľké niekoľko MB sú nemysliteľné. Upravujte obrázky na menšie veľkosti a používajte ich tak pre docielenie lepšieho načítavania vášho článku a aj pre jeho dostupnosť pre pomalšie pripojenie, tablety a podobne.

Obrázky sa tiež dajú nastaviť ako „featured image“. Tento pojem je veľmi častý v spojení so špeciálnymi zakúpenými dizajnmi, alebo sa s ním neraz stretnete aj v samotnom systéme. Preložiteľný ako „hlavný prezentačný obrázok“ sa v mnohých témach používa ako obrázok predstavujúci článok vo výpisoch, pri vyhľadávaní, surfovaní medzi kategóriami a sledovaní hlavnej stránky.

Zhrnutie celého postupu:

1. Registrácia domény a webhosting
2. Nastavenie FTP a databázy
3. Stiahnutie aktuálneho inštalačného súboru WordPress
4. Kopírovanie súborov cez FTP a inštalácia systému WP
5. Základné nastavenie webu a výber grafickej témy
6. Vytvorenie kategórií článkov a hlavného menu
7. Inštalácia vhodných pluginov a modulov
8. Editácia a rozmiestnenie widgetov na webe
9. Tvorba a publikovanie článkov a obsahu webu

Tak a teraz už máte vytvorenú svoju vlastnú webstránku! Postupne sa ju budete určite snažiť vylepšovať, skúšať rôzne pluginy a doplnky, no nezabúdajte aj na pravidelné zálohovanie webu. Z hľadiska úspechu vášho webu je ale najdôležitejšou vecou jeho obsah. Takže teraz by ste mali začať popri „hraní sa s webom“ vytvárať hodnotný obsah na svojich stránkach, aby vám zabezpečil kvalitnú návštevnosť a potom je už len krok k tomu, aby Vám web aj zarábal peniaze. O tom zase niekedy nabudúce… prípadne si môžete pozrieť stránku „51 spôsobov ako zarobiť na internete“, kde sa dozviete ako na to.

Máte otázky, alebo niečomu nerozumiete?  Neváhajte a napíšte do komentára pod článkom, alebo na email…