WordPress obecně

Jaké CSS třídy WordPress automaticky generuje

css
Autor příspěvku Tomáš Cirkl

Všimli jste si někdy, že WordPress automaticky generuje CSS třídy pro určité prvky stránky? Samozřejmě vždy záleží na šabloně, ale pokud se jedná o dobře napsanou šablonu podle kodexu, tak ve zdrojovém kódu lze najít několik CSS tříd a ID generovaných automaticky WordPressem. Jestliže se pokoušíte upravit styly specificky pro určité stránky nebo prvky, můžete tyto elementy krásně využít.

V tomto článku si ukážeme seznam CSS tříd a ID generovaných automaticky WordPressem.

Výchozí CSS třídy pro body

Jedna z nejlepších věcí na WordPress je jeho upravitelnost. WordPress automaticky vkládá třídy i do <body>. Tyto třídy pak lze například využít k nastavení rozdílného pozadí pro různé stránky.

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(typ) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(název šablony stránky) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(ID stránky) {}
.single-paged-(ID stránky) {}
.page-paged-(ID stránky) {}
.category-paged-(ID stránky) {}
.tag-paged-(ID stránky) {}
.date-paged-(ID stránky) {}
.author-paged-(ID stránky) {}
.search-paged-(ID stránky) {}
.tax-(taxonomy name) {}
.term-(term name) {}
.admin-bar {}

Třídy lze využít také pro jednotlivé skupiny stránek. Například třída search-results je vkládána pouze na stránkách vyhledávání.

Výchozí CSS třídy pro příspěvky

Podobně jako u body vkládá WordPress třídy i k příspěvkům.

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}
.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}

Výchozí CSS třídy pro menu

Kdykoliv ve WordPress vložíte menu do stránky, bude obaleno divem nebo jiným HTML prvkem s třídou vytvořenou podle ID menu. V ukázce stylů níže předpokládejme, že je ID main-menu.

#header .main-menu{} // třída kontaineru
#header .main-menu ul {}
#header .main-menu ul ul {}
#header .main-menu li {} // jednotlivý prvek menu
#header .main-menu li a {} // jednotlivý odkaz v menu
#header .main-menu li ul {} // dropdown seznam
#header .main-menu li li {}
#header .main-menu li li a {}

.current_page_item{} // třída pro aktivní stránku
.current-cat{} // třída pro aktivní rubriku
.current-menu-item{} // třída pro jakýkoliv jiný aktivní vlastní prvek menu
.menu-item-type-taxonomy{} // třída pro rubriku
.menu-item-type-post_type{} // třída pro stránku
.menu-item-type-custom{} // řída pro jakýkoliv jiný vlastní prvek menu
.menu-item-home{} // třída pro domácí stránku

Výchozí CSS třídy pro vizuální editor

Vizuální editor je jednou z nejpoužívanějších funkcí WordPress. Z toho důvodu je dobré využívat jeho automaticky generovaných stylů. Využít je můžete například u obrázků nebo citací. Níže najdete seznam automaticky generovaných tříd pro vizuální editor.

.entry-content img {}
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
.alignnone, img.alignnone {}

.wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {}

.wp-smiley {}

blockquote.left {}
blockquote.right {}

.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

Výchozí CSS třídy pro widgety

Dalším populárním prvkem WordPress jsou widgety. I pro widgety WordPress automaticky generuje různé CSS třídy, které lze využít k úpravě jejich vzhledu. Pokud by vám nestačili, můžete si k widgetu přidat vlastní třídu.

.widget {}

#searchform {}
.widget_search {}
.screen-reader-text {}

.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {} 
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {} 
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

.textwidget {}
.widget_text {}
.textwidget p {}

Výchozí CSS třídy pro komentáře

WordPress generuje pro komentáře velké množství CSS tříd, které lze využít k jejich úpravě.

/*Zobrazený komentář*/

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {} 
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

/*Formulář pro vložení komentáře */

#respond { } 
#reply-title { } 
#cancel-comment-reply-link { }
#commentform { } 
#author { } 
#email { } 
#url { } 
#comment 
#submit
.comment-notes { } 
.required { }
.comment-form-author { }
.comment-form-email { } 
.comment-form-url { }
.comment-form-comment { } 
.form-allowed-tags { } 
.form-submit

Automaticky generované třídy se do WordPress neustále přidávají a proto je možné, že nám nějaké v seznamu chybí. Berte to tedy jako takový tahák a pokud nějakou z těchto tříd najdete, napište o tom v komentáři a já je do seznamu přidám.

O autorovi

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 WordCamp Praha a WordPress konferencích.

Zanechat komentář

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!

Tomáš Cirkl

Tomáš Cirkl

WordPress specialista

Blog WPlama.cz píši už více než 5 let. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.