WordPressで特定の固定ページだけにCSSを読み込む

WordPressで特定の固定ページだけにCSSを読み込む

WordPressで特定の固定ページだけに使用するCSSを読み込む場合には、テーマのfunctions.phpで特定の固定ページだけに読み込むCSSファイルとメインCSSファイルを条件分岐することで実現できます。

WordPressで特定の固定ページだけにCSSを読み込んでスタイルが反映するまでを記事にまとめました。

参考になることがあったら役立ててくださいまし。

 

特定の固定ページだけに外部CSSを作成

 

はじめに、WordPressで特定の固定ページだけに使用する外部CSSを作成します。

外部CSSファイル名はstyle.css以外のファイル名にして作成です。

 

 

作成した特定の固定ページだけに使う外部CSSファイルは、使用しているWordPressテーマのCSSフォルダに配置します。

WordPressで特定の固定ページだけにCSSを読み込む準備は完了です。

 

WordPressの条件分岐でCSSの読み込みをする

 

続いて、WordPressの特定の固定ページだけに読み込む外部CSSファイルを、テーマのfunctions.phpに、PHPの条件分岐を使用して読み込みます。

functions.phpでWordPressの特定の固定ページだけに条件分岐してCSSの読み込みをする書き方は以下のPHPコードのように記述します。

 

function add_files() {
    if( is_page('page-style') ){
        wp_enqueue_style( 'challenge', get_template_directory_uri() . '/css/style-test.css');
    } else {
        wp_enqueue_style('main', get_template_directory_uri() . '/style.css');
    }
}
add_action( 'wp_enqueue_scripts', 'add_files' );

 

関数を定義した中に、if文を記述してカッコ内の条件式にWordPressのis_pageで固定ページ判定をします。

このときif( is_page )だけの条件だと、使用しているWordPressテーマに作成している固定ページ全てを対象にCSSが読み込まれてしまうので、is_page()の引数には特定の固定ページの、スラッグ、ID、タイトルのいずれかを指定します。

 

 

スラッグで条件分岐してCSSの読み込みをする場合は、CSSの読み込みをしたい特定の固定ページ編集画面に進み、URLスラッグを確認してis_pageの引数に記述します。上の画像を例にすると「page-style」がスラッグです。

 

 

IDで条件分岐してCSSの読み込みをする場合は、CSSの読み込みをしたい特定の固定ページ編集画面でURLに付与されているID番号をis_pageの引数に記述します。上の画像を例にすると「28200」がID番号です。

 

Advertisement

 

WordPressテーマのfunctions.phpに特定の固定ページを判定する条件式を記述した次は、条件式の中で条件分岐をして、特定の固定ページだけにCSSを読み込みます。

まずは特定の固定ページだけに読み込む外部CSSファイルをキューに登録するためにWordPressの関数「wp_enqueue_style」を記述して、「get_template_directory_uri()」でCSSファイルのパスを指定して読み込みます。

 

function add_files() {
    if( is_page('page-style') ){
        wp_enqueue_style( 'challenge', get_template_directory_uri() . '/css/style-test.css');
    }
}
add_action( 'wp_enqueue_scripts', 'add_files' );

 

wp_enqueue_style()は第一引数と第二引数を使用し、特定の固定ページのCSSファイルを読み込みます。

 

第一引数には、特定の固定ページに読み込むCSSファイルのハンドル名を指定します。上記PHPコードを例にするとchallengeがハンドル名です。

第二引数には、WordPressの関数「get_template_directory_uri()」を記述して特定の固定ページに読み込むCSSファイルのパスを指定します。

 

上のPHPコードの場合は、WordPressテーマ内のCSSフォルダに配置したstyle-test.cssをget_template_directory_uri()で読み込んでいます。

 

Advertisement

 

is_page(‘page-style’)の条件判定に一致する固定ページは、page-styleのスラッグを使用している特定の固定ページのみが該当しますので、それ以外のページではスタイルが効きません。

そのため、PHPのelse文で特定の固定ページ以外にはテーマのstyle.cssを読み込む条件分岐の処理を追加します。

 

function add_files() {
    if( is_page('single-style') ){
        wp_enqueue_style( 'challenge', get_template_directory_uri() . '/css/style-test.css');
    } else {
        wp_enqueue_style('main', get_template_directory_uri() . '/style.css');
    }
}
add_action( 'wp_enqueue_scripts', 'add_files' );

 

else文でstyle.cssを読み込む書き方は、特定の固定ページだけに読み込むCSSファイルのパスを指定した後にelse文を繋ぎ「特定の固定ページ以外」の条件分岐をし、else内にWordPressのwp_enqueue_style()関数を記述します。

第一引数にはstyle.cssのハンドル名を、第二引数にはget_template_directory_uri()でテーマフォルダに設置しているstyle.cssのパスを指定します。

このような条件分岐処理を書くと、特定の固定ページにはstyle.cssを読み込ませないで、それ以外のページではstyle.cssが読み込まれます。

記述した条件分岐の処理をする関数は、add_actionでWordPressのwp_enqueue_scriptsに登録し、do_action( ‘wp_enqueue_scripts’ ) のタイミングでCSSを読み込ませます。

 

特定の固定ページでCSSの読み込みを確認

 

最後にWordPressで特定の固定ページだけにCSSを読み込むことができているか、特定の固定ページでCSSの読み込みを確認します。

外部CSSファイルを読み込んだ特定の固定ページをブラウザに表示させてから、ページのソースを表示させ、headに特定の固定ページ用のCSSファイルがlinkタグで出力されていれば、WordPressで特定の固定ページだけにCSSを読み込むことができています。

例えばWordPressで特定の固定ページにstyle-test.cssを読み込んだ場合は以下のようなlinkタグが出力されます。

 

<link rel='stylesheet' id='challenge-css' href='http://localhost:7000/wp-content/themes/challenge/css/style-test.css?ver=5.8.2' type='text/css' media='all' />

 

特定の固定ページにstyle-test.cssが読み込まれているので、style-test.cssにCSSを記述すればシッカリとスタイルが反映します。

 

 

テキストに色を適用させた確認ですがスタイルが効いているのが分かります。

また、WordPressで特定の固定ページ以外にはstyle.cssが読み込みできているかも確認しておきます。

トップページあたりでもブラウザに表示させてからソースを表示させると、特定の固定ページに読み込んでいたCSSファイルは読み込まれず、代わりにstyle.cssがlinkタグで読み込まれているのが確認できます。

 

<link rel='stylesheet' id='main-css' href='http://localhost:7000/wp-content/themes/challenge/style.css?ver=5.8.2' type='text/css' media='all' />

 

 

特定の固定ページ以外は条件分岐でstyle.cssが読み込まれているため、style.cssにCSSを記述すれば、特定のページに使われているCSSではないCSSがシッカリと反映します。

 

今回紹介したWordPressで特定の固定ページだけにCSSを読み込む方法は、WordPressでCSSファイルの読み込みを行うときに推奨されている方法ですので、テーマのfunctions.phpで外部CSSファイルの読み込みを行えるようにしておくと役立ちます。

WordPress使い方カテゴリの最新記事