Úvod Webové stránky Webová stránka vo WordPresse. Ako postupujeme pri tvorbe webov.
Wordpress ukážka

Webová stránka vo WordPresse. Ako postupujeme pri tvorbe webov.

Vytvoriť si vlastnú stránku vo WordPress je dnes už v podstate ako skladať Lego – ak máte správne kocky a trochu trpezlivosti, výsledok bude vyzerať profesionálne aj bez toho, aby ste museli vedieť programovať. WordPress je takzvaný CMS (Content Management System) systém, ktorý tvorí základ webovej stránky.

Tu je prehľadný zoznam toho, čo budete potrebovať, a stručný návod, ako na to.


1. Čo všetko k tomu potrebujete? (Základná výbava)

Predtým, než kliknete na „Publikovať“ (takto sa zverejňujú stránky a články vo WordPresse), musíte mať tieto tri základné veci:

PoložkaČo to je?Odhadovaná cena
DoménaVaša adresa na internete (napr. www.mojastranka.sk).cca 10 – 15 € / prvý rok, potom o niečo viac
Hosting„Prenajatý priestor“ na serveri, kde budú tvoje súbory uložené.cca 4 – 10 € / mesiac
WordPressRedakčný systém (CMS), v ktorom stránku spravuješ.Zadarmo

2. Postup v 5 krokoch

Krok 1: Výber domény a hostingu

Odporúčam vybrať si slovenského registrátora (napr. Websupport, Webhouse, Wyel, Hostcreators), pretože majú podporu v slovenčine a inštaláciu WordPress-u na jeden klik.

  • Tip: Snažte sa o krátky, zapamätateľný názov doménz bez pomlčiek (ak je to možné).
  • Tip: Pre WordPress odporúčam nie najlacnejší hosting, nakoľko systém WordPress vyžaduje určitý výkon, ktorý ponúkajú lepšie hostingy. Ak si neviete vybrať, kontaktujte poskytovateľa, rád Vám poradí s výberom. Veľmi dobrou alternatívou je poskytovateľ Hostinger. V lepšom balíku ponúkajú CDN server, cacheovanie webu a úpravu obrázkov na webp formát. Neponúkajú ale sk domény (možno v budúcnosti to bude možné).

Krok 2: Inštalácia WordPressu

Keď už máte hosting, v jeho ovládacom paneli hľadajte tlačidlo „Inštalovať WordPress“, resp. podobnú frázu. Väčšina moderných hostingov to urobí za teba za pár sekúnd. Po inštalácii dostaneš prihlasovacie údaje do „adminu“ (zvyčajne tvojadomena.sk/wp-admin). Ja využívam služby poskytovateľa Websupport. Majú prehľadnú administráciu a ľahko si prepnete napr. verziu PHP pre web, či vytvoríte SSL certifikát. Aj obrázok nižšie poukazuje na príklad inštalácie WordPressu priamo z admin rozrhrania hostingu. Máte na výber inštaláciu viacerých CMS. Najrozšírenejší (a vyžaduje aj najmenej znalostí) je WordPress. Po kliknutí na „Nainštalovať“ systém vytvorí novú databázu a nainštaluje všetko potrebné.

Krok 3: Prvé kroky po inštalácii (To, na čo sa zabúda)

Keď sa prvýkrát prihlásite do /wp-admin, urob tieto tri veci ako prvé:

  1. Trvalé odkazy (Permalinks): Choďte do Nastavenia -> Trvalé odkazy a prepnite to na „Názov článku“. Predvolené nastavenie (?p=123) vyzerá hrozne a Google ho nemá rád.
  2. Odstráňte balast: WordPress tam vždy hodí demo článok „Ahoj svet!“ a témy, ktoré nepotrebujete. Vymažte ich a začnite svojou témou. Je veľa tém, ktoré sú zdarma, no majú zväčša odmedzené možnosti. Dobrým zdrojom plaených tém je napr.: https://themeforest.net/category/wordpress
  3. Časové pásmo: Nastavte si v nastaveniach správny čas a formát dátumu, aby vaše naplánované príspevky vychádzali vtedy, kedy majú.

Krok 3: Výber témy (vzhľad) a pagebuildera (vytvára celkový vhľad a usporiadanie obsahu)

WordPress vám na začiatku pridelí základný vzhľad. Vy si ho ale môžete zmeniť v sekcii Vzhľad -> Témy.

Téma určuje štýl, ale Page Builder určuje, ako sa vám bude s webom pracovať.

  • Moderný prístup (Gutenberg): WordPress má v sebe integrovaný natívny editor. Ak použijete tému ako Blocksy alebo Kadence, dokážete zázraky bez toho, aby sa stránka spomalila.
  • Vizuálny prístup (Elementor / Divi): Sú to „drag-and-drop“ editory. Vidíte presne, čo robíte. Sú veľmi populárne, ale podstata je neprekomplikovať vzhľad a efekty, web bude ťažkopádnejší.

Môj tip: Ak začínate s tvorbou webu, skúste tému Astra a ich „Starter Templates“. Jedným klikom si naimportujete hotový dizajn, ktorý prepíše všetko ostatné.

Krok 4: Pluginy (Funkcie)

Pluginy sú ako aplikácie v mobile – pridávajú vašej stránke nové schopnosti. Na začiatok stačia tieto:

  • Yoast SEO (aby vás Google našiel).
  • Wordfence (kvôli bezpečnosti).
  • WP Rocket alebo LiteSpeed Cache (aby sa stránka načítavala rýchlejšie).
  • Contact Form 7 (na kontaktný formulár), v Elementore je kontaktný formulár priamo integrovaný a môžete ho rozšíriť pluginom Conditional Fields for Elementor Form, čo vám umožní nastavovať napr. kedy sa aká časť formulára má zobraziť (za akých podmienok)

Krok 5: Tvorba obsahu

Teraz už len stačí vytvoriť základné stránky:

  • Domov (úvodná stránka).
  • O nás (kto ste a čo robíte).
  • Služby / Produkty.
  • Kontakt.

Na čo si dať pozor? (Úprimná rada)

  1. Nepreháňajte to s pluginmi: Ak ich nainštalujete 50, stránka bude veľmi pomalá. Menej je viac.
  2. Zálohuj: Väčšina hostingov robí zálohy automaticky, ale vždy je fajn mať aj vlastnú (napr. cez plugin UpdraftPlus).
  3. Responzivita: Vždy si skontrolujte, ako Vaša stránka vyzerá na mobile. Mobilnú verziu totiž bude zobrazovať na svjich zariadeniach až 80 % návštevníkov.

4. Architektúra stránky (Čo kam dať)

Predtým, než začneš klikať, si na papier nakresli štruktúru:

  1. Hlavička (Header): Logo a menu.
  2. Telo (Body): Obsah konkrétnej podstránky.
  3. Pätička (Footer): Kontakt, mapa, sociálne siete a odkaz na ochranu osobných údajov (GDPR).

Rozdiel medzi Stránkou a Príspevkom:

  • Stránka: Statický obsah (O nás, Kontakt).
  • Príspevok: Dynamický obsah (Články v blogu, Novinky), ktoré sa radia chronologicky.

5. Nevyhnutné pluginy (Detailnejšie)

Inštalujte len to, čo skutočne potrebujete. Tu je môj „zlatý zoznam“:

  • Bezpečnosť: Wordfence Security – tvoj digitálny vyhadzovač.
  • SEO: Rank Math SEO – podľa mňa momentálne lepší a modernejší ako Yoast. Pomôže vám nastaviť, ako váš web uvidí Google.
  • Rýchlosť: LiteSpeed Cache (ak ho váš hosting podporuje) alebo WP Optimize. Web musí byť rýchly, inak ľudia v prípade dlhého načítania stránky odídu.
  • Zálohovanie: UpdraftPlus – nastavte si automatické zálohovanie na Google Drive. Keď sa niečo pokazí (a ono sa niekedy pokazí), zachráni vám to aj hodiny práce.

6. Právna stránka (Nepodceňujte to)

Keďže sme v EÚ, Vaša stránka musí spĺňať GDPR.

  • Potrebujete podstránku Ochrana osobných údajov.
  • Potrebujete Cookie lištu (napr. plugin Complianz), ak používate Google Analytics alebo iné marktingové nástroje.

Koľko času vám to reálne zaberie?

Ak máte pripravené texty a fotky:

  • Inštalácia a nastavenia: 1 hodina.
  • Dizajn a štruktúra: 3 – 5 hodín.
  • Ladenie detailov a mobilnej verzie: 2 hodiny.
  • Spolu: Za jeden víkend máte funkčný web.

Čo obrázky na web?

Optimalizácia obrázkov pre web vyžaduje vyváženie kvality a veľkosti, ideálne do 100-200 kB na súbor. Pre bežné obrázky postačuje šírka 1024-1600 px (full HD monitory sú 1920px), pre bannery 1920x600px a náhľady produktov 600-800px. Najlepšie formáty sú WebP a AVIF (moderný, najlepší pomer), JPG (fotografie) a PNG/SVG (grafika, logá). 

Odporúčané rozlíšenia podľa typu použitia: 

  • Hlavný banner/Slider: 1920 x 600 px až 1920 x 1080 px (šírka x výška)
  • Blog/Článok (obrázok na šírku): 1200 x 800 px
  • Detail produktu (e-shop): 1600 x 1600 px
  • Náhľad produktu/Kategória: 400 x 400 px až 600 x 600 px
  • Logo a ikony: SVG formát (vektorová grafika, ostré v každej veľkosti) 

Kľúčové zásady optimalizácie:

  • Kompresia: Vždy použite nástroje na zmenšenie veľkosti (napr. ShortPixel, TinyPNG, Compress PNG).
  • Formát: WebP ponúka najlepšiu kompresiu pri zachovaní kvality. Tu odporúčam použiť priamo plugin, ktorý automaticke konvertuje všetky obrázky nahrané do Multimédií: Instant WebP Converter
  • Responzivita: Nahrávajte obrázky v rozmeroch, v akých sa reálne zobrazia, aby sa zbytočne nenačítavali veľké súbory.
  • Názov súboru: Používajte názvy bez diakritiky a medzier, napr. optimalne-rozlisenie-web.jpg. 
  • Zdroj obrázkov: Dobrý zdrojom pre hotové obrázky sú voľné alebo platené portály (databázy obrázkov), ako napr.: Unsplash, Pexels, a Pixabay, ďalej ISO Republic, Negative Space, PicJumbo, Flickr a Burst

Vysoké rozlíšenie (napr. 4000×3000 px) je zbytočné, spomaľuje web a zhoršuje SEO.

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *

Zdieľať:

Podobné články