Go to top Go to bottom

WordPressループで投稿を出力する際、post_class()を用いると、それを囲む要素に自動でクラスを割り当てることができます。CSSやJavaScriptで要素を識別するのに便利です。

用例
  • 投稿を囲む要素に自動でクラスを割り当て、種類によって異なるスタイルを当てる
  • それぞれの投稿をJavaScriptで識別しやすくする
関連
Codex

投稿を囲む要素に自動でクラスを割り当てる

post_class()関数を用いて、それぞれの投稿に自動でクラスを割り当てることができます。これは次のようにして使います。

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

class=""の部分まで含めて出力しますので、上のように記載します。WordPressループの中で使いますので、実践ではたとえば次のようにして使うことになるでしょう。

<?php if ( have_posts() ) : ?>
  <?php while( have_posts() ) : the_post(); ?>
    <section id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
      <h2><?php the_title(); ?></h2>
      <?php the_content(); ?>
    </section>
  <?php endwhile;?>
<?php else : ?>
  <div class="error">
    <p>お探しの記事は見つかりませんでした。</p>
  </div>
<?php endif; ?>

この処理を実行すると、3行目は下のようなHTMLとして出力されます。

post_class()による出力例

<section id="post-137" class="post-137 post type-post status-publish format-standard hentry category-photo tag-11">

これにより、たとえば特定の投稿のみ、あるいは特定のカテゴリーに属する投稿のみスタイルを変えるといったことが実現できるようになります。

覚えておくと便利なクラス名

post_class()は様々なクラスを追加しますが、特に以下に示すクラスが挿入されることを覚えておくと便利です。

通常の投稿の場合post
カスタム投稿の場合{post_type}
投稿がカテゴリーに属する場合category-{slug}またはcategory-{term_id}
投稿にタグをつけている場合tag-{slug}またはtag-{term_id}
投稿にカスタムタクソノミーが割り当てられている場合{taxonomy-name}-{slug}または{taxonomy-name}-{term_id}
固定表示機能Stickyが設定されている場合sticky
アイキャッチ画像が設定されている場合has-post-thumbnail

slugに日本語などのマルチバイト文字が使われておりクラス名として不適切な場合は、代替としてIDが付与されます。上の表で「または」と書いてある部分が該当します。

独自クラスを追加したい場合

post_class()でのクラス名に加え、独自のクラスを追加したい場合もあるかもしれません。そのようなときは、関数の第1引数にクラス名を渡します。

<div <?php post_class( 'my-class' ); ?>>

すると、先頭に独自クラスが挿入され、そのあとにWordPressが生成するクラスが列挙されます。複数のクラスを指定したい場合は、スペースで区切ります

<div <?php post_class( 'my-class-01 my-class-02' ); ?>>

WordPressループの外でpost_class()を使う場合

post_class()関数はWordPressループの外でも使うことができます。その場合、第2引数に投稿のIDを渡す必要があります。

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