10. diel - Päta stránky

V predchádzajúcej lekcii, Záhlavie stránky , sme si ukázali ako upraviť hlavičku stránky, nastavili sme si pozadie hlavičky, pridali sme si do hlavičky logo a tiež sme si upravili vzhľad hlavného menu.

V dnešnej lekcii základov WordPress sa naučíme čo sú zástupné značky, upravíme si pätičku našej stránky, pridáme si do nej logo, menu a ikonky sociálnych sietí, upravíme si copyright aj pozadie pätičky. Vysvetlíme si tiež, čo sú to widgety a ako ich používať.

Zástupné značky

Zástupné značky (shortcodes) sú špeciálne kódy, ktoré sa vkladajú do textových polí vo WordPresse (napríklad v pätičke) a po načítaní stránky sa automaticky nahradia skutočnými informáciami – napríklad názvom webu, aktuálnym rokom alebo symbolom copyrightu. Používajú sa hlavne pre:

• automatické dopĺňanie údajov (napr. keď sa zmení rok, nemusíme to prepisovať ručne),
• dynamický obsah, ktorý sa aktualizuje podľa nastavenia WordPressu.

Zástupné značky vyzerajú napríklad takto:

Copyright [copyright] [current_year] [site_title]

V tomto príklade bude [copyright] nahradený znakom ©, [current_year] bude nahradený vždy aktuálnym rokom a [site_title] bude brať názov webu z nastavenia WordPressu. Zaistíme si tak napríklad, že nemusíme strážiť či máme v pätičke aktuálny rok, pretože sa nám tento obsah vždy dynamicky zmení.

Tieto zástupné značky si môžeme nájsť na stránkach WordPressu a tiež tu môžeme nájsť informácie o tom, ako zástupné značky používať. Ďalšie zástupné značky nájdeme na stránkach šablóny, u nás je to Astra. Každá šablóna bude mať vlastné zástupné značky. Ďalej môžeme používať shortcody z rôznych pluginov a pokiaľ ovládame aspoň základy PHP, môžeme si vlastný shortcode vytvoriť.

Pätička stránky

Do pätičky stránky si vložíme menu, logo a odkazy na sociálne siete. Zmeníme si farbu pozadia a upravíme copyright.

Copyright

Najskôr si upravíme copyright stránky a jeho pozadie. V režime prispôsobenia stránky zídeme dole k pätičke stránky a opäť klikneme myšou na ikonu ceruzky:

Prejdeme do záložky DESIGN a upravíme veľkosť horného okraja na 0px:

Opäť si tu nastavíme farebný prechod. Pri položke pozadia klikneme na farebné koliesko, vyberieme možnosť Farebný prechod a nastavíme prvú farbu fialovú hex - #721FAE, druhá farba bude modrá - hex #3008FB. Typ prechodu bude lineárny a uhol 45°. Fialovú farbu si presunieme trošku viac doprava:

Teraz si upravíme copyright stránky. Dole opäť vidíme rozvrhnutie položiek pätičky. Zatiaľ tu máme iba jedinú položku - copyright. Klikneme na túto položku av ľavom stĺpčeku sa nám zobrazí jeho nastavenie. Do textového poľa si vložíme text: "Copyright [copyright] [current_year] [site_title]":

Následne prejdeme do záložky DESIGN a zmeníme farbu textu na bielu - hex #FFFFFF:

Widgety

Widgety sú malé stavebné prvky, ktoré slúžia na pridanie rôznych funkcií alebo informácií na web – typicky do postranného panelu, pätičky, prípadne iných častí stránky. Patrí sem napr. formulár pre vyhľadávanie, prehľad najnovších príspevkov, kalendár článkov alebo napríklad vlastný textový blok.

Widgety je možné pridávať a spravovať v sekcii Vzhľad → Widgety:

Dnes ale WordPress ponúka aj modernejšie a pohodlnejšie možnosti:

• Priamo v editore šablóny (Full Site Editing) – pokiaľ používame modernú blokovú šablónu (napr. Astra, Twenty Twenty-Four), môžeme widgetové oblasti upravovať priamo v editore vzhľadu. Práca s widgetmi sa tým zjednotila s bežnou úpravou stránky a fungujú ako bežné bloky.
• Vkladanie widgetov priamo na stránku – väčšina klasických widgetov dnes existuje aj ako bloky v Gutenberg editore. Môžeme ich teda vložiť kamkoľvek na stránku alebo do príspevku rovnako ako text, tlačidlo alebo obrázok.
• Cez sekciu Vzhľad → Prispôsobiť – pokiaľ používame klasickú šablónu bez plného editora vzhľadu, widgety sa často upravujú v rámci živého náhľadu (Prispôsobenie). Stačí prejsť v režime Prispôsobenie do sekcie Widgety.

Pridanie nových elemetov

Do pätičky si budeme pridávať nové elementy – menu, logo a ikonky sociálnych sietí. Elementy budeme v rozvrhnutí pridávať o riadok vyššie ako máme teraz umiestnený copyright. Prejdeme do rozvrhnutia pätičky av prvom stĺpčeku prostredného riadku klikneme na +, kde vyberieme element Footer menu:

Elementy zatiaľ nebudeme štylovať. Do prostredného stĺpčeka si pridáme element Widget 1, do ktorého si neskôr budeme pridávať naše logo:

Do posledného stĺpčeka si pridáme elment Social:

Nakoniec si ešte k tejto časti pätičky pridáme pozadie. Postup bude rovnaký. Klikneme na ikonu ceruzky na ľavej strane pätičky, prejdeme do sekcie DESIGN, veľkosť hodného okraja nastavíme na 0px. Na pozadí nastavíme farebný prechod fialovej hex- #721FAE, a modrej farby-hex #3008FB. Typ prechodu bude lineárny v uhle 45°. Nakoniec fialovú farbu presunieme trochu viac doprava aby na seba farby pekne nadväzovali:

Úprava nových elementov

Nové elementy si teraz upravíme do finálneho vzhľadu.

Menu

Teraz máme položky menu zarovnané vedľa seba, my si ich dáme pod seba a zarovnáme ich k pravému okraju. Klikneme v rozvrhnutí pätičky na element Footer menu av ľavom stĺpčeku si nastavíme rozvrhnutie na Stack, čím zarovnáme jednotlivé položky pod seba. V sekcii Zarovnanie, klikneme na ikonu úplne v pravo, čím zarovnáme položky k pravému okraju:

Teraz si položky ešte naštylujeme. Klikneme na záložku DESIGN a pri položke Odkaz/Text nastavíme základnú farbu na bielu - hex #FFFFFF a farbu pri nabehnutí myši nastavíme na tyrkysúvou - hex #00FFFC:

Widget

Teraz si skúsime nastaviť widget. V rozvrhnutí pätičky klikneme na položku Widget 1:

V ľavom stĺpčeku sa nám zatiaľ nič neobjaví, máme tu iba tlačidlo +, pomocou ktorého môžeme pridať nový widget:

Máme tu na výber niekoľko základných widgetov – obrázok, odsek, nadpis, galéria, zoznam a citácie. Môžeme tu vidieť aj polia pre vyhľadávanie. Pokiaľ vieme ako sa daný widget volá, môžeme ho jednoducho vyhľadať. Pomocou tlačidla Prehľadávať všetko naopak zobrazíme všetky widgety, ktoré sú tu k dispozícii, je ich naozaj veľa.

My tu chceme vybrať logo a preto vyberieme možnosť Obrázok:

Otvorí sa nám okno s tromi možnosťami pridania obrázku:

• Upload - nahranie obrázku priamo z nášho počítača.
• Knižnica médií - týmto spôsobom nahráme obrázok z našej knižnice médií vo WordPresse.
• Vložiť z URL adresy - vloženie obrázku z URL adresy kdekoľvek na internete.

My už máme obrázok uložený v knižnici médií, preto si vyberieme túto možnosť:

Obrázok si vyberieme z knižnice ako sme zvyknutí. Ešte budeme musieť prispôsobiť veľkosť obrázku, to prevedieme jednoducho uchopením obrázku za okraj a potiahnutím zmenšíme na požadovanú veľkosť:

Ikonky sociálnych sietí

Nakoniec si upravíme ikonky sociálnych sietí. V rozložení pätičky klikneme na položku Social:

V ľavom stĺpčeku vidíme jednotlivé sociálne siete. Teraz tu máme Facebook, Twitter a Instagram. Pomocou šípky u danej sociálnej siete si môžeme otvoriť menu v ktorom môžeme upraviť:

• Label – pomenovanie sociálnej siete, v našom prípade ho nevidíme, máme tu len ikonky.
• URL - adresa, na ktorú chceme odkazovať
• Ikona - môžeme si tu nastaviť ikonu, ktorú chceme zobrazovať

Pod zoznamom pridaných sociálnych sietí máme rozbaľovací zoznam, z ktorého môžeme vybrať akúkoľvek sociálnu sieť a pomocou tlačidla Add Social Icon tak pridať ľubovoľnú ďalšiu sociálnu sieť. Ďalej tu máme možnosť zobraziť popis, čo nám zobrazí práve vyššie spomínaný label. My si sociálne siete pridávať nebudeme, ale pokiaľ chcete, môžete si to vyskúšať.

Prejdeme teraz do záložky DESIGN a nastavíme pri položke Farba ikony základnú farbu na bielu - hex #FFFFFF a farbu pri nabehnutí myši na tyrkysovú - hex #00FFFC:

Posledným krokom bude vertikálne zarovnanie ikoniek na stred. Klikneme na ikonu ceruzky na úpravu prostrednej časti pätičky stránky av ľavom menu upravíme položku Vertikálne zarovnanie, kde nastavíme hodnotu Stredná:

Nezabudneme zmeny uložiť a stránku publikovať. Máme hotovo! Výsledok by mal vyzerať takto:

V ďalšej lekcii, Editor Gutenberg , sa zameriame na to, ako pracovať s editorom Gutenberg, ako pridať nový prvok na stránku a ako ho následne upraviť. Zoznámime sa s osnovou stránku a prejdeme si aj nastavenie editora.