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.
