WordPress: ako upraviť CSS a PHP šablóny

Rozmýšľate ako upraviť CSS a PHP šablóny vo WordPress? Tento návod vám pomôže upraviť súbory témy ako sú functions.php alebo style.css cez editor vzhľadu.

WordPress: Ako upraviť CSS a PHP šablóny

Úprava PHP cez editor témy

Vo WordPress slúži na úpravu súborov šablóny nástroj Editor témy. Táto funkcia umožňuje priamo upravovať jednotlivé CSS a PHP súbory šablóny, ktorú používate. Môžete ho použiť napríklad na úpravu súboru functions.php.

WordPress editor témy vzhľad
Editor témy – vzhľad
💡 Tip: Pre rýchly web ⏱ je kľúčové vybrať si správny hosting. Odporúčam vsadiť na overenú kvalitu ➡️ WebSupport, Webglobe alebo Hostcreators.

Upozornenie na riziká priamej editácie šablóny

Nástroj Editor je potrebné používať s opatrnosťou. Ak totiž urobíte zmeny v súboroch, ktoré ovplyvňujú vzhľad vašej stránky nesprávnym spôsobom, môže sa stať, že sa stránka nebude vôbec zobrazovať. V lepšom prípade sa bude zobrazovať nesprávne.

Samotný WordPress vás na to upozorní popup oknom s hláškou:

Vyzerá to, že vykonávate priame úpravy vašej témy cez WordPress nástenku. Odporúčame to nerobiť! Priame úpravy témy môžu znefunkčniť váš web a pri aktualizácií sa môžu všetky stratiť. Ak potrebujete vyladiť viac ako len CSS témy, mohli by ste skúsiť vytvoriť odvodenú tému.

Ak ste rozhodnutý pokračovať s vašimi priamymi úpravami, použite správcu súborov a vytvorte kópiu s novým názvom a nechajte originál tak. Týmto spôsobom môžete znovu obnoviť funkčnú verziu, ak sa niečo pokazí.

WordPress upozornenie editor šablóny
Upozornenie na priamu editáciu šablóny

Ak nemáte znalosti o HTML, CSS alebo PHP, zmeny, ktoré vykonáte, môžu stránku celkom znefunkčniť. Túto funkciu preto odporúčam používať len ak na to máte potrebné znalosti.

Tip: ak sa vám podarí zhodiť si web, prihláste sa cez ftp do súboru, ktorý ste editovali a vráťte danú zmenu späť.

Ako upraviť CSS WordPress šablóny

Na úpravu štýlovania témy je lepšie použiť funkciu úpravy CSS, kde môžete aj naživo sledovať zmeny. Môžete ju použiť napríklad na úpravu súboru style.css.

Dostanete sa tam kliknutím na Upraviť CSS v menu:

WordPress šablóna - ako upraviť CSS
WordPress šablóna – ako upraviť CSS

Kliknutím sa dostanete priamo do editora (nazývaného aj Customizer):

WordPress CSS editor
WordPress: CSS editor

Tu pridajte váš vlastný CSS kód pre upravenie vzhľadu a rozloženia webovej stránky. Zistiť viac o CSS.

Pomocou klávesnice sa môžete pohybovať:

  • V oblasti editora, klávesa Tab vloží tabulátor.
  • Pre odchod z oblasti editora použite klávesu Esc nasledovanú klávesou Tab.
  • Používatelia čítačiek obrazovky: pre odchod z formulárového módu bude možno potrebné stlačiť kláves Esc dvakrát.

Pole na úpravu automaticky zvýrazňuje syntax kódu. Pre prácu v textovom režime to môžete zakázať vo vašom používateľskom profile.

💡 Tip na WordPress šablóny: z prémiových šablón mám dobré skúsenosti so šablónami Divi, Avada a s nástrojom na tvorbu stránok Elementor.

Úprava CSS a PHP vo WordPress – záver

Na úpravu PHP súborov je najlepšie použiť child tému, pretože zmeny robené priamo v šablóne sa vám stratia pri aktualizácií. Plus je tu riziko, že si zhodíte webstránku.

Na úpravu CSS je vhodné použiť tiež child tému, ale na to sú potrebné programátorské znalosti, preto pre používateľov postačí aj vyššie spomínaný editor.

💡 Chcete rýchlejšiu ⏱ webstránku? Rýchlosť webstránky je dôležitá pre návštevníkov a aj z hľadiska SEO. Najlepšie výsledky som dosiahol s pluginom WP Rocket, ktorý jednoznačne odporúčam.
🤷‍♂️ Neviete si rady? Pozrite si služby, ktoré vieme zabezpečiť.
Pomohol vám tento článok? Podporte nás 🧡
WordPress Návod v PDF

4 Komentáre

    • Môže to byť zakázané v šablóne alebo niektorom plugine (napríklad často to zakazuje plugin na bezpečnosť). Skúste pozrieť, či sa vo wp-config.php nenachádza:
      define('DISALLOW_FILE_EDIT', true); . Ak áno, zmeňte to na: define('DISALLOW_FILE_EDIT', false);

  1. Mam taky technicky dotaz – dá sa vo wp manualne len tak upravovať celá page v htmlku? Nemyslim len vizualne tagy, ale napr. meta tagy, schema.org popr. čokolvek v hlavičke dokumentu 😀 nejdem nič meniť len som si uvedomil že ja vlastne neviem ako to urobiť keby som chcel manualne zasahovať do htmlka stránky vo wp, je tam vobec niekde možnosť si od hora dolu vidieť cely kod page?

    • Dá sa to programátorsky v kóde témy, alebo cez rôzne pluginy. Napríklad spomínané meta tagy a schema.org by mali ísť nastaviť cez použitý SEO plugin (napríklad yoast).
      HTML kód web stránky je možné vidieť aj cez prehliadač – napríklad v Chrome kliknutím pravým tlačidlom a zvolením ‚Zobraziť zdrojový kód stránky‘.

VLOŽIŤ KOMENTÁR

Please enter your comment!
Please enter your name here