---
site_name: WPlama
site_description: Internetové stránky na WordPressu snadno a česky
site_url: https://www.wplama.cz
contact_email: tomas@wplama.cz

title: Jak přidat vlastní CSS třídu k widgetu ve WordPress
url: https://www.wplama.cz/jak-pridat-css-tridu-k-widgetu/
date: 2016-03-06
modified: 2017-11-13
author: Tomáš Cirkl
type: post
categories: [WordPress návody]
tags: [css, plugin, widget, WordPress]
---

WordPress již sám o sobě k určitým prvkům ve zdrojovém kódu přiřazuje **CSS třídy**. Přímo k widgetu standardně přiřazuje obecnou třídu *widget * a pak třídu podle typu widgetu. Takže například text widget má ještě třídu *widget_text*, widget s výpisem rubrik pak třídu *widget_categories*.

To by samo o sobě mohlo docela dobře stačit, ale co když chcete ke specifickým widgetům přiřadit stejné styly, například podbarvený nadpis. Pak už nemůžete spoléhat na výchozí třídy, ale je třeba si **vytvořit třídy vlastní** a ty si k daným widgetům přiřadit.

> CSS třída je prvek, který pomáhá vybrat specifickou část HTML. K vybrané části HTML kódu pak můžeme přiřadit například styly pomocí souborů css.

## Přidání vlastní CSS třídy k widgetu pomocí pluginu

K přidání vlastní CSS třídy k WordPress widgetu využijeme plugin [Widget CSS Classes](https://wordpress.org/plugins/widget-css-classes/). [Plugin nainstalujte](https://www.wplama.cz/3-zpusoby-jak-nainstalovat-wordpress-plugin/) a aktivujte.

Od této chvíle když půjdete do *Vzhled -> Widgety*, tak bude možné ke každému widgetu přiřadit vlastní CSS třídu. Tříd můžete přidat kolik chcete, stačí je jednotlivé třídy oddělit čárkou.

![CSS třída ve Widgetu](https://www.wplama.cz/wp-content/uploads/2016/03/css-trida-ve-widgetu-1024x481.png "CSS třída ve Widgetu")CSS třída ve Widgetu

Kromě toho plugin **Widget CSS Classes** automaticky přidává následující CSS třídy:

- Třídu pro první/poslední widget (Add First/Last Classes)
- Třídu podle čísla widgetu (Add Widget Number Classes)
- Třídu podle toho zda je plugin v seznamu na sudé nebo liché pozici (Add Even/Odd Classes)

Další možnosti najdete na stránce nastavení pluginu v sekci *Nastavení -> Widget CSS classes*.

**Třídy přidané pluginem** v HTML vypadají následovně:

- widget-first: třída přidaná prvnímu pluginu v sidebaru
- widget-last: třída přidaná poslednímu pluginu v sidebaru
- widget-odd: třída přidaná každému lichému pluginu v sidebaru
- widget-even: třída přidaná každému sudému pluginu v sidebaru
- widget-#: třída přidaná ke každému widgetu, například widget-1, widget-2

Plugin Widget CSS Classes nabízí velké množství nastavení a způsobů jak přiřadit CSS třídu k widgetu. Díky tomu dokáže značně ulehčit výběr daného prvku. Plugin ale **neumožňuje vložení vlastních stylů**. K tomu budete muset použít například úpravu šablony nebo ještě lépe [child theme](https://www.wplama.cz/jak-vytvorit-child-theme-a-proc-ji-vyuzivat/) či jiný [plugin](https://www.wplama.cz/vlastni-css-styly/).