WordPressで出力される基本的なClass(Sassコメント版)

海外記事であるBack to Basics With WordPress CSS: Understanding the Native Classesを参考に、WordPressの基本的に要素ごとに振り分けられるclassを列挙し、Sassでのコンパイル時に(個人的に)便利なようにコメントを変更してみました。

コメントについて翻訳などはしていませんが、触ったことのある方にはだいたいどのように使われるclassか分かるかと思います。

ウィジェットまわり

// ===== Widgets =====

.widget {} // top level class for every widget
.widget-title {} // usually on the inner header element

// Archives
.widget_archive {} // used next to .widget (on the same tag)

// Calendar
.widget_calendar {} // used next to .widget (on the same tag)
#calendar_wrap {} // on <div> wrapping the calendar
#wp-calendar {} // on <table> building the calendar

// Categories
.widget_categories {} // used next to .widget (on the same tag)
.cat-item {} // on each item in the <ul> list

// Custom Menu
.widget_nav_menu {} // used next to .widget (on the same tag)
.menu-item {}

// Meta
.widget_meta {} // used next to .widget (on the same tag)

// Pages
.widget_pages {} // used next to .widget (on the same tag)
.page_item {}

// Recent Comments
.widget_recent_comments {} // used next to .widget (on the same tag)
.recentcomments {} // on each item in the <ul> list

// Recent Posts
.widget_recent_entries {} // used next to .widget (on the same tag)

// RSS
.widget_rss {} // used next to .widget (on the same tag)
.rsswidget {} // on each RSS link

// Search
.widget_search {} // used next to .widget (on the same tag)
.search-form {} // used with the actual <form> element

// Tag Cloud
.widget_tag_cloud {} // used next to .widget (on the same tag)
.tagcloud {} // on the 
wrapping the cloud // Text .widget_text {} // used next to .widget (on the same tag) .textwidget {} // on the actual text content of the widget

<body>タグに振り分けられるclass

// ===== Styling the  =====

.home {} // if it's the homepage
.page {} // if it's any page
.postid-XX {} // if it's a post - XX is the post's ID
.rtl {} // when dealing with right-to-left content
.blog {} // if it's the custom blog listing
.archive {} // if it's any sort of archive page
.category {} // if it's a categories listing page
.tag {} // if it's a tags listing page
.search search-results {} // if it's a search results page
.author {} // if it's an authors page
.author-XX {} // if it's an individual author's archive - XX is the author's nickname
.date {} // if it's a date-based archives page
.error404 {} // if it's a 404 page

投稿・ページに振り分けられるclass

// ===== Styling posts and pages =====

.post-XX {} // the ID of the element being displayed; used for both the posts and the pages
.post {} // if it's a post
.page {} // if it's a page
.attachment {} // if it's an attachment; on most sites this is not used
.sticky {} // if it's a sticky post
.format-YY {} // assigned to custom content types - YY is the name of the content type, e.g. "audio"

投稿内容まわり

// ===== Styling content =====

// the main classes used for alignment
.alignnone {}
.alignleft {}
.alignright {}
.aligncenter {}
img.alignnone {}
img.alignleft {}
img.alignright {}
img.aligncenter {}

.wp-caption {} // img caption
.gallery {}
.gallery-caption {}

// styles for img sizes
img.size-full {}
img.size-large {}
img.size-medium {}
img.size-thumbnail {}

// not classes, but surely something you should take care of
blockquote {}
code {}
pre {}
hr {}
del {}

全部まとめたもの

/* ========================================
    * * * * * Native Classes * * * * *
======================================== */

// ===== Widgets =====

.widget {} // top level class for every widget
.widget-title {} // usually on the inner header element

// Archives
.widget_archive {} // used next to .widget (on the same tag)

// Calendar
.widget_calendar {} // used next to .widget (on the same tag)
#calendar_wrap {} // on <div> wrapping the calendar
#wp-calendar {} // on <table> building the calendar

// Categories
.widget_categories {} // used next to .widget (on the same tag)
.cat-item {} // on each item in the <ul> list

// Custom Menu
.widget_nav_menu {} // used next to .widget (on the same tag)
.menu-item {}

// Meta
.widget_meta {} // used next to .widget (on the same tag)

// Pages
.widget_pages {} // used next to .widget (on the same tag)
.page_item {}

// Recent Comments
.widget_recent_comments {} // used next to .widget (on the same tag)
.recentcomments {} // on each item in the <ul> list

// Recent Posts
.widget_recent_entries {} // used next to .widget (on the same tag)

// RSS
.widget_rss {} // used next to .widget (on the same tag)
.rsswidget {} // on each RSS link

// Search
.widget_search {} // used next to .widget (on the same tag)
.search-form {} // used with the actual <form> element

// Tag Cloud
.widget_tag_cloud {} // used next to .widget (on the same tag)
.tagcloud {} // on the 
wrapping the cloud // Text .widget_text {} // used next to .widget (on the same tag) .textwidget {} // on the actual text content of the widget // ===== Styling the ===== .home {} // if it's the homepage .page {} // if it's any page .postid-XX {} // if it's a post - XX is the post's ID .rtl {} // when dealing with right-to-left content .blog {} // if it's the custom blog listing .archive {} // if it's any sort of archive page .category {} // if it's a categories listing page .tag {} // if it's a tags listing page .search search-results {} // if it's a search results page .author {} // if it's an authors page .author-XX {} // if it's an individual author's archive - XX is the author's nickname .date {} // if it's a date-based archives page .error404 {} // if it's a 404 page // ===== Styling posts and pages ===== .post-XX {} // the ID of the element being displayed; used for both the posts and the pages .post {} // if it's a post .page {} // if it's a page .attachment {} // if it's an attachment; on most sites this is not used .sticky {} // if it's a sticky post .format-YY {} // assigned to custom content types - YY is the name of the content type, e.g. "audio" // ===== Styling content ===== // the main classes used for alignment .alignnone {} .alignleft {} .alignright {} .aligncenter {} img.alignnone {} img.alignleft {} img.alignright {} img.aligncenter {} .wp-caption {} // img caption .gallery {} .gallery-caption {} // styles for img sizes img.size-full {} img.size-large {} img.size-medium {} img.size-thumbnail {} // not classes, but surely something you should take care of blockquote {} code {} pre {} hr {} del {}

コメント中 &lt;ul&gt; となっている部分はHTMLの <ul> ですが実体参照の都合でこのように記述されているのかとおもいますので、ご留意ください。

こちらで sass / compass でコンパイルの際、コメント及び記述されてない部分についてはコンパイルされないようになります。通常のスタイルシートで使いたい、またはコメントが出力されて欲しいという場合は、元記事のほうをご参照ください。

 

関係ないんですが、記事執筆中にCSS-Tricksさんのサイトデザインが変わりました。見出しなどの使用フォントも変えられたようで、ずいぶん見やすくなったかな?と思います。
サイト内リンクを別タブで表示した時にわかったんですが、タブを閉じてしまったので元はどんなフォントを使っていたのか比較することができず、すこし後悔。現在は Adobe製のソースコード用フォントである、font-family: 'Source Code Pro'をメインフォントとして使用されているようです。


参考

Back to Basics With WordPress CSS: Understanding the Native Classes | CSS-Tricks

Sass: Syntactically Awesome Style Sheets

Source Code Pro | SourceForge.net

HTML文字実体参照一覧

 660 Views