WordPressで特定のページのみCSSを読み込ませる方法3選【コピペ5分】

こんにちは！フリーランスエンジニアのせっち@yukinouz1です。
WordPressでWebサイトを作る際、CSSを特定のページのみ読み込ませたい場合があります。
「全てのCSS」を「全てのページで」読み込ませる必要はないですからね。

今固定ページ以外にも、投稿ページ(single)、トップページ(front_page)などにも使えます。

クリックして見たいところへジャンプ

特定のページのみCSSを読み込む方法
結局どのやり方がいいのか？
まとめ

特定のページのみCSSを読み込む方法

それでは実際に見ていきます

head内で読み込ませる方法

<head>
<?php if ( is_page() ): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/page-sample.css">
<?php endif; ?>
</head>

この場合、固定ページ(is_page)ならば、page-sample.cssを読み込みなさいという事になります。

しかし、is_page();だと全ての固定ページに適用されてしまいます。
スラッグごとにCSSを分けたい場合は、

is_page(‘スラッグ名’)

と書けばOKです。

スラッグの確認方法は、

表示オプションからスラッグにチェックを入れ、

エディタの下にあるスラッグを確認します。
この場合は”sample”となっているので、

<head>
<?php if ( is_page('sample') ): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/page-sample.css">
<?php endif; ?>
</head>

と書けばOKです。

投稿ページのみで読み込みたい場合
is_single();

トップページのみで読み込みたい場合
is_front_page();

余談：
コメントアウトを書く場合は、

<?php

 ?>

の中に書いた方がいいです。
例）

<?php if ( is_page('sample') ): ?>
<!--page-sample.php用のCSS-->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/page-sample.css">
<?php endif; ?>

なぜ下記のように書かないのか？
例）

<!--page-sample用のCSS-->
<?php if ( is_page('sample') ): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/page-sample.css">
<?php endif; ?>

このように書いてしまうと、cssが読み込まれないページでコメントアウトだけが表示されてしまいます。
ちょっとカッコ悪いですね。

if分の中にコメントアウトを書いておけばis_page(‘sample’)が読み込まれる場合を除いてコメントアウトも表示されなくなります。

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

function add_page_style() {
// page-sample.php用のCSS
if ( is_page('sample') ) {
wp_enqueue_style( ‘page-sample', get_template_directory_uri() . 'css/page-sample.css' );
}
}
add_action( 'wp_enqueue_scripts', 'add_page-sample' );

こちらも条件分岐によって固定ページ(is_page)ならば・・・という形になっています。

※functions.phpを編集する際は必ずバックアップを取ってください。

各ページで読み込ませる方法

無理やりなやり方ですが、各ページで読み込ませる方法もあります。
そんなバカな、、、と思うかもしれませんが、僕は実際の案件(修正案件)で遭遇したことがあります。

<?php
/*
Template Name: CSSを分けたい固定ページ
*/
?>

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

<?php get_header(); ?>

/* 省略 */

これでもちゃんとCSSは動きます。
実際に試したところ、get_header();の前に書くと、<head></head>の一番上に来ます。
CSSの順番を最後に持って来たい場合はget_header();の後に書きましょう。

各ページごとに書いていくため、メンテナンス性は非常に悪いです。