如何在WordPress的functions.php中调用jQuery及从PHP调用JS

先帮你排查下现有代码的问题，再一步步教你正确的实现方式：

一、你的代码为什么不生效？ #

有两个关键问题：

1. JS语法错误：你写的$function()是错的，应该是$(function()（少了个左括号），这个语法错误会直接导致代码完全不执行。
2. 脚本加载方式错误：在functions.php里直接写<script>标签是不符合WordPress规范的，这种写法无法保证脚本在jQuery之后加载（WordPress默认加载jQuery，但如果你的脚本先于jQuery加载，$或jQuery就会未定义），而且容易引发脚本冲突。

二、正确的JS加载方式 #

我们用WordPress官方推荐的wp_enqueue_script方法来加载脚本，步骤如下：

1. 创建独立的JS文件
   在你的主题/子主题目录下新建一个custom-script.js文件，写入以下代码：

// 用jQuery的ready事件确保DOM加载完成后执行，同时兼容WordPress的noConflict模式
jQuery(document).ready(function($) {
  $("#testni").attr("value", "petra");
});

这里用jQuery代替$是因为WordPress默认启用了jQuery的noConflict模式，直接用$可能会报错；不过我们把$作为参数传入ready函数，这样在函数内部就可以正常用$了。

2. 在functions.php中注册并加载脚本
   打开functions.php，添加以下PHP代码：

function enqueue_custom_frontend_scripts() {
    // 注册并加载自定义脚本，指定依赖jQuery
    wp_enqueue_script(
        'custom-script', // 脚本的唯一标识ID
        get_stylesheet_directory_uri() . '/custom-script.js', // 脚本的URL路径（子主题用这个，父主题用get_template_directory_uri()）
        array('jquery'), // 依赖的脚本，这里依赖jQuery，WordPress会自动确保jQuery先加载
        '1.0', // 脚本版本号，方便缓存更新
        true // 是否在页脚加载，true表示页脚加载，优化页面加载速度
    );
}
// 挂载到wp_enqueue_scripts钩子，确保在前端正确加载
add_action('wp_enqueue_scripts', 'enqueue_custom_frontend_scripts');

三、如何实现PHP与JS的交互（从PHP“调用”JS） #

PHP是服务器端语言，JS是客户端语言，不能直接“调用”，但可以通过以下几种方式实现数据传递或逻辑触发：

方式1：用wp_localize_script传递PHP变量给JS（最推荐） #

如果需要把PHP中的动态值（比如后台设置、自定义字段值）传递给JS，用这个方法最规范：

修改functions.php中的代码，添加wp_localize_script：

function enqueue_custom_frontend_scripts() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/custom-script.js',
        array('jquery'),
        '1.0',
        true
    );

    // 定义要传递给JS的PHP数据
    $custom_data = array(
        'inputDefaultValue' => 'petra', // 这里可以替换成PHP动态值，比如get_option('my_setting')或get_post_meta()
        'message' => 'Hello from PHP!'
    );

    // 将PHP数据传递给JS，生成全局变量CustomData
    wp_localize_script('custom-script', 'CustomData', $custom_data);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_frontend_scripts');

然后修改custom-script.js，使用传递过来的变量：

jQuery(document).ready(function($) {
    $("#testni").attr("value", CustomData.inputDefaultValue);
    console.log(CustomData.message); // 控制台会输出"Hello from PHP!"
});

方式2：在模板中输出内联JS（临时场景可用） #

如果只是临时需求，也可以在PHP模板文件（比如footer.php）中直接输出JS，但要注意转义内容避免安全问题：

<?php
// 放在footer.php的</body>标签之前
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
    // 用esc_js转义PHP输出的内容，防止XSS攻击
    $("#testni").attr("value", "<?php echo esc_js('petra'); ?>");
});
</script>

方式3：用wp_add_inline_script添加内联JS（无需独立文件） #

如果不想创建独立JS文件，可以用这个方法把内联JS附加到已加载的脚本上：

function enqueue_custom_frontend_scripts() {
    // 先确保jQuery加载
    wp_enqueue_script('jquery');

    // 定义内联JS代码
    $inline_js = '
        jQuery(document).ready(function($) {
            $("#testni").attr("value", "petra");
        });
    ';

    // 将内联JS附加到jQuery脚本之后
    wp_add_inline_script('jquery', $inline_js);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_frontend_scripts');

按照上面的方法修改后，你的JS代码应该就能正常生效了，也能实现PHP和JS的交互~

内容的提问来源于stack exchange，提问作者Petra Žagar