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

CSS

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

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

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

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

WordPressトラブルでお困りですか?
「ブログの保険」に加入すると、いつでも気軽にブログ運営に関する相談ができます。

ブログの保険 Essential Bloggers Care
Essential Bloggers Care

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 ページのみ変える、というのも可能です。

大まかにページタイプによって読み込む 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任意

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

記事専用のCSSを入力

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

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

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

手順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を追加する方法

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

手順2:投稿編集画面で「Custom CSS」にCSSを入力

投稿編集画面に入ると、本文入力エリア(エディター)の下に「Custom CSS」という入力欄が表示されていると思います。

Custom CSS 入力エリア

その投稿にのみ反映させたい CSS を入力しましょう。

Custom CSS サンプル

カスタムフィールド使用時と同じく、<head> 内に <style> を出力してくれます。

Case4. プラグイン「Simple CSS」を使う方法

カスタマイズに不安があるなら、プラグインを使うのが最も簡単です。

個別に CSS を出力できるプラグインはいくつかありますが、ここでは「Simple CSS」をご紹介します。

手順1:プラグインインストール・有効化

プラグイン新規追加で「Simple CSS」を検索し、インストール・有効化してください。

WordPress プラグイン Simple CSS

手順2:投稿編集画面で「Simple CSS」にCSSを入力

投稿編集画面下部に「Simple CSS」欄が表示されているので、CSS を入力しましょう。

投稿編集画面下部の「Simple CSS」入力欄

WordPress5.6 & テーマ「Snow Monkey」で動作確認済みです。

備考:サイト全体に適用するCSSも編集できる

「Simple CSS」は、投稿ごとの CSS だけではなく、サイト全体に適用する CSS も編集できます。

外観 > Simple CSS に入ると専用エディターが表示されるので、そこに入力していけば OK です。

今後テーマを変更しても、プラグインで保存したものはそのまま引き継げるので便利ですね。

カスタマイザーからも編集できるため、実際の表示を確認しながら CSS を書きたい場合も重宝すると思います。

カスタマイザー経由のSimple CSS編集

まとめ

以上、WordPress で特定のページに個別の CSS を設定する方法でした。

CSS を使ったカスタマイズ記事を書くときは重宝すると思うので、ぜひ使ってみてください。

新しいものを取り入れていくと、ますますブログを書くのが楽しくなりますよ!

それでは、また。

Naifix Limited

Naifix Limited

「Naifix Limited」に無料登録すると、会員限定コンテンツをご覧いただけるほか、ライブ配信やメールマガジンでブログ運営に役立つ最新情報を入手できます。

また、LINE でご登録いただくと、簡易サイト診断を無料でご利用いただけます。

この記事を書いた人

Ellora

Web コンサルタントとして、企業・個人サイトのお手伝いをしています。

WordPressトラブルでお困りですか?
「ブログの保険」に加入すると、いつでも気軽にブログ運営に関する相談ができます。

ブログの保険 Essential Bloggers Care
Essential Bloggers Care