条件によってデザインを変えるなら、テンプレートタグ「post_class()」を使おう

WordPressで、記事のカテゴリーやタグに応じて、デザインを変化させたい。
そうしたことを、容易に実装させることができるのが、WordPressのテンプレートタグpost_class()です。

このテンプレートタグを使えば、面倒なコードは書くことなく、記述した要素のclass属性にカテゴリーやタグを識別するクラス名が入ります。

post_class()

「post_class()」とは?

index.phpsingle.phpなど、投稿や固定ページを表示させるループ内で利用する関数です。
投稿の状態に応じて、class属性にいろいろなクラス名を付与してくれます。

WordPressのデフォルトテーマを始めとして、公式ディレクトリのテーマであれば、まず間違いなく組み込まれている関数です。

「post_class()」で付与されるクラス名

post_class()を組み込むのは、記事ひとつの固まりに対してです。
HTML5で記述されたテーマなら、<article>に組み込むのが妥当でしょう。

組み込むことで、以下のようなクラス名が付与されます。

  • post-(投稿ID)
  • post あるいは attachment あるいはカスタム投稿タイプ
  • type-post (type-の後にカスタム投稿タイプ)
  • status-publish
  • format-standard あるいは format-(ページのフォーマット名)
  • has-post-thumbnail
  • hentry
  • category-(カテゴリースラッグ) あるいは category-(カテゴリーID)
  • tag-(タグスラッグ) あるいは tag-(タグID)

といった感じ。ちょっとわかりにくいので、当ブログでの実例も載っけておきましょうか。

こんな感じでズラッとたくさんのクラス名が付与されます。
「なんだかややこしいなぁ」と思われるかもしれませんが、カテゴリーやタグに応じてデザインを変えるなら、着目すべきクラス名はcategory-tag-くらいなので、そんなややこしいこともないでしょう。

あとは、このクラス名を使ってCSSを記述するだけです。基本的なHTML構造は変わりませんが、
「カテゴリーやタグごとに記事タイトルに異なるアイコンを付けたい」
「カテゴリーやタグごとに背景の色を変えたい」
といったことが、簡単に実装できます。

「post_class()」の実装

実装と言っても、えらく簡単です。
さきほどの当ブログの実例を元にすると、テーマ上は以下の記述になっています。

たったこれだけ。<?php post_class(); ?>が展開されて、上のように出力されるんですね。いやはや便利便利。

hentry に気をつけろ!

さて、最後にちょっと注意点というか。
post_class()関数が展開されると、そのクラス名の中にhentryというものが含まれています。

このhentryはhAtom microformatとの互換性を持たせるもの。Googleウェブマスターツールで、構造化データとして認識されるので、きちんとした構造化データのマークアップがなされていないと、ウェブマスターツール上でエラー扱いされてしまいます。

単純にきちんとマークアップすればいいんですが、ちょっとめんどくさいので、うちではhentryが出力されないよう、functions.phpでゴニョっと記述を加えています。

これを記述しておけば、post_class()が展開されてもhentryは除かれるので、必然的にエラーも発生せずに済みますよ。

4844337165
できる100ワザ WordPress必ず集客できる実践・サイト運営術WordPress 4.x対応
posted with AmaQuick
ホシナカズキ,できるシリーズ編集部

モバデビの最新情報をチェック