首页 > 文章专栏 > 正文

如何彻底禁用 WordPress 可视化编辑器?极简纯代码编辑与 WPCode 避坑实操指南

WordPress 默认自带的可视化编辑器(Visual Editor / Gutenberg 区块编辑器)对于刚入门的新手来说非常方便,但在你需要精准控制内容格式与 HTML 标记时,它往往会变成一种阻碍。

无论你是需要频繁粘贴 PHP/CSS 代码段、编写自定义 HTML 标记,还是单纯喜欢纯文本编辑的极简与高效,禁用可视化编辑器都能极大地提升你的工作效率。

好消息是,经过大量实操测试,我们总结出了一套最简单、最安全的解决方案:只需一行简单的代码,即可安全禁用可视化编辑器,默认直接开启干净纯粹的代码编辑器(Code Editor)。在本文中,我们将手把手带你完成具体配置实操。

Remove Visual Editor Mode in WordPress

快速解答:如何快速禁用 WordPress 可视化编辑器?

禁用 WordPress 可视化编辑器最简单、最安全的方法是使用 WPCode 插件。通过 WPCode 添加一行 PHP 过滤器代码,即可仅为你当前的用户账号禁用可视化编辑器,完全无需直接修改主题的 functions.php 文件,防止误操作引发网站崩溃。

一、 为什么要移除 WordPress 的可视化编辑器模式?

部分 WordPress 用户和开发者之所以选择移除可视化编辑器,主要是为了避免系统自动添加额外的行内样式或乱改 HTML 标签,从而完全掌控内容的底层代码。

默认情况下,WordPress 打开文章编辑器时会自动加载可视化模式(Visual Editor Mode)。这是一个典型的“所见即所得”(WYSIWYG)界面。在该界面中,你可以直观地插入文本块、图片、视频、按钮等元素,并使用顶部的工具栏修改文本颜色、字体排版、对齐方式以及嵌入媒体。

Visual editor mode in WordPress

虽然这种模式对大多数普通用户很友好,但它存在一个显着的缺点:可视化编辑器经常会在后台自动应用意料之外的格式,或者生成冗余的 HTML 标签,清理起来非常麻烦。

相比之下,代码编辑器(Code Editor / Text Mode) 提供了更加极简的界面。它不显示任何排版按钮或可视化预览,而是直接展示内容底层的原始 HTML 代码:

Code Editor mode in WordPress

  • 无干扰排版: 没有任何多余的样式转换,所有 HTML 标记一目了然。
  • 精准掌控: 非常适合需要在文章中嵌入代码段、自定义表格或特定 Div 结构的极客站长。
  • 极致简洁: 免去加载庞大可视化区块组件的内存开销。

二、 如何彻底禁用 WordPress 可视化编辑器(一步步实操)

虽然你可以通过直接在主题的 functions.php 文件中添加自定义代码来关闭可视化编辑器,但这种做法存在不小的风险——代码中哪怕出现一个微小的标点错误,都可能导致网站报错白屏(500 崩溃),甚至将你锁定在后台之外。

因此,我们强烈推荐使用免费的 WPCode 插件(全球最受欢迎的代码段管理工具)。与直接修改主题文件不同,WPCode 允许你在不触碰核心源码的情况下安全添加自定义代码。更棒的是,它拥有内置的错误捕获机制——如果代码存在语法问题,WPCode 会自动停用故障代码,确保网站持续平稳运行。

注:WordPress 的 user_can_richedit 过滤器是基于用户权限进行检查的,因此本代码仅会为你当前登录的用户账号禁用可视化编辑器,站点上的其他普通作者或管理员用户仍可正常使用可视化模式。

具体操作步骤:

  1. 安装并激活 WPCode 插件: 在 WordPress 后台点击 插件 » 安装插件,搜索“WPCode”,点击安装并激活。
  2. 新建代码段: 在 WP 后台左侧导航栏,点击 Code Snippets » + Add Snippet
  3. 选择自定义代码类型: 在页面顶部找到“Add Your Custom Code (New Snippet)”选项,点击下方的 Use Snippet 按钮。

Choose Add Your Custom Code option

  1. 在弹出的界面中,将右侧代码类型(Code Type)下拉菜单选择为 PHP Snippet。在顶部标题栏输入名称,例如 禁用可视化编辑器 (Disable Visual Editor)

Choosing PHP snippet in WPCode

  1. 在“Code Preview”(代码预览)框中输入以下自定义代码:
<?php
// 强制为当前登录用户关闭可视化编辑器模式(默认直接使用代码编辑器)
add_filter('user_can_richedit', '__return_false');
  1. 将右上角开关从“Inactive”(未激活)切换为 Active(已激活),然后点击右上角的 Save Snippet(保存代码段) 按钮。

Activate snippet to remove the visual editor

配置完成后,尝试打开新文章,编辑器已自动切换为纯净的代码/文本编辑器界面:

Code Editor preview

三、 如何重新恢复 WordPress 可视化编辑器模式?

如果你在未来改变了主意,想要重新恢复可视化编辑器,只需进入 WP 后台的 Code Snippets » All Snippets 页面,找到该代码段并将其开关切换为 Off(停用)

Deactivate the snippet that disables the visual editor

关闭后,系统将自动恢复默认的可视化编辑器风格:

Visual editor mode in WordPress

四、 进阶技巧:开启无干扰专注编辑模式 (Distraction-Free Mode)

在代码编辑器下,可以开启 WordPress 内置的无干扰全屏模式。点击编辑界面右上角的三点菜单图标(⋮),勾选 Distraction free(无干扰) 选项即可:

Activate the Distraction free mode

五、 常见问题解答 (FAQ)

Q1:禁用可视化编辑器会影响经典编辑器 (Classic Editor) 吗?
A:不会影响。无论是 Gutenberg 区块编辑器还是 Classic Editor,代码均能完美生效并锁定在文本模式。

Q2:如何隐藏后台的 Screen Options(显示选项)选项卡?
A:点击页面右上角“Screen Options”,取消勾选不需要的模块框。或添加 add_filter('screen_options_show_screen', '__return_false'); 全局禁用。

Q3:如何禁用 WP 后台的文件代码编辑器?
A:在 wp-config.php 文件中添加 define('DISALLOW_FILE_EDIT', true); 指令,彻底切断后台文件编辑入口,大幅提高站点安全等级。

文章标签:#functions.php#WordPress#WPCode#代码片段#编辑器优化

版权声明:本文为「猫哥建站」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

本文链接:https://maogeo.top/blog/如何彻底禁用-wordpress-可视化编辑器?极简纯代码编辑与

如何彻底禁用 WordPress 可视化编辑器?极简纯代码编辑与 WPCode 避坑实操指南 - 猫哥技术专栏 | 猫哥建站