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

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

テンプレートタグ/post class

提供: WordPress Codex 日本語版
移動先: 案内検索

この項目「テンプレートタグ/post class」は、翻訳チェック待ちの項目です。加筆、訂正などを通して、Codex ドキュメンテーションにご協力下さい。

WordPress テーマ作成者が投稿のスタイル付けを行うために、細かな CSS 制御オプションを利用したい場合、post_class() 関数を利用できます。ループ内の HTML タグに、例えば <div <?php post_class(); ?> > のように post_class 関数を含めると、div タグにいろいろな投稿関連のクラスを表示・追加できます。この関数は主に index.phpsingle.php などの、投稿の階層付きリストを表示するテンプレートファイルで利用されます。

投稿のクラスを表示する代わりに値として取得するには、get_post_class() /en を使ってください。

ページ全体を対象とする CSS クラスについては body_class() を、またコメントのリストを対象とするクラスについては comment_class() を見てください。

使い方

<?php post_class( $class, $post_id ); ?>

デフォルトの使い方

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

表示する投稿の状態に応じて、post_class() はクラス属性に次のような値を含めます。

  • post-(投稿 ID)
  • post または attachment または カスタム投稿タイプ
  • type-カスタム投稿タイプ
  • status-公開状態
  • format-standard または format-ページのフォーマット名
  • post-password-required (パスワード保護されている)
  • has-post-thumbnail (アイキャッチ画像付き)
  • sticky (先頭に固定表示)
  • hentry (hAtom microformat との互換性を持たせる)
  • category-カテゴリーのスラッグ または category-(カテゴリー ID)
  • tag-投稿タグのスラッグ または tag-(投稿タグ ID)

デフォルトの出力

post_class() が出力する CSS クラスは、投稿が表示されているページの種類(概ね、条件分岐タグに対応)に応じて決まります。

フロントページ
投稿がブログのフロントページにある場合(固定でもそうでなくても):post post-(投稿 ID) hentry
単一の投稿
単一投稿のページを表示しているとき:post post-(投稿 ID) hentry
先頭固定表示の投稿
先頭固定表示が指定されている投稿:sticky
作成者
作成者(アーカイブ)のページを表示しているとき:post post-(投稿 ID)
カテゴリー
カテゴリー(アーカイブ)のページを表示しているとき:post post-(投稿 ID) category-カテゴリーのスラッグ
投稿タグ
投稿タグ(アーカイブ)のページを表示しているとき:post post-(投稿 ID) tag-投稿タグのスラッグ
アーカイブ(年、月、日)
アーカイブページが表示されているとき:post post-(投稿 ID)
検索結果
検索結果のページを表示しているとき:post post-(投稿 ID)
添付ファイル
添付ファイルのページを表示しているとき:attachment post-(投稿 ID)
フォーマット
ページのフォーマットを選択して表示している投稿:format-ページのフォーマット名

パラメータ

$class
文字列|配列) (オプション) クラス属性へ追加するクラス。文字列の場合、半角スペースで区切る。
初期値: 空文字列
$post_id
整数|オブジェクト) (オプション) 投稿 ID または投稿オブジェクト(WP_Post)。デフォルトは現在の投稿。
初期値: null

戻り値

この関数は値を返しません。

用例

テーマへの組み込み

次の例は post_class テンプレートタグをテーマへ組み込む方法を示します。

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

実際の HTML 出力は、例えば "dancing" カテゴリーの投稿の場合、概ね次のようになります:

<div id="post-4564" class="post post-4564 category-dancing">

これを使って、WordPress テーマのスタイルシートに適切なスタイルを追加します。例えば:

.post {
	/* すべての投稿に付けるスタイル */
}
.post-4564 {
	/* ID が 4564 の投稿のみに付けるスタイル */
}
.category-dancing {
	/* dancing カテゴリーの投稿に付けるスタイル */
}

クラスを追加する

出力されるクラスはデフォルトの使い方に示したものに限られます。しかしテンプレートタグのパラメータに指定すれば、投稿の本文(<div> タグ)にクラスを追加できます。例えば class-name クラスを追加するには、テンプレートファイルに次のように記述します:

<div id="post-<?php the_ID(); ?>" <?php post_class( 'class-name' ); ?>>

結果は次のようになります:

<div id="post-4564" class="class-name post post-4564 category-dancing">

複数のクラスを配列で指定することもできます:

<?php
	$classes = array( 'class1', 'class2', 'class3' );
?>
<div id="post-<?php the_ID(); ?>" <?php post_class( $classes ); ?>>

フィルターでクラスを追加する

単一投稿のページにおいて、投稿の本文(<div> タグ)とページ全体(<body> タグ)のクラス属性へカテゴリースラッグを追加するには、下記のコードを functions.php に追加します。

// カテゴリーのスラッグを投稿とページ全体の各クラスへ追加
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' );

ループ外で投稿を表示する

ループの外や独自のループの中で投稿を表示する場合、post_class() の第 2 パラメータに投稿 ID を指定できます。その投稿に基づいてクラスが出力されます。

<?php post_class( '', $post_id ); ?>

変更履歴

ソースファイル

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

comment_class()

投稿タグ: 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 関数型パラメータの渡し方関数リファレンステンプレートタグ目次もご覧ください。


この記事は翻訳時に編集が必要であるとマークされていました。その為Codex原文が大きく編集されている可能性があります。内容を確認される際は原文を参照していただき、可能であれば本項目へ反映させてください。よりよいCodexを作成するためのお手伝いをお願いします。

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