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

CSS

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

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

すべて style.css に追記しておいてもよいですけど、他の記事でまったく使わない 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 ページのみ変える、というのも可能です。

大まかにページタイプによって読み込む 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 に無料登録すると、会員限定コンテンツ「ブログのアクセス数を最大限に増やす SEO 施策」ほか、ライブ配信やメールマガジンでブログ運営に役立つ最新情報を入手できます。

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

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