【WordPress】特定のページでのみCSS・JSを読み込む方法｜条件分岐・子テーマパス・キャッシュ対策

add_action('wp_enqueue_scripts', function () {
  if (is_page('contact')) {

    // CSS：子テーマの /css/contact.css を読み込む
    $css = get_stylesheet_directory_uri() . '/css/contact.css';
    wp_enqueue_style(
      'contact-style',
      $css,
      array(),
      filemtime(get_stylesheet_directory() . '/css/contact.css') // 更新時に自動でキャッシュ更新
    );

    // JS：jQuery依存・フッター読み込み
    $js = get_stylesheet_directory_uri() . '/js/contact.js';
    wp_enqueue_script(
      'contact-script',
      $js,
      array('jquery'), // 依存（第3引数）
      filemtime(get_stylesheet_directory() . '/js/contact.js'),
      true // フッター（body閉じ前）で読み込む
    );
  }
});

// スラッグで指定（複数OK）
if (is_page(array('contact', 'access'))) { /* ... */ }

// 投稿・固定ページのIDで指定
if (is_singular() && in_array(get_the_ID(), array(123, 456), true)) { /* ... */ }

// 特定のページテンプレートのとき
if (is_page_template('template-lp.php')) { /* ... */ }

// 特定カテゴリーの投稿・アーカイブ
if (is_singular('post') && has_category('news')) { /* ... */ }

add_action('wp_enqueue_scripts', function () {
  if (!is_singular()) {
    return;
  }
  $file = get_post_meta(get_the_ID(), 'extra_css', true); // 例：'lp.css'
  if ($file) {
    $path = get_stylesheet_directory() . '/css/' . $file;
    if (file_exists($path)) { // 存在するファイルだけ読み込む
      wp_enqueue_style(
        'extra-css-' . sanitize_title($file),
        get_stylesheet_directory_uri() . '/css/' . $file,
        array(),
        filemtime($path)
      );
    }
  }
});