気軽に読めるPHP入門書・PHPスクリプトが動かないときの原因と対策などを紹介します。

  1. WordPressのPHP
  2. 5 view

WordPress関数のbody_classはページごとのデザイン変更に役立つ

WordPress関数のbody_classは、投稿やページのbodyタグに個別のclass名を追加してくれます。個別のブログ記事、固定ページで別々のデザインに仕上げたいときに役立ちます。

body_classは多くのWordPressテーマで使われておりheader.phpのbodyタグの属性を作るために次のように呼び出されるのが一般的です。

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

これにより、ブログ記事ごと、固定ページごとに固有のclassが作成されます。たとえば、作成されたサイトのフロントページ(トップページ)のHTMLソースを見ると、次のようなbodyタグが作成されます。

<body class="home page …略…">

この「home」がフロントページであることを示しています。これを活用すれば、トップページのみサイドバーを非表示にするようなCSSも作成できます。

「サイドバーを非表示に」というと「.sidebar {display: none;}」のようなCSSを思い付くかもしれませんが、これではすべてのページのサイドバーが消えてしまうので、「トップページのみ」という条件を付けるために「home」というフロントページ固有のclass名を利用します。

.home .sidebar {display: none;}

このようにページ固有のclass名を活用すれば、他のページに影響を与えずに特定のページのみのデザインを変更することができます。

その他、ブログ記事、固定ページ、アーカイブ、カテゴリーなどによって個別のclass名が追加されます。以下に例を紹介します。

  • トップページ — home
  • 特定の投稿IDの投稿やページ — page-id-70
  • 親ページ — page-parent
  • 子ページ — page-child
  • アーカイブ — archive
  • カテゴリー — category/category-news/category-2
  • 個別投稿 — single/single-post

個別のページごとに生成されたclass名を活用すれば、サイトの雰囲気とはまったく異なるランディングページを混ぜたり、ヘッダーやフッターを取り除いたページを混在させることができます。WordPressテーマを自作するときもbody_class関数を使ってページごとのclass名を生成しておけば、カスタマイズ性を高めることができます。いろいろとご活用ください。

WordPressのPHPの最近記事

  1. WordPressダッシュボードのメニューを非表示にするremove_menu_page関…

  2. WordPressで中身が空のindex.phpは消しても大丈夫?

  3. WordPressのPHPでショートコードを呼び出す方法

  4. is_categoryとin_categoryの違い

  5. wp_get_attachment_image_src関数の使用例

関連記事

PAGE TOP