投稿・固定ページごとにカスタムCSS／JavaScriptを追加する方法

はじめに

WordPressでは、テーマ全体のCSSやJavaScriptを編集するだけでなく、「特定の投稿や固定ページだけ」をカスタマイズしたい場合があります。

以下では、特定の投稿や固定ページでのみJavaScriptを実行する、シンプルなコードを紹介しています。
この方法でも十分に動作しますが、ページ単位で柔軟にコードを切り替えるには少し不便です。

wordpress js 読み込み｜特定ページ限定

functions.phpにコードを追加し、指定した投稿記事やトップページだけにスクリプトを読み込ませる方法を解説します。is_singleやis_front_pageなどの条件分岐を使い、ピンポイントで処理を分ける実装コードを掲載。

motoki-design.co.jp

そこで、この方法をさらに発展させ、投稿や固定ページごとに自由にCSSやJavaScriptコードを登録・保存・出力できる汎用的な仕組みに改善します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

// メタボックスを追加
add_action('add_meta_boxes', function () {
  add_meta_box(
    'post_custom_css_js',
    'カスタムCSS / JavaScript',
    'render_post_custom_css_js',
    ['post', 'page'],
    'normal',
    'high'
  );
});


/**
 * メタボックスの入力フォームを出力
 *
 * @param WP_Post $post 投稿オブジェクト
 * @return void
 */
if (!function_exists('render_post_custom_css_js')):
function render_post_custom_css_js($post) {
  // 設定を取得
  $css = get_post_meta($post->ID, 'my_post_custom_css', true) ?: '';
  $js  = get_post_meta($post->ID, 'my_post_custom_js', true) ?: '';

  wp_nonce_field('post_custom_css_js_action', 'post_custom_css_js_nonce');

  ?>
  <p><strong>カスタムCSS</strong></p>
  <textarea name="post_custom_css" style="width: 100%; height: 150px;" placeholder="当ページ変更用のCSSコードのみを入力してください。styleタグは不要です。"><?= esc_textarea($css); ?></textarea>

  <p style="margin-top: 20px;"><strong>カスタムJavaScript</strong></p>
  <textarea name="post_custom_js" style="width: 100%; height: 150px;" placeholder="当ページ変更用のJavaScriptコードのみを入力してください。scriptタグは不要です。"><?= esc_textarea($js); ?></textarea>
  <?php
}
endif;


// 投稿データを保存
add_action('save_post', function ($post_id) {
  // nonceチェック
  if (!isset($_POST['post_custom_css_js_nonce']) || !wp_verify_nonce($_POST['post_custom_css_js_nonce'], 'post_custom_css_js_action')) {
    return;
  }

  // 自動保存チェック
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
    return;
  }

  // リビジョンは除外
  if (wp_is_post_revision($post_id)) {
    return;
  }

  // 権限チェック
  if (!current_user_can('edit_post', $post_id)) {
    return;
  }

  // CSSを保存
  if (isset($_POST['post_custom_css'])) {
    $css = wp_unslash($_POST['post_custom_css']);
    update_post_meta($post_id, 'my_post_custom_css', $css);
  } else {
    delete_post_meta($post_id, 'my_post_custom_css');
  }

  // JavaScriptを保存
  if (isset($_POST['post_custom_js'])) {
    $js = wp_unslash($_POST['post_custom_js']);
    update_post_meta($post_id, 'my_post_custom_js', $js);
  } else {
    delete_post_meta($post_id, 'my_post_custom_js');
  }
});


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  if (!is_singular()) {
    return;
  }

  $post_id = get_the_ID();
  if (!$post_id) {
    return;
  }

  $handle = 'post-custom-' . $post_id;

  // CSSを取得
  $css = get_post_meta($post_id, 'my_post_custom_css', true);
  if (!empty($css)) {
    wp_register_style($handle, false);
    wp_enqueue_style($handle);
    wp_add_inline_style($handle, $css);
  }

  // JavaScriptを取得
  $js = get_post_meta($post_id, 'my_post_custom_js', true);
  if (!empty($js)) {
    wp_register_script($handle, false, [], false, true);
    wp_enqueue_script($handle);
    wp_add_inline_script($handle, $js);
  }
});

さいごに

今回紹介した方法を使えば、投稿や固定ページ単位でCSSやJavaScriptを柔軟に追加できるようになります。
紹介ページのようにis_single()で条件を分岐させる必要もなく、管理画面から簡単にスクリプトを切り替えることができます。
テーマに関係なく、記事ごとにデザインや動作をカスタマイズしたい場合に、ぜひ活用してみてください。

ただし、Gutenbergエディターでは「カスタムHTML」ブロックを使えば、記事内で簡単にCSSやJavaScriptを追加できるため、場合によってはこの方法を特別に使う必要性を感じないかもしれません。