Wordpres的php代码如何向网页js脚本传递变量

Wordpres的php代码如何向网页js脚本传递变量

问题:js中需要判断当前网页是否是前端时,需要php代码中把判断的变量传递到前端js中

方案:传递给自己的脚本(推荐)

function theme_custom_scripts() {
    // 先注册/排队依赖
    wp_enqueue_script('jquery');
    
    // 准备要传递的数据
    $wp_vars = array(
        'is_front_page' => is_front_page(),
        'ajax_url'      => admin_url('admin-ajax.php'),
        'theme_url'     => get_template_directory_uri(),
        'home_url'      => home_url('/'),
        'current_url'   => get_permalink(),
    );
    
    // 注册 public.js 但不立即排队
    wp_register_script(
        'public-js',
        JS_DIR . 'public.js',
        array('jquery'),
        THEME_VERSION,
        true
    );
    
    // 向 public-js 传递数据
    wp_localize_script('public-js', 'wp_vars', $wp_vars);
    
    // 最后排队脚本
    wp_enqueue_script('public-js');
}
add_action('wp_enqueue_scripts', 'theme_custom_scripts');

注意点:

  1. wp_localize_script('jquery', ...) 是错误的
    • jquery 是 WordPress 核心脚本句柄
    • 不应该直接向核心脚本传递变量
    • 应该传递给你的脚本,或者使用独立的脚本句柄
  2. 变量可能传递失败
    • jquery 可能已经加载完成,无法再添加数据
    • 变量应该在 public-js 之前定义

2. 在前端public.js脚本中,就可以拿到wp_vars 变量来进行判断是否是网站首页

$(function () {

    // 直接使用 WordPress 传递的变量,仅首页初始化对象
    if (typeof wp_vars !== 'undefined' && wp_vars.is_front_page) {
        // 首页专用代码
    }

Comments are closed.