development_creative

この記事は1年以上経過しています。

【WordPress】特定のページに固有のclassを動的に付与したい!

こんなことはありませんか?

例えば、「詳細ページで背景色を変更したい」といった時や、「LP的なページなのでガッツリcssの内容が変わる!けど・・・」といった時。

「ページ毎に自動で固有のclassをつけて、cssを分岐したい!」といった時に、非常に便利なコードをご紹介します。

コードはこちら

以下のコードを記述することで、自動的にclassが付与されます。
便利な関数です。

<body <?php body_class(); ?>>

吐き出されるclassの例

TOPページ(index.php)の場合

  • home
  • page-template-index

上記のクラスあたりがTOPページの分岐classとしては優秀そうですね。

アーカイブページ(archive.phpなど)の場合

  • archive
  • category

categoryは、カテゴリーで投稿を絞り込んだ時に表示されます。

詳細ページ(single.phpなど)の場合

  • single
  • single-post
  • postid-12652(番号部分は投稿によりけりです)

idも表示されるので、display : noneなどのプロパティで、特定のページにしか表示させないコンテンツも作ることが可能ですね。

参考になれば幸いです。

AIも発達してきていますが、コードの内容を理解しないと使いきれないでしょう。
みんなWeb制作頑張りましょう!

Related ariticle

関連記事

TOP