【WordPress】post_classの使い方とクラス名を追加する方法

WordPressで投稿やページのHTMLに自動でCSSクラスを付与できる便利な関数が post_class() です。

この記事では、基本的な使い方から、オリジナルのクラスを追加する方法まで詳しく解説します。

post_class()とは？

post_class() は投稿のHTML要素（通常は <article> や <div>）に対して、WordPressが自動的に設定するCSSクラスを出力する関数です。

これにより投稿の状態や種類、カテゴリー、タグなどに応じてスタイルを適用しやすくなります。

主な自動付与クラス例：

post — 投稿であることを示す基本クラス
post-ID — 投稿IDを含むクラス（例：post-123）
category-{スラッグ} — 投稿のカテゴリーごとのクラス
tag-{スラッグ} — 投稿のタグごとのクラス
sticky — 固定表示投稿の場合
format-{フォーマット} — 投稿フォーマット（例：format-video）

など、多くの状態に応じて自動で付与されます。

基本的な使い方

投稿ループ内で投稿を囲うタグに対して post_class() を使う例です。

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

このように書くことで、記事の <article> 要素に自動でクラスが付与され、テーマのCSSと連携しやすくなります。

独自のクラスを追加する方法

post_class() は引数に配列または文字列で追加したいクラス名を渡すことができます。

文字列で追加

<article <?php post_class('custom-class'); ?> id="post-<?php the_ID(); ?>">
    <!-- 投稿内容 -->
</article>

この場合、custom-class が既存のクラスに追加されます。

配列で複数クラスを追加

<article <?php post_class( array('class-one', 'class-two') ); ?> id="post-<?php the_ID(); ?>">
    <!-- 投稿内容 -->
</article>

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

テーマのfunctions.phpなどでフィルターを使い、すべての投稿に対して条件付きでクラスを追加したい場合に便利です。

function my_custom_post_classes( $classes ) {
    if ( is_single() ) {
        $classes[] = 'single-post-custom';
    }
    if ( has_category('news') ) {
        $classes[] = 'news-post';
    }
    return $classes;
}
add_filter( 'post_class', 'my_custom_post_classes' );

この例では、シングル投稿ページなら single-post-custom クラスを、カテゴリーが news の投稿には news-post クラスを自動で追加します。