【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は除かれるので、必然的にエラーも発生せずに済みますよ。

「WordPressカスタマイズ」新着記事

ソーシャルメディアのトータルシェア数を条件にして記事をランダム表示する方法

Avatar for ホシナ カズキ

ホシナ カズキ

チャット風の会話形式コンテンツをプラグインなしで実装する方法

Avatar for ホシナ カズキ

ホシナ カズキ

【WordPress】パーマリンクからカテゴリーベースを取り除く方法

Avatar for ホシナ カズキ

ホシナ カズキ

ディレクトリを切ってインストールしたWordPressをドメイン直下で表示させる方法

Avatar for ホシナ カズキ

ホシナ カズキ

「RSS Footer」が開発終了したならfunctions.phpで同じことやればいいじゃない

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

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

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