MEDIAWordPressアドセンスSearchConsoleアナリティクスレンタルサーバードメインWordPressのbody_classでクラス名を追加する3パターンを理解する2019.11.11WordPress使い方WordPress関数HOMEWordPressWordPress使い方WordPressのbody_classでクラス名を追加する3パターンを理解するWordPressのバージョン2.8から追加されたbody_classというテンプレートタグはheader.phpにあるbody要素にいろいろなクラス名を自動で付与してくれます。body要素にクラス名を付与するときには任意のクラス名を追加したり、追加した任意のクラス名を複数追加することもできるので、スタイルするCSSを振り分けたいなどの場合に便利です。上記の3つのパターンを理解することで、どのようにCSSでスタイルを振り分けられるかまでを理解したいと思います。投稿ページのみbody_classを追加する基本的な使い方WordPressのbody_classをbodyに追加する基本的な使い方は、header.phpにあるbody開始タグに「body_class()」をPHPコードにして挿し込む形で使います。?>>body開始タグの中のbody_class()が「class=”クラス名”」になる部分です。class=”クラス名”>とclass属性を指定するのと、ほぼ同じ結果になります。HTMLでbodyにクラス属性を「original」と指定した場合body_classで出力した場合ほぼ同じ結果というのは上記画像で理解できるかと思いますが、body_classの場合は自動で何種類かのclass名が追加されています。これはbody_classが自動で出力するクラス名です。この出力するクラス名はWordPressのページによって追加されるクラス名が違います。ページがフロントページで最新の投稿で設定してるならhomeやblogを追加、投稿ページならsingleやsinglepost、single-id(id)などのクラス名が追加されます。body_classで自動追加されるページごとのクラス名の追加により、CSSを割り振りたい場合に使いやすくなるのです。ページによって追加されるクラスはWordPressのcodexで確認ができます。?>>でパラメータを使わずにclass名が出力されるパターンだけを説明しました。次はbody_class()のパラメータを使用してbody要素に追加するパターンを説明します。?>>パラメータはbody_class()のカッコの中で指定します。パラメータはbody要素にbody_classが自動で追加するクラス名と一緒に、任意のクラス名も付与したい場合に文字列または配列を使用して指定ができます。body_classで任意のクラス名を指定する使い方は大きく分けて3つのパターンの使い方ができます。bodyに任意のクラスを追加まずはWordPressのbody_classを使用して任意のクラスを追加したい場合の基本的な使い方を土台として理解してみてください。?>>任意のクラス名を追加したい場合は、上記のコードのようにbody_class()のパラメータに任意で出力したいクラス名を文字列で指定します。任意のクラス名を指定したHTMLの出力結果は以下のbody要素になります。パラメータで指定した任意クラスの「class-name」以外に、body_classが自動で付与するクラス名も含まれます。body_classで任意のクラス名を追加したのが一つなので、使い方の基本としては理解しやすかと思います。これをパターン1としbody_classを理解する土台にしてください。body_classでbodyに複数のクラスを追加する場合です。WordPressのbody_classが自動で付与する複数のクラスとは別に、任意のクラスを追加する場合です。?>>任意のクラスを複数指定する時はbody_classのパラメータでクラス名を半角スペースで区切って指定します。するとbody_classを記述したbody要素の出力は、body_classが自動付与したクラス名と共に複数の任意classも追加できます。これがパターン2でした。body_classをフィルターで追加WordPressでbody_classを追加するパターン3です。body_classにフックする関数を作成して、body要素に任意のクラス名を追加します。$classes;}上記のコードをWordPressのfunctions.phpに記述します。記述してトップページのbody要素に出力されるのは以下のような結果になります。フィルターでbody_classを使用しているというだけで出力結果は同じです。フィルターでbody_classを追加する場合はadd_filterを使用しています。);使用するときは、$tagと$function_to_addは必須です。フックの名前を指定します。フックしたタイミングで実行したい関数を指定します。今回の場合はmy_classという関数をbody_classに紐付けて、my_classの内容にはbody_classで出力する任意クラス名をセットします。これによりbody_classが実行されるタイミングで自分が用意した関数が実行できます。body_classの実行されるタイミングでパラメータの任意クラス名を出力するという感じです。Advertisementフィルターを使用したbody_classの追加で「複数の任意クラスを追加」することもできます。$classes;}body_class()のパラメータに複数の任意クラス指定したときと同じように、任意クラス名を半角スペースで区切って関数の内容としてセットします。追加したbody_classでページごとにCSSを指定するWordPressのbody_classで追加したクラスを使用してCSSをページごとに振り分けて指定し適用してみようと思います。テーマによって優先度の高いスタイルが定義されている場合もあるので、使用中のテーマごとに正しくCSSセレクタを記述する必要があります。Advertisementページといっても種類が多いので、今回は「トップページのみ」と「投稿ページのみ」を例としてbody_classの理解が深まるようになればと思います。トップページのみたとえば、body_classで出力したclassでトップページのみのヘッダー背景色を他のページとは違うカラーにするという単純なスタイル変更です。body_classはWordPressのホームの場合は「home」というクラス名を出力してくれます。このhomeというクラス名を指定することで、ホームだけに適用したいCSSを個別に記述することができるのです。トップページのヘッダーをイエロートップページ以外のヘッダーには適用されないホームだけ適用できるので、他のページのカテゴリーやタグ、投稿ページなどのヘッダーは全体で適用しているCSSの記述が適用されています。投稿ページのみ次はbody_classで取得した投稿ページのみのclassを使用して、特定の投稿ページのみに適用するCSSを記述して個別にスタイルを変更します。投稿ページのidが1747のページにはboy_classで「post-1747」がbodyのclass属性で追加されています。このクラス名を使用してpost-1747の投稿ページのみに画像をCSSで指定し表示します。投稿ページのidが1747の投稿のみ画像適用1747の投稿以外は画像が適用されない投稿ページの特定ページのみに限定しているので、それ以外の投稿ページにはCSSが適用されず記述したCSSは振り分けられます。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。2019.08.27WordPressでホームページを設定する場合は、一度作成してしまうだけのホームページとは違い、「動的なホームページ」が有効になります。2019.02.13WordPressを使用してると.htaccessに登場してくるmod_rewriteがあります。2019.11.19あえてwordpressテーマのインストールを失敗してしまう方法を試してみました。WordPress.。