核心原理
WP 编辑器默认会过滤、自动补全标签、解析 HTML；想要原样显示代码不运行，用下面任意一种即可。
方法 1：编辑器自带「代码块」最推荐（古腾堡块编辑器）
- 新建文章，添加区块 → 搜索 代码 / Code
- 把你的 HTML / CSS / PHP 粘贴进去
-
自动：原样渲染、不执行、保留格式、防转义
✅ 最简单、零插件、官方原生支持
方法 2：经典编辑器 / 文本模式 用<pre><code>包裹
切换到文本 (HTML) 编辑模式，外面套两层标签：
html
预览
<pre><code>
这里粘贴你的全部HTML/CSS代码
<div class="box">测试</div>
<style>body{background:#fff;}</style>
</code></pre>
作用：
- <pre>保留换行空格
- <code>禁止浏览器解析标签，纯文本展示
方法 3：特殊字符转义（彻底 100% 不被解析，适合复杂长代码）
把 < 改成<， > 改成>
示例：
原代码：
html
预览
<div>Hello</div>
转义后粘贴：
html
预览
<div>Hello</div>
前台就会原样显示源码，完全不会被浏览器运行。
在线一键转义工具
直接搜：HTML 特殊字符转义器，粘贴自动转换，复制进文章即可。
方法 4：禁用自动格式化（防止 WP 乱改代码）
放到functions.php关闭 WP 洁癖过滤：
// 关闭WP自动格式化、乱改代码
remove_filter('the_content', 'wpautop');
remove_filter('the_excerpt', 'wpautop');
快速总结
- 古腾堡 → 直接用 Code 代码块 👉 日常首选
- 经典编辑器 →<pre><code>包裹
- 怕被执行乱解析 →< >转义< >
- 代码被自动换行乱改 → 关闭wpautop
