WordPress 自動でクラス(class)を出力してくれるテンプレートタグ(関数) body_class() , post_class()

WordPress

2020.04.01

WordPressのテンプレートタグに自動でCSSクラスを出力してくれる body_class() と post_class() があります。普段レイアウトに関する作業は行っておりませんが、どのように動くか気になりましたので動作検証してみました。

body_class()
post_class()
任意のクラスを追加する方法
動作環境情報

body_class()

テンプレートタグ設置

<body id="top" <?php body_class(); ?>>

出力されたソース

<body id="top" class="page-template page-template-templates page-template-page-business page-template-templatespage-business-php page page-id-124 page-parent logged-in admin-bar no-customize-support">

クラスのみ取得する

上記 “body_class()” を使う場合は、[ class=”” ] と属性名から出力されてしまいますので、クラスの中身だけ取得したい場合は “get_body_class()” を使うと配列で取得出来ます。

$classes = get_body_class();
var_dump($classes);

array(0) {
  [0]=>
  string(21) "page-template-default"
  [1]=>
  string(4) "page"
  [2]=>
  string(11) "page-id-971"
  [3]=>
  string(10) "page-child"
  [4]=>
  string(17) "parent-pageid-124"
  [5]=>
  string(9) "logged-in"
  [6]=>
  string(9) "admin-bar"
  [7]=>
  string(20) "no-customize-support"
  [8]=>
  string(13) "ag-add-class"
}

post_class()

テンプレートタグ設置

<div <?php post_class();?>>

出力されたソース

<div class="post-124 page type-page status-publish hentry">

クラスのみ取得する

“body_class()” と同様に “post_class()” も “get_post_class()” で中身だけ取得することが出来ます。

$classes = get_post_class();
var_dump($classes);

array(6) {
  [0]=>
  string(13) "ag-add-class"
  [1]=>
  string(8) "post-971"
  [2]=>
  string(4) "page"
  [3]=>
  string(9) "type-page"
  [4]=>
  string(14) "status-publish"
  [5]=>
  string(6) "hentry"
}

任意のクラスを追加する方法

“body_class()” も “post_class()” も引数に追加したいクラスを指定することで、任意のクラスを追加したソースを出力することが出来ます。

<body id="top" <?php body_class('add-class'); ?>>

<div <?php post_class('add-class');?>>

動作環境情報

エックスサーバー（x10）
PHP 7.3.14
MySQL 5.7
WordPress 5.3.2