私たちは長年多くのWordPressサイトに携わってきましたが、常に利用しているカスタマイズのトリックの1つは、ページスラッグをbodyクラスに追加することです。非常に簡単なことですが、デザインの柔軟性に関しては大きな違いを生みます。
これが意味するところです：おそらく経験したことがあるでしょう—サイトの他の部分とは異なるスタイルを1つのページだけにしたい場合。ボディクラスにページスラッグがないと、複雑なCSSセレクターと格闘したり、個別のスタイルシートを作成したりすることになります。
WordPressテーマにページスラッグを追加すると、複雑な操作なしで必要なカスタマイズをすべて行うことができます。サイトの他の部分に影響を与えることなく、個々のページの配色、フォント、その他の項目を簡単に変更できます。
この記事では、WordPressテーマのbodyクラスにページスラッグを追加する方法を紹介します。この方法は、シンプルなビジネスサイトから複雑なeコマースストアまで、あらゆるものに使用しています。
テーマのbodyクラスにページスラッグを追加する理由は何ですか？
サイトの特定のページをカスタマイズしたい場合、またはページを正しく識別したい場合は、テーマのボディクラスにページスラッグを追加すると非常に便利です。
デフォルトでは、WordPressサイトは投稿IDクラスのみを表示するため、正しいページを認識するのが難しい場合があります。ページスラッグはブログ投稿のURLを表示するため、ページのカスタマイズが容易になります。
これ以外にも、ページスラッグのボディクラスを使用して、ページにさまざまなカスタマイズを適用できます。たとえば、特定の投稿のフォントや色を変更したり、特定のランディングページでコールトゥアクションボタンを強調したりできます。
それでは、WordPressテーマのbodyクラスにページスラッグを追加する方法を見てみましょう。
WordPressテーマにページスラッグを追加する
WordPress テーマのボディクラスにページの URL を追加するのに役立つように、テーマの functions.php ファイルに次のコードを入力できます。
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );
WordPressテーマエディター（コードエディター）に移動することで、テーマのfunctions.phpファイルにアクセスできます。ただし、テーマファイルを直接編集するのは非常に危険です。
これは、コードの追加中に間違いがあるとサイトが壊れてWordPressダッシュボードにログインできなくなる可能性があるためです。
コードをテーマのbodyクラスに追加する、はるかに簡単な方法は、WPCodeのようなWordPressプラグインを使用することです。私たちは複数のサイトで使用しています。詳細については、WPCodeの完全なレビューをご覧ください。
WPCodeを使用すると、数分で簡単にコードをサイトに追加でき、エラーも発生しません。さらに、将来的にテーマを更新または変更した場合でも、コードが削除されないことが保証されます。
また、専門家が作成したコードスニペットのライブラリが付属しており、ワンクリックでインストールできます。そのため、高度な WordPress カスタマイズを行うためにコーディングスキルは必要ありません。
実際、bodyクラスにページスラッグを追加することは、WPCodeライブラリの既製のスニペットとして利用できます。これが最も簡単な方法です。
まず、無料のWPCodeプラグインをサイトにインストールして有効化する必要があります。手順については、WordPressプラグインのインストール方法に関するガイドを参照してください。
プラグインがアクティブ化されると、「Code Snippets」という新しいメニュー項目がWordPressの管理バーに追加されます。それをクリックすると、すべてのコードスニペットを管理するページに移動します。
最初 のコードスニペットを追加するには、「新規追加」ボタンをクリックします。
これにより、「スニペットの追加」ページが表示され、あらかじめ用意されたライブラリからコードスニペットを選択できます。
「Add the Page Slug to Body Class」スニペットを検索し、見つけたら「Use snippet」ボタンをクリックします。
これで、WPCode がコードを自動的に追加し、適切な挿入方法を設定します。
スイッチを「非アクティブ」から「アクティブ」に切り替えるだけです。最後に、ページ上部にある「更新」ボタンをクリックしてください。
これで、page-{slug} のような新しい body クラスが出力されるようになります。このクラスを使用して、デフォルトのスタイルをオーバーライドし、特定のページに合わせて要素をカスタマイズできます。
例えば、スラッグが「education」のページでのみ、サイドバーウィジェットのスタイルを設定したいとします。その場合、次のようなCSSを追加できます。
#sidebar .widgets{background: #fff; color: #000;}
.page-education #sidebar .widgets{background: #000; color: #fff;}
詳細については、WordPressにカスタムCSSを追加する方法に関するガイドをご覧ください。WordPressにカスタムCSSを追加する方法。
カスタムコードを手動で追加する
上記のカスタムコードを手動で追加したい場合は、次の手順で行います。
まず、WordPressダッシュボードから コードスニペット » スニペットの追加 ページに移動します。
そこから、「カスタムコードを追加（新規スニペット）」オプションに移動し、「+カスタムスニペットを追加」ボタンをクリックします。
次に、画面に表示されるオプションのリストからコードタイプを選択する必要があります。このチュートリアルでは、「PHPスニペット」を選択してください。
コードスニペットのタイトルを入力してください。これは参照用であり、コードを識別するのに役立つものであれば何でも構いません。
その後、上記のコードを「コードプレビュー」ボックスにコピー＆ペーストするだけです。
次に、「挿入」セクションまでスクロールします。ここで、「自動挿入」メソッドを選択すると、コードを特定の WordPress の場所（管理画面、フロントエンドなど）に自動的に挿入して実行できます。
不明な場合は、デフォルトの「すべてで実行」オプションを選択してください。
または、「ショートコード」メソッドを選択することもできます。このメソッドでは、スニペットは自動的に挿入されません。サイトのどこにでも手動で挿入できるショートコードを取得します。
準備ができたら、「Inactive」から「Active」にスイッチを切り替え、「Save Snippet」ボタンを右上隅でクリックします。
詳細については、WordPressにカスタムコードを追加する方法に関するガイドを参照してください。
この記事が、WordPressテーマのbodyクラスにページスラッグを追加する方法を学ぶのに役立ったことを願っています。また、WordPressのbodyクラスや最適なデザインソフトウェアの選び方に関するガイドも参照してください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
デビッド
ありがとう！シンプルで効果的です。
WPBeginnerサポート
どういたしまして！
管理者
jeba
ありがとう。動作しています。
WPBeginnerサポート
Glad our method worked for you
管理者
ブラッドリー
ありがとうございます！このコードをfunctions.phpにコピー＆ペーストしました。完璧に動作しました。
Alds
$post の代わりに global $wp_query を使用するのはどうですか？ functions.php が実行される前に wp_query を実行した場合、$post が上書きされることに気づきました。
ピート
これは、archive.php などではなく、single.php にのみ適用するための条件分岐が必要です。
Chris
ボディクラスに投稿IDを入れるにはどうすればよいですか？
Aaron McGraw
素晴らしい！まさに必要としていたものです。本当にありがとうございます！
Daneil
公開していただきありがとうございます。シンプルなコードですが、ID ベースのクラスではなく、より人間が読める CSS ファイルを作成できます。ありがとうございます。
Austin
Thank you so much for this! I found out the hard way that page-id can change given different circumstances. This allows me to style individual pages without as much worry.
Kevin
これについて、本当にありがとうございます。最初はCSSスタイルシート内のコードの位置のためにいくつかの問題がありましたが、一番下に移動したらうまく機能しました。他の人も言っているように、これがWPの標準であればよかったのにと思いますし、もっと早くこれを知っていればよかったと思います。
Tom McGinnis
このコードはかなりうまく機能します。しかし、検索結果のボディクラスに、リストの最初の項目のスラッグが含まれてしまうことがわかりました。場合によっては、最初の項目のスタイルが検索結果ページのスタイルを上書きしてしまうことがありました。奇妙ですよね！
if ステートメントの中に !is_search() を入れると、この問題が解消されることがわかりました。他の人がこの問題に遭遇した場合は、修正は簡単です。
&&を使用しましたか？
!is_search() を入力したとき – コードはどのように記述しましたか？
ムルハフ・スースリ
まさに探していたものです。コードをfunction.phpに貼り付けましたが、残念ながらbodyにクラスが追加されません！何かアイデアはありますか？
Asaf
全く同じ問題があります。
Ahir Hemant
こんにちは、うまくいきました。確認するためにあなたのリンクを送ってください。
ありがとうございます
WPBeginnerスタッフ
WordPressにバンドルされています。ただし、サイトのフロントエンドはテーマによって処理されるため、それを使用するかどうかはテーマ作成者が決定することになります。
MJ
素晴らしい！この機能が WordPress にバンドルされていればよかったのに。
Miluette
本当にありがとうございます。まさに必要としていたものです。
Suat
CSSの編集に最適です。
ありがとうございます
Weerayut Teja
You save my work time.
Thanks Syed
マイク
これ、ありがとうございます。これを使って、スラッグと親スラッグをbodyクラスに追加する簡単なプラグインを作成しました。興味のある方はこちらから入手できます: https://github.com/bigmikestudios/bms-bodyclass-slug
Todd M.
これはすべてのWordPress開発者にとって素晴らしいスニペットです。私のテーマ設定では標準で含まれています。
Gaurav Ramesh
これをありがとうございます。このようなちょっとしたヒントやコツは、私のような初心者にとって非常に役立ちます。
ランディ・カロソ
これ、ありがとうございます。ページIDで自分でハッキングしてしまい、その結果に苦しんでいました。