【WordPress】固定ページのスラッグをclassに付与する方法を解説！便利です

今回はWordPressでテーマを自作する際に便利な、固定ページのスラッグをclassに付与する方法を解説します。

行う工数としては少なくて簡単ですが、意味を深く知ってWordPressへの理解をより深めていきましょう。

固定ページのスラッグって？
固定ページのスラッグをclassに付与する方法
固定ページのスラッグをclassに付与するメリット
- ページ毎に異なるデザインを簡単に実装できる
- HTML/CSSで余計な記述が減ってスッキリする
まとめ

固定ページのスラッグって？

企業サイトやブランドサイトを作成する際、固定ページを作成して各ページを作成していくと思います。

その際に各固定ページにはスラッグと言って、URLの一部の文字列ができます。

下の画像で言うと/contact/の部分で、こちらは固定ページの「お問い合わせページ」です。

また、テーマを作成するときにテンプレートファイルとして、page-{スラッグ}.phpというファイルを作成することで、そのページのファイルということを認識して読み込み、フロントに反映します。

上の画像の「お問い合わせページ」で言うと、page-contact.phpがお問い合わせページのファイルとなります。

固定ページはお問い合わせページの他にも下記のような様々なページで使用されます。

会社概要
商品ページ
新着情報
プライバシーポリシー等

スラッグは自由に決められるので、変更も可能です。

固定ページを作成すると一覧画面にクイック編集というボタンがあるので、クリックすると上の画面になります。

スラッグの部分を変更するとURLとテンプレートファイルのスラッグが変更します。編集画面の右側にあるURLを最初に変更する方法もあります。

固定ページのスラッグをclassに付与する方法

それでは実際に固定ページのスラッグをclassに付与する実装をしていきましょう。

functions.phpに追記する

下のコードをfunctions.phpに追記しましょう。

function my_body_class($classes)
{
    if (is_page()) {
        $page = get_post();
        $classes[] = $page->post_name;
    }
    return $classes;
}
add_filter('body_class', 'my_body_class');

書いてある内容は、「固定ページの時、その投稿の名前を取得してclassに追加する」ということです。

今回は固定ページだけですが、応用すればカテゴリーや投稿ページにも活用できます。

body_class()を使用する

functions.phpに記述した後はbody_classを実際にテンプレートファイルに追記します。

bodyタグがあるファイル（header.phpの方が多いと思います）を開き、bodyタグに下のように追記します。

　　　　　　　　　　　　　　　　：
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
    <div class="container">
        <header class="header">
　　　　　　　　　　　　　　　　：

これで実装は完了です。