“プレミアムWordPressコース(無料!)無料ライブワークショップ経験豊富なプロフェッショナルから、実証済みのメールマーケティングハックを直接学べます。リアルタイムで質問し、回答を得ることができます。101トレーニングWordPressでサイトやブログを構築・管理するために必要な知識をすべて学ぶことができます。良いブロガーになる方法ブログの始め方、新しいトピックのアイデアの見つけ方、より速く書くためのブログ投稿の構成など、さらに詳しく。電子メールWordPressテーマデザイナーを目指している方で、テーマにCSSを使用する新しい方法をお探しですか?幸いなことに、WordPressではテーマで利用できるCSSクラスが自動的に追加されます。これらのCSSクラスのいくつかは、WordPressサイトの各ページの<body>セクションに自動的に追加されます。この投稿では、WordPressのボディクラスについて、テーマデザイナーを目指す人がプロジェクトで活用するためのヒントやコツを交えて解説する。この投稿で学ぶことの概要を簡単に説明しよう。Classとは?bodyクラス(body_class)はWordPressの機能で、body要素にCSSクラスを割り当てることができます。bodyタグは通常、テーマのheader.phpファイルで始まり、すべてのページで読み込まれます。これにより、ユーザーがどのページを表示しているかを動的に把握し、それに応じてCSSクラスを追加することができます。通常、ほとんどのスターター・テーマやフレームワークには、すでにHTMLのbodyタグ内にbodyクラス関数が含まれている。WordPress表示されるページの種類に応じて、WordPressは自動的に適切なクラスを追加します。アーカイブページにいる場合、WordPressは自動的にbody要素にarchiveクラスを追加します。これは、ほぼすべてのページに対して行われます。WordPressの舞台裏をご覧ください(インフォグラフィック)。WordPressご覧のように、このような強力なリソースを手元に置くことで、CSSだけでWordPressのページを完全にカスタマイズすることができる。特定の投稿者プロフィールページや日付ベースのアーカイブなどをカスタマイズできる。いうことで、次にボディ・クラスをいつどのように使うのかを見てみよう。class関数が含まれていることを確認する必要があります。含まれていれば、上記のWordPressが生成したCSSクラスがすべて自動的に含まれます。その後、カスタムCSSクラスをbody要素に追加することができます。これらのクラスは必要なときにいつでも追加できます。特定のカテゴリーに分類された特定の投稿者の投稿の外観を変更したい場合。カスタマイザー・クラスの追加方法WordPressにはフィルターがあり、必要に応じてカスタマイザーを追加することができます。具体的な使用例を紹介する前に、フィルターを使ってボディクラスを追加する方法を説明します。ボディ・クラスはテーマ固有のものなので、以下のコードをテーマのfunctions.phpファイルまたはコード・スニペット・プラグインに追加する必要があります。WordPress上記のコードは、あなたのサイトのすべてのページのbodyタグにクラス「wpb-class」を追加します。このコードは、市場で最高のコードスニペットプラグインであるWPCodeを使って追加することをお勧めします。テーマのfunctions.phpファイルを編集することなく、WordPressのカスタムコードを安全かつ簡単に追加することができます。無料のWPCodeプラグインをインストールし、有効化する必要があります。手順が必要な場合は、WordPressプラグインのインストール方法をご覧ください。Snippetに移動します。snippet’ボタンをクリックします。次に、スニペットのタイトルを追加し、上記のコードを「コード・プレビュー」ボックスに貼り付けます。Snippet」を選択する必要があります。Snippet’ボタンをクリックするだけです。これで、テーマのスタイルシートでこのCSSクラスを直接利用することができる。自分のサイトで作業している場合は、WordPressテーマカスタマイザーのカスタムCSS機能を使ってCSSを追加することもできます。詳しくは、WordPressサイトにカスタムCSSを簡単に追加する方法をご覧ください。WordPressプラグインを使ったボディクラスの追加もしあなたがクライアントのプロジェクトに携わっておらず、コードを書きたくないのであれば、この方法の方が簡単だろう。Classプラグインをインストールして有効化します。詳しくはWordPressプラグインのインストール方法をご覧ください。Classページにアクセスする必要があります。ここからプラグインの設定を行うことができます。ボディクラス機能を有効化したい投稿タイプとアクセスできるユーザーを選択できます。変更を保存」ボタンをクリックして、設定を保存することを忘れないでください。次に、WordPressサイトの投稿やページを編集します。投稿の編集画面で、右の列に「投稿カラム」と書かれた新しいメタ情報があります。カスタムCSSクラスを追加するにはクリックしてください。スペース区切りで複数のクラスを追加できます。完了したら、投稿を保存するか公開します。プラグインはあなたのカスタムCSSクラスを特定の投稿やページのボディクラスに追加します。ボディ・クラスで条件分岐タグを使うbody_class関数の本当の威力は、条件分岐タグと一緒に使ったときに発揮される。これらの条件分岐タグは、WordPressにおいて、ある条件が真か偽かをチェックするデータ型です。is_homeという条件分岐タグは、現在表示されているページがホームページかどうかをチェックします。クラスを追加する前に、ある条件が真か偽かをチェックすることができます。条件分岐タグを使ってボディ・クラスにカスタム・クラスを追加する例を見てみよう。投稿者権限グループでログイン中のユーザーに対して、ホームページを異なるスタイルにしたいとします。.logged-inクラスを生成しますが、ユーザー権限を検出したり、クラスとして追加したりはしません。これは条件分岐タグとカスタム・コードを使って、ボディ・クラスにカスタム・クラスを動的に追加するシナリオです。これを実現するには、テーマのfunctions.phpファイルまたはコードスニペットプラグインに以下のコードを追加します。WordPressでは、別の便利な例を見てみよう。今回は、表示されているページがWordPressの下書きのプレビューかどうかをチェックします。そのために、条件分岐タグis_previewを使い、カスタムCSSクラスを追加する。WordPressでは、追加したカスタムCSSクラスを利用するために、テーマのスタイルシートに以下のCSSを追加します。WordPressデモサイトではこのように表示されました:WordPressで使用できる条件分岐タグの全リストをチェックするとよいでしょう。これを読めば、あなたのコードですぐに使えるタグの便利なセットがわかります。条件分岐タグ以外にも、WordPressのデータベースから情報を取得したり、bodyクラスにカスタムのCSSクラスを作成したりするテクニックを使うことができる。個別投稿ページのbodyクラスにカテゴリー名を追加する例えば、個別投稿の外観をカテゴリーに基づいてカスタマイズしたいとします。これを実現するにはbodyクラスを使いますまず、個別投稿ページにカテゴリー名をCSSクラスとして追加する必要があります。WordPress上記のコードは、個別投稿ページのbodyクラスにカテゴリークラスを追加します。その後、CSSクラスを使って好きなようにスタイルを設定することができます。WordPressここでも、WPCodeのようなコード・スニペット・プラグインを使ってWordPressにこのコードを追加することをお勧めする。すれば、サイトが壊れる心配はありません。無料のWPCodeプラグインをインストールし、有効化することから始めます。WordPressプラグインのインストール方法はこちらをご覧ください。Snippetに進みます。「カスタムコードを追加する(新規スニペット)」設定の下にある「スニペットを使用する」ボタンをクリックします。次に、上記のコードを「コードプレビュー」ボックスに貼り付け、ドロップダウンメニューからコードタイプとして「PHPスニペット」を選択します。Snippet’ボタンをクリックする。ブラウザー検出とブラウザー固有のボディクラステーマが特定のブラウザー用に追加のCSSを必要とする問題に遭遇することがあります。WordPressは読み込み時に自動的にブラウザーを検出し、その情報をグローバル変数として一時的に保存します。WordPressが特定のブラウザを検出したかどうかを確認し、カスタムCSSクラスとして追加するだけです。WordPress小さなパディングやマージンの問題であれば、これはかなり簡単な修正方法だ。body_class関数を使うことで、長いコードを書く手間を省くことができる場面は、まだまだたくさんあります。Genesisのようなテーマフレームワークを使っている場合、子テーマにカスタムクラスを追加するために使うことができます。body_class関数を使って、全幅ページレイアウト、サイドバーコンテンツ、ヘッダー、フッターなどのCSSクラスを追加することができます。WordPressテーマデザインのエキスパートガイドもっとチュートリアルをお探しですか?WordPressのテーマデザインに関する他のガイドをご覧ください:WordPressテーマにパララックス効果を追加する方法WordPressでフッターを編集する方法(4つの方法)WordPressブログに雪の結晶を追加する方法カスタマイザーを失うことなくWordPressテーマを更新する方法WordPressでサイトデザインのフィードバックを得る方法この投稿が、テーマでWordPressのbodyクラスを使用する方法を学ぶのにお役に立てば幸いです。WordPressの各投稿を異なるスタイルにする方法についての投稿や、WordPressページビルダープラグインの比較もご覧ください。私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。3$編集プロセスをご覧ください。コメントをキャンセルコメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。SEOAIOSEOプラグインでサイトのSEOランキングを向上させます。すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!今すぐダウンロードを手伝ってほしい。WordPressウィジェットコントロールプラグインが15%OFFになります。ConvertKitクーポンConvertKitのパワフルなメールマーケティングソフトウェアを14日間無料でお試しいただけます。LLC.無断複写・転載を禁じます。WPBeginner®は登録商標です。Foundation.を手伝ってほしい。