全文约 958 字，读完约 3 分钟
做了第三个小工具，继续免费分享。
经常有朋友问我：想在博客侧边栏放一段自定义代码（广告、统计、小红书卡片、自定义HTML），但不想改主题文件，也不想装那种臃肿的页面编辑器。怎么办？
答案是：一个专门干这个的小工具。
这是什么
「侧边栏代码小工具」是一个 WordPress 插件，让你在侧边栏、页脚、甚至文章正文里直接粘贴并运行 HTML / CSS / JavaScript 代码。
不执行 PHP——这点很重要，安全可控。你粘贴的是什么，浏览器就渲染什么，不会在服务端被解析。
核心功能
- 语法高亮编辑器：后台编辑代码时用 CodeMirror 高亮，写 HTML/CSS/JS 一目了然
- 三种使用方式：传统小工具、Gutenberg 区块、短代码
- 可见性控制：所有人 / 仅登录用户 / 仅管理员
- 显示位置控制：所有页面 / 仅首页 / 仅文章页 / 仅页面 / 仅归档 / 仅搜索结果
- 不执行 PHP：从根本上避免代码注入风险
使用场景
举几个实际例子：
- 侧边栏放一段 Google AdSense 广告代码
- 首页放一个小红书/微信公众号二维码卡片
- 仅在文章页显示一个”目录”或”相关阅读”自定义模块
- 仅登录用户可见的会员专属内容
- 仅管理员可见的调试信息（比如你自己的网站访问统计）
怎么用
方式一：传统小工具
- 后台上传插件，启用
- 进入「外观 → 小工具」，添加「传统小工具 / Legacy Widget」→ 选择「代码小工具 (HTML/CSS/JS)」
- 粘贴代码，选择可见性和显示位置，保存
方式二：Gutenberg 区块
如果你用古腾堡编辑器，直接在区块列表里搜”代码小工具”，加进去就行。
方式三：短代码
在文章或页面里直接写：
安全设计
这个插件最核心的设计原则就是安全：
- 只在浏览器端渲染，不经过 PHP 解析器，从根源上杜绝代码执行漏洞
- 所有输出都经过
wp_kses_post等适当过滤 - 可见性选项支持”仅管理员”，你可以放一些只有自己能看到的调试代码
许可
GPLv2，完全免费，随便用。
三个小工具凑齐了：站点性能卡片、今日时光时钟、侧边栏代码小工具。侧栏想怎么玩就怎么玩。
本文为作者原创，未经授权禁止转载。转载请保留原文链接并注明出处。
