ページごと – ケケンタの独学ITブログ https://kekenta-it-blog.com プログラミングやWeb制作の情報を発信 Tue, 18 Mar 2025 02:08:33 +0000 ja hourly 1 https://wordpress.org/?v=7.0 https://kekenta-it-blog.com/wp-content/uploads/2023/07/cropped-KEKENTA-BLOG-32x32.png ページごと – ケケンタの独学ITブログ https://kekenta-it-blog.com 32 32 【WordPress】特定ページにCSSを読み込む「５つ」の方法【早見リスト付】 https://kekenta-it-blog.com/wp-read-css-per-page/ https://kekenta-it-blog.com/wp-read-css-per-page/#respond Wed, 21 Aug 2024 10:22:25 +0000 https://kekenta-it-blog.com/?p=10409

今回はこのようなお悩みをお持ちの方へ向けて WordPressで特定のページごとにCSSを読み込ませる方法 をご紹介します。 ５の方法をご紹介するので、ご自身に適した方法をお選びいただければと思います。 状況別！おすすめ […]]]>

ケケンタ

WordPressでページごとに別のCSSを読み込ませたいんだけど、どうすればいいのかな……？

今回はこのようなお悩みをお持ちの方へ向けて

WordPressで特定のページごとにCSSを読み込ませる方法

をご紹介します。

５の方法をご紹介するので、ご自身に適した方法をお選びいただければと思います。

あわせて読みたい
【WordPress】特定のページのみ背景色を変える方法 WordPressで特定のページだけ背景色を変えたいんだけどやり方がわからない…… 今回はこのようなお悩みについて解説をしていきます。  この記事で分かること WordPressの…
【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点
【WordPress】JavaScriptはどこに書けばいい？「３つの方法」を解説
無料テーマCocoonからSWELLに乗り換えた７つの理由【WordPress】
PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】

状況別！おすすめの方法一覧

今回はページごとにCSSを読み込ませる方法を複数ご紹介しますが、WordPressの現在のご状況によって向き不向きがあるため、まずは「状況ごとにおすすめの方法」を一覧でお見せしたいと思います。

ケケンタ

ご自身のご状況に合わせて、使いやすそうな方法をお選びください！

無料・有料テーマの子テーマを「使用している」場合

無料・有料テーマの子テーマを「使用していない（親テーマを直接使用している）」場合

オリジナルテーマを使用している場合

【方法⑤】プラグイン「WP Add Custom CSS」を使用する際の留意点として「アップデートが2022年でストップしている」ことが挙げられます。
これはセキュリティリスクにも関わることのため、利用する際はその点をご留意ください。

【代替案】プラグイン「WP Add Custom CSS」の機能を自分で実装する

あわせて読みたい
【WordPress】固定・投稿ページ編集画面にCSSやJSの入力フォームを設置する 特定の固定ページや投稿ページごとに簡単にCSSとかJavaScriptを設定できるようにしたいな…… 今回はこのようなお悩みをお持ちの方に向けて 固定ページ編集画面や投稿ペー…

【方法①】functions.phpで読み込ませる

functions.phpを利用してCSSを読み込ませる方法です。
※基本的にはこの方法がもっとも推奨されます。

functions.phpを編集するときは必ずバックアップを取るようにしましょう。

（例１）「固定ページ」にsample.cssを読み込ませる

function my_styles_include()  {
  // 固定ページにCSSを読み込む
  if ( is_page() ) {
    wp_enqueue_style( 'sample', get_template_directory_uri() . '/css/sample.css', array(), '1.0.0' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_styles_include' );

条件分岐タグのひとつであるis_page()でページ判定を行い、「固定ページ」にだけsample.cssを読み込ませています。

（例２-１）「特定の固定ページ」にsample.cssを読み込ませる

function my_styles_include()  {
  // 固定ページ「sample」にCSSを読み込む
  if ( is_page( 'sample' ) ) {
    wp_enqueue_style( 'sample', get_template_directory_uri() . '/css/sample.css', array(), '1.0.0' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_styles_include' );

（例２-２）複数の「特定の固定ページ」にsample.cssを読み込ませる

function my_styles_include()  {
  // 固定ページ「sample01」と「sample02」にCSSを読み込む
  if ( is_page( array( 'sample01', 'sample02' ) ) ) {
    wp_enqueue_style( 'sample', get_template_directory_uri() . '/css/sample.css', array(), '1.0.0' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_styles_include' );

is_page()の引数に固定ページのスラッグを指定することで、そのページにだけsample.cssを読み込ませています。
複数のページを指定する場合（例２-２）は、array()で配列として指定します。

（例３）「特定の固定ページ」と「特定の投稿ページ」にそれぞれのCSSファイルを読み込ませる

function my_styles_include()  {
  if ( is_page( 'sample-page' ) ) {
    // 固定ページ「sample-page」にCSSを読み込む
    wp_enqueue_style( 'sample-page', get_template_directory_uri() . '/css/sample-page.css', array(), '1.0.0' );
  
  } elseif ( is_page( 'sample-page' ) ) {
    // 投稿ページ「sample-single」にCSSを読み込む
    wp_enqueue_style( 'sample-single', get_template_directory_uri() . '/css/sample-single.css', array(), '1.0.0' );  
  }
}
add_action( 'wp_enqueue_scripts', 'my_styles_include' );

is_page()とis_single()をelseif文で分岐することで「固定ページ」と「投稿ページ」にそれぞれのCSSファイルを読み込ませています。

（例４）「特定の固定ページ」と「特定の投稿ページ」に同じCSSファイルを読み込ませる

function my_styles_include()  {
  if ( is_page( 'sample-page' ) || is_page( 'sample-single' ) ) {
    // 固定ページ「sample-page」と投稿ページ「sample-single」にCSSを読み込む
    wp_enqueue_style( 'sample-page', get_template_directory_uri() . '/css/sample-page.css', array(), '1.0.0' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_styles_include' );

複数の特定のページに同じCSSファイルを読み込ませたいときは「||（または）」演算子で条件をつなぎます。

wp_enqueue_style()関数について

wp_enqueue_style()は、CSSを読み込ませるための関数です。

  • 第１引数……ハンドル名（ほかの処理でこのCSSファイルを指定するためのキー名）※任意の名称
  • 第２引数……CSSファイルのパス
  • 第３引数……ほかファイルとの依存関係。ここに記述したハンドル名のファイルよりも後に読み込まれます。
  • 第４引数……バージョン番号。キャッシュによって最新バージョンが即座に反映されないのを防止するのに役立ちます。

スラッグは管理画面「投稿（固定ページ）一覧」→ 記事の「クイック編集」でご確認いただけます。

スラッグの確認方法
スラッグの確認方法

条件分岐タグについて詳しく知りたい方は以下の記事がおすすめです

あわせて読みたい
【WordPress】is_page？条件分岐タグって？分かりやすく解説！ WordPressには「テンプレートタグ」という、プログラミング言語で言うところの「関数」が多数用意されています。 今回はその中でも比較的使用頻度が高いis_page()につい…

おすすめの方法一覧に戻る

【方法②】headタグ内で読み込ませる

header.phpにあるheadタグ内でページの判定を行ないCSSを読み込ませる方法です。

（例１）「固定ページ」にsample.cssを読み込ませる

<head>
  <?php if ( is_page() ): ?>
    <!-- 固定ページに読み込むCSS -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sample.css">
  <?php endif; ?>
</head>

条件分岐タグのひとつであるis_page()でページ判定を行い、「固定ページ」にだけsample.cssを読み込ませています。

（例２-１）「特定の固定ページ」にsample.cssを読み込ませる

<head>
  <?php if ( is_page( 'sample' ) ): ?>
    <!-- 固定ページ「sample」に読み込むCSS -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sample.css">
  <?php endif; ?>
</head>

（例２-２）複数の「特定の固定ページ」にsample.cssを読み込ませる

<head>
  <?php if ( is_page( array( 'sample01', 'sample02' ) ) ): ?>
    <!-- 固定ページ「sample01」と「sample02」に読み込むCSS -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sample.css">
  <?php endif; ?>
</head>

is_page()の引数に固定ページのスラッグを指定することで、そのページにだけsample.cssを読み込ませています。
複数のページを指定する場合（例２-２）は、array()で配列として指定します。

（例３）「特定の固定ページ」と「特定の投稿ページ」にそれぞれのCSSファイルを読み込ませる

<head>
  <?php if ( is_page( 'sample-page' ) ): ?>
    <!-- 固定ページ「sample-page」に読み込むCSS -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sample-page.css">
  <?php elseif ( is_single( 'sample-single' ) ): ?>
    <!-- 投稿ページ「sample-single」に読み込むCSS -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sample-single.css">
  <?php endif; ?>
</head>

is_page()とis_single()をelseif文で分岐することで「固定ページ」と「投稿ページ」にそれぞれのCSSファイルを読み込ませています。

（例４）「特定の固定ページ」と「特定の投稿ページ」に同じCSSファイルを読み込ませる

<head>
  <?php if ( is_page( 'sample-page' ) || is_single( 'sample-single' ) ): ?>
    <!-- 固定ページ「sample-page」と投稿ページ「sample-single」に読み込むCSS -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sample.css">
  <?php endif; ?>
</head>

複数の特定のページに同じCSSファイルを読み込ませたいときは「||（または）」演算子で条件をつなぎます。

スラッグは管理画面「投稿（固定ページ）一覧」→ 記事の「クイック編集」でご確認いただけます。

スラッグの確認方法
スラッグの確認方法

条件分岐タグについて詳しく知りたい方は以下の記事がおすすめです

あわせて読みたい
【WordPress】is_page？条件分岐タグって？分かりやすく解説！ WordPressには「テンプレートタグ」という、プログラミング言語で言うところの「関数」が多数用意されています。 今回はその中でも比較的使用頻度が高いis_page()につい…

おすすめの方法一覧に戻る

【方法③】記事編集ページで読み込ませる

記事の編集ページの「カスタムHTML」に直書きする方法です。
※ご紹介する方法の中でもっとも手軽な方法である一方、メンテナンス性に欠けます。

以下のように、記事に「カスタムHTML」を設置し、その中に「<style>タグ」を記述します。

カスタムHTMLでCSSを記述
カスタムHTMLでCSSを記述

このようにすることで、簡単に記事ごとにCSSを書き分けることが可能です。

おすすめの方法一覧に戻る

【方法④】テンプレートファイルで読み込ませる

テンプレートファイル内に直書きする方法です。

以下のように、対象となるテンプレートファイルに直接CSSファイルを読み込みます。

<link rel="stylesheet" href=“<?php echo get_template_directory_uri(); ?>/css/page-sample.css”>

<?php get_header(); ?>

/* 省略 */

メンテナンス性に欠けるため基本的におすすめはしません。
この方法を採用できる方は、恐らく大半がオリジナルテーマを利用されている＝一定の技術力をお持ちかと思うので、可能ならfunctions.phpで読み込む方法を推奨します。

おすすめの方法一覧に戻る

【方法⑤】プラグイン「WP Add Custom CSS」を使用する

プラグイン「WP Add Custom CSS」を使用して、
各記事編集ページにCSS入力用のフォームを設置する方法です。

冒頭でもお伝えしましたが、プラグイン「WP Add Custom CSS」は最終アップデートが2022年でストップしています。
これはセキュリティリスクにも関わることのため、利用する際はその点をご留意ください。

【代替案】プラグイン「WP Add Custom CSS」の機能を自分で実装する

あわせて読みたい
【WordPress】固定・投稿ページ編集画面にCSSやJSの入力フォームを設置する 特定の固定ページや投稿ページごとに簡単にCSSとかJavaScriptを設定できるようにしたいな…… 今回はこのようなお悩みをお持ちの方に向けて 固定ページ編集画面や投稿ペー…

プラグイン「WP Add Custom CSS」の使い方

STEP
プラグイン「WP Add Custom CSS」をインストールする
プラグイン「WP Add Custom CSS」をインストールする
プラグイン「WP Add Custom CSS」をインストールする

僕がインストールするときは検索結果のかなり下の方にありました。

STEP
固定・投稿ページの編集画面でCSSを記述する

プラグイン「WP Add Custom CSS」を有効化すると、固定・投稿ページの下の方にCSSの入力フォームが表示されるようになります。

固定・投稿ページの編集画面でCSSを記述する
固定・投稿ページの編集画面でCSSを記述する

この入力フォームに記述したCSSは、そのページにだけ適用されます。

おすすめの方法一覧に戻る

まとめ

以上がWordPressの特定のページでCSSを読み込む方法です。

方法自体はいくつもありますが、適切な方法はテーマの使用状況によって変わってきます。

今回はおすすめの方法一覧もご用意していますので、ぜひその中からご自身の状況にあった方法をお選びいただければと思います。

ケケンタ

最後までご覧いただきありがとうございました！

このブログではWordPressやWeb制作、PHPに関する情報を発信しています。

ご興味のある方はほかの記事もご覧いただけるとうれしいです。

]]> https://kekenta-it-blog.com/wp-read-css-per-page/feed/ 0 【WordPress】固定ページや投稿ページなどページ種別ごとに背景色を設定する https://kekenta-it-blog.com/wp-init-bg-by-pagetype/ https://kekenta-it-blog.com/wp-init-bg-by-pagetype/#respond Wed, 26 Jun 2024 08:11:24 +0000 https://kekenta-it-blog.com/?p=8690

以前に以下の記事で「特定のページごとに背景色を変更する方法」を解説しました。 しかし、中には という方もいらっしゃるかと思います。 そこで今回は、 固定ページ・投稿ページ・カテゴリーページなどページ種類に応じて背景色を設 […]]]>

以前に以下の記事で「特定のページごとに背景色を変更する方法」を解説しました。

【WordPress】特定のページのみ背景色を変える方法

しかし、中には

ケケンタ

「ページごと」っていう細かい括りじゃなくて、「固定ページ」、「投稿ページ」って感じでもっと大きな枠ごとに設定したいんだよな

という方もいらっしゃるかと思います。

そこで今回は、

固定ページ・投稿ページ・カテゴリーページなど
ページ種類に応じて背景色を設定する方法

をご紹介していきます。

【WordPress】WP_Query（サブループ）の使い方とパラメータ一覧を紹介
【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点
【WordPress】JavaScriptはどこに書けばいい？「３つの方法」を解説
無料テーマCocoonからSWELLに乗り換えた７つの理由【WordPress】
あわせて読みたい
PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

ソースコード

早速ですが、ベースとなるソースコードは以下のようになります。

下記のソースコードをfunctions.phpへ記述する

function my_headinputtags() {
  $headinputtag = '';

  if ( ページ種類の判定条件 ) {
    $headinputtag = <<<EOM
      <style>
        body {
          background-color: ここに任意のカラーを設定;
        }
      </style>
    EOM;
  } 
  echo $headinputtag;
  }
  add_action( 'wp_head', 'my_headinputtags', 99);

上記のソースコードに、「ページ種類を判定するための条件分岐タグ」と「任意のカラー」を設定するだけで、ページ種類ごとに背景色を変えることが可能です。

（例）固定ページの背景色を「green」に設定

function my_headinputtags() {
  $headinputtag = '';

  if ( is_page() ) {  // 固定ページかどうかを判定
    $headinputtag = <<<EOM
      <style>
        body {
          background-color: green; // カラーに「green（緑）」を指定
        }
      </style>
    EOM;
  } 
  echo $headinputtag;
  }
  add_action( 'wp_head', 'my_headinputtags', 99);

functions.phpの編集方法がご不明な場合は、こちらの記事をご覧ください

あわせて読みたい
【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点 WordPressで機能カスタマイズをする際は、必ずと言っていいほどfunctions.phpを編集することになります。 しかし、functions.phpを編集したことで何らかのエラーが発生…

主要な条件分岐タグ

ご参考までに、主要な条件分岐タグをいくつか掲載します。

ケケンタ

ページ種類の判定にご活用ください。

条件分岐タグ判定内容
is_front_page()トップページかどうか判定
is_home()投稿一覧ページかどうか判定
is_page()固定ページかどうか判定
is_single()投稿ページかどうか判定
is_category()カテゴリーページかどうか判定
is_tag()タグページかどうか判定
主要な条件分岐タグ

まとめ

以上がページ種類ごとに背景色を変更する方法でした。

今回ご紹介したソースコードを使用すれば簡単に実装可能ですので、ぜひご活用いただけると嬉しいです。

ケケンタ

それでは、最後までご覧いただきありがとうございました。

当ブログではWordPressやWeb制作、PHPに関する情報を発信しています。
他の記事もご覧いただけると嬉しいです。

あわせて読みたい
【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点 WordPressで機能カスタマイズをする際は、必ずと言っていいほどfunctions.phpを編集することになります。 しかし、functions.phpを編集したことで何らかのエラーが発生…
あわせて読みたい
【WordPress】特定のページのみ背景色を変える方法 WordPressで特定のページだけ背景色を変えたいんだけどやり方がわからない…… 今回はこのようなお悩みについて解説をしていきます。  この記事で分かること WordPressの…
]]> https://kekenta-it-blog.com/wp-init-bg-by-pagetype/feed/ 0