WordPress

WordPress(ワードプレス)でページごとにCSSを適用する方法

2021年1月6日

 

こんにちは、keiです。

 

悩む人
WordPress(ワードプレス)でページごと(記事のみ)にCSSを適応させるやり方について知りたい。

 

こんな悩みに答えます。

 

WordPressを使っていて、『この記事だけにCSSを効かせたい』と思うことがあるのではないでしょうか?

 

本記事では、そんなプラグインを使用せずに、WordPress(ワードプレス)の記事内にCSSを適応させる方法について解説します。

 

また、記事後半では、ページごとにCSSを追加する際の注意点と対策について僕の体験をもとに紹介します。

 

今回は「NxWorld さん」のコードを参考にさせていただきました。ありがとうございます。

 

WordPressで記事にのみCSSを適応させる方法

WordPressで記事にのみCSSを適応させる方法

 

それでは、WordPressでページや記事ごとに個別のCSSを適応させる方法について解説します。

 

※php内を編集するため事前にバックアップしておくことをおすすめします。

 

バックアップのやり方は、以下記事を参考にしてみてください。

 

» UpdraftPlusプラグインを使ってバックアップする方法

 

1. PHPコードのコピー

 

まずは、以下のコードをコピーします。

 

 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();
	}
}

 

コピーができましたら、ワードプレスのサイドバー「外観 → テーマエディター → functions.php」を開きます。

 

もし「functions.php」がすぐに見つからない際には、

 

  • Windowsユーザーであれば、「control」+「F」
  • Macユーザーであれば、「command」+「F」

 

をクリックすると検索窓が表示されますので、「functions.php」を入力すれば見つけることができます。

 

2. PHPコードをfunctions.phpに貼り付ける

 

コードがコピーできたら「functions.php」に貼り付けます。

 

 

貼り付けができましたら、「ファイルを更新」をクリックします。

 

3. 表示されているか確認

 

最後に、投稿記事したいページを開き、ページ下に「Custom CSS」という入力欄が表示されているか確認します。

 

うまく貼り付けが完了してましたら、記事下に以下のように表示されていると思います。

 

 

あとは、ボックス内にCSSのスタイル指定をすればOKです。

 

WordPressでページごとにCSSを追加する際の注意点

WordPressでページごとにCSSを追加する際の注意点

 

更新された最新のテーマをアップロードしたり、他のWordPressテーマに変更したりすると、カスタムフィールド用のコードがなくなります。

 

そのため、特定ページに読み込んでいたカスタムフィールド用のボックスがなくなり、CSSを入力できなくなります。

 

僕も、更新したWordPressテーマをアップロードして、「functions.php」で個別に設定したはずのCSSが効かなくなることがありました。
KEI

 

そのため、「functions.php」にコードを追記して、特定投稿にカスタムフィールドを出現させるのではなく、プラグインを使用して表示させるのがオススメです。

 

結論、プラグインは「Simple CSS」を使って、記事ごとにカスタムフィールドを使ってみるのがオススメです。

 

phpのカスタマイズが不安な方もプラグインを利用すれば、簡単に特定記事にCSSを適用できますよ。

 

1 プラグインをインストール&有効化する

 

まずは、サイドバーメニューにある「①プラグイン新規追加」をクリックして、ボックス内に「Simple CSS」と入力します。

 

入力できましたら、Simple CSSの今すぐインストール → 有効化」をします。

 

 

2 投稿編集画面にCSSを入力する

 

後は、CSSを適用させたいページに行きまして、「Simple CSS」のボックスが追加されていることを確認します。

 

 

確認できましたらCSSを入力して、特定ページのみにCSSが反映されましたら完了です!
KEI

 

WordPressで記事のみにCSSを適用する方法まとめ

 

ここまで、ワードプレスで記事のみにCSSを適応させる方法について、紹介しました。

 

なお、今回は、当ブログで使用しているワードプレステーマAFFINGER(アフィンガー)で解説しました。

 

SEOにも強いテーマですので、興味がありましたら使ってみての感想を参考にしてみてください。

 

関連記事
AFFINGER6(アフィンガー)を使ってみての感想【メリット・デメリットを紹介】

  悩む人有料版AFFINGER6の導入を検討しているけど、導入してみてのメリット・デメリット、利用している人の感想を聞いてから購入を決めたいな...   こんな悩みに答えます。 ...

続きを見る

 

今回は以上です。

 

ここまで読んでいただき、ありがとうございました。

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-WordPress