WordPress渲染修复：如何调整JS代码 是否需使用addaction()

是否需要调用add_action() #

必须调用。WordPress有标准化的脚本加载流程，所有自定义前端脚本都需要通过add_action()挂载到wp_enqueue_scripts钩子完成注册/入队，才能保证jQuery依赖正常加载、脚本执行顺序正确，避免和主题、其他插件的脚本产生冲突。直接零散插入JS代码大概率会出现$未定义、元素找不到的报错。

原代码存在的问题 #

• jQuery语法错误：css是jQuery对象的方法，不是属性，$(target).css.fontSize属于错误写法，无法生效
• 适配问题：WordPress内置的jQuery默认开启无冲突（noConflict）模式，没有绑定全局$别名，直接调用$会抛出未定义错误
• 执行时机问题：代码直接在脚本加载时执行，此时页面DOM还未渲染完成，无法找到.vsg-page-heading目标元素

修正后可直接使用的代码 #

方案1：内联脚本（无需额外创建JS文件） #

把以下代码添加到当前主题（推荐子主题，避免主题更新覆盖代码）的functions.php文件中即可：

add_action('wp_enqueue_scripts', 'vsg_add_custom_heading_script');
function vsg_add_custom_heading_script() {
    wp_add_inline_script('jquery-core', '
        jQuery(document).ready(function($) {
            function vsgHeading(target) {
                $(target).css("font-size", "50px");
            }
            vsgHeading(".vsg-page-heading");
        });
    ');
}

方案2：独立JS文件（适合代码量较大的场景） #

1. 先在当前主题目录下创建custom.js文件，写入修正后的JS代码：

jQuery(document).ready(function($) {
    function vsgHeading(target) {
        $(target).css("font-size", "50px");
    }
    vsgHeading(".vsg-page-heading");
});

2. 把以下代码添加到主题的functions.php文件中，完成脚本入队：

add_action('wp_enqueue_scripts', 'vsg_add_custom_heading_script');
function vsg_add_custom_heading_script() {
    wp_enqueue_script(
        'vsg-custom-heading',
        get_stylesheet_directory_uri() . '/custom.js',
        array('jquery'), // 声明依赖jQuery，系统会自动提前加载jQuery
        '1.0',
        true // 脚本在页脚加载，不阻塞页面首屏渲染
    );
}

代码说明 #

• 所有逻辑包裹在jQuery(document).ready()中，保证DOM树加载完成后再执行元素查找、修改操作
• 把$作为ready回调的参数传入，回调内部可以正常使用$简写编写jQuery代码，不会触发无冲突模式的报错
• 修正了css方法的调用语法，使用jQuery标准的.css(属性名, 属性值)格式设置样式

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