无法在自定义WordPress插件中引入Bootstrap文件求解决方案

代码应该放在哪里？ #

• 优先放在自定义插件的主文件中：插件启用时自动生效，不受主题切换影响，符合插件独立性原则
• 也可放在当前主题的functions.php中：但主题切换后会失效，仅适合特定主题场景

原有代码问题分析 #

第一段代码的问题 #

1. 误用前台钩子wp_enqueue_scripts，后台加载资源应使用专属钩子admin_enqueue_scripts
2. $plugin_url变量未定义，导致资源路径错误
3. Bootstrap JS依赖jQuery，未声明依赖关系，可能引发脚本报错

第二段代码的问题 #

1. 使用不推荐的wp_print_styles钩子，官方建议用wp_enqueue_scripts/admin_enqueue_scripts
2. 本地资源用硬编码绝对路径，站点迁移时会失效
3. 函数未闭合，语法错误导致代码无法执行

完美解决方案 #

方案1：在自定义插件中加载（推荐） #

后台加载Bootstrap

// 定义插件URL常量，方便后续调用
define('MY_PLUGIN_URL', plugin_dir_url(__FILE__));

function my_plugin_enqueue_bootstrap() {
    if (is_admin()) {
        // 加载Bootstrap CSS
        wp_enqueue_style(
            'admin-bootstrap-css',
            MY_PLUGIN_URL . 'admin/css/bootstrap.min.css',
            array(),
            '3.3.7',
            'all'
        );
        
        // 加载Bootstrap JS，声明依赖jQuery
        wp_enqueue_script(
            'admin-bootstrap-js',
            MY_PLUGIN_URL . 'admin/js/bootstrap.min.js',
            array('jquery'),
            '3.3.7',
            false // 如需页脚加载改为true
        );
    }
}
// 绑定后台专属钩子
add_action('admin_enqueue_scripts', 'my_plugin_enqueue_bootstrap');

前台加载Bootstrap

define('MY_PLUGIN_URL', plugin_dir_url(__FILE__));

function my_plugin_enqueue_bootstrap() {
    // 加载Bootstrap CSS
    wp_enqueue_style(
        'frontend-bootstrap-css',
        MY_PLUGIN_URL . 'frontend/css/bootstrap.min.css',
        array(),
        '3.3.7',
        'all'
    );
    
    // 加载Bootstrap JS，依赖jQuery
    wp_enqueue_script(
        'frontend-bootstrap-js',
        MY_PLUGIN_URL . 'frontend/js/bootstrap.min.js',
        array('jquery'),
        '3.3.7',
        true
    );
}
// 绑定前台专属钩子
add_action('wp_enqueue_scripts', 'my_plugin_enqueue_bootstrap');

方案2：在主题functions.php中加载 #

function theme_enqueue_bootstrap() {
    // 后台加载
    if (is_admin()) {
        wp_enqueue_style('admin-bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', array(), '3.3.7');
        wp_enqueue_script('admin-bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), '3.3.7', false);
    }
    // 前台加载（注释上方is_admin判断，启用下方代码）
    // wp_enqueue_style('frontend-bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', array(), '3.3.7');
    // wp_enqueue_script('frontend-bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), '3.3.7', true);
}
// 后台用此钩子：add_action('admin_enqueue_scripts', 'theme_enqueue_bootstrap');
// 前台用此钩子：add_action('wp_enqueue_scripts', 'theme_enqueue_bootstrap');

验证方法 #

1. 打开浏览器开发者工具（F12），切换到网络标签
2. 刷新页面，搜索bootstrap.min.css和bootstrap.min.js，确认是否成功加载
3. 若出现404错误，检查插件目录结构是否与代码中的路径匹配（如admin/css/是否存在于插件根目录）

内容的提问来源于stack exchange，提问作者Muhammad Bilal