WordPressでclassの追加をするときテンプレートタグを使う方法

WordPressのclassを追加する時にはHTMLにclass属性を付与するとCSSで指定することができますが、WordPressのテンプレートタグをPHPで出力することでもクラス付与をしたり任意のclassを追加することができます。

WordPressでページごと、投稿ごとでclass追加してCSSで部分的にデザインを変えたいなどの場合にはテンプテートタグでclass追加して使う方法が便利なので覚えておきたいテクニックです。

WordPressでclassを追加する

WordPressでclassを追加する場合は冒頭でも少し書きましたが、HTML要素にclass属性をつけてCSSで目的の要素のスタイルを変更していくことができます。

ですが今回のWordPressでclassを追加する方法では直接HTML要素にclass指定するのではなくて、WordPressのテンプレートタグを使用してclassを追加します。

WordPressにはいくつかのclassを追加する方法がありますが、今回はその中でも基本的な方法を説明します。

まずは要素にclassを追加するために使用するWordPressのテンプレートタグから説明します。

使用するWordPressのテンプレートタグ

WordPressのclassを追加するときはpost_classというテンプレートタグを利用することができます。

以下のようなテンプレートタグです。

<?php post_class(); ?>

post_class()の部分がWordPressのテンプレートタグです。

post_classは主にWordPressのindex.phpやsingle.phpなどの投稿リストを表示するループ内で利用されます。

post_class()を利用するときにはカッコの中にパラメータを加えることもできます。

post_class( $class,$post_id )

$class

class属性へ追加するクラスを付与できます。文字列の場合は半角スペースで区切ります。初期値は空白文字列。

$post_id

パラメータの中に投稿idをつけることができます。デフォルトは現在の投稿です。初期値はnull。

今の段階ではWordPressのテンプレートタグ「post_class()」を使用する場合にはカッコの中にパラメータをつけることができる。というのを理解しておいてください。

具体的にはどのような使い方をすればいいのかパラメータの使い方も含めて徐々に使い方を応用していきながら説明をしていくので読み進めてみてください。

テンプレートタグ「post_class」の使い方

WordPressにclassを追加するためのテンプレートタグ「post_class()」の使い方はループ内のHTMLタグにpost_class()とthe_id()の二つのテンプレートタグを加えて使います。the_idは必ずループ内で使用します。

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

上のコードは<article>タグにidとclass追加するためを想定したサンプルコードです。

上記のサンプルコードでclass追加されるのは画像のように<article>タグにidの付与と共にいろいろな関連するクラスが自動で表示、追加されます。

このときのpost_class()でclass追加されたclass名を使ってCSSでデザインを振り分けできるようになります。

たとえばpost_class()で自動で追加された投稿id付きのクラス名「post-1044」をCSSでボーダーカラーを変更すると、1044の投稿だけボーダーカラーが変更できます。

または自動で追加されたクラス名にカテゴリーが含まれてるなら、そのカテゴリー名だけのスタイルを変更することもできます。

このときのpost_class()のテンプレートタグで自動追加されるクラス名については以下から説明します。

post_classで追加されるclass名

post_class()が自動で追加するclass名はパラメータで任意のclassを指定していない場合にも、任意のパラメータを指定している場合でも自動で追加されます。

classが自動で追加されるのは概ね上記のものが含まれます。これは上記全てのclass名が追加されるというのではなく、それぞれのブログやサイトの設定で違いがあります。例を見るのが分かりやすいので例を出します。

カテゴリーとタグを設定している投稿に追加されたclass名

idが1044の投稿は「post-1044」、カテゴリーはpracticeに属してる投稿なので「category-practice」、タグはtestに属してるので「tag-test」のclassが追加されます。

カテゴリとサムネイルを設定してる投稿に追加されたclass名

idが608の投稿は「post-608」、カテゴリーはuser1に属している投稿なので「category-user1」、この投稿にはサムネイルを使用してるので「has-post-thumbnail」のclassが追加されます。

このように設定によりpost_class()で追加されるclass名が違うことを覚えておくといいかと思います。

任意のクラス名を追加

WordPressのテンプレートタグpost_class()が自動で付与するclass名と一緒に任意のclass名も追加することができます。

以下のようにpost_class()にパラメータを追加します。

<div id="post-<?php the_ID(); ?>" <?php post_class( 'hoge' ); ?>>

post_classのカッコ内に任意のクラス名を追加します。post_class()のカッコの中の初期値は空文字列なので任意で自分なりのclassを指定できます。上のコードならhogeが任意class名です。

そして実際にループ内で使用する場合は以下のようなコードになります。

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

コード3行目がループ内で<section>タグにclass＝”hoge”を任意で指定しています。。このときにはもちろんpost_class()が自動で追加するclass名も含めて付与されます。

ここまでは任意のクラス名を一つだけ追加してきましたが、post_class()は複数の任意クラスをを指定することもできます。

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

複数のclassを指定したい場合はpost_class()のパラメータをスペースで区切ります。スペースで区切らないと複数にならずに一つのクラス名として出力されてしまうことに注意です。

また複数クラスを追加する場合にはもう一つ方法があります。

配列で複数のクラスを追加

WordPressで複数のクラスをpost_classで追加する二つ目の方法は、それらを配列として記述することです。

<?php
	$classes = array(
		'class1',
		'class2',
		'class3',
	);
?>
<div id="post-<?php the_ID(); ?>" <?php post_class( $classes ); ?>>

WordPressでテンプレートファイルに書かれているコードの配列を見慣れないと少しややこしく感じるかもしれないですが、上記コードはclassesという箱の中に「class1」「class2」「class3」を入れてからpost_class($classes)で任意のクラスを箱の名前でまとめてパラメータとして指定している使い方です。

class追加をループ外で使う方法

WordPressでclass追加するときにループ外でpost_class()のテンプレートタグを使う方法です。

<div <?php post_class('',class1); ?>></div>

第二パラメータに投稿idを指定できます。指定することでその投稿に基づいてクラスが出力されます。

あまり間違えないと思いますが、パラメータを書くときに第一パラメータではなく第二パラメータを使うということに気をつけてください。