body_class フックの使い方｜説明・引数・注意点

説明

基本構文

apply_filters( 'body_class', string[] $classes, string[] $css_class )

引数

• $classes：クラス名の配列
• $css_class：追加指定されたクラス名

戻り値

クラス名の配列を返します。

使い方（サンプル）

add_filter( 'body_class', function( $classes ) {
	$classes[] = 'my-class';
	return $classes;
} );

注意点

• 配列を返します。文字列を返すと動作しません。

実務での使いどころ

• <body> に、独自のクラスを、追加するとき。
• ページごとに、見た目を切り替えるための、クラスを付けるとき。

よくあるミスと対処

• 配列を返していない。受け取った配列に、追加して返す。
• クラスが、<body> に反映されない。テーマの <body> に、body_class() を、呼んでいない。
• 文字列を、そのまま追加している。配列に、要素として追加する。

NG例

add_filter( 'body_class', function ( $classes ) {
	return 'my-class'; // 配列ではなく、文字列を返している
} );

OK例

add_filter( 'body_class', function ( $classes ) {
	if ( is_front_page() ) {
		$classes[] = 'is-top';
	}
	return $classes;
} );

使い分け早見表

関連項目

body_class、post_class()、body_class()

公式リファレンス：body_class | WordPress Developer Resources