MENU

WordPressで投稿・固定ページごとにカスタムCSS・JSを追加する方法【プラグイン不要】

WordPress
WordPressで投稿・固定ページごとにカスタムCSS・JSを追加する方法【プラグイン不要】

特定の投稿だけにCSSを追加したい、ページごとにJavaScriptを変更したい…そんなとき、プラグインを使わずに簡単に対応できる方法をご紹介します。

目次

完成イメージ

投稿編集画面に「カスタムCSS」「カスタムJS」の入力欄が表示され、入力したコードがその投稿だけに反映されるようになります。

コピペでOK！functions.phpに貼るだ

以下のコードを、使用しているテーマの functions.php にそのまま貼り付けてください。

PHP
// 投稿・固定ページにカスタムCSS・JS入力欄を追加
function add_custom_code_meta_box() {
  add_meta_box('custom_css_box', 'カスタムCSS', 'custom_css_callback', ['post', 'page'], 'normal', 'high');
  add_meta_box('custom_js_box', 'カスタムJS', 'custom_js_callback', ['post', 'page'], 'normal', 'high');
}
add_action('add_meta_boxes', 'add_custom_code_meta_box');

// カスタムCSS入力欄
function custom_css_callback($post) {
  $css = get_post_meta($post->ID, '_custom_css', true);
  echo '<textarea style="width:100%; height:150px;" name="custom_css">'.esc_textarea($css).'</textarea>';
}

// カスタムJS入力欄
function custom_js_callback($post) {
  $js = get_post_meta($post->ID, '_custom_js', true);
  echo '<textarea style="width:100%; height:150px;" name="custom_js">'.esc_textarea($js).'</textarea>';
}

// 保存処理
function save_custom_code_meta($post_id) {
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
  if (isset($_POST['custom_css'])) {
    update_post_meta($post_id, '_custom_css', wp_kses_post($_POST['custom_css']));
  }
  if (isset($_POST['custom_js'])) {
    update_post_meta($post_id, '_custom_js', wp_kses_post($_POST['custom_js']));
  }
}
add_action('save_post', 'save_custom_code_meta');

// フロントで出力
function insert_custom_code() {
  if (is_singular()) {
    $css = get_post_meta(get_the_ID(), '_custom_css', true);
    $js  = get_post_meta(get_the_ID(), '_custom_js', true);

    if (!empty($css)) {
      echo '<style>' . $css . '</style>';
    }
    if (!empty($js)) {
      echo '<script>' . $js . '</script>';
    }
  }
}
add_action('wp_head', 'insert_custom_code');   // CSS用
add_action('wp_footer', 'insert_custom_code'); // JS用





 使い方





    

  1. WordPress管理画面で投稿または固定ページを編集
    2. 




  2. 下部に「カスタムCSS」「カスタムJS」の欄が表示されます
    3. 




  3. 必要なコードを記述して保存
    4. 




  4. 表示ページにのみ反映されます
    5. 






 注意点





    

  • JavaScriptの文法ミスでページが崩れる可能性があるため注意してください
    • 




  • セキュリティ対策として wp_kses_post() を使用していますが、必要に応じて制限を調整できます
    • 




  • カスタム投稿タイプでも利用したい場合は 'post', 'page' を 'custom_post_type' に変更してください
    • 






 まとめ





この方法を使えば、特定ページだけにスタイルやスクリプトを簡単に追加できます。
プラグインを使わないため、サイトが軽量に保たれ、自由度の高いカスタマイズが可能です。

				


				

	

			

					
				WordPress			
			

	




				

									


							

		


		
		

	










	
			
	




	

	

		
		
	





	

	

		
目次