今回はWordPressでテーマを自作する際に便利な、固定ページのスラッグをclassに付与する方法を解説します。行う工数としては少なくて簡単ですが、意味を深く知ってWordPressへの理解をより深めていきましょう。固定ページのスラッグって?固定ページのスラッグをclassに付与する方法functions.phpに追記するbody_class()を使用する確認する固定ページのスラッグをclassに付与するメリットページ毎に異なるデザインを簡単に実装できるHTML/CSSで余計な記述が減ってスッキリするまとめ固定ページのスラッグって?企業サイトやブランドサイトを作成する際、固定ページを作成して各ページを作成していくと思います。その際に各固定ページにはスラッグと言って、URLの一部の文字列ができます。下の画像で言うと/contact/の部分で、こちらは固定ページの「お問い合わせページ」です。テーマを作成するときにテンプレートファイルとして、page-{スラッグ}.phpというファイルを作成することで、そのページのファイルということを認識して読み込み、フロントに反映します。上の画像の「お問い合わせページ」で言うと、page-contact.phpがお問い合わせページのファイルとなります。固定ページはお問い合わせページの他にも下記のような様々なページで使用されます。等スラッグは自由に決められるので、変更も可能です。固定ページを作成すると一覧画面にクイック編集というボタンがあるので、クリックすると上の画面になります。スラッグの部分を変更するとURLとテンプレートファイルのスラッグが変更します。編集画面の右側にあるURLを最初に変更する方法もあります。固定ページのスラッグをclassに付与する方法それでは実際に固定ページのスラッグをclassに付与する実装をしていきましょう。functions.phpに追記する下のコードをfunctions.phpに追記しましょう。'my_body_class');書いてある内容は、「固定ページの時、その投稿の名前を取得してclassに追加する」ということです。今回は固定ページだけですが、応用すればカテゴリーや投稿ページにも活用できます。body_class()を使用するfunctions.phpに記述した後はbody_classを実際にテンプレートファイルに追記します。bodyタグがあるファイル(header.phpの方が多いと思います)を開き、bodyタグに下のように追記します。:これで実装は完了です。確認するフロントで実際に確認してみましょう。検証ツールでbodyタグのclassを確認したものが下の画像です。ピンクのラインを引きましたが、ちゃんとお問い合わせページのスラッグ「contact」が入っています。このように実際にスラッグがbodyタグのclassに入っているか確認してみてください。固定ページのスラッグをclassに付与するメリット多様な固定ページがある中で、固定ページ毎に違いを表すclassはデフォルトでは割り当てられていません。なると、「ページ毎に少し違うスタイルを当てたい」と思った時に専用のテンプレートファイルを作成して、該当ページだけに当たるクラスを用意する方法がありますが、「そこまでするのもなー」と迷ってしまいます。思い通りのデザインにするためにはある程度動的なクラスを使用したり、page-contact.phpのようにスラッグを使用してそのページ専用のテンプレートファイルを作成する必要があります。body_class関数を使用して各ページのbodyタグに固定ページのスラッグを動的に追加することで、専用のテンプレートファイルを作成しなくてもスタイルを当てられるようになります。することで2点のメリットがあります。ページ毎に異なるデザインを簡単に実装できる例えば、「商品ページだけ背景の色を変更したい」となった時、そのためだけにテンプレートファイルを追加するのは少し大袈裟な気がします。条件分岐する方法もありますが、body_class関数を使用すれば各ページ毎にbodyタグにスラッグが自動で追加されるのでより簡単に実装できます。「商品ページだけ背景の色を変更したい」というスタイルの変更もCSSに3行追加するだけです。HTML/CSSで余計な記述が減ってスッキリする同様に「商品ページだけ背景の色を変更したい」時、テンプレートファイルを追加せず、body_class関数を使用した場合は純粋にファイルの数が1つ減ります。条件分岐する場合よりも記述量が減ります。CSSを駆使してスタイルを充てる時よりも記述量が減ります。余計なコードが減るということはメンテナンス性が上がるということなので、スッキリとした状態を保つのに良い方法だと思います。まとめ今回は固定ページのスラッグをclassに付与する方法を解説しました。実際に行う工数としては少なくて簡単ですね。動的に変わるbody_class関数は記述量が少なく、とても便利なので積極的に利用していきたいところです。応用した実装も簡単にできるので、今回をきっかけに意味を深く知ってWordPressへの理解をより深めていきましょう。他にもこんな記事があります。今回は、WordPressのショートコードを自作する方法を紹介します。ショートコードにはいくつか使い...【画像軽量化】WordPressで画像を軽くする方法やプラグインの...サイトの表示速度が遅くなる原因のほとんどが画像です。株式会社RETVALでHTML/CSS、WordPressのコーディングを担当。