WordPress自定义主题：解决向main.js传图片引用时veggies未定义问题

开发背景 #

正在开发一款自定义WordPress主题。

实现目标 #

在首页点击时，窗口内会散布“图章”效果，JavaScript功能已实现。

遇到的问题 #

需要在main.js中访问veggies对象，但无法从functions.php将其传递到main.js。已入队main.js文件并传入图片文件，但控制台提示veggies is not defined。

现有functions.php代码 #

add_action( 'admin_init', 'omedte_get_scripts' );

function omedte_get_scripts() {

    wp_enqueue_script('main.js', get_template_directory_uri() . "/main.js", array(), null, true);

    $veggies = array(
        "beetroot" => get_theme_file_uri('/assets/beetroot.svg'),
        "broccoli" => get_theme_file_uri('/assets/broccoli.svg'),
        "capsicum" => get_theme_file_uri('/assets/capsicum.svg'),
        "carrot" => get_theme_file_uri('/assets/carrot.svg'),
        "corn" => get_theme_file_uri('/assets/corn.svg'),
        "gourd" => get_theme_file_uri('/assets/gourd.svg'),
        "kale" => get_theme_file_uri('/assets/kale.svg'),
        "pumpkin" => get_theme_file_uri('/assets/pumpkin.svg'),
        "spinach" => get_theme_file_uri('/assets/spinach.svg')
    );

    wp_localize_script( 'omedte_javascript_file', 'veggies', $veggies );
}

现有main.js代码 #

let carrot = veggies.carrot;
let broccoli = veggies.broccoli;
let capsicum = veggies.capsicum;

let stamps = [
  carrot,
  broccoli,
  capsicum
]

修正方案 #

问题源于两个核心错误，逐一修正即可解决：

1. 钩子使用错误：admin_init仅在WordPress后台触发，前端页面无法执行该函数，需替换为前端脚本专用钩子wp_enqueue_scripts。
2. 脚本句柄不匹配：wp_localize_script的第一个参数必须与wp_enqueue_script定义的脚本句柄完全一致，当前两者不统一，导致本地化变量无法绑定到目标脚本。

修正后的functions.php代码 #

add_action( 'wp_enqueue_scripts', 'omedte_get_scripts' );

function omedte_get_scripts() {
    // 定义统一的脚本句柄
    $script_handle = 'omedte-main-script';
    wp_enqueue_script($script_handle, get_template_directory_uri() . "/main.js", array(), null, true);

    $veggies = array(
        "beetroot" => get_theme_file_uri('/assets/beetroot.svg'),
        "broccoli" => get_theme_file_uri('/assets/broccoli.svg'),
        "capsicum" => get_theme_file_uri('/assets/capsicum.svg'),
        "carrot" => get_theme_file_uri('/assets/carrot.svg'),
        "corn" => get_theme_file_uri('/assets/corn.svg'),
        "gourd" => get_theme_file_uri('/assets/gourd.svg'),
        "kale" => get_theme_file_uri('/assets/kale.svg'),
        "pumpkin" => get_theme_file_uri('/assets/pumpkin.svg'),
        "spinach" => get_theme_file_uri('/assets/spinach.svg')
    );

    // 使用统一的脚本句柄绑定本地化变量
    wp_localize_script( $script_handle, 'veggies', $veggies );
}

验证步骤 #

1. 保存修改后刷新前端页面
2. 打开浏览器控制台，输入veggies并回车，若能看到包含所有图片URL的对象，说明变量传递成功
3. 此时main.js中的代码可正常访问veggies.carrot等属性，控制台不再提示veggies is not defined

内容的提问来源于stack exchange，提问作者Allie Pallie