5. diel - Dokončenie základného nastavenia a knižnica médií

V predchádzajúcom kvíze, Kvíz - Úvod do WordPress, inštalácia a LocalWP, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.

V dnešnej lekcii základov WordPress sa naučíme nastaviť názov stránky a popis webu. Pozrieme sa ako nastaviť ikonu webu a tiež ako pracovať s knižnicou médií. Ukážeme si ako nastaviť úvodnú stránku a nakoniec si skúsime stiahnuť a otvoriť vzorový projekt.

Základné nastavenie stránky

Prejdeme si základné nastavenia stránky, ktoré je vhodné urobiť zakaždým, keď si vytvoríme novú webovú stránku.

V ľavom stĺpčeku si nájdeme položku "Nastavenia" najdeme na ňu myšou av rozbaľovacej ponuke klikneme na Všeobecné:

Názov a popis webu

Tu nájdeme základné nastavenia nášho webu. Nastavíme si tu názov stránky, ktorý sa zobrazí v hornej časti okna prehliadača a často aj v hlavičke webu (ak to šablóna podporuje). Mal by byť stručný, výstižný. My si tu zvolíme jednoducho "mujprvniweb.sk".

Vyplníme si aj popis webu - "Tvorím moderné weby vo WordPresse, jednoducho a zrozumiteľne." Jedná sa o krátke vysvetlenie, o čom web je. Zobrazí sa napríklad vo výsledkoch vyhľadávačov a môže byť súčasťou hlavičky webu:

Ikona webu

Ako posledný si tu vložíme ikonu webu - malý obrázok, ktorý sa zobrazuje na kartách prehliadača, v záložkách a mobilných aplikáciách. Mala by byť štvorcová a mať min. 512×512 px. Môže sa jednať o akúkoľvek ikonu, často to býva aj logo. Na účely tvorby nášho webu si môžeme stiahnuť toto logo:

Akonáhle budeme mať ikonu pripravenú klikneme na Výber ikony webu:

Nahranie ikony pomocou knižnice médií

Otvorí sa nám knižnica médií. Vo WordPresse je knižnica médií miesto, kde sa ukladajú a spravujú všetky nahrané súbory, ako sú obrázky, dokumenty, zvukové súbory, videá a ďalšie súbory.

Pridanie súboru

My si klikneme na Nahrávanie súborov a potom na tlačidlo Vybrať súbory kde sa nám následne otvorí úložisko nášho počítača, z ktorého vyberieme konkrétny súbor, ktorý chceme vložiť. Súbor ale môžeme vložiť aj jednoduchým pretiahnutím z nášho počítača do okna Knižnice médií:

Akonáhle sa obrázok nahrá uvidíme vľavo nahrané logo, ktorý sme si vybrali:

Alternatívny text

V pravej časti potom vidíme podrobnejšie informácie o súbore. My si ešte vyplníme pole „Alternatívny text“. Ide o krátky popis obrázku, ktorý sa nezobrazuje používateľom priamo, ale má obrovský význam:

• Prístupnosť: Pomáha ľuďom, ktorí používajú čítačky obrazovky.
• SEO: Vyhľadávače ako Google obrázky nevedia "vidieť", ale vďaka alternatívnemu textu rozpoznajú, čo zobrazujú.
• Náhrada chýbajúceho zdrojového súboru: Ak sa obrázok z nejakého dôvodu nenačíta, zobrazí sa práve tento text.

My si tu vyplníme napríklad „Logo webu“.

Ďalej tu nájdeme v prípade potreby URL súboru – priamy odkaz na náš obrázok. Keď budeme mať všetko nastavené, klikneme na tlačidlo Nastaviť ako ikonu webu – tým sa logo automaticky aplikuje ako favicon na celom webe:

Ostatné položky nastavenia necháme bez zmien. Všetky naše zmeny ešte musíme uložiť. Zídeme na stránke nastavenia až úplne dole a klikneme na tlačidlo Uložiť zmeny:

Zobrazenie zmien na stránke

Keď si teraz otvoríme našu stránku, môžeme vidieť, že sa nám zmenil názov webu a namiesto loga WordPress teraz máme v záložke našu ikonu. Môžeme tu vidieť aj náš popis:

Knižnica médií

Ako sme si hovorili, knižnica médií je miesto, kde sa spravujú všetky nahrané súbory.

Do knižnice médií sa vo WordPress dostaneme z množstva miest, najčastejšie priamo z editora konkrétnej stránky. Okrem toho sa ale knižnica médií nachádza priamo v menu. Dostaneme sa do nej tak, že si v ľavom menu nájdeme položku Médiá a najdeme na ňu myšou:

Zobrazia sa nám dve možnosti:

• Knižnica médií: tu môžeme súbory spravovať.
• Pridať nový: tu môžeme pridávať nové súbory.

Klikneme si na voľbu Knižnica médií:

V knižnici médií môžeme so súbormi rôzne manipulovať.

Zobrazenie všetkých nahraných súborov

Súbory si môžeme zobraziť ako mriežku alebo zoznam. Spôsob zobrazenia prepnete pomocou ikony mriežky/zoznamu:

Filtrovať a vyhľadávať súbory

Filtrovať a vyhľadávať súbory môžeme podľa typu súboru, dátumu pridania súboru alebo podľa názvu:

Nahrávať nové súbory

Pomocou tlačidla Pridať nový môžeme nahrať ďalšie súbory:

Upravovať súbory

Pokiaľ na súbor klikneme, zobrazia sa nám podrobné informácie o súbore. Môžeme tu upraviť alternatívny text, zmeniť názov, popis alebo súbor zmazať:

Pod obrázkom nájdeme tlačidlo Upraviť obrázok:

Môžeme tu obrázok orezať, zmeniť jeho veľkosť, alebo ho otáčať:

Hromadné mazanie súborov

Ak by sme chceli zmazať viac súborov naraz, klikneme na tlačidlo hromadnej úpravy:

Kliknutím na súbor si ho označíme fajkou v pravom hornom rohu a následne klikneme na tlačidlo Trvalo zmazať:

Nastavenie trvalých odkazov

Vo WordPresse môžeme ovplyvniť, ako budú vyzerať adresy jednotlivých stránok, príspevkov alebo kategórií. Týmto adresám sa hovorí trvalé odkazy. Nastavenie je dôležité kvôli:

• Prehľadnosti – URL je zrozumiteľná pre návštevníka (napr. mujprvniweb.local/o-nas je lepšia ako ?p=123).
• SEO výhode - vyhľadávače uprednostňujú adresy, ktoré obsahujú kľúčové slová.
• Dôveryhodnosti – jasné a čisté adresy pôsobia profesionálne.

V ľavom stĺpci prejdeme na "Nastavenia" a klikneme na Trvalé odkazy. Tu skontrolujme, že máme zaškrtnuté "Názov príspevku". Ak nie, zaškrtneme si túto možnosť a zmeny nezabudneme uložiť:

Nastavenie zobrazovania webu

Ako posledné si nastavíme, čo sa nám bude zobrazovať na úvodnej stránke webu. V ľavom stĺpci opäť nabehneme na "Nastavenia" a klikneme na položku Zobrazovanie:

Pri položke "Na úvodnej stránke zobraziť" zvolíme možnosť Statickú stránku a ako úvodnú stránku si v rozbaľovacej ponuke vyberieme stránku Domov. Keď si teraz našu stránku zobrazíme, vidíme že tu máme našu vytvorenú domovskú stránku:

Základné nastavenia máme úspešne za sebou. Ak ste počas práce narazili na problém alebo si nie ste istí, ako má výsledok vyzerať, môžete si stiahnuť náš vzorový projekt v archíve pod touto lekciou.

Vzorové súbory na stiahnutie budú k dispozícii po každých niekoľkých lekciách, aby ste si mohli priebežne porovnať svoj pokrok a prípadne ľahko opraviť chyby.

Otvorenie vzorového projektu

Stiahneme si súbor nachádzajúci sa v archíve pod touto lekciou a necháme ho zazipovaný. Otvoríme si tiež aplikáciu LocalWP a klikneme na tlačidlo + v ľavom spodnom rohu:

Zvolíme možnosť Select an existing ZIP, vyberieme stiahnutý zazipovaný súbor z nášho úložiska a klikneme na tlačidlo Continue:

V ďalšom kroku si projekt pomenujeme. Dáme mu názov vzorovyProjekt Projekt, aby sme ho dobre rozoznali od nášho rozpracovaného projektu. Do ďalšieho kroku prejdeme kliknutím na tlačidlo Continue:

Na poslednej stránke nastavíme verziu PHP a MySQL. Odporúčam použiť možnosť Preferred pre automatické nastavenie odporúčaných verzií. V kurze používame verzie PHP 8.2.23 / Web server nginx / MySQL version 8.0.35, skontrolujeme si, či máme rovnaké verzie:

Pokiaľ áno, môžeme kliknúť na tlačidlo Import site a spustiť tak import projektu. Ak by sa verzie líšili, klikneme na Custom, vyberme správne verzie a klikneme na Import site:

Toto nastavenie je možné zmeniť aj po vytvorení stránky.

Počkáme, kým sa dokončí samotný import projektu:

Akonáhle bude import dokončený, kliknutím na tlačidlo WP Admin sa pokúsime do Wordpress prihlásiť.

Prihlasovacie údaje do WordPress administrácie vzorového projektu:

Užívateľské meno	karel.admin.moj­prvniweb
Heslo	iTnetWork.stu­dent123

V nasledujúcom cvičení, Riešené úlohy k 2.-4. lekciu základov WordPress, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.