Vlastní CSS ve WordPressu: kam ho přidat a jak změnit barvu tlačítka

Než začnete psát CSS: možná stačí nastavení

Nejjednodušší barva tlačítka je ta, kterou nastavíte bez kódu. Nejdřív zkontrolujte:

• Bloková šablona: Vzhled → Editor → Styly. V nastavení bloků nebo prvků najdete tlačítka a můžete změnit jejich pozadí a barvu textu pro celý web.
• Klasická šablona: Vzhled → Přizpůsobit. Mnoho šablon tam má sekci barev nebo tlačítek.
• Obchod na WooCommerce: tlačítka Přidat do košíku obvykle berou barvu ze šablony, takže často stačí změna ve stylech šablony.

CSS potřebujete, když taková volba chybí, nebo když chcete změnit jedno konkrétní tlačítko.

Kde je ve vaší šabloně doplňkové CSS

CSS z Editoru webu a CSS z Přizpůsobit jsou dvě oddělená místa. Vysvětluje to poznámka týmu jádra WordPressu k CSS v globálních stylech. Pokud máte blokovou šablonu, ale kdysi jste přidali CSS v Přizpůsobit, vyplatí se ho přesunout na jedno místo, abyste za rok věděli, kde hledat.

Jak změnit barvu tlačítka krok za krokem

1. Otevřete stránku s tlačítkem, klikněte na něj pravým tlačítkem a zvolte Prozkoumat. Uvidíte třídu prvku, například wp-block-button__link nebo button.
2. Přejděte na místo pro doplňkové CSS podle tabulky výše.
3. Přidejte pravidlo, například:

.wp-block-button__link {
  background-color: #1f6f5c;
  color: #ffffff;
}
.wp-block-button__link:hover {
  background-color: #17574a;
}

4. Sledujte náhled. Pokud se barva nezměnila, pravidlo šablony je silnější. Dejte před třídu název oblasti, například .site-footer, místo abyste pravidlo hned vynucovali pomocí important.
5. Změny publikujte nebo uložte.
6. Zkontrolujte stránku v anonymním okně a na telefonu. Barva textu musí být na novém pozadí čitelná.

Barvy v příkladu jsou jen příklady. Další postupy, včetně child theme a pluginu, popisuje průvodce Hostingeru k vlastnímu CSS ve WordPressu.

Co dalšího opraví pár řádků CSS

Barva tlačítka je nejčastější požadavek, ale stejné pole pomůže i s jinými drobnými úpravami vzhledu:

• Skrytí prvku, například data pod příspěvky nebo jména autora, pravidlem display: none. Prvek v kódu stránky zůstane, jen ho nevidíte.
• Mezery, když se nadpis lepí na obrázek nebo jsou tlačítka na telefonu příliš blízko u sebe.
• Velikost písma na jednom místě, například v zápatí, bez změny celé typografie šablony.
• Barva odkazů v obsahu příspěvků, když je barva šablony na bílém pozadí příliš bledá.
• Rozvržení na mobilu, pravidlem s podmínkou šířky obrazovky, které platí jen na úzkých displejích.

Dva zvyky vám za pár měsíců ušetří hledání. Nad každé pravidlo přidejte komentář mezi /* a */, například „zelená tlačítka, říjen 2026“. A všechny úpravy držte na jednom místě, ne kousek v Přizpůsobit, kousek ve stylech editoru a kousek v nastavení pluginu page builderu. Pak snadno uvidíte, které pravidlo co dělá, a ta nepotřebná bez obav odstraníte.

Slovo opatrnosti ke skrývání. Pokud tímto způsobem skryjete text, který je pro zákazníky důležitý, například cenu dopravy, zmizí z obrazovky, ale ne z povinností obchodu. Takový obsah opravte u zdroje.

Když doplňkové CSS nestačí

Doplňkové CSS mění vzhled, ne obsah ani strukturu HTML. Nepřidáte jím nový text do zápatí ani nepřesunete tlačítko do jiné sekce. K tomu potřebujete šablony v Editoru webu nebo soubory v child theme ve WordPressu. Popisuje je WordPress Theme Handbook.

Pokud se po uložení nic nezmění, i když je CSS správně, často za to může cache. Pořadí, v jakém ji vymazat, popisujeme v článku změny se ve WordPressu neprojevují.

Jak chat mění CSS s náhledem

Plugin TellMyShop pro WordPress a WooCommerce umožní vašemu chatu (Claude nebo ChatGPT) přečíst aktuální doplňkové CSS a přidat nebo nahradit jeho část. Před uložením zkontroluje, že sedí složené závorky, a upozorní na načítání stylů z jiných domén. V blokové šabloně mění i barvy a typografii v globálních stylech.