• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

「テンプレートタグ/body class」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(翻訳、初期値一覧表を作成。用例が未翻訳)
 
(2人の利用者による、間の6版が非表示)
1行目: 1行目:
 
{{Stub}}
 
{{Stub}}
 
== 説明 ==
 
== 説明 ==
[[Version 2.8|WordPress 2.8]] から、テーマの作者がより効果的<!-- 効率的? -->に CSS で装飾できるようにする <code>body</code> 要素用の新テンプレートタグ '''body_class''' が加わりました。この関数は、HTML の body 要素(通常 header.php にある)に異なる class 属性を付与し、さらに任意の class を追加することもできます。
+
[[Version 2.8|WordPress 2.8]] から、テーマの作者がより効果的<!-- 効率的? -->に CSS で装飾できるようにする <code>body</code> 要素用の新テンプレートタグ <code>'''body_class'''</code> が加わりました。この関数は、HTML の <code>body</code> 要素(通常 <code>header.php</code> にある)に異なる <code>class</code> 属性を付与し、さらに任意の class を追加することもできます。
  
 
== 使い方 ==
 
== 使い方 ==
  
  <?php body_class( [[#Parameters|$class]] ); ?>
+
  <body <?php body_class( $class ); ?>>
  
body_class は、class 属性として次の値を一つ以上表示します。
+
<code>body_class</code> は、<code>class</code> 属性として次の値を一つ以上表示します。
  
 
* rtl
 
* rtl
50行目: 50行目:
 
|+  
 
|+  
 
! colspan="2" | ページ種類(条件) !! class !! 備考
 
! colspan="2" | ページ種類(条件) !! class !! 備考
 
 
|-
 
|-
! [[Settings Reading SubPanel|表示設定]] > Front page displays - Your latest posts の場合 !! メインブログページ<br />([[Conditional Tags#is_front_page|is_front_page]], [[Conditional Tags#The Main Page|is_home]])
+
! [[Settings Reading SubPanel|表示設定]] > フロントページの表示<!-- Front page displays --> が「最新の投稿」<!-- Your latest posts -->の場合 !! メインブログページ<br />([[Conditional Tags#The Front Page|is_front_page]], [[Conditional Tags#The Main Page|is_home]])
| '''home blog''' [ paged paged-''n'' ] ||  
+
| '''home blog''' [ paged paged-''n'' ] || [] 内は2ページ目以降のみ、''n'' はページ番号
 
|-
 
|-
! rowspan="2" | [[Settings Reading SubPanel|表示設定]] > Front page displays - A static page の場合
+
! rowspan="2" | [[Settings Reading SubPanel|表示設定]] > フロントページの表示<!-- Front page displays --> が「固定ページ」<!-- A static page -->の場合
! 「Front page」として選択したページ ([[Conditional Tags#is_front_page|is_front_page]])
+
! 「フロントページ」<!-- Front page -->として選択したページ ([[Conditional Tags#The Front Page|is_front_page]])
 
| '''home''' page page-id-''ID'' [*] || * ''is_page'' も参照
 
| '''home''' page page-id-''ID'' [*] || * ''is_page'' も参照
 
|-
 
|-
! 「Posts page」として選択したページ ([[Conditional Tags#The Main Page|is_home]])
+
! 「投稿ページ」<!-- Posts page -->として選択したページ ([[Conditional Tags#The Main Page|is_home]])
 
| '''blog''' [ paged paged-''n'' ] ||  
 
| '''blog''' [ paged paged-''n'' ] ||  
 
<!--  
 
<!--  
74行目: 73行目:
 
-->
 
-->
 
|-
 
|-
! rowspan="4" | is_archive !! is_author
+
! rowspan="4" | アーカイブページ<br />(is_archive)
| archive '''author author-''user_nicename'''''<!-- 'author-' . sanitize_html_class($author->user_nicename , $author->ID) --> [ paged paged-''n'' author-paged-''n'' ] ||  
+
! <!-- is_archive -->著者 ([[Conditional Tags#An Author Page|is_author]])
 +
| archive '''author author-''user_nicename'''''<!-- 'author-' . sanitize_html_class($author->user_nicename , $author->ID) --> [ paged paged-''n'' '''author-paged-''n''''' ] ||  
 
|-
 
|-
! <!-- is_archive -->is_category
+
! <!-- is_archive -->カテゴリー ([[Conditional Tags#A Category Page|is_category]])
| archive '''category category-''slug''''' [ paged paged-''n'' category-paged-''n'' ] ||  
+
| archive '''category category-''slug''''' [ paged paged-''n'' '''category-paged-''n''''' ] ||  
 
|-
 
|-
! <!-- is_archive -->is_tag
+
! <!-- is_archive -->タグ ([[Conditional Tags#A Tag Page|is_tag]])
| archive '''tag tag-''slug''''' [ paged paged-''n'' tag-paged-''n'' ] ||  
+
| archive '''tag tag-''slug''''' [ paged paged-''n'' '''tag-paged-''n''''' ] ||  
 
|-
 
|-
! <!-- is_archive -->is_date
+
! <!-- is_archive -->日付 ([[Conditional Tags#A Date Page|is_date]])
| archive '''date''' [ paged paged-''n'' date-paged-''n'' ] ||  
+
| archive '''date''' [ paged paged-''n'' '''date-paged-''n''''' ] ||  
 
|-
 
|-
! rowspan="2" | is_search !! 検索結果あり
+
! rowspan="2" | 検索結果 ([[Conditional Tags#A Search Result Page|is_search]])
 +
! <!-- is_search -->検索結果あり
 
| search '''search-results''' [ paged paged-''n'' search-paged-''n'' ] ||
 
| search '''search-results''' [ paged paged-''n'' search-paged-''n'' ] ||
 
|-
 
|-
! <!-- is_search --> 検索結果なし
+
! <!-- is_search -->検索結果なし
 
| search '''search-no-results''' [ paged paged-''n'' search-paged-''n'' ]  ||  
 
| search '''search-no-results''' [ paged paged-''n'' search-paged-''n'' ]  ||  
 
|-
 
|-
! is_404 !!
+
! colspan="2" | 404エラーページ ([[Conditional Tags#A 404 Not Found Page|is_404]])
 
| error404 ||  
 
| error404 ||  
 
|-
 
|-
! is_single !!
+
! colspan="2" | 単体記事ページ ([[Conditional Tags#A Single Post Page|is_single]])
 
| single postid-''ID'' [ paged paged-''n'' single-paged-''n''] ||  
 
| single postid-''ID'' [ paged paged-''n'' single-paged-''n''] ||  
 
|-
 
|-
! is_attachment !!
+
! colspan="2" | 添付ファイルページ ([[Conditional Tags#An Attachment|is_attachment]])
 
| attachment single postid-''ID'' attachmentid-''postID'' attachment-''mime-type''<!-- 'attachment-' . str_replace($mime_prefix, '', $mime_type) --> ||  
 
| attachment single postid-''ID'' attachmentid-''postID'' attachment-''mime-type''<!-- 'attachment-' . str_replace($mime_prefix, '', $mime_type) --> ||  
 
|-
 
|-
! rowspan="3" | is_page !! -
+
! rowspan="3" | [[Pages|固定ページ]] ([[Conditional Tags#A PAGE Page|is_page]])
 +
! <!-- is_page -->-
 
| page page-id-''ID'' [ page-template page-template-''template_file_name''<!-- 'page-template-' . str_replace( '.php', '-php', get_post_meta( $pageID, '_wp_page_template', true ) ) --> ] [ paged paged-''n'' page-paged-''n'' ] ||  
 
| page page-id-''ID'' [ page-template page-template-''template_file_name''<!-- 'page-template-' . str_replace( '.php', '-php', get_post_meta( $pageID, '_wp_page_template', true ) ) --> ] [ paged paged-''n'' page-paged-''n'' ] ||  
 
|-
 
|-
110行目: 112行目:
 
| page page-id-''ID'' '''page-child parent-pageid-''parent-ID''''' [ page-template page-template-''template_file_name'' ] [ paged  paged-''n'' page-paged-''n'' ] ||  
 
| page page-id-''ID'' '''page-child parent-pageid-''parent-ID''''' [ page-template page-template-''template_file_name'' ] [ paged  paged-''n'' page-paged-''n'' ] ||  
 
|-
 
|-
! rowspan="5" | (条件によってさらに追加される class)
+
! rowspan="4" | (条件によってさらに追加される class)
 
! is_user_logged_in
 
! is_user_logged_in
 
| logged-in || ログイン中
 
| logged-in || ログイン中
 
|-
 
|-
! is_paged
+
! [[Conditional Tags#A Paged Page|is_paged]]
 
| paged || 改ページ
 
| paged || 改ページ
|-
 
! paged < 2<!-- !$page || $page < 2 -->
 
| paged ||
 
 
|-
 
|-
 
! paged > 1<!-- $page && $page > 1 -->
 
! paged > 1<!-- $page && $page > 1 -->
139行目: 138行目:
  
 
=== 実装 ===<!-- Implementation -->
 
=== 実装 ===<!-- Implementation -->
The following example shows how to implement the body_class template tag into a theme.
+
<code>body_class</code> のテーマへの組み込み方の例を示します。
  
 
<pre>
 
<pre>
145行目: 144行目:
 
</pre>
 
</pre>
  
The actual HTML output might resemble something like this (the 'About' page from a default WordPress installation):
+
実際の HTML 出力は次のようになります(WordPress 新規インストールで作られる 'About' ページの例)。<!-- 日本語版ではどうなる? -->
  
<pre>
+
<pre class="example">
 
<body class="page page-id-2 page-template page-template-default logged-in">
 
<body class="page page-id-2 page-template page-template-default logged-in">
 
</pre>
 
</pre>
  
 +
WordPressのテーマスタイルシートでは、以下のような適切なスタイルを追加します。:
 +
 +
<pre>.page {
 +
/* styles for all posts within the page class */
 +
}
 +
.page-id-2 {
 +
/* styles for only page ID number 2 */
 +
}
 +
.logged-in {
 +
/* styles for all pageviews when the user is logged in */
 +
}
 +
</pre>
 +
 +
=== 詳しいクラスの追加<!-- Adding More Classes -->===
 +
 +
デフォルトでは、クラスは上記のものになります。
 +
 +
複数のクラスを追加するには、テンプレートタグのパラメータを追加することができます。
 +
 +
例えば、同じテンプレートにユニークのクラスを追加するには、以下:
 +
 +
<pre><body <?php body_class( 'class-name' ); ?>></pre>
 +
 +
結果は以下のようになる:
 +
 +
<pre><body class="page page-id-2 page-parent page-template-default logged-in class-name"></pre>
 +
 +
==== フィルターによるクラス追加 ====
 +
 +
body_class 関数のフィルターでbodyにクラスを追加できます。
 +
 +
To add the following to the WordPress Theme <tt>functions.php</tt> file, changing <tt>my_class_names</tt> and <tt>class-name</tt> to meet your needs:
 +
 +
<pre>// Add specific CSS class by filter
 +
add_filter( 'body_class', 'my_class_names' );
 +
function my_class_names( $classes ) {
 +
// add 'class-name' to the $classes array
 +
$classes[] = 'class-name';
 +
// return the $classes array
 +
return $classes;
 +
}
 +
</pre>
 +
 +
単一の投稿ページビューとテンプレートファイルにカテゴリークラスを追加するには、<tt>functions.php</tt>に以下を追加します。
 +
 +
<pre>// add category nicenames in body and post class
 +
function category_id_class( $classes ) {
 +
global $post;
 +
foreach ( get_the_category( $post->ID ) as $category ) {
 +
$classes[] = $category->category_nicename;
 +
}
 +
return $classes;
 +
}
 +
add_filter( 'post_class', 'category_id_class' );
 +
add_filter( 'body_class', 'category_id_class' );
 +
</pre>
 +
 +
==== サイドバーにクラスを追加 ====
 +
 +
You can add additional body classes by filtering the body_class function, but what if you want to add a class only when the sidebar.php file is being shown?  Here's a working example you can post in your themes <tt>functions.php</tt> file to add a sidebar class to the output of body_class.  From:  [http://www.askapache.com/wordpress/add-css-class-to-body-sidebar.html Add CSS Class to body when Sidebar is Present]
 +
 +
<pre>add_action( 'wp_head', create_function( '', 'ob_start();' ) );
 +
add_action( 'get_sidebar', 'my_sidebar_class' );
 +
add_action( 'wp_footer', 'my_sidebar_class_replace' );
 +
 +
function my_sidebar_class( $name = '' ) {
 +
static $class = 'withsidebar';
 +
if ( ! empty( $name ) ) {
 +
$class .= ' sidebar-' . $name;
 +
}
 +
my_sidebar_class_replace( $class );
 +
}
 +
 +
function my_sidebar_class_replace( $c = '' ) {
 +
static $class = '';
 +
if ( ! empty( $c ) ) {
 +
$class = $c;
 +
} else {
 +
echo str_replace( '<body class="', '<body class="' . $class . ' ', ob_get_clean() );
 +
ob_start();
 +
}
 +
}</pre>
 
=== デフォルトテーマにおける使用例 ===
 
=== デフォルトテーマにおける使用例 ===
 
{{BrowseSource|wp-content/themes/default/header.php}} を参照。
 
{{BrowseSource|wp-content/themes/default/header.php}} を参照。
  
== ソースコード ==
+
 
<code>body_class()</code> は {{BrowseSource|wp-includes/post-template.php}} にあります。
+
=== フック ===
 +
* フィルターフック: [[Plugin_API/Filter_Reference/body_class|'body_class']]
  
 
== 変更履歴 ==
 
== 変更履歴 ==
 
* [[Version 2.8|2.8]] : 新規テンプレートタグ
 
* [[Version 2.8|2.8]] : 新規テンプレートタグ
  
{{原文|Template Tags/body class|81631}}<!-- 17:06, 4 January 2010 Bono 版 -->
+
== ソースコード ==
 +
<code>body_class()</code> は {{BrowseSource|wp-includes/post-template.php}} にあります。
  
 
== 関連 ==
 
== 関連 ==
 +
===テーマ関数===
 
{{Tag Post Tags}}
 
{{Tag Post Tags}}
 +
 +
=== フック ===
 +
* Filter Hook: [[Plugin_API/Filter_Reference/body_class|'body_class']]
 +
  
 
{{PHP Function Tag Footer}}
 
{{PHP Function Tag Footer}}
 +
 +
 +
{{原文|Function Reference/body class|81631}} <!-- 17:06, 4 January 2010‎ Bono 版 -->
  
 
{{DEFAULTSORT:Body_class}}
 
{{DEFAULTSORT:Body_class}}
 
[[Category:wp2.8]]
 
[[Category:wp2.8]]
  
[[en:Template Tags/body_class]]
+
[[en:Function Reference/body_class]]

2016年4月27日 (水) 21:21時点における最新版

このページ「テンプレートタグ/body class」はまだ書きかけで、情報が不足しています。続きを書いて WordPress を手助けしましょう.


説明

WordPress 2.8 から、テーマの作者がより効果的に CSS で装飾できるようにする body 要素用の新テンプレートタグ body_class が加わりました。この関数は、HTML の body 要素(通常 header.php にある)に異なる class 属性を付与し、さらに任意の class を追加することもできます。

使い方

<body <?php body_class( $class ); ?>>

body_class は、class 属性として次の値を一つ以上表示します。

  • 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)

ページ種類別初期値一覧

ページ種類(条件) class 備考
表示設定 > フロントページの表示 が「最新の投稿」の場合 メインブログページ
(is_front_page, is_home)
home blog [ paged paged-n ] [] 内は2ページ目以降のみ、n はページ番号
表示設定 > フロントページの表示 が「固定ページ」の場合 「フロントページ」として選択したページ (is_front_page) home page page-id-ID [*] * is_page も参照
「投稿ページ」として選択したページ (is_home) blog [ paged paged-n ]
アーカイブページ
(is_archive)
著者 (is_author) archive author author-user_nicename [ paged paged-n author-paged-n ]
カテゴリー (is_category) archive category category-slug [ paged paged-n category-paged-n ]
タグ (is_tag) archive tag tag-slug [ paged paged-n tag-paged-n ]
日付 (is_date) archive date [ paged paged-n date-paged-n ]
検索結果 (is_search) 検索結果あり search search-results [ paged paged-n search-paged-n ]
検索結果なし search search-no-results [ paged paged-n search-paged-n ]
404エラーページ (is_404) error404
単体記事ページ (is_single) single postid-ID [ paged paged-n single-paged-n]
添付ファイルページ (is_attachment) attachment single postid-ID attachmentid-postID attachment-mime-type
固定ページ (is_page) - page page-id-ID [ page-template page-template-template_file_name ] [ paged paged-n page-paged-n ]
親ページ page page-id-ID page-parent [ page-template page-template-template_file_name ] [ paged paged-n page-paged-n ]
子ページ page page-id-ID page-child parent-pageid-parent-ID [ page-template page-template-template_file_name ] [ paged paged-n page-paged-n ]
(条件によってさらに追加される class) is_user_logged_in logged-in ログイン中
is_paged paged 改ページ
paged > 1 paged-n page-paged-n 2ページ目以降
text_direction: rtl rtl 右→左向きに書く言語

パラメータ

class
文字列 または 配列)(オプション) 初期値のほかに追加したい class 名。複数指定するときは(半角)スペースで区切る。初期値は null。

用例

実装

body_class のテーマへの組み込み方の例を示します。

<body <?php body_class(); ?>>

実際の HTML 出力は次のようになります(WordPress 新規インストールで作られる 'About' ページの例)。

<body class="page page-id-2 page-template page-template-default logged-in">

WordPressのテーマスタイルシートでは、以下のような適切なスタイルを追加します。:

.page {
	/* styles for all posts within the page class */
}
.page-id-2 {
	/* styles for only page ID number 2 */
}
.logged-in {
	/* styles for all pageviews when the user is logged in */
}

詳しいクラスの追加

デフォルトでは、クラスは上記のものになります。

複数のクラスを追加するには、テンプレートタグのパラメータを追加することができます。

例えば、同じテンプレートにユニークのクラスを追加するには、以下:

<body <?php body_class( 'class-name' ); ?>>

結果は以下のようになる:

<body class="page page-id-2 page-parent page-template-default logged-in class-name">

フィルターによるクラス追加

body_class 関数のフィルターでbodyにクラスを追加できます。

To add the following to the WordPress Theme functions.php file, changing my_class_names and class-name to meet your needs:

// Add specific CSS class by filter
add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
	// add 'class-name' to the $classes array
	$classes[] = 'class-name';
	// return the $classes array
	return $classes;
}

単一の投稿ページビューとテンプレートファイルにカテゴリークラスを追加するには、functions.phpに以下を追加します。

// add category nicenames in body and post class
function category_id_class( $classes ) {
	global $post;
	foreach ( get_the_category( $post->ID ) as $category ) {
		$classes[] = $category->category_nicename;
	}
	return $classes;
}
add_filter( 'post_class', 'category_id_class' );
add_filter( 'body_class', 'category_id_class' );

サイドバーにクラスを追加

You can add additional body classes by filtering the body_class function, but what if you want to add a class only when the sidebar.php file is being shown? Here's a working example you can post in your themes functions.php file to add a sidebar class to the output of body_class. From: Add CSS Class to body when Sidebar is Present

add_action( 'wp_head', create_function( '', 'ob_start();' ) );
add_action( 'get_sidebar', 'my_sidebar_class' );
add_action( 'wp_footer', 'my_sidebar_class_replace' );
 
function my_sidebar_class( $name = '' ) {
	static $class = 'withsidebar';
	if ( ! empty( $name ) ) {
		$class .= ' sidebar-' . $name;
	}
	my_sidebar_class_replace( $class );
}
 
function my_sidebar_class_replace( $c = '' ) {
	static $class = '';
	if ( ! empty( $c ) ) {
		$class = $c;
	} else {
		echo str_replace( '<body class="', '<body class="' . $class . ' ', ob_get_clean() );
		ob_start();
	}
}

デフォルトテーマにおける使用例

wp-content/themes/default/header.php を参照。


フック

変更履歴

  • 2.8 : 新規テンプレートタグ

ソースコード

body_class()wp-includes/post-template.php にあります。

関連

テーマ関数

投稿タグ: body_class(), next_image_link(), next_post_link(), next_posts_link(), post_class(), post_password_required(), posts_nav_link(), previous_image_link(), previous_post_link(), previous_posts_link(), single_post_title(), sticky_class(), the_category(), the_category_rss(), the_content(), the_content_rss(), the_excerpt(), the_excerpt_rss(), the_ID(), the_meta(), the_shortlink(), the_tags(), the_title(), the_title_attribute(), the_title_rss(), wp_link_pages(),


フック


テンプレートタグへの PHP 関数型パラメータの渡し方関数リファレンステンプレートタグ目次もご覧ください。


最新英語版: WordPress Codex » Function Reference/body class最新版との差分