私たちは長年多くのWordPressサイトに携わってきましたが、常に利用しているカスタマイズのトリックの1つは、ページスラッグをbodyクラスに追加することです。非常に簡単なことですが、デザインの柔軟性に関しては大きな違いを生みます。
これが意味するところです：おそらく経験したことがあるでしょう—サイトの他の部分とは異なるスタイルを1つのページだけにしたい場合。ボディクラスにページスラッグがないと、複雑なCSSセレクターと格闘したり、個別のスタイルシートを作成したりすることになります。
WordPressテーマにページスラッグを追加すると、複雑な操作なしで必要なカスタマイズをすべて行うことができます。サイトの他の部分に影響を与えることなく、個々のページの配色、フォント、その他の項目を簡単に変更できます。
この記事では、WordPressテーマのbodyクラスにページスラッグを追加する方法を紹介します。この方法は、シンプルなビジネスサイトから複雑なeコマースストアまで、あらゆるものに使用しています。
テーマのbodyクラスにページスラッグを追加する理由は何ですか？
サイトの特定のページをカスタマイズしたい場合、またはページを正しく識別したい場合は、テーマのボディクラスにページスラッグを追加すると非常に便利です。
デフォルトでは、WordPressサイトには投稿IDクラスのみが表示され、正しいページを認識するのが難しい場合があります。ページスラッグはブログ投稿のURLを表示するため、ページのカスタマイズが容易になります。
それに加えて、ページスラッグのボディクラスを使用して、ページにさまざまなカスタマイズを実行できます。たとえば、特定の投稿のフォントや色を変更したり、特定のランディングページで行動喚起ボタンを強調したりできます。
さて、WordPressテーマのボディクラスにページスラッグを追加する方法を見ていきましょう。
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ダッシュボードへのログインがブロックされる可能性があるためです。
テーマのボディクラスにコードを追加するはるかに簡単な方法は、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ダッシュボードから コードスニペット » スニペットの追加 ページに移動します。
そこから、「カスタムコードを追加（新規スニペット）」オプションに移動し、「+カスタムスニペットを追加」ボタンをクリックします。
次に、画面に表示されるオプションのリストからコードタイプを選択する必要があります。このチュートリアルでは、「PHPスニペット」を選択してください。
コードスニペットのタイトルを入力してください。これは参照用であり、コードを識別するのに役立つものであれば何でも構いません。
その後、上記のコードを「コードプレビュー」ボックスにコピー＆ペーストするだけです。
次に、「挿入」セクションまでスクロールします。ここでは、「自動挿入」メソッドを選択して、管理画面、フロントエンドなど、WordPressの特定の場所にコードを自動的に挿入して実行できます。
不明な場合は、デフォルトの「すべてで実行」オプションを選択してください。
または、「ショートコード」メソッドを選択することもできます。このメソッドでは、スニペットは自動的に挿入されません。サイトのどこにでも手動で挿入できるショートコードを取得します。
準備ができたら、「Inactive」から「Active」にスイッチを切り替え、「Save Snippet」ボタンを右上隅でクリックします。
詳細については、WordPressにカスタムコードを追加する方法に関するガイドを参照してください。
この記事がWordPressテーマのボディクラスにページスラッグを追加する方法を学ぶのに役立ったことを願っています。また、WordPressのボディクラスや最適なデザインソフトウェアの選び方に関するガイドも参照してください。
この記事が気に入った場合は、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 にのみ適用するための条件分岐が必要です。
クリス
ボディクラスに投稿IDを入れるにはどうすればよいですか？
アーロン・マクグロウ
素晴らしい！まさに必要としていたものです。本当にありがとうございます！
ダニエル
公開していただきありがとうございます。シンプルなコードですが、ID ベースのクラスではなく、より人間が読める CSS ファイルを作成できます。ありがとうございます。
オースティン
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.
ケビン
これについて、本当にありがとうございます。最初はCSSスタイルシート内のコードの位置のためにいくつかの問題がありましたが、一番下に移動したらうまく機能しました。他の人も言っているように、これがWPの標準であればよかったのにと思いますし、もっと早くこれを知っていればよかったと思います。
トム・マクギニス
このコードはかなりうまく機能します。しかし、検索結果のボディクラスに、リストの最初の項目のスラッグが含まれてしまうことがわかりました。場合によっては、最初の項目のスタイルが検索結果ページのスタイルを上書きしてしまうことがありました。奇妙ですよね！
if ステートメントの中に !is_search() を入れると、この問題が解消されることがわかりました。他の人がこの問題に遭遇した場合は、修正は簡単です。
&&を使用しましたか？
!is_search() を入力したとき – コードはどのように記述しましたか？
ムルハフ・スースリ
まさに探していたものです。コードをfunction.phpに貼り付けましたが、残念ながらbodyにクラスが追加されません！何かアイデアはありますか？
アサフ
全く同じ問題があります。
アヒール・ヘマント
こんにちは、うまくいきました。確認するためにあなたのリンクを送ってください。
ありがとうございます
WPBeginnerスタッフ
WordPressにバンドルされています。ただし、サイトのフロントエンドはテーマによって処理されるため、それを使用するかどうかはテーマ作成者が決定することになります。
MJ
素晴らしい！この機能が WordPress にバンドルされていればよかったのに。
Miulette
本当にありがとうございます。まさに必要としていたものです。
スアット
CSSの編集に最適です。
ありがとうございます
ウィーラユット・テジャ
You save my work time.
Thanks Syed
マイク
ありがとうございます。これを使って、スラッグと祖先スラッグをボディクラスに追加する簡単なプラグインを作成しました。興味のある方はこちらから入手できます：https://github.com/bigmikestudios/bms-bodyclass-slug
トッド・M.
これはすべてのWordPress開発者にとって素晴らしいスニペットです。私のテーマ設定では標準で含まれています。
ガウラヴ・ラメシュ
これをありがとうございます。このようなちょっとしたヒントやコツは、私のような初心者にとって非常に役立ちます。
ランディ・カロソ
これ、ありがとうございます。ページIDで自分でハッキングしてしまい、その結果に苦しんでいました。