WordPressテーマデザイナーを目指すのであれば、CSSをマスターすることは、より大きなコントロール、カスタマイザー、ワークフローの効率性を引き出す鍵となります。
幸運なことに、WordPressはテーマで利用できるCSSクラスを自動的に追加してくれます。これらのCSSクラスのいくつかは、WordPressサイトの各ページの<body>セクションに自動的に追加されます。
この投稿では、WordPressのボディクラスについて説明します。また、長年のテーマ開発の経験から、WordPressのボディクラスを使うためのヒントやコツを紹介し、あなたのプロジェクトをより充実したものにします。
この投稿で学ぶことの概要を簡単に説明しよう。
- What is WordPress Body Class?
- When to Use the WordPress Body Class
- How to Add Custom Body Classes
- Adding Body Class Using a WordPress Plugin
- Using Conditional Tags with the Body Class
- Other Examples of Dynamically Adding Custom Body Classes
- Browser Detection and Browser Specific Body Classes
- Expert Guides on WordPress Theme Design
WordPress Body Classとは？
bodyクラス（body_class）はWordPressの機能で、body要素にCSSクラスを割り当てることができます。
HTML bodyタグは通常、テーマのheader.phpファイルで始まり、すべてのページで読み込まれます。これにより、ユーザーがどのページを表示しているかを動的に把握し、それに応じてCSSクラスを追加することができます。
通常、ほとんどのスターター・テーマやフレームワークには、すでにHTMLのbodyタグ内にbodyクラス関数が含まれている。しかし、あなたのテーマにそれがない場合は、bodyタグをこのように修正することで追加することができます：
<body <?php body_class($class); ?>>
表示されるページの種類に応じて、WordPressは自動的に適切なクラスを追加します。
例えば、アーカイブページにいる場合、WordPressは自動的にbody要素にarchiveクラスを追加します。これは、ほぼすべてのページに対して行われます。
関連記事 WordPressの舞台裏をご覧ください（インフォグラフィック）。
どのページが表示されるかに応じて、WordPressが追加する一般的なクラスの例を以下に示します：
.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) {}
ご覧のように、このような強力なリソースを手元に置くことで、CSSだけでWordPressのページを完全にカスタマイズすることができる。特定の投稿者プロフィールページや日付ベースのアーカイブなどをカスタマイズできる。
ということで、次にボディ・クラスをいつどのように使うのかを見てみよう。
WordPressのボディクラスを使用する場合
まず、テーマのbody要素に上記のようなbody class関数が含まれていることを確認する必要があります。もし含まれていれば、上記のWordPressが生成したCSSクラスがすべて自動的に含まれます。
その後、カスタムCSSクラスをbody要素に追加することができます。これらのクラスは必要なときにいつでも追加できます。
例えば、特定のカテゴリーに分類された特定の投稿者の投稿の外観を変更したい場合。
カスタマイザー・クラスの追加方法
WordPressにはフィルターがあり、必要に応じてカスタマイザーを追加することができます。具体的な使用例を紹介する前に、フィルターを使ってボディクラスを追加する方法を説明します。
ボディ・クラスはテーマ固有のものなので、以下のコードをテーマのfunctions.phpファイルまたはコード・スニペット・プラグインに追加する必要があります。
function my_class_names($classes) {
// add 'class-name' to the $classes array
$classes[] = 'wpb-class';
// return the $classes array
return $classes;
}
//Now add test class to the filter
add_filter('body_class','my_class_names');
上記のコードは、あなたのサイトのすべてのページのbodyタグにクラス「wpb-class」を追加します。
このコードは、市場で最高のコードスニペットプラグインであるWPCodeを使って追加することをお勧めします。テーマのfunctions.phpファイルを編集することなく、WordPressのカスタムコードを安全かつ簡単に追加することができます。
まず、無料のWPCodeプラグインをインストールし、有効化する必要があります。手順が必要な場合は、WordPressプラグインのインストール方法をご覧ください。
プラグインを有効化したら、WordPressダッシュボードからCode Snippets“ Add Snippetに移動します。 そして、’Add Your Custom Code (New Snippet)’オプションを見つけ、その下の’Use snippet’ボタンをクリックします。
そこから、画面に表示されるオプションのリストから、コードタイプとして「PHP Snippet」を選択する必要がある。
次に、スニペットのタイトルを追加し、上記のコードを「コードプレビュー」ボックスに貼り付けます。
その後、スイッチを’Inactive’から’Active’に切り替え、’Save Snippet’ボタンをクリックするだけです。
これで、テーマのスタイルシートでこのCSSクラスを直接利用することができる。自分のサイトで作業している場合は、WordPressテーマカスタマイザーのカスタムCSS機能を使ってCSSを追加することもできます。
詳しくは、WordPressサイトにカスタムCSSを簡単に追加する方法をご覧ください。
WordPressプラグインを使ったボディクラスの追加
もしあなたがクライアントのプロジェクトに携わっておらず、コードを書きたくないのであれば、この方法の方が簡単だろう。
まず最初に、Custom Body Classプラグインをインストールして有効化します。詳しくはWordPressプラグインのインストール方法をご覧ください。
有効化したら、Settings ” Custom Body Classページにアクセスする必要があります。ここからプラグインの設定を行うことができます。
ボディクラス機能を有効化したい投稿タイプとアクセスできるユーザーを選択できます。変更を保存」ボタンをクリックして、設定を保存することを忘れないでください。
次に、WordPressサイトの投稿やページを編集します。投稿の編集画面で、右の列に「投稿カラム」と書かれた新しいメタ情報があります。
カスタムCSSクラスを追加するにはクリックしてください。スペース区切りで複数のクラスを追加できます。
完了したら、投稿を保存するか公開します。プラグインはあなたのカスタムCSSクラスを特定の投稿やページのボディクラスに追加します。
ボディ・クラスで条件分岐タグを使う
body_class関数の本当の威力は、条件分岐タグと一緒に使ったときに発揮される。
これらの条件分岐タグは、WordPressにおいて、ある条件が真か偽かをチェックするデータ型です。例えば、is_homeという条件分岐タグは、現在表示されているページがホームページかどうかをチェックします。
これにより、テーマ開発者は body_class 関数にカスタム CSS クラスを追加する前に、ある条件が真か偽かをチェックすることができます。
条件分岐タグを使ってボディ・クラスにカスタム・クラスを追加する例を見てみよう。
例えば、投稿者権限グループでログイン中のユーザーに対して、ホームページを異なるスタイルにしたいとします。WordPressは自動的に.homeと .logged-inクラスを生成しますが、ユーザー権限を検出したり、クラスとして追加したりはしません。
さて、これは条件分岐タグとカスタム・コードを使って、ボディ・クラスにカスタム・クラスを動的に追加するシナリオです。
これを実現するには、テーマのfunctions.phpファイルまたはコードスニペットプラグインに以下のコードを追加します。
function wpb_loggedin_user_role_class($classes) {
// let's check if it is homepage
if ( is_home() ) {
// Now let's check if the logged in user has author user role.
$user = wp_get_current_user();
if ( in_array( 'author', (array) $user->roles ) ) {
//The user has the "author" role
// Add user role to the body class
$classes[] = 'author';
// Return the classes array
return $classes;
}
} else {
// if it is not homepage, then just return default classes
return $classes;
}
}
add_filter('body_class', 'wpb_loggedin_user_role_class');
では、別の便利な例を見てみよう。今回は、表示されているページがWordPressの下書きのプレビューかどうかをチェックします。
そのために、条件分岐タグis_previewを使い、カスタムCSSクラスを追加する。
function add_preview_class($classes) {
if ( is_preview() ) {
$classes[] = 'preview-mode';
return $classes;
}
return $classes;
}
add_filter('body_class','add_preview_class');
では、追加したカスタムCSSクラスを利用するために、テーマのスタイルシートに以下のCSSを追加します。
.preview-mode .site-header:before {
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}
デモサイトではこのように表示されました：
WordPressで使用できる条件分岐タグの全リストをチェックするとよいでしょう。これを読めば、あなたのコードですぐに使えるタグの便利なセットがわかります。
カスタマイザー・クラスを動的に追加する他の例
条件分岐タグ以外にも、WordPressのデータベースから情報を取得したり、bodyクラスにカスタムのCSSクラスを作成したりするテクニックを使うことができる。
個別投稿ページのbodyクラスにカテゴリー名を追加する
例えば、個別投稿の外観をカテゴリーに基づいてカスタマイズしたいとします。これを実現するにはbodyクラスを使います
まず、個別投稿ページにカテゴリー名をCSSクラスとして追加する必要があります。そのためには、テーマのfunctions.phpファイルか、WPCodeのようなコード・スニペット・プラグインに以下のコードを追加します：
// add category nicenames in body class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}
add_filter('body_class', 'category_id_class');
上記のコードは、個別投稿ページのbodyクラスにカテゴリークラスを追加します。その後、CSSクラスを使って好きなようにスタイルを設定することができます。
bodyクラスにページスラッグを追加する
テーマのfunctions.phpファイルまたはコードスニペットプラグインに以下のコードを貼り付けます：
//Page Slug Body Class
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );
ここでも、WPCodeのようなコード・スニペット・プラグインを使ってWordPressにこのコードを追加することをお勧めする。そうすれば、サイトが壊れる心配はありません。
無料のWPCodeプラグインをインストールし、有効化することから始めます。WordPressプラグインのインストール方法はこちらをご覧ください。
プラグインを有効化したら、WordPressダッシュボードからCode Snippets“ Add Snippetに進みます。そして、「カスタムコードを追加する（新規スニペット）」設定の下にある「スニペットを使用する」ボタンをクリックします。
次に、コードタイプとして「PHP Snippet」を選択する。
次に、コード・スニペットのタイトルを追加し、上記のコードを「コード・プレビュー」ボックスに貼り付けるだけです。
最後に、スイッチを’Inactive’から’Active’に切り替え、’Save Snippet’ボタンをクリックする。
ブラウザー検出とブラウザー固有のボディクラス
テーマが特定のブラウザー用に追加のCSSを必要とする問題に遭遇することがあります。
新規: WordPressは読み込み時に自動的にブラウザーを検出し、その情報をグローバル変数として一時的に保存します。
WordPressが特定のブラウザを検出したかどうかを確認し、カスタムCSSクラスとして追加するだけです。
以下のコードをテーマのfunctions.phpファイルまたはコードスニペットプラグインにコピー＆ペーストするだけです：
function wpb_browser_body_class($classes) {
global $is_iphone, $is_chrome, $is_safari, $is_NS4, $is_opera, $is_macIE, $is_winIE, $is_gecko, $is_lynx, $is_IE, $is_edge;
if ($is_iphone) $classes[] ='iphone-safari';
elseif ($is_chrome) $classes[] ='google-chrome';
elseif ($is_safari) $classes[] ='safari';
elseif ($is_NS4) $classes[] ='netscape';
elseif ($is_opera) $classes[] ='opera';
elseif ($is_macIE) $classes[] ='mac-ie';
elseif ($is_winIE) $classes[] ='windows-ie';
elseif ($is_gecko) $classes[] ='firefox';
elseif ($is_lynx) $classes[] ='lynx';
elseif ($is_IE) $classes[] ='internet-explorer';
elseif ($is_edge) $classes[] ='ms-edge';
else $classes[] = 'unknown';
return $classes;
}
add_filter('body_class','wpb_browser_body_class');
というようなクラスを使うことができる：
.ms-edge .navigation {some item goes here}
小さなパディングやマージンの問題であれば、これはかなり簡単な修正方法だ。
body_class関数を使うことで、長いコードを書く手間を省くことができる場面は、まだまだたくさんあります。例えば、Genesisのようなテーマフレームワークを使っている場合、子テーマにカスタムクラスを追加するために使うことができます。
body_class関数を使って、全幅ページレイアウト、サイドバーコンテンツ、ヘッダー、フッターなどのCSSクラスを追加することができます。
WordPressテーマデザインのエキスパートガイド
もっとチュートリアルをお探しですか？WordPressのテーマデザインに関する他のガイドをご覧ください：
- WordPressテーマにパララックス効果を追加する方法
- WordPressでフッターを編集する方法（4つの方法）
- WordPressブログに雪の結晶を追加する方法
- カスタマイザーを失うことなくWordPressテーマを更新する方法
- WordPressでサイトデザインのフィードバックを得る方法
この投稿が、テーマでWordPressのbodyクラスを使用する方法を学ぶのにお役に立てば幸いです。また、WordPressの各投稿を異なるスタイルにする方法についての投稿や、WordPressページビルダープラグインの比較もご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
jenny
plsss give me example outwitting a crocodile theme plsssssssss
Corrinda
Thank you after reading a number of articles regarding the body-class this is the one the finally sunk in.
Got it working on individual pages and on category pages this is great. The use cases are what made the difference for me.
Editorial Staff
Sweet. Glad to be able to help.
管理者
Yolanda
Great tips! I’m trying to figure out how to add the menu class (the one you can enter in the admin) to body_class:
[pre]
/** Add nav menu css class to body class */
function add_nav_menu_css( $classes ) {
$classes[] = ‘menu-class-from-admin’;
return $classes;
}
add_filter( ‘body_class’, ‘add_nav_menu_css’ );
[/pre]
Seth Burleigh
Great tips. I”m trying to do this, and when inserting “page-template page-template-(template file name)” into my header file such that I have:
<body >
And I then modify my CSS to include: .page-template-home_corechella
I am left with a completely blank page. Nothing. What am I doing wrong? Thanks!
Editorial Staff
The page-templates are added in the homepage automatically as long as you have the body_class tags. Would have to see the file to see what you are doing wrong. Use a third party service like pastebin, and then paste the link here.
管理者
Seth
Ok, thank you very much!
I’ve changed the approach slightly since my post (now using instead of page template), but a similar problem is happening – the correct body CSS (body.corechella) is not showing. The original body class is taking priority.
Corechella Page template (http://dev.corebaby.org/corechella-home/) – http://pastebin.com/embed_js.php?i=8L6rhESr
Corechella header.php file – http://pastebin.com/embed_js.php?i=n2Sn4jUJ
CSS (the new body class is at the very bottom) – http://pastebin.com/embed_js.php?i=4U6d09cQ”
Seth
Editorial Staff
In your header.php, you have to keep the body class like this:
1-click Use in WordPress
In your CSS, just use .corchella instead of body.corchella
Michael
Great write up, thanks
Editorial Staff
Glad you found it helpful
管理者
Rasha
i have news page that get posts using category.php , i want to give it specific class so i can make the content wide and without the sidebar , how i can do that ?
Vajrasar
Indeed a good writeup and very informative. Just a question – For example if I add Browser Specific Body Class today and after few days I need to apply Page Class in Body Slug. Then will the settings/css that I did with Browser Specific Body class will get ruined or not?
Editorial Staff
No it will not get ruined. It can be overridden depending on how your CSS is written.
管理者