WordPress通过动作钩子挂载函数时变量未定义问题

你遇到的未定义变量报错本质是PHP变量作用域限制：函数内部声明的变量默认是局部变量，仅在当前函数内可访问，函数执行完成后局部变量会被自动回收，即使你通过钩子触发了函数执行，模板文件也无法直接读取函数内部赋值的变量。

方案1：保留现有钩子逻辑，使用全局变量传递 #

如果你想沿用现在的钩子挂载赋值逻辑，只需要在定义变量、调用变量的位置都用global关键字声明变量为全局作用域即可。

修改functions.php代码 #

function jp_frontpage_data() {
    // 声明后续要用到的变量为全局变量
    global $hero_title, $hero_subtitle, $hero_bg_overlay;
    
    $hero_title             = get_theme_mod( 'hero_title', 'Creativity Starts Here' );
    $hero_subtitle          = get_theme_mod( 'hero_subtitle', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' );
    $hero_bg_overlay        = get_theme_mod( 'hero_background_overlay', 'on' );
    // 新增变量时记得同步在上方global声明中添加
}
add_action( 'before-main-front', 'jp_frontpage_data' );

调用变量前先声明全局（front-page.php） #

get_header( 'front' );
do_action( 'before-main-front' );

// 调用变量前先声明全局
global $hero_title, $hero_subtitle, $hero_bg_overlay;

// 后续即可正常调用变量，注意输出时做安全转义
echo esc_html( $hero_title );

方案2：封装数据获取函数（更推荐，无全局变量污染） #

不需要依赖钩子提前赋值，直接封装统一的数据获取函数即可，get_theme_mod本身自带WordPress缓存，不会产生重复查询的性能问题，维护性更好。

在functions.php中添加函数 #

function jp_get_frontpage_data() {
    return [
        'hero_title'       => get_theme_mod( 'hero_title', 'Creativity Starts Here' ),
        'hero_subtitle'    => get_theme_mod( 'hero_subtitle', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' ),
        'hero_bg_overlay'  => get_theme_mod( 'hero_background_overlay', 'on' ),
        // 新增自定义字段直接在数组中补充即可
    ];
}

front-page.php中直接调用 #

get_header( 'front' );
// 直接获取所有首页数据
$frontpage_data = jp_get_frontpage_data();

// 调用时读取对应数组键值即可
echo esc_html( $frontpage_data['hero_title'] );

注意：输出Customizer获取的用户可编辑内容时，必须使用esc_html()、wp_kses()等函数做安全转义，避免XSS漏洞。

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