- 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細)
テンプレートタグ/post class
この項目「テンプレートタグ/post class」は、翻訳チェック待ちの項目です。加筆、訂正などを通して、Codex ドキュメンテーションにご協力下さい。
目次
説明
WordPress テーマ作成者が投稿のスタイル付けを行うために、細かな CSS 制御オプションを利用したい場合、post_class() 関数を利用できます。ループ内の HTML タグに、例えば <div <?php post_class(); ?> >
のように post_class 関数を含めると、div
タグにいろいろな投稿関連のクラスを表示・追加できます。この関数は主に index.php
や single.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
にあります。
関連資料
投稿タグ: 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(),
最新英語版: WordPress Codex » Function Reference/post_class (最新版との差分)