post_class()

Tuesday, July 8, 2025

post_class()とは？

post_class() は、WordPress テーマ内で使用されるテンプレートタグで、各投稿の HTML 要素（主に <article> や <div>）に自動的に投稿固有のクラスを付加するための関数です。

この関数を使うことで、投稿の種類・状態・カテゴリー・タグ・作成者などに応じて、自動で適切な CSS クラスが付けられるようになります。

CSSやJavaScriptで特定の投稿タイプや投稿ステータスに応じたデザイン・動作を簡単に実装できます。

post_class()の基本的な使い方

最も一般的な使い方は次のように、投稿ループ内で <article> タグなどの中に配置する形です。

<article <?php post_class(); ?>>
  <h2><?php the_title(); ?></h2>
  <div class="entry-content">
    <?php the_content(); ?>
  </div>
</article>

このように書くと、WordPress が投稿の状態や情報に基づいて適切なクラスを自動的に出力します。

post_class()の出力されるクラスの例

たとえば、投稿ID 123、投稿タイプが post で、カテゴリー news に属する記事の場合：

<article id="post-123" class="post-123 post type-post status-publish format-standard category-news">

このようなクラスが自動的に出力されます。

主な自動クラスの種類

クラス名	説明
`post-123`	投稿IDに応じたクラス
`type-post`	投稿タイプ（post, page, カスタム投稿など）
`status-publish`	投稿ステータス（公開、非公開など）
`format-standard`	投稿フォーマット（standard, gallery など）
`category-news`	所属カテゴリ
`tag-abc`	所属タグ（存在すれば）
`author-john`	投稿者スラッグによるクラス
`hentry`	マイクロフォーマット用クラス（Googleなどの構造化データで利用される）

post_class()の引数の指定

post_class( string|array $class = '', int|WP_Post $post_id = null )

引数	型	内容
`$class`	string/array	任意で追加したいクラス名
`$post_id`	int/WP_Post	対象とする投稿ID（省略時は現在の投稿）

カスタムクラスを追加する例

<article <?php post_class('my-custom-style'); ?>>

出力：

<article class="post-123 post type-post ... my-custom-style">

複数クラスを配列で指定：

<article <?php post_class(['highlight', 'featured']); ?>>

カスタム投稿タイプにも対応

たとえば、カスタム投稿タイプ product に対して使った場合は、自動的に type-product のようなクラスが付きます。

CSSで活用する具体例

たとえば以下のようにすれば、投稿フォーマットごとにデザインを変えることも可能です。

.format-standard {
  background-color: #fff;
}
.format-gallery {
  background-color: #f0f0f0;
}

あるいは特定カテゴリの投稿だけ枠線をつけたい場合：

.category-news {
  border: 1px solid red;
}

post_class() のカスタマイズ（フィルター）

WordPress では post_class フィルターフックを使って、出力されるクラスをさらに柔軟にカスタマイズできます。

例：特定投稿タイプにカスタムクラスを追加

add_filter('post_class', function($classes, $class, $post_id){
  $post = get_post($post_id);
  if ( $post->post_type === 'product' ) {
    $classes[] = 'is-product';
  }
  return $classes;
}, 10, 3);

get_post_class() との違い

関数名	処理	用途
`post_class()`	クラスを echo で出力（テンプレートタグ）	HTMLで直接使う場合
`get_post_class()`	クラスを配列で返す（出力しない）	条件分岐や自作関数内での処理

例：

$classes = get_post_class();
foreach ( $classes as $class ) {
  echo $class . ' ';
}

投稿以外への応用

固定ページ（page.php）やカスタム投稿タイプ、ウィジェット、検索結果ページでも使用可能です。
また、カスタムテンプレートでも同様に活用できます。

実践的な応用例

特定タグを含む投稿だけ目立たせる

add_filter('post_class', function($classes){
  if ( has_tag('注目') ) {
    $classes[] = 'highlight-post';
  }
  return $classes;
});

ログインユーザーのみ見えるクラス

add_filter('post_class', function($classes){
  if ( is_user_logged_in() ) {
    $classes[] = 'logged-in-user';
  }
  return $classes;
});

注意点・よくある誤解

post_class() は <article> や <div> など 投稿全体を包む要素に使う のが基本です。
投稿ループの中で使用しないと、クラスが正しく出力されません。
id 属性（例：id="post-123"）は別途手動で指定する必要があります。

例：

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

まとめ

項目	内容
関数名	`post_class()`
主な用途	投稿に自動でCSSクラスを付加
対象	投稿・固定ページ・カスタム投稿など
自動クラス例	投稿タイプ・投稿ID・カテゴリ・タグ・著者など
カスタム追加	引数 or フィルターで追加可能
補助関数	`get_post_class()`（配列を取得）

post_class() は、WordPress テーマ開発においてCSS設計やJavaScript制御の土台となる、とても重要な関数です。

投稿ごとに動的なクラスを付与することで、より柔軟でメンテナブルなテーマを構築できます。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

katsu@WP-Design

初めてホームページを作成したのは1996年。
2000年よりフリーランスで主に中小企業、学校、各種公的団体、個人事業主のWordPressを活用したホームページ制作を行っています。WordPressテーマはそれぞれのクライアントに合わせて作成しています。
WordPressを活用したサイト運営のための情報発信をしていきます。