【WordPress】bodyタグにclassやidを自動で追加する方法

ページごとに特定のスタイルを指定したい時にはbodyタグにclassやidを追加すれば可能です。

プラグイン使ってスラッグなどをclassとして自動で追加する方法もありますが、今回はブラグインを入れすぎるとサイトが重くなるというデメリットがあります。

そこで、今回はプラグインを使わずに自動でclassやidを追加する方法を紹介します。

作業の前にFTPソフトなどを使い、必ずバックアップをしてください。
FTPソフトの使い方はこちらを参考にしてください。≫ XserverのWordPressで無料FTPソフトの使い方

bodyにclassを追加する場合

functions.phpにコードを追加します。

/* ***************************************************** */
// bodyにスラッグ名のclass付与
/* ***************************************************** */
// フィルターフック
add_filter( 'body_class', 'add_slug_class_name' );
function add_slug_class_name( $classes ) {
    // 条件分岐(投稿(post)、カスタム投稿タイプ、固定ページ、添付ファイルのシングルページの場合)
    if ( is_singular() ) {
        $page = get_post( get_the_ID() ); // 投稿・固定ページのデータを取得
        $classes[] = $page->post_name; // スラッグを取得
    }
    return $classes; // スラッグを返り値として取得
}

bodyにidを追加する場合

header.phpbodyタグにコードを追加します。

<body id="<?php echo esc_attr( $post->post_name ); ?>" <?php body_class(); ?>>

スラッグの編集

投稿ページや固定ページの作成・編集の時にスラッグを変更します。
この時スラッグ名はページに合った英語にしましょう。

以上でbodyタグにclassやidを自動で追加する設定の完了です。

お疲れさまでした!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です