【WordPress】カテゴリーやタグでデザインを変えるなら post_class() を使うべし
WordPressで、記事のカテゴリーやタグに応じて、デザインを変化させたい。
そうしたことを、容易に実装させることができるのが、WordPressのテンプレートタグpost_class()です。
このテンプレートタグを使えば、面倒なコードは書くことなく、記述した要素のclass属性にカテゴリーやタグを識別するクラス名が入ります。
post_class() とは?
index.phpやsingle.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は除かれるので、必然的にエラーも発生せずに済みますよ。
