【WordPress】カテゴリーやタグでデザインを変えるなら 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は除かれるので、必然的にエラーも発生せずに済みますよ。

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく