如何向WordPress添加原生JavaScript？新手开发问题咨询

你当前的认知存在两个偏差：一是仅调用add_action无法直接完成JS代码添加，二是你编写的JS代码本身存在语法和API使用错误，以下是明确的操作步骤和规范：

第一步：先修正JS代码的错误 #

你写的代码不是标准原生JavaScript，存在3个明显问题：

• $(target)是jQuery的选择器语法，原生JS获取DOM元素需要使用document.querySelector()（匹配单个元素）或document.querySelectorAll()（匹配多个元素）
• 操作DOM样式的属性名书写错误，CSS的font-size在JS里需要写成驼峰格式fontSize，直接写fontsize不会生效
• 没有做DOM加载状态判断，代码如果在DOM渲染完成前执行，会找不到目标元素报错
  修正后的可运行原生JS代码如下：

function TopHeading(target) {
    const element = document.querySelector(target);
    // 增加元素存在判断，避免页面没有对应元素时抛出JS错误
    if (element) {
        element.style.fontSize = "20px";
    }
}
// 等整个页面DOM结构加载完成后再执行逻辑
document.addEventListener('DOMContentLoaded', () => {
    TopHeading(".top-page-heading");
});

第二步：通过WordPress官方规范挂载JS #

WordPress没有addaction("Location" , "Function Name")这种写法，正确的全局挂载函数是add_action，且不能直接通过该函数传入JS代码，必须搭配官方提供的脚本加载钩子使用，根据使用场景分两种实现方式：

方式1：输出内联JS（适合少量代码场景） #

如果代码量很小不需要单独存文件，可以把JS代码包裹在<script>标签内，通过wp_footer（推荐，不阻塞页面渲染）或wp_head钩子输出到页面，代码直接放到当前主题的functions.php文件中即可：

add_action('wp_footer', 'output_custom_topheading_js');
function output_custom_topheading_js() {
    ?>
    <script>
    function TopHeading(target) {
        const element = document.querySelector(target);
        if (element) {
            element.style.fontSize = "20px";
        }
    }
    document.addEventListener('DOMContentLoaded', () => {
        TopHeading(".top-page-heading");
    });
    </script>
    <?php
}

方式2：加载独立JS文件（正式项目推荐） #

如果JS代码量较大，建议把代码存为独立的.js文件（比如存在主题目录下的js/custom.js路径），通过wp_enqueue_scripts钩子正式挂载，这是WordPress官方推荐的脚本加载方式，能自动处理加载顺序、依赖冲突问题，示例代码：

add_action('wp_enqueue_scripts', 'load_custom_scripts');
function load_custom_scripts() {
    wp_enqueue_script(
        'custom-topheading-script', // 脚本的唯一标识，不能和其他脚本重名
        get_template_directory_uri() . '/js/custom.js', // JS文件的访问路径
        array(), // 依赖项，原生JS留空数组即可，如果依赖jQuery就填array('jquery')
        '1.0.0', // 脚本版本号，用于更新时清理浏览器缓存
        true // 是否把脚本放到页脚加载，选true可以提升页面加载速度
    );
}

必须遵守的开发规范 #

• 前端页面的脚本统一用wp_enqueue_scripts、wp_head、wp_footer三个钩子挂载，后台管理页脚本用admin_enqueue_scripts钩子，登录页脚本用login_enqueue_scripts钩子，不要混用
• 不要直接在主题模板文件里硬写<script>标签引入脚本，不符合WordPress开发规范，很容易和其他插件、主题的脚本产生冲突
• 如果编写jQuery代码，必须在wp_enqueue_script时声明对jQuery的依赖，且代码里用jQuery代替$别名，避免和其他JS库的$变量冲突

所有挂载逻辑都建议先在本地开发环境测试生效后再同步到线上站点，修改functions.php前建议备份原文件，避免代码语法错误导致站点无法访问

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