特定のページ/投稿にCSSを適用する方法

公開: 2022-01-04

WordPressの特定のページや投稿にCSSを適用できることをご存知ですか？ はい、WordPressのCSSに適した性質により、これは可能です。 また、このガイドでは、CSSを特定のページまたは投稿に追加するためのさまざまな方法を紹介します。

すべてのWordPressテーマは通常、コンテンツの種類ごとに異なるスタイルを適用します。 投稿、ページ、分類法、プロファイル、およびその他のコンテンツには、それぞれに異なるスタイルシートがあります。 プラグインやWordPressの他のすべての側面についても同じことが言えます。

ただし、WordPressの柔軟性により、特定のページや投稿の種類に異なるスタイルシートを使用することもできます。 しかし、プロセスを実行する前に、CSSを追加する必要がある理由を見てみましょう。

特定のページまたは投稿にCSSを適用する理由

特定のページや投稿にCSSを追加すると、Webサイトを構築したり、Webサイトを設計したりする場合に非常に便利です。 CSSは通常、Webサイトの外観をカスタマイズするために使用されます。 したがって、Webサイト全体でCSSを使用すると、Webサイトの訪問者に希望どおりにWebページを表示するのに非常に役立ちます。

あなたのウェブサイトの他のページや投稿と比較してユニークなデザインを必要とする特定のページや投稿タイプがあるかもしれません。 この場合、最善のオプションの1つは、特定のページまたは投稿にCSSを適用することです。 これらのページまたは投稿は通常、Webサイトのメニューに追加されます。 ただし、ショップページ、製品ページ、さらにはホームページなど、他の固有のページや投稿を含めることもできます。

たとえば、QuadLayersでさえ、PortfolioやAboutな​​どの特定のページでCSSを使用して、他のページや投稿タイプとは異なるものにしています。 さて、これ以上面倒なことはせずに、プロセスを進めましょう。

特定のページまたは投稿にCSSを適用する方法

特定のページまたは投稿にCSSを適用するために追加できるさまざまな方法があります。 しかし、ここに3つの最も一般的なものがあります：

  1. HTMLIDまたはクラスを使用する
  2. PHP関数の追加
  3. 特定のページまたは投稿にCSSファイルを含める

これらのアプローチはすべて、CSSを複数の目的に適用するために使用できます。 この記事では、適切なステップバイステップのチュートリアルを使用して、これらすべてのアプローチについて説明します。

1. HTMLIDまたはクラスを使用する

これは、特定のページまたは投稿にCSSを適用する場合に、最も一般的で広く受け入れられているアプローチの1つです。 私たちがする必要があるのは、ページまたは投稿が持つ一意の識別子を取得することだけです。 次に、このHTMLクラスまたはIDを使用すると、すべてのCSSスクリプトを目的のページまたは投稿にターゲティングできます。

1.1。 ページのHTMLクラスまたはIDを検索します

まず、CSSスクリプトに使用するIDまたはクラスを見つける必要があります。 これは、ブラウザ検査ツールを使用して簡単に見つけることができます。

CSSを適用するページを開き、編集する要素を右クリックするだけです。 次に、[検査]をクリックします。

ここで、bodyHTMLタグを確認します。 これは、使用しているテーマによって異なります。

以下のすべての例では、TwentyTwentyテーマを使用しました。 したがって、これは、TwentyTwentyテーマを使用してWebサイトのホームページを検査したときに表示されるものです。

上のスクリーンショットから、ホームページが持つ一意の識別子は「 home 」クラスです。 したがって、一部のCSSルールをホームページにのみ適用する場合は、セレクターでこのクラスを使用する必要があります。

たとえば、ホームページのロゴにのみ何らかのスタイルを適用したいとします。 次に、ホームクラスの他に、ロゴ画像セレクターも必要です。 繰り返しますが、これはブラウザ検査ツールから取得できます。


この場合、 「カスタムロゴ」クラスを使用して、ロゴにスタイルを適用します。 それでは、前のステップで取得したクラスと一緒にそれらをまとめましょう。 最後に、次のCSSセレクターを使用して、ホームページにのみスクリプトを適用できます。

 .home .custom-logo{ /*your CSS here */}

注：中間のすべてのHTMLタグをたどって、セレクターに含める必要はありません。 スタイルを設定する要素が一意のページセレクターから遠く離れている場合でも、それらをすべてスキップできます。

もちろん、より具体的なセレクターが必要な場合は、完全なCSSパスセレクターを使用できます。 しかし、これは非常に圧倒的であり、ほとんどの場合必要ありません。

例として、これは以前に見たのと同じロゴ要素をスタイリングするための非常に特殊なセレクターです。

 html body.home div#page.site header#masthead div.site-branding div.site-logo span.custom-logo-link img.custom-logo{ /*your CSS here */}

1.2。 投稿のHTMLクラスまたはIDを検索します

ページと同様に、投稿ごとに一意のHTMLクラスが必要です。 繰り返しになりますが、ブラウザ開発者ツールを使用して、CSSを適用する投稿の要素を調べてください。 次に、 postid属性と同様に一意の識別子を確認できます。

Twenty Twentyをテーマにした次の投稿の場合、この投稿を識別するクラスはpostid -557です。

post id inspectは、特定のページの投稿にcssを適用します

同様に、Webサイトの他のページでも同じことができます。 ページを識別する一意のクラスを使用します。 次のスクリーンショットを見ると、ページを識別するクラスがpage-id-357であることがわかります。

ページID検査特定のページ投稿にCSSを適用

最後に、カスタムロゴの例のように、Webサイトのニーズに合った独自のCSSセレクターを作成します。 次に、CSSを特定のページに適用するか、 [外観]> [カスタマイズ]> [追加のCSS]に追加して投稿できます。 さらにヘルプが必要な場合は、CSSをWordPressに適用する方法、またはブラウザー開発者ツールを使用してCSSを適用する方法に関するガイドを参照してください。

2.PHP関数を追加する

前の方法は、カスタムCSSを特定の投稿またはページに適用するのに適しています。 必要になる可能性のあるほとんどのカスタマイズにはこれで十分です。 ただし、場合によっては、次のような制限があります。

  • テーマには、スタイルを設定する必要のあるコンテンツに固有のHTMLクラスまたはIDがありません。
  • CSSルールのリストがたくさんあり、それらを別々のファイルに保存する必要があります。
  • 現在のページ以外に他の条件を適用したい。

特定のページや投稿にCSSを適用するときに同様の問題が発生する場合は、PHP関数を使用することをお勧めします。

ただし、開始する前に、WordPress Webサイトをバックアップするか、このアプローチの子テーマを作成してください。 私たちはあなたのウェブサイト上のいくつかの繊細なファイルを編集します。 したがって、不要な変更を行うと、Webサイトでさらに問題が発生する可能性があります。

ヘルプが必要な場合は、WordPressに最適な子テーマプラグインの1つを使用して、子テーマを作成することもできます。

2.1。 ページ/投稿IDを検索する

最初のステップは、スタイルを適用するページまたは投稿のIDを確認することです。 idの値が前の手順の値と同じであることに気付くかもしれません。 ただし、これは以前に使用したものと同じHTMLIDではありません。

ここで参照しているIDは、投稿とページを識別するPHP変数です。 一方、前のアプローチのidはHTMLクラスを識別します。

ありがたいことに、あなたのウェブサイトでページと投稿IDを見つけるのはとても簡単です。 エディターを開くと、バックエンド管理ダッシュボードにページと投稿のIDが表示されます。 投稿またはページIDは、ブラウザのURLに記載されています。

ページIDURLは特定のページ投稿にCSSを適用します

ページまたは投稿のIDを取得する別の方法は、子テーマのfunctions.phpファイルで次のスクリプトを使用することです。 [外観]> [テーマエディター]に移動して、 functions.phpファイルを開きます。

次に、次のスニペットをエディターに貼り付けて、ファイルを更新します。 フロントエンドにページIDを出力します。

 add_action（ 'wp_head'、function（）{
    $ page_id = get_queried_object_id（）;
    エコー$ page_id;
}）;

ページIDフロントエンド特定のページ/投稿にCSSを適用する方法

CSSを適用する必要のある投稿またはページのPHP識別子がわかったら、CSSを頭に印刷するだけです。 以前に使用したものと同じフック、つまりwp_head()を使用できます。

次のスニペットをfunctions.phpファイルにもう一度貼り付けてください。

 add_action（ 'wp_head'、 'my_head_css'）;
関数my_head_css（）{
    $ page_id = get_queried_object_id（）;
    if（$ page_id == 97）{
        echo "<style> / *ここにCSSを* / </ style>";
    }
}

「ここのCSS」セクションにCSSを追加し、ファイルを更新してください。

3.特定のページまたは投稿にCSSファイルを含める

前の方法は、特定の投稿またはページに必要な基本的なカスタマイズのためにCSSの小さな部分を追加するのに適しています。 ただし、より大きなCSSスクリプトの場合は、グッドプラクティスに従い、別のCSSファイルをアップロードする必要があります。 すべてのカスタムCSSを収集する必要があります。

3.1。 コードエディタを使用してCSSファイルを作成する

まず、コードエディタを使用して、必要なすべてのCSSスクリプトを含む分離されたCSSファイルを作成する必要があります。 Visual Studio Code、Sublime text、またはCSSファイルをサポートするその他のエディターを使用できます。

次に、CSS拡張子を使用して新しいファイルを作成し、ここにコードを貼り付けます。 このチュートリアルでは、ファイルにmy-style.cssという名前を付けました。

3.2。 CSSファイルを子テーマフォルダーにアップロードする

ここで、作成したCSSファイルを子テーマディレクトリにアップロードする必要があります。 このために、FileZillaのようなFTPクライアントを使用してファイルをアップロードできます。 メインの子テーマディレクトリ自体にアップロードすることもできます。

3.2。 カスタムCSSファイルをキューに入れる

これで、functions.phpファイルにコードスニペットを追加することで、カスタムCSSファイルをWordPressWebサイトにエンキューできます。

次のスクリプトでは、 wp_enqueue_script()フックを使用します。これは、CSSファイルをWPWebサイトに適用する正しい方法です。 関数内では、条件が満たされた場合にのみ、CSSファイル（ my-styles.css ）を登録してキューに入れます。 これは前の例と同じ使用法です。

次に、 get_queried_object_id()関数は、現在のページまたは投稿のIDを取得します。 次のスクリプトをfunctions.phpファイルにもう一度追加して更新するだけです。

 add_action（ 'wp_enqueue_scripts'、 'my_theme_styles'）;

関数my_theme_styles（）{
    if（get_queried_object_id（）== 97）{
        wp_register_style（ 'my-styles'、get_stylesheet_directory_uri（）。 '/ my-styles.css'）;
        wp_enqueue_style（ 'my-styles'、get_stylesheet_directory_uri（）。 '/ my-styles.css'）;
    }
}

注：上記のサンプルスクリプトでは、前の例で使用したものと同じID参照である97を参照しています。

CSSファイルの追加についてさらに詳しく知りたい場合は、CSSをWordPressに適用するための詳細なガイドをご覧ください。

結論

これらはすべて、CSSを特定のページまたは投稿に適用できるさまざまな方法です。 それはあなたのウェブサイトの特定のページや投稿のためのユニークなデザインを作成するのに大いに役立ちます。 要約すると、CSSを特定のページや投稿に追加する最も一般的な方法は3つあります。

  • HTMLIDまたはクラスを使用する
  • PHP関数の追加
  • 特定のページまたは投稿にCSSファイルを含める

それらの中で最も簡単なアプローチは、CSSセレクターにHTMLIDまたはクラスを使用することです。 ただし、テーマに制限がある場合、次善の策は、CSSを適用するためのPHP関数を追加することです。 最後に、特定のページまたは投稿に大きなCSSスクリプトを適用する必要がある場合は、CSSファイルにそれらを含めることが最適なアプローチです。

Webサイトでより多くのCSSを使用したい場合は、CSSを使用してDiviメニューをカスタマイズしたり、WooCommerceショップをプログラムで編集したりするためのチュートリアルもあります。 同様に、ガイドを使用してページや投稿をさらにカスタマイズし、プログラムで投稿やページを作成したり、投稿をページに変換したり、カスタム投稿タイプを作成したり、WordPressのページに投稿を追加したりすることもできます。

では、CSSを特定のページや投稿に今すぐ適用できますか？ このチュートリアルは役に立ちましたか？ コメントで教えてください。 それまでの間、ここにあなたが訪問したいと思うかもしれないいくつかのより多くの記事があります：

  • WordPressで投稿タイプを変換/変更する方法
  • プログラムでWordPressカスタム投稿タイプを作成する
  • WooCommerceカートページをカスタマイズする方法