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

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

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 ); ?>>