如何在WordPress文档加载就绪后插入自定义JS且版本更新代码不被覆盖

以下方案均无需使用子主题，更新后代码不会丢失，输入体验优于默认自定义面板小输入框：

方案1：代码片段管理插件（最推荐） #

核心优势：

• 自带带语法高亮的大尺寸代码编辑器，支持缩进、代码校验，编写体验远优于默认输入框
• 代码独立于主题、WordPress核心存储，站点、主题更新不会丢失
• 可单独设置代码加载时机、生效范围，支持一键启停单个代码片段

操作步骤：

• 进入WordPress后台插件安装页面，搜索安装Code Snippets插件并启用
• 点击左侧菜单栏「代码片段」→「添加新片段」，选择「前端JS代码」类型
• 加载规则勾选「DOM加载完成后执行」，在大编辑框内输入自定义JS代码
• 保存并启用片段即可生效

方案2：核心自带HTML小工具实现（无需额外插件） #

核心优势：

• 完全依托WordPress原生功能，无需安装第三方插件
• 自定义HTML区块编辑框支持大段代码输入，无默认输入框的尺寸限制
• 只要保留页脚小工具区域，主题更新不会覆盖代码内容

操作步骤：

• 进入后台「外观」→「小工具」，向全站公共页脚的小工具区域添加「自定义HTML」区块
• 在编辑框内粘贴如下格式代码，中间替换为你的自定义JS逻辑即可：

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 此处填写你的自定义JS代码，所有逻辑会在文档完全加载就绪后执行
});
</script>

• 保存小工具即可全局生效

注意事项 #

• 新增代码前建议先在本地测试语法正确性，避免引发前端页面报错
• 重要代码建议提前本地备份，避免误操作删除

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