WordPressでページごとに個別のCSSを設定する方法4選

更新日 2021/08/11
著者 Ellora
カテゴリーブログカスタマイズ

テーマによって多少異なりますが、WordPress は基本的にトップページでも下層ページ（投稿・固定ページ・アーカイブ）でも同じ CSS を読み込んでいます。

通常はそれでもとくに問題ありませんが、特定の CSS をそのページでのみ読み込みたいケースもあると思います。たとえば「CSS を使った見出しのデザインサンプル」という記事を書くときですね。

すべて style.css に追記しておいてもよいですけど、他の記事でまったく使わない CSS が大量にあると表示スピードにも影響してしまいます。

そこで、そのページにだけ個別のスタイルを適用する方法を解説していきます。

Headline

Case1. ページごとにCSSファイルを用意する方法
- 条件分岐でページごとにCSSを変更する
Case2. カスタムフィールドを利用する方法
- 手順1：header.php にコードを追記する
- 手順2：投稿編集画面でカスタムフィールドにCSSを入力
Case3. カスタムフィールドを使わずにCSS入力欄を作成する方法
- 手順1：functions.phpにコードを追記する
- 手順2：投稿編集画面で「Custom CSS」にCSSを入力
Case4. プラグイン「Simple CSS」を使う方法
まとめ

Case1. ページごとにCSSファイルを用意する方法

一般的に、CSS は外部リンクとして <head> 内に置かれています。

WordPress では header.php に <head> が書かれていることが多いので、現在使用しているテーマをのぞいてみてください。

シンプルなものだと、下の 2 つのうちどちらかになっていると思います。

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" />

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />

functions.php で style.css を読み込んでいるテーマや、CSS が細分化されているテーマもありますが、いずれにせよブログが表示されたときは以下のように CSS ファイルへのリンクに置換されています。

<link rel="stylesheet" href="https://sample.com/wp-content/themes/xxx/style.css" type="text/css" />

header.php はトップページでも下層ページでも共通となっていることが多く、そこで読み込んでいる style.css も各ページ共通となっているわけです。

もしページごとに CSS を切り替えたい場合は、条件分岐を使いましょう。

条件分岐でページごとにCSSを変更する

たとえば、「投稿ページ」と「それ以外のページ」で読み込む CSS を変更する場合、それぞれの CSS を用意しておきます。

ページタイプ	読み込む CSS
投稿ページ	article.css
それ以外の全ページ	style.css

<head> 内の指定は以下のとおりです。

<?php if( is_single() ): ?>
<link rel="stylesheet" href="<?php bloginfo(‘url’); ?>/css/article.css" type="text/css" />
<?php else: ?>
<link rel="stylesheet" href="<?php bloginfo(‘url’); ?>/css/style.css" type="text/css" />
<?php endif; ?>

is_single という条件分岐タグを使って、投稿ページとそれ以外のページで振り分けています。

ID やスラッグを指定して、特定の投稿のみ分岐することもできます。

<?php if( is_single( array( 100, 'sample' ))): ?>
<link rel="stylesheet" href="<?php bloginfo(‘url’); ?>/css/article.css" type="text/css" />
<?php else: ?>
<link rel="stylesheet" href="<?php bloginfo(‘url’); ?>/css/style.css" type="text/css" />
<?php endif; ?>

その他の条件分岐タグを使えば、トップページのみ変える・404 ページのみ変える、というのも可能です。

is_homeとis_mobileを使ってWordPressカスタマイズの幅を広げよう！ – Naifix

WordPressの条件分岐タグを使うと、ページの種類によって表示（出力）を簡単に切り替えることができます。ここではis_homeを使った「メインページとそれ以外」、is_mobileを使った「スマホとそれ以外」の分岐を解説します。

大まかにページタイプによって読み込む CSS を変更するなら上記の方法でよいのですが、特定の投稿にのみ適用させるのはちょっと不便だと思います。

では、投稿編集画面に専用の CSS 入力欄を作ってしまう方法を見ていきましょう。

Case2. カスタムフィールドを利用する方法

大幅なカスタマイズはしなくても、カスタムフィールドを使ってその投稿にのみ特定の CSS を出力できます。

手順1：header.php にコードを追記する

header.php に書かれている <head> 内に以下のコードを入れてください。

<?php if ( is_single() ) {
$article_css = get_post_meta($post->ID,article_css,true);
    if($article_css)
    {
    echo <<<EOS
<style>
$article_css
</style>
EOS;
    }
}
?>

「投稿ページであれば article_css という名前のカスタムフィールドに書かれた値を出力しますよ」というものです。

カスタムフィールドに何も書かれていなければ、コードは出力しません。

参考 1記事限定で反映させたいcssやjavascriptをカスタムフィールドで読み込む

手順2：投稿編集画面でカスタムフィールドにCSSを入力

投稿編集画面で、カスタムフィールドに CSS を入力します。

名前	値
article_css	任意

以下のように入力すると、「値」に書いたスタイルがその投稿のみに反映されます。

Case3. カスタムフィールドを使わずにCSS入力欄を作成する方法

カスタムフィールドではなく、CSS を書く専用欄を作成したほうが便利かもしれません。

functions.php を編集するので、カスタマイズ前に必ずバックアップをとっておいてください。

WordPressバックアップ方法と最適なデータ保管方法 – Naifix

WordPressのバックアップ方法はいくつかありますが、確実に保存しておくためにおすすめの方法をご紹介します。バックアップデータの最適な保存先や回数・頻度などの基礎知識も合わせてご覧ください。

手順1：functions.phpにコードを追記する

functions.php に以下を追記します。

//Custom CSS Widget
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
	global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
		endwhile; endif;
		rewind_posts();
	}
}

参考ページや記事ごとに個別のCSSやJavaScriptを追加する方法

これだけで準備完了です。