ワードプレスのget_body_classフィルタの使用方法・解説

概要

get_body_classフィルタは、bodyタグのclass属性値を取得するために使用されるフィルタです。このフィルタを使用すると、テーマやプラグインが出力されるCSSクラスを変更または追加できるため、デザインやスタイリングの柔軟性が増します。

主に以下のような機能を実装する際によく使われます：

1. ページの種類に応じたクラスの追加
2. カスタム投稿タイプに特有のクラス名の追加
3. 特定の投稿やページでのスタイリング調整
4. プラグインによる機能の有効無効に応じたクラスの適用
5. ユーザーのロールに基づくスタイルの適用
6. ブラウザやデバイスに依存するスタイルの適用
7. スタイルガイドの実装
8. アクセシビリティ向上のためのクラス追加

構文

apply_filters( 'get_body_class', array $classes, WP $wp );

パラメータ

• $classes: 既定のクラスの配列。
• $wp: WPオブジェクト。

戻り値

• 変更されたクラスの配列。

関連する関数

フィルタに関する情報はこちら

使用可能なバージョン

このフィルタは WordPress 2.8.0 以降で使用可能です。

コアファイルのパス

wp-includes/general-template.php

この関数のアクションでの使用可能性

アクション	使用可能性
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp	〇
template_redirect
get_header
wp_head	〇

サンプルコード

サンプルコード1

add_filter( 'get_body_class', 'custom_body_class' );

function custom_body_class( $classes ) {
    if ( is_single() ) {
        $classes[] = 'single-post';
    }
    return $classes;
}

このサンプルコードは、個々の投稿ページでsingle-postというクラスを追加します。

サンプルコード2

add_filter( 'get_body_class', 'add_custom_post_type_class' );

function add_custom_post_type_class( $classes ) {
    if ( is_singular( 'custom_post_type' ) ) {
        $classes[] = 'custom-post-type';
    }
    return $classes;
}

このコードは、特定のカスタム投稿タイプのページにcustom-post-typeというクラスを追加します。

サンプルコード3

add_filter( 'get_body_class', 'add_user_role_class' );

function add_user_role_class( $classes ) {
    if ( is_user_logged_in() ) {
        $current_user = wp_get_current_user();
        $classes[] = 'role-' . esc_attr( $current_user->roles[0] );
    }
    return $classes;
}

このサンプルは、ログインしているユーザーのロールに基づいてクラスを追加します。

サンプルコード4

add_filter( 'get_body_class', 'custom_browser_class' );

function custom_browser_class( $classes ) {
    $classes[] = 'browser-' . strtolower( $_SERVER['HTTP_USER_AGENT'] );
    return $classes;
}

このコードは、ブラウザに依存するクラスを追加します。HTTP_USER_AGENTに基づいてクラス名が設定されます。

サンプルコード5

add_filter( 'get_body_class', 'add_mobile_class' );

function add_mobile_class( $classes ) {
    if ( wp_is_mobile() ) {
        $classes[] = 'mobile';
    }
    return $classes;
}

このサンプルは、モバイルデバイスからのアクセス時にmobileというクラスを追加します。