Základní css styly generované WordPressem

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í.

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Související články

1 Comments

  1. Pingback: Základní css styly generované WordPressem – [rookie]

Přidejte komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *