WordPress全局变量传递至wp_localize_script时显示NULL问题求助

问题 #

在模板文件product-list-section.php中遍历产品并将数据存入全局变量$product_filter_data时，var_dump显示数据正常；但在setup.php的enqueue_scripts函数中调用该全局变量，尝试通过wp_localize_script传递至JS时，var_dump显示变量为NULL，无法完成数据传递。

模板文件product-list-section.php代码 #

global $product_filter_data;
$product_filter_data = array();

// Loop products, grab specific pieces of data and add to $product_filter_data array.
$product_information_system_type = $product_information['product_information_filters']['system_type']['value'];

// Add to $product_filter_data
if( !empty( $product_information_system_type ) ) {
    $product_filter_data[] = $product_information_system_type;
}

此时var_dump结果：

/template-parts/product-list-section.php:374:
array (size=7)
  0 => string 'system_type__ac_ups' (length=19)
  1 => string 'input__ac_1_phase' (length=17)
  2 => string 'output__ac_3_phase' (length=18)
  3 => string 'technology__thyristor_based' (length=27)
  4 => string 'battery_voltage_max__720' (length=24)
  5 => string 'capacity__900' (length=13)
  6 => string 'market_industry__oil_and_gas' (length=28)

setup.php中的代码 #

function enqueue_scripts() {
    global $product_filter_data;
    
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', true );

    wp_localize_script('custom-js', 'product_filter_data', array('php_product_filter_data' => $product_filter_data));
}

add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

此时var_dump结果：

/app/public/wp-content/themes/testtheme/functions/setup.php:22:null

原因分析 #

• WordPress钩子执行顺序问题：wp_enqueue_scripts钩子的执行时间早于模板文件的加载时间。当enqueue_scripts函数运行时，product-list-section.php还未被加载，全局变量$product_filter_data还没完成赋值，因此读取到的是NULL。
• 全局变量的作用域虽为全局，但只有在变量被定义赋值后，后续调用才能获取有效值，这里的执行顺序导致赋值操作晚于读取操作。

解决办法 #

方案1：将数据收集逻辑移到wp_enqueue_scripts钩子中（推荐） #

直接在enqueue_scripts函数内部完成产品数据收集，避免依赖模板加载顺序：

function enqueue_scripts() {
    $product_filter_data = array();
    
    // 替换为你实际的产品查询逻辑，示例以WP_Query获取产品为例
    $product_query = new WP_Query(array(
        'post_type' => 'product', // 根据你的产品自定义类型调整
        'posts_per_page' => -1
    ));
    
    if ($product_query->have_posts()) {
        while ($product_query->have_posts()) {
            $product_query->the_post();
            // 获取产品信息，根据实际逻辑调整
            $product_information = get_post_meta(get_the_ID(), 'product_information', true);
            $product_information_system_type = $product_information['product_information_filters']['system_type']['value'];
            
            if (!empty($product_information_system_type)) {
                $product_filter_data[] = $product_information_system_type;
            }
        }
        wp_reset_postdata();
    }
    
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
    wp_localize_script('custom-js', 'product_filter_data', array('php_product_filter_data' => $product_filter_data));
}

add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

方案2：使用wp_footer钩子延迟传递数据 #

利用wp_footer钩子（执行时间晚于模板加载）来调用wp_localize_script，确保变量已完成赋值：

1. 先注册脚本，不做本地化：

function enqueue_scripts() {
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

2. 添加wp_footer钩子处理本地化：

function localize_product_data() {
    global $product_filter_data;
    if (!empty($product_filter_data)) {
        wp_localize_script('custom-js', 'product_filter_data', array('php_product_filter_data' => $product_filter_data));
    }
}
add_action('wp_footer', 'localize_product_data');

方案3：使用临时选项存储数据 #

在模板中收集数据后存入临时选项，再在enqueue_scripts中读取，最后清理：

1. 修改模板文件：

global $product_filter_data;
$product_filter_data = array();

// 原有数据收集逻辑
$product_information_system_type = $product_information['product_information_filters']['system_type']['value'];
if( !empty( $product_information_system_type ) ) {
    $product_filter_data[] = $product_information_system_type;
}

// 存入临时选项
update_option('temp_product_filter_data', $product_filter_data);
// 页面加载完成后清理临时选项
add_action('shutdown', function() {
    delete_option('temp_product_filter_data');
});

2. 修改setup.php：

function enqueue_scripts() {
    $product_filter_data = get_option('temp_product_filter_data', array());
    
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
    wp_localize_script('custom-js', 'product_filter_data', array('php_product_filter_data' => $product_filter_data));
}

add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

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