--- site_name: WPlama site_description: "Správa, opravy a vývoj WordPress webů a e-shopů" site_url: https://www.wplama.cz contact_email: info@wplama.cz title: Jak do WordPress přidat vlastní CSS styly url: https://www.wplama.cz/vlastni-css-styly/ date: 2024-10-14 modified: 2024-10-14 author: Tomáš Cirkl type: post categories: [WordPress návody] tags: [css, plugin, úprava vzhledu webu] --- WordPress návody # Jak do WordPress přidat vlastní CSS styly [TC **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 14. 10. 2024 2 min čtení ![css](https://www.wplama.cz/wp-content/uploads/2019/06/css.jpg "css") Obsah článku (2 kapitoly) 1. [Jak vložit vlastní CSS styly pomocí WordPress editoru](https://www.wplama.cz/vlastni-css-styly/#jak-vlozit-vlastni-css-styly-pomoci-wordpress-editoru) 2. [Proč nevkládat vlastní styly do šablony, ale radši využít vlastní plugin nebo child theme?](https://www.wplama.cz/vlastni-css-styly/#proc-nevkladat-vlastni-styly-do-sablony-ale-radsi-vyuzit) Každý web čas od času potřebuje drobné úpravy designu, aby odpovídal vašim představám nebo aktuálním potřebám. Možná chcete změnit barvy, písmo nebo velikosti prvků. Tyto vizuální úpravy se provádějí pomocí CSS. Dobrou zprávou je, že ve WordPress existuje jednoduchý a efektivní způsob, jak upravit vzhled webu bez toho, aniž byste museli vytvářet child šablonu. WordPress totiž obsahuje zabudovaný CSS editor přímo v sekci Přizpůsobit. > **Co je to CSS?** CSS (Cascading Style Sheets) je stylovací jazyk používaný pro popis vzhledu a formátování webových stránek napsaných v HTML. Díky CSS můžete definovat, jakým způsobem se budou jednotlivé prvky na stránce zobrazovat – od barev, velikostí textu, přes rozložení prvků až po animace a efekty. V tomto článku si podrobně vysvětlíme, jak přidat vlastní CSS styly přímo do WordPressu, abyste mohli přizpůsobit vzhled svého webu přesně podle svých potřeb a zároveň zajistili, že vaše změny zůstanou bezpečně zachovány i po aktualizacích. ## Jak vložit vlastní CSS styly pomocí WordPress editoru Přihlaste se do WordPress a v levém menu vyberte *Vzhled → Přizpůsobit*. Zobrazí se Customizér a v jeho levém menu vyberte položku CSS. [![WordPress sekce Přizpůsobit](https://www.wplama.cz/wp-content/uploads/2015/09/customizer-1024x478.png "WordPress sekce Přizpůsobit")](https://www.wplama.cz/wp-content/uploads/2015/09 / customizer.png) WordPress sekce Přizpůsobit Zobrazí se editor, do kterého vložte nebo napište vlastní CSS styly. [![Editor pro přidání vlastních CSS stylů ve WordPress](https://www.wplama.cz/wp-content/uploads/2015/09/pridani-vlastnich-stylu-1024x478.png "Editor pro přidání vlastních CSS stylů ve WordPress")](https://www.wplama.cz/wp-content/uploads/2015/09 / pridani-vlastnich-stylu.png) Editor pro přidání vlastních CSS stylů ve WordPress Nakonec stačí kliknout na tlačítko Publikovat a **máte hotovo**. ![WordPress CSS editor](https://www.wplama.cz/wp-content/uploads/2019/06/wordpress-css-editor-1024x509.png "WordPress CSS editor") WordPress CSS editor Editor obsahuje **základní kontrolu vložených stylů** a na případné chyby dokáže upozornit, takže se nemusíte bát, že by se něco nenávratně rozbilo. ## Proč nevkládat vlastní styly do šablony, ale radši využít vlastní plugin nebo child theme? Úprava stylů šablony nebo pluginu přímo v originální složce **se nedoporučuje**, protože při aktualizaci je velká šance, že **dojde k přepsání upravovaných souborů** a tedy i k ztrátě úprav. Nejlepší způsob jak upravovat šablonu je pomocí [child šablony](https://www.wplama.cz/jak-vytvorit-child-theme-a-proc-ji-vyuzivat/). Tento způsob však může být pro začátečníky zbytečně složitý a při drobných úpravách vzhledu stačí využít zabudovaný editor, který umožňuje vložení vlastního CSS. Při využití sekce Přizpůsobit se nemusíte bát aktualizací a případné ztráty úprav. Zároveň ani při změně šablony nedojde ke ztrátě stylů. Což oceníte v případě, že jste je použili například k nastylování [kontaktního formuláře](https://www.wplama.cz/jak-ve-wordpress-vytvorit-formular/). - [#css](https://www.wplama.cz/stitek/css/) - [#plugin](https://www.wplama.cz/stitek/plugin/) - [#úprava vzhledu webu](https://www.wplama.cz/stitek/uprava-vzhledu-webu/) Sdílet - - [](mailto:?subject=Jak do WordPress přidat vlastní CSS styly&body=Jak do WordPress přidat vlastní CSS styly https://www.wplama.cz/vlastni-css-styly/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fvlastni-css-styly%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fvlastni-css-styly%2F) TC Autor Tomáš Cirkl Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na Word Camp Praha a WordPress konferencích. 1 030 článků [Všechny články autora →](https://www.wplama.cz/author/tomas/) ## Komentáře (10) [Přidat komentář →](https://www.wplama.cz/vlastni-css-styly/#respond) J Jirka [1. 7. 2019](https://www.wplama.cz/vlastni-css-styly/#comment-79967) Dobrý den, rád bych se zeptal, zda nevíte o nějakém spolehlivém pluginu pro přidání celého vlastního css souboru do šablony, aniž bych musel zapisovat ručně do základních souborů? Děkuji za odpověď Jirka [Odpovědět](https://www.wplama.cz/vlastni-css-styly/#comment-79967) TC Tomáš Cirkl WPlama [2. 7. 2019](https://www.wplama.cz/vlastni-css-styly/#comment-79972) Zdravím, k tomu slouží [child šablony](https://www.wplama.cz/jak-vytvorit-child-theme-a-proc-ji-vyuzivat/). [Odpovědět](https://www.wplama.cz/vlastni-css-styly/#comment-79972) J Jirka [14. 7. 2019](https://www.wplama.cz/vlastni-css-styly/#comment-80126) Dobrý den, děkuji za informaci. Ještě bych měl jeden dotaz. Vytvořil jsem si child šablonu, ve které je prázdný soubor style.css. A nyní chci upravit barvu titulku z bílé na modrou h1.site-title { color: blue } a/ když to zapíši do základního interního editoru wordpressu, barva titulku se změní na modrou b/ když to přes ftp zapíši do souboru style.css, uložím a načtu nově stránku, barva se nezmění Zkoušel jsem to u více šablon, ale u žádné se mi to nepovedlo zprovoznit. Chtěl jsem upravovat soubory přes ftp programem Sublime Text, protože žádný z pluginů (co jsem zkoušel) nemá řádné našeptávání – vždy našeptávají vše a ne jen příslušné hodnoty k atributům. Nechápu, proč to nefunguje, nedokázal byste poradit, jak to přes ST zprovoznit? Děkuji za odpověď Jirka [Odpovědět](https://www.wplama.cz/vlastni-css-styly/#comment-80126) TC Tomáš Cirkl WPlama [15. 7. 2019](https://www.wplama.cz/vlastni-css-styly/#comment-80141) Zdravím, ten style.css máte načtený? Zkuste ještě CTRL+F5 případně přidat !important. [Odpovědět](https://www.wplama.cz/vlastni-css-styly/#comment-80141) J Jirka [1. 8. 2019](https://www.wplama.cz/vlastni-css-styly/#comment-80712) Dobrý den, neměl jsem poslední dobou moc času na zkoušení a až teď jsem si přečetl Vaši odpověď. Velice za ni děkuji, protože přes CTRL+F5 to funguje. Teď jen ještě zjišťuji, zda by se dalo na určitou webovou stránku nastavit automatické vymazání cache při reloadu nebo přemapovat F5 na CTRL+F5, abych na to nemusel myslet. 🙂 Ale jinak díky moc za radu. Jirka --- TC Tomáš Cirkl WPlama [2. 8. 2019](https://www.wplama.cz/vlastni-css-styly/#comment-80756) Tyto cache dělá prohlížeč a ne web. Je to z důvodu snižování datových přenosů a zrychlení načítání stránky. Záleží na vašem prohlížeči, zda tuto funkci cachování umožní deaktivovat. --- --- --- --- --- J Jirka [2. 8. 2019](https://www.wplama.cz/vlastni-css-styly/#comment-80809) Zdravím, už jsem našel super řešení ve formě načtení souboru s parametrem ‚style.css?‘ . rand() Tím, že soubor změní jméno, načte se nově a problém je tím pádem vyřešen. 🙂 [Odpovědět](https://www.wplama.cz/vlastni-css-styly/#comment-80809) --- V Vlk [6. 9. 2019](https://www.wplama.cz/vlastni-css-styly/#comment-84026) Dobrý den, tohle je téma, které mi krásně sedlo. Zrovna řeším podobnou věc. Používám poměrně starou šablonu, ale jednak mi stačí a druhak mám obavy, že změnou šablony bychom si všechno rozdrbali. Jelikož se jedná o web, který provozujeme dlouhé roky a nemůžeme si dovolit výpadek, tak hledání nové šablony ani nezvažujeme. Teď nám jde o to, že potřebujeme mírně zkulturnit hlavní stránku s náhledy příspěvků. Znáte to. Ničím neohraničené boxy obsahují nadpis, náhledový obrázek a krátkou větu (oddělenou pomocí more od zbytku textu). Za tím je už jen obligátní „Čti dále“. Problém naší šablony je v tom, že boxy mají mezi sebou ve svislé ose příliš velké mezery, což nevypadá dobře. Rádi bychom mezi ně vložili tenkou krátkou linku a snížili odstup. Zřejmě se to dá najít a upravit buď přímo do css šablony nebo způsobem, jaký popisujete v článku, ale neumíme to najít! 🙂 Resp. neumíme najít tu část css, která se zrovna k tomu vztahuje a je pravda, že i vložení linky bychom asi nezvládli. Uměl by nám s tím někdo pomoci? Je to práce tak na půl hodinky pro člověka, který ví, co dělá. Na odměně bychom se asi nějak dohodli. [Odpovědět](https://www.wplama.cz/vlastni-css-styly/#comment-84026) TC Tomáš Cirkl WPlama [6. 9. 2019](https://www.wplama.cz/vlastni-css-styly/#comment-84037) Zdravím, jestli chcete, můžeme se vám na úpravu podívat. Pokud máte zájem, prosím, odešlete poptávku na [poptavka@wplama.cz](mailto:poptavka@wplama.cz). [Odpovědět](https://www.wplama.cz/vlastni-css-styly/#comment-84037) --- J Jirka [11. 2. 2020](https://www.wplama.cz/vlastni-css-styly/#comment-104414) Dobrý den, odpovídám sice pozdě, ale i tak se to může hodit. Tento problém vždy řeším přes nástroj Dev Tools (v chromu klávesa F12). Stránka se rozdělí na dvě části, kde podle nastavení (u mne v pravo) je okénko s html a CSS kódem. Následně použijete klávesovou zkratku CTRL+SHIFT+C (nebo vyberete vlevo nahoře čtvereček se šipkou) a z webové stránky si vyberete element, který chcete upravit. V Dev Tools okně se Vám kurzor přesune na část kódu podle vybraného elementu. Pak už jen stačí zjistit, který styl se má upravit. [Odpovědět](https://www.wplama.cz/vlastni-css-styly/#comment-104414) --- --- ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/vlastni-css-styly/#respond) [← Předchozí článek Divi 5 (Public Alpha) k dispozici ke stažení](https://www.wplama.cz/divi-5-public-alpha/) [Další článek → WordPress přihlášení​ do administrace (vše co potřebujete vědět)](https://www.wplama.cz/jak-se-prihlasit-do-administrace-wordpress/) Související ## Mohlo by vás zajímat [Všechny články z rubriky WordPress návody →](https://www.wplama.cz/wordpress/navody/) ![llms txt scaled](https://www.wplama.cz/wp-content/uploads/2026/03/llms-txt-scaled.png "llms txt scaled") WordPress návody ### [Konec tradičního SEO? Jak a proč začít optimalizovat WordPress web pro AI vyhledávače](https://www.wplama.cz/optimalizace-pro-ai-vyhledavace/) 3. 3. 2026 9 min čtení --- ![cloudflare turnstile scaled](https://www.wplama.cz/wp-content/uploads/2025/12/cloudflare-turnstile-scaled.png "cloudflare turnstile scaled") WordPress návody ### [Cloudflare Turnstile – Jeden antispam, který ochrání celý váš WordPress](https://www.wplama.cz/cloudflare-turnstile-antispam/) 17. 12. 2025 4 min čtení --- ![image scaled](https://www.wplama.cz/wp-content/uploads/2025/09/image-scaled.png "image scaled") WordPress návody ### [Jak přidat měřicí kód Sklik do WordPress pomocí Complianz](https://www.wplama.cz/jak-pridat-merici-kod-sklik-do-wordpress-pomoci-complianz/) 16. 9. 2025 3 min čtení ---