Jaké CSS třídy WordPress automaticky generuje

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.