Vaše stránky vypadají chaoticky, mobilní verze je nepoužitelná nebo se uživatelé ztrácejí v zadních sekcích dlouhých článků. CSS může změnit vzhled webu WordPress za pár minut – aniž byste museli instalovat další plugin nebo číst příručky o kódu. Ukážeme, jak to funguje na konkrétních příkladech, které řeší problémy, se kterými se potýkají i neprogramátoři.
Proč CSS místo pluginů?
WordPress nabízí stovky pluginů pro každou úpravu designu, ale každý z nich přidává zbytečnou zátěž a zpomaluje web. CSS (Cascading Style Sheets) je nástroj, který umožňuje změnit vzhled stránek přímo v kódu – a to tak, že se ani neobjeví v zadní části administrace.
Tento článek shrnuje devět praktických triků, které vyřeší běžné problémy, se kterými se setkávají weboví majitelé, blogeři nebo správci školních stránek. Nevyžadují žádné pokročilé znalosti – stačí znát základní principy, jak do WordPressu vložit vlastní stylové pravidla.
1. Odstranění problémů s odkazy na sekce stránky
Pokud máte dlouhé články s tabulkou obsahu, uživatelé se mohou setkat s tím, že po kliknutí na odkaz (například #kontakt) se sekce zobrazí pod přilepenou nabídkou. To je problém, který vyřeší jednoduché nastavení scroll-margin-top.
Například pokud má vaše nabídka výšku 64 pixelů, stačí do stylů přidat:
.article-section h2 { scroll-margin-top: 64px; }Tím zajistíte, že po kliknutí na odkaz se sekce posune o potřebnou výšku a nebude skryta za nabídkou.
2. Skrytí zbytečných prvků v administraci
WordPressová administrace je často zaplavená reklamními bannery, upozorněními od pluginů nebo zbytečnými tlačítky. Pokud chcete odstranit například oznámení pouze na stránce s nastavením WooCommerce, stačí využít <body> třídy, které WordPress automaticky přidává.
Například pro skrytí oznámení v administraci WooCommerce použijte:
.toplevel_page_woocommerce.notice { display: none; }Tento trik funguje i pro skrytí prvků v editoru příspěvků nebo v sekcích pluginů, například Yoast SEO.
3. Rychlé vytváření responzivních mřížek
Pokud používáte klasický tématický design (například Astra nebo GeneratePress) nebo chcete optimalizovat zobrazení příspěvků na hlavní stránce, můžete vytvořit responzivní mřížku. Stačí jednoduchý CSS kód:
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }Tento kód zajistí, že se příspěvky automaticky přizpůsobí šířce obrazovky a na mobilních zařízeních se zobrazí v jednom sloupci. Stejný princip lze použít i pro zobrazení produktů v e-shopu nebo týmových profilů.
4. Dynamické velikosti písma bez media queries
Přizpůsobení velikosti písma pro různé obrazovky bývá náročné, protože vyžaduje množství media queries. Moderní funkce clamp() umožňuje definovat dynamickou velikost písma v jednom řádku:
h2 { font-size: clamp(1.5rem, 2vw, 2rem); }Tento kód zajistí, že písmo nebude menší než 1,5rem, větší než 2rem a automaticky se přizpůsobí šířce obrazovky. Funguje to i pro nadpisy, odkazy nebo bloky citátů.
5. Zrychlení dlouhých stránek s <code>content-visibility</code>
Pokud máte stránky s dlouhými seznamy (například archiv příspěvků nebo produkty v e-shopu), může se při scrollování objevit zpoždění. CSS vlastnost content-visibility řeší tento problém tím, že nařizuje prohlížeči, aby nevykresloval prvky, které nejsou viditelné.
Například pro zrychlení zobrazení článků na hlavní stránce použijte:
.article-card { content-visibility: auto; contain-intrinsic-size: 500px; }Tento trik funguje i v Gutenberg editoru – stačí do bloku přidat třídu a kód vložit do sekce Doplnit CSS v administraci.
6. Jak přepsat styly pluginů
Pokud se vám nepodaří změnit vzhled prvků dodávaných pluginem (například tlačítka v kontaktním formuláři), můžete použít !important. To však není řešení pro každou situaci – stačí ho použít v místech, kde je opravdu nezbytné:
.wpcf7-form-control { border-radius: 4px!important; }Vždy je lepší použít tento trik pouze v omezené míře a v samostatném souboru stylů pro pluginy, aby nedocházelo ke konfliktům.
7. Překonání specifických stylů bloků
Pokud chcete upravit vzhled bloků v Gutenberg editoru (například odstranit mezery pod tlačítky), můžete použít pseudo-trydu :where(), která snižuje specificitu pravidel:
:where(.wp-block-button) { margin-bottom: 0; }Tento trik umožňuje snadněji přepsat styly dodávané WordPressem nebo tématy, aniž byste museli bojovat s vysokou specificitou.
8. Úprava přihlašovací stránky
Pokud chcete přidat logo nebo změnit barvy na přihlašovací stránce WordPressu, stačí vložit vlastní CSS do souboru login.css a připojit ho pomocí funkce login_enqueue_scripts:
@media (min-width: 600px) {.login h1 a { background-image: url(https://vaše-doména/logo.svg)!important; } }Tento trik umožňuje profesionální vzhled přihlašovací stránky bez dalšího pluginu.
9. Zabránění rozbití layoutu obrázky
Obrázky, které nejsou oříznuty nebo mají příliš velkou šířku, mohou rozbít layout stránky. Stačí jednoduché pravidlo:
img { max-width: 100 %; height: auto; display: block; }Tento kód zajistí, že obrázky se přizpůsobí šířce svého kontejneru a nezpůsobí horizontální scroll.
Co s tím udělat
Pokud chcete vyzkoušet některý z těchto triků, postupujte podle těchto kroků:
- Připravte si soubor pro CSS: Vytvořte soubor
custom.cssve složce vašeho dítěte tématu nebo použijte sekci Doplnit CSS v administraci WordPressu. - Vložte kód: Do tohoto souboru vložte příslušné CSS pravidlo (například pro odstranění mezery pod tlačítky nebo dynamickou velikost písma).
- Připojte soubor k tématu: Pokud používáte dítě téma, stačí soubor uložit. Pokud pracujete s rodičovským tématem, použijte funkci
wp_enqueue_stylev souborufunctions.php:
function my_theme_enqueue_styles() { wp_enqueue_style( 'my-custom-css', get_stylesheet_directory_uri(). '/custom.css' ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );Pokud nejste si jisti, jaký kód použít, začněte s jednoduchými úpravami, jako je odstranění zbytečných prvků nebo optimalizace mobilní verze.
Zdroj: Kinsta blog – 9 time-saving CSS tips for WordPress users (26. 6. 2025)
Článek vychází z uvedeného zdroje.