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]