S tím jak připravuji řadu článků s návodem pro vytvoření responsivní šablony pro WordPress, objevila se otázka, které css třídy budou nutné pro jednoduchou šablonu a jenž WordPress generuje. Hledal jsem tedy seznam všech tříd, které by v souboru se styly měli být a nakonec jsem spojil podklady z článku na wpbeginner a z codexu.
Téměř všechny prvky ve WordPressu si můžete upravit a přidat jim vlastní třídy, které vám umožní nastylovat vlastní vzhled, tak jak potřebujete. Systém také generuje třídy již v základním nastavení a jejich znalost vám vytváření šablon ulehčí.
Css třídy pro tag body
Body je přítomen na každé stránce, kterou zobrazíte a dle toho, kde se nacházíte, zobrazují se v něm různé třídy. Aby se v tagu zobrazovaly generované třídy, mělo by body obsahovat funkci body_class();.
Seznam css tříd:
.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {} |
Pokud vám měnící se třídy nevyhovují, stačí přidat do body_class(‚moje-trida‘).
Třídy pro post
Stejně jako body i post má třídy při použití post_class(). Použití stejné jako u body_class.
Seznam tříd:
.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 {} |
.hentry je třída, kterou WordPress používá při vytváření Atom Feed.
Základní styly pro horizontální menu:
Protože menu je poměrně snadno upravitelné pomocí argumentů ve funkci wp_nav_menu(), nebudu zde rozepisovat všechny třídy, které se mohou objevit, ale protože má toto být seznam stylů, které potřebujete při vytvoření šablony, uvedu konkrétní příklad:
wp_nav_menu( array( 'theme_location' => 'primary-menu', 'menu_class => 'm-menu', 'container' => 'div', 'container_class => 'moje-menu' ) ); |
Tím jsme vytvořili menu pro Primary menu, které by mělo vypadat následovně:
<div class="moje-menu"> <ul class="m-menu"> položky menu </ul> </div> |
Styly, které budeme potřebovat pro nastylování menu:
.moje-menu{} // třída kontejneru (div)
.moje-menu ul.m-menu {} // kontejner a třída seznamu (samotné menu)
.moje-menu ul.m-menu li {} // jednotlivá položka navigace
.moje-menu ul.m-menu li a {} // odkaz z každé položky navigace
.moje-menu ul.m-menu li ul {} // submenu, ve většině případů je to dropdown menu
.moje-menu ul.m-menu li ul li {} // položka submenu
.moje-menu ul.m-menu li ul li a {} // odkaz z položky submenu |
Zápis by mohl být jednodušší, ale dávám přednost přesnější definici, což se vám vyplatí, pokud na šabloně pracuje více lidí.
Další dvě důležité třídy jsou:
.menu-item-home {} // označuje položku menu, nastavenou jako homepage
.current-menu-item {} // aktuální položka menu |
Styly generované pro Wisiwyg editor
WordPress automaticky přidává prvků vytvořeným v editoru vlastní třídy, zde je seznam těch, které by ve vašem style.css neměli chybět:
.entry-content img {}
.alignleft, a img.alignleft, img.alignleft {}
.alignright, a img.alignright, img.alignright {}
.aligncenter, a img.aligncenter, img.aligncenter {}
.alignnone, a img.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 {} |
Styly pro základní widgety
Po instalaci jsou dostupné základní widgety a ani ty by jste při přípravě šablony neměli vynechat, nebo se vám může stát, že klient umístí do sidebaru kalendář a hned se ozve.
.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 {} |
Styly pro komentáře
Nejprve zobrazení již odeslaných 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 {} |
Protože defaultní formulář pro odeslání komentáře nevypadá hezky, velmi často je to prvek, na který se web designér zaměří. Zde jsou styly pro něj:
#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 { } |
Tento seznam je jen doporučení, stylů ve vašem základním stylopisu může bát daleko víc, ale tyto by neměly chybět, pokud chcete, aby byla vaše šablona vždy funkční.
Pingback: Základní css styly generované WordPressem – [rookie]