MENU
  1. Home
  2. WordPress リファレンス
  3. Function
  4. post_class()

post_class()

広告
Function

post_class() は、投稿ごとに特定のクラスを自動的にHTML要素に付与するテンプレートタグです。このクラスにより、投稿のタイプや状態、カテゴリーなどに応じたCSSスタイリングが可能になります。

目次

機能の説明

post_class() は、WordPressの各投稿のHTML要素に対して、自動的に複数のCSSクラスを追加します。
これにより、例えば「固定ページ」「カテゴリー」「タグ」などの情報に基づいたスタイル調整を柔軟に行えます。

  • 投稿の種類（post、page など）に応じたクラスを自動追加
  • 投稿の公開状態やフォーマットに応じたクラスも付与
  • 開発者が独自のクラスを追加することも可能

シンプルなコード例

<article <?php post_class(); ?>>
    <h2><?php the_title(); ?></h2>
    <div><?php the_content(); ?></div>
</article>

この例では、<article> タグに post_class() によって生成されたクラスが自動的に付与されます。

使い方の解説

post_class() は、主に index.php、archive.php、single.php などのテンプレートファイル内で使用されます。
このタグにより、各投稿に対して動的にクラスが付与されるため、CSSを使ったスタイルの制御が容易になります。

投稿一覧での利用例

<article <?php post_class(); ?>>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <div><?php the_excerpt(); ?></div>
</article>

このコードは、投稿の概要（the_excerpt()）とタイトルをリンク付きで表示します。post_class() を使って、各投稿に適切なクラスが付与されます。

独自クラスの追加

<article <?php post_class('custom-class'); ?>>
    <h2><?php the_title(); ?></h2>
    <div><?php the_content(); ?></div>
</article>

post_class() に 'custom-class' という独自のクラスを渡しています。これにより、システムによるクラスに加え、任意のクラスも適用されます。

一緒に使うことが多い関連タグ

get_post_class()

get_post_class() は、post_class() と似ていますが、HTMLに直接クラスを出力するのではなく、クラス名の配列を取得するテンプレートタグです。

<?php 
$classes = get_post_class(); 
print_r($classes); 
?>

get_post_class() を使うと、各投稿に適用されるクラス名の配列を取得して表示できます。

post_class() と get_post_class() を組み合わせる使用例

post_class() と get_post_class() を組み合わせて使うことも可能です。

<article class="<?php echo implode(' ', get_post_class()); ?>">
    <h2><?php the_title(); ?></h2>
    <div><?php the_content(); ?></div>
</article>

この例では、get_post_class() で取得したクラス名の配列を空白で連結し、<article> タグに直接適用しています。

追加情報を取得したい場合

post_class() では、投稿に関連する多くの状態や情報をクラス名として取得できますが、さらに詳細な情報が必要な場合は、投稿の状態や投稿タイプなどを直接取得することができます。

投稿の種類や状態を取得する例

<?php 
$post_type = get_post_type(); 
$post_status = get_post_status(); 
echo '投稿タイプ: ' . $post_type . ', ステータス: ' . $post_status;
?>

get_post_type() で投稿の種類、get_post_status() で投稿の公開状態を取得して表示します。

出力できる情報

  • post: 通常の投稿
  • page: 固定ページ
  • attachment: メディアファイル
  • sticky: 固定表示されている投稿
  • category-{slug}: カテゴリーのスラッグ
  • tag-{slug}: タグのスラッグ

使用する事で想定されるトラブ

クラスが正しく出力されない

テンプレートファイル内でHTML構造が正しくない可能性があります。

解決策

post_class() の引数を見直し、HTMLタグ内で正しく使用されていることを確認します。

ページによってクラスが異なる

post_class() は動的にクラスを付与するため、ページや投稿タイプごとに異なるクラスが適用されます。

解決策

必要なクラスが常に適用されるように、CSSやJavaScriptでクラスの組み合わせに対応します。

Q&A

post_class() とは何ですか？

post_class() は WordPress のテンプレートタグの一つで、投稿（記事）に自動的にクラスを付与するための関数です。

例えば、<article> タグ内で使うと、投稿の種類や状態に応じたクラスを自動で追加できます。

<article <?php post_class(); ?>>
    <h2><?php the_title(); ?></h2>
</article>

生成されるHTML（例）：

<article class="post-123 post type-post status-publish format-standard">
    <h2>記事タイトル</h2>
</article>

post_class() を使わないとどうなりますか？

post_class() を使わないと、WordPressが自動で追加するクラス（投稿ID、投稿タイプ、フォーマットなど）が適用されず、CSS の指定がしづらくなります。

例えば、カテゴリーやタグによるスタイル変更ができなくなることがあります。

独自のクラスをデフォルトで追加するには？

post_class フィルターフックを使って、クラスを追加することが可能です。

function add_custom_post_class($classes) {
    $classes[] = 'my-custom-class';
    return $classes;
}
add_filter('post_class', 'add_custom_post_class');

このコードは、すべての投稿に 'my-custom-class' という独自のクラスを追加します。

テンプレートファイルで追加したい場合は、post_class() の引数としてカスタムクラスを指定できます。

<article <?php post_class('my-custom-class'); ?>>
    <h2><?php the_title(); ?></h2>
</article>

生成されるHTML（例）：

<article class="post-123 post type-post status-publish format-standard my-custom-class">
    <h2>記事タイトル</h2>
</article>

post_class() で特定のカテゴリーごとにクラスを追加したい

投稿が属するカテゴリーに応じて、クラスを追加できます。

<article <?php post_class(get_the_category()[0]->slug); ?>>
    <h2><?php the_title(); ?></h2>
</article>

例えば、投稿が「news」カテゴリーに属していれば、class="news" が追加され、カテゴリーごとにデザインを変更できます。

特定の投稿タイプだけ post_class() の出力を変更したい

post_class フィルターを使って、カスタム投稿タイプのクラスを変更できます。

function custom_post_class($classes) {
    if (get_post_type() === 'custom_post_type') {
        $classes[] = 'custom-post-style';
    }
    return $classes;
}
add_filter('post_class', 'custom_post_class');

カスタム投稿タイプの記事に custom-post-style クラスを追加できます。

post_class() をカスタマイズする方法は？

デフォルトのクラスを変更したい場合、post_class フィルターを使うことができます。
例えば、post-id-XXX というクラスを削除する場合：

function remove_post_id_class($classes) {
    return array_filter($classes, function($class) {
        return strpos($class, 'post-') === false;
    });
}
add_filter('post_class', 'remove_post_id_class');

post_class() を使うときの注意点は？

クラスが増えすぎる可能性

post_class() はデフォルトで多数のクラスを追加するため、適切に整理しないとスタイルが複雑になります。

カスタムクラスを適切に追加すること

追加するクラスは重複しないようにし、CSS の可読性を保ちましょう。

フィルターで制御できる

post_class フィルターを使えば、特定の条件でクラスを変更可能。

post_class() を使ってもクラスが適用されない

post_class() を正しく使用しているか確認してください。
特に <article> や <div> に適用する際、PHP タグの書き方が間違っていると機能しません。

誤った例（閉じタグが間違い）

<article class="<?php post_class(); ?>">

正しい例

<article <?php post_class(); ?>>

post_class() に追加したカスタムクラスが出力されない

post_class() に引数を渡すことでカスタムクラスを追加できます。
追加したのに反映されない場合は、記述ミスやテーマの設定を確認してください。

正しいコード例

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


考えられる原因

  • post_class() を呼び出す前にエラーが発生している
  • post_class フィルターでクラスが削除されている

functions.php でクラスを変更するフィルターが適用されていないか確認しましょう。

特定のクラスを post_class() から削除したい

post_class フィルターを使用して特定のクラスを削除できます。

function remove_unwanted_classes($classes) {
    return array_diff($classes, array('sticky', 'format-standard')); // 削除するクラスを指定
}
add_filter('post_class', 'remove_unwanted_classes');

投稿ごとに異なるクラスを追加したい

カスタムフィールドや投稿IDを利用すると、投稿ごとに異なるクラスを追加できます。

function add_custom_post_class($classes) {
    $custom_class = get_post_meta(get_the_ID(), 'custom_class', true);
    if ($custom_class) {
        $classes[] = $custom_class;
    }
    return $classes;
}
add_filter('post_class', 'add_custom_post_class');

カスタムフィールド custom_class に値を設定すれば、それがクラスとして追加されます。

post_class() の出力が異常に長くなる

post_class() は自動で多くのクラスを追加するため、クラスが増えすぎることがあります。
例えば、カテゴリーやタグごとにクラスが増えることが原因になります。

対処法:
不要なクラスを削除するフィルターを適用する。

function limit_post_classes($classes) {
    return array_filter($classes, function($class) {
        return !preg_match('/^category-|^tag-/', $class); // カテゴリー・タグのクラスを削除
    });
}
add_filter('post_class', 'limit_post_classes');

post_class() を使っても CSS が適用されない

考えられる原因：

  • キャッシュが残っている（ブラウザキャッシュ・サーバーキャッシュのクリアを試す）
  • CSS のセレクタが間違っている

例

.article-custom { background-color: #f0f0f0; }

↓ post_class() で追加されるクラスを指定する場合は . を忘れずに。

.custom-class { background-color: #f0f0f0; }

post_class() が特定のページで動作しない

特定のテンプレートで post_class() を使ってもクラスが表示されない場合、テーマの構造を確認してください。
例えば、カスタム投稿タイプのアーカイブページ では post_class() を loop の中で呼び出す必要があります。

誤った例（ループの外で post_class() を使う）

<article <?php post_class(); ?>>

正しい例（ループの内側で使用）

<?php while (have_posts()) : the_post(); ?>
    <article <?php post_class(); ?>>
        <h2><?php the_title(); ?></h2>
    </article>
<?php endwhile; ?>

まとめ

post_class() は、投稿やページに応じた動的なクラスをHTML要素に付与するため、WordPressの開発において非常に便利なテンプレートタグです。
このタグを使用することで、投稿タイプや公開状態に基づいたCSSスタイリングが可能になります。また、get_post_class() やフィルターフックを使うことで、さらなる柔軟なカスタマイズも実現できます。

Function
よかったらシェアしてね！
  • URLをコピーしました！

コメント

コメントする

This site uses Akismet to reduce spam. Learn how your comment data is processed.

目次