2026年7月18日

WordPressのスクリプト・スタイルが読み込まれない問題を解決する方法

テーマ・デザイン

はじめに

WordPressでwp_enqueue_script()やwp_enqueue_style()を呼んでもページにスクリプトやスタイルシートが読み込まれない・jQueryが複数回読み込まれてエラーになる・プラグインのCSSを上書きしたいがテーマのCSSより先に読み込まれてしまう・管理画面専用のスクリプトが一般画面にも読み込まれている・deferやasync属性を追加できないといった問題は、WordPress Enqueue APIの依存関係と優先度の仕組みを正しく理解することで解決できます。

症状・原因

wp_enqueue_scriptsフック以外の場所（initフックなど）でwp_enqueue_script()を呼んでいる
jQueryを別途読み込んでおりjqueryハンドルを依存関係に指定していないため競合している
管理画面のスクリプトをwp_enqueue_scriptsフックで登録しておりis_admin()の条件分岐がない
CSSの読み込み優先度（wp_enqueue_styleの優先度引数）を調整していない

解決手順

ステップ1：スクリプト・スタイルの状態を診断する

# 登録されているスクリプトを確認
wp eval "
global \$wp_scripts;
foreach (\$wp_scripts->registered as \$handle => \$script) {
    echo \$handle . ': ' . \$script->src . PHP_EOL;
}
" | grep -i jquery

# エンキューされているスクリプトを確認
wp eval "
global \$wp_scripts;
print_r(\$wp_scripts->queue);
"

# スタイルシートを確認
wp eval "
global \$wp_styles;
print_r(\$wp_styles->queue);
"

# jQuery のバージョンを確認
wp eval "echo \$GLOBALS['wp_scripts']->registered['jquery']->ver;"

ステップ2：スクリプトとスタイルを正しく登録する

// フロントエンド向けスクリプト・スタイル
add_action('wp_enqueue_scripts', function(): void {
    // テーマのメインスタイルシート
    wp_enqueue_style(
        'my-theme-style',                          // ハンドル名（ユニーク）
        get_stylesheet_uri(),                       // URL
        [],                                         // 依存関係
        wp_get_theme()->get('Version')              // バージョン
    );

    // プラグインのCSSを上書きするスタイル（依存関係に追加）
    wp_enqueue_style(
        'my-theme-override',
        get_template_directory_uri() . '/css/override.css',
        ['some-plugin-style'],  // some-plugin-style の後に読み込む
        '1.0.0'
    );

    // jQueryに依存するスクリプト（フッターに出力）
    wp_enqueue_script(
        'my-theme-script',
        get_template_directory_uri() . '/js/main.js',
        ['jquery'],  // jquery ハンドルを依存関係に指定
        '1.0.0',
        true  // フッター（wp_footer）に出力
    );
});

// 管理画面向けスクリプト（wp_enqueue_scripts とは別フック）
add_action('admin_enqueue_scripts', function(string $hook_suffix): void {
    // 特定の管理画面ページのみ
    if ($hook_suffix !== 'post.php' && $hook_suffix !== 'post-new.php') {
        return;
    }
    wp_enqueue_script(
        'my-admin-script',
        plugin_dir_url(__FILE__) . 'js/admin.js',
        ['jquery', 'wp-editor'],
        '1.0.0',
        true
    );
});

ステップ3：不要なスクリプトを削除する

// プラグインや WordPress デフォルトのスクリプト・スタイルを削除
add_action('wp_enqueue_scripts', function(): void {
    // 絵文字スクリプトを削除（パフォーマンス改善）
    wp_dequeue_script('wp-emoji-release');
    wp_deregister_script('wp-emoji-release');

    // 特定ページ以外でContactForm7のCSSを削除
    if (!is_page('contact')) {
        wp_dequeue_style('contact-form-7');
        wp_dequeue_script('contact-form-7');
    }

    // Gutenbergのブロックスタイルを削除（非ブロックテーマ）
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('wp-block-library-theme');
    wp_dequeue_style('global-styles');
}, 100);  // 優先度を高くしてプラグインの登録後に実行

// jQueryを外部CDNから読み込む（既存を置き換え）
add_action('wp_enqueue_scripts', function(): void {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script(
            'jquery',
            'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js',
            [],
            '3.7.1',
            true
        );
        wp_enqueue_script('jquery');
    }
}, 11);

ステップ4：defer・async属性とインラインスクリプトを追加する

// script_loader_tag フィルターで defer/async を追加
add_filter('script_loader_tag', function(string $tag, string $handle, string $src): string {
    $defer_handles = ['my-theme-script', 'my-analytics'];
    $async_handles = ['my-tracking'];

    if (in_array($handle, $defer_handles, true)) {
        return str_replace('<script ', '<script defer ', $tag);
    }
    if (in_array($handle, $async_handles, true)) {
        return str_replace('<script ', '<script async ', $tag);
    }
    return $tag;
}, 10, 3);

// WordPress 6.3以降: wp_enqueue_script の第6引数でdefer/async
wp_enqueue_script(
    'my-modern-script',
    get_template_directory_uri() . '/js/modern.js',
    [],
    '1.0.0',
    ['strategy' => 'defer', 'in_footer' => true]  // WordPress 6.3+
);

// インラインスクリプトを追加
wp_add_inline_script('my-theme-script', 'var myConfig = ' . wp_json_encode(['debug' => WP_DEBUG]) . ';', 'before');
wp_add_inline_style('my-theme-style', ':root { --primary: #0073aa; }');

ステップ5：条件分岐でスクリプトを最適化する

// 必要なページにのみスクリプトを読み込む
add_action('wp_enqueue_scripts', function(): void {
    // 投稿・ページのみ
    if (is_singular()) {
        wp_enqueue_script('my-comments-script', get_template_directory_uri() . '/js/comments.js', ['jquery'], '1.0.0', true);
    }

    // WooCommerceのショップページのみ
    if (function_exists('is_shop') && (is_shop() || is_product())) {
        wp_enqueue_style('my-woo-style', get_template_directory_uri() . '/css/woocommerce.css', ['woocommerce-general'], '1.0.0');
    }

    // ログインユーザーのみ
    if (is_user_logged_in()) {
        wp_enqueue_script('my-user-script', get_template_directory_uri() . '/js/user.js', ['jquery'], '1.0.0', true);
    }
});

注意事項

wp_dequeue_script()やwp_dequeue_style()は対象スクリプトがwp_enqueue_scriptsに登録された後に実行する必要があります。優先度を100以上にするか、登録したプラグインより後のフックで実行してください
WordPressのjQueryはnoConflictモードで動作します。$ではなくjQueryを使うか、(function($){...})(jQuery);でラップしてください

まとめ

WordPress スクリプト・スタイル問題の解決は①$wp_scripts->queueでエンキュー状態を確認・$wp_scripts->registeredで登録済みハンドルを確認・jQueryの二重読み込みを確認、②wp_enqueue_scriptsフックで登録・依存関係に['jquery']を指定・フッター出力は第5引数true・管理画面はadmin_enqueue_scriptsフックを使用、③wp_dequeue_script/styleは優先度100以上で実行・不要なプラグインCSSを条件付きで削除・絵文字スクリプトの削除でパフォーマンス改善、④WordPress 6.3以降は第6引数でstrategy=defer/async指定・wp_add_inline_scriptでインラインスクリプト追加・script_loader_tagフィルターでHTMLを直接変更、⑤is_singular/is_shop/is_user_logged_inで必要なページにのみ読み込んでページ速度を向上の手順で解決します。

Post Views: 2