您现在的位置是：首页 > WordPress教程WordPress教程

如何在WordPress中添加自定义JavaScript

WP集市 2025-08-26 【WordPress教程】 222人已围观

先说最直接的办法：往主题文件里硬塞。比如你想让JS在所有页面都跑，打开主题编辑器（外观→主题文件编辑器），找到footer.php，滚到最底下，在</body>标签上面敲<script>标签，把你的JS代码塞进去，像这样：
```
<script>
// 这里写你的JS代码，比如简单的弹窗
alert('Hello WordPress!');
</script>
</body>
```
但这招有个坑：主题一更新，你写的代码就没了。所以用之前一定备份footer.php，或者干脆用子主题，子主题的文件更新不会覆盖。

正经程序员都用functions.php注册入队，这是WordPress推荐的玩法，规范还安全。先在主题文件夹里建个js文件夹（比如wp-content/themes/你的主题/js/），里面放个script.js，写你的JS代码。然后打开functions.php（主题编辑器里找），加这段代码：

function custom_load_my_js() {
// 注册并加载JS文件
wp_enqueue_script( 
    'my-custom-script', // 唯一标识，随便起个名
    get_template_directory_uri() . '/js/script.js', // 文件路径，get_template_directory_uri()会自动拼主题目录
    array('jquery'), // 依赖项，比如需要jQuery就写这个，不需要就空数组()
    '1.0', // 版本号，随便写
    true // 放footer里加载，优化速度，false就是放header
);
}
// 挂到wp_enqueue_scripts钩子上，让WordPress加载时执行
add_action( 'wp_enqueue_scripts', 'custom_load_my_js' );

解释下：array('jquery')意思是“先加载jQuery再加载我的JS”，WordPress自带jQuery，不用自己引。如果你的代码不依赖其他库，这里就写array()。true放footer好，因为JS加载会阻塞渲染，放后面页面加载快。

小白不想碰代码？用插件！搜“Insert Headers and Footers”，安完启用，去设置里找“Header and Footer”，在“Footer Scripts”框里直接贴JS代码，保存就行。比如：
```
// 贴这里，插件会自动帮你加到所有页面的footer里
console.log('用插件加的JS，简单吧！');
```
这招不用改任何主题文件，适合完全不懂代码的人。就是插件多了可能拖慢网站，偶尔用用还行。

只需要在某个页面/帖子里加JS？用古腾堡编辑器的“自定义HTML”块。编辑页面时，点左上角“+”，搜“自定义HTML”，拖到内容里，然后写：

<script>
// 这段JS只在当前页面生效，比如给这个页面加个按钮点击事件
document.addEventListener('DOMContentLoaded', function() {
let btn = document.createElement('button');
btn.textContent = '点我';
btn.onclick = () => alert('只在这个页面有用！');
document.body.appendChild(btn);
});
</script>

注意：这种方法JS只在当前页面加载，其他页面看不到。适合单个页面的特殊交互，比如活动页、落地页。

最后提一嘴注意事项：