如何使 WordPress 编辑器看起来像您的前端网站

WordPress 编辑器——你编写和格式化大量内容的地方——应该是 WYSIWYG（“所见即所得”）。但是，虽然它确实实时展示了基本样式，但它并不是真正的 WYSIWYG，因为 视觉的 WordPress 编辑器的选项卡实际上与您的内容在前端网站上的外观不匹配。

结果，你被迫击中预览一遍又一遍地查看您的帖子发布后的外观。但是如果有更好的方法呢？一种让您跳过不断的 alt-tabbing 和预览并直接在 WordPress 编辑器中查看最终产品的方法？有，我会告诉你怎么做。

在这篇文章中，我将向您展示如何在 WordPress 编辑器中模拟 WordPress 前端。

你需要弄脏你的手……

不幸的是，与自定义 WordPress 管理员不同，没有任何插件可以让您的 WordPress 编辑器自动模拟您的前端网站。这意味着你需要深入挖掘并弄脏你的手。但我向你保证，我会让这一切变得尽可能轻松。当你完成后，你会满意地让你的 WordPress 编辑器看起来像这样：

要进行这些更改，您需要使用称为样式表的东西。这些是您的 WordPress 主题中以 .css 结尾的文件。它们基本上控制了您网站的外观（因此是样式部分！）。

默认情况下，您的前端 WordPress 站点具有一组样式表（包含在您的主题中），并且 WordPress 编辑器具有自己的单独样式表。这就是为什么 WordPress 编辑器看起来与您的前端站点不同的原因——它运行的是一组不同的样式规则。为了使它们看起来相同，您需要编辑 WordPress 编辑器的样式规则。

不幸的是，这意味着您至少需要了解一些基本的 CSS。但就像我说的，我会尽量让这一切变得无痛。

既然您知道了主要目标，我将带您完成需要完成的四个步骤。

对于这个例子，我将使用 ThemeIsle 的免费 Zillah 主题。但是无论您使用哪个 WordPress 主题，您都应该能够遵循完全相同的步骤。

第 1 步：为 WordPress 编辑器创建自定义样式表

实际上，我收回了这一点。您需要完成的第一步是 备份您的 WordPress 网站. 只有在您对站点进行了安全备份后，才能继续执行其余步骤。

现在，是时候迈出真正的第一步了。您需要创建一个名为“custom-editor-style.css”的空样式表。为此，您可以使用记事本（或等效程序）打开一个新文档并将其保存为“.css”文件，如下所示：

您将自定义 CSS 添加到此样式表。到目前为止很简单，对吧？

第 2 步：将 CSS 添加到编辑器样式表以模仿您的主题

现在是事情可能变得有点棘手的地方。不幸的是，这是您需要了解一些 CSS 的部分。

在这一步中，您需要将所有必要的 CSS 代码添加到您刚刚创建的样式表中，以便您的 WordPress 编辑器可以正确模拟您的前端网站。一种方法是实际浏览位于主题文件夹中的“stylesheet.css”：

但是，这将要求您成为 CSS 忍者并且只选择某些代码位。那可不好！

有一个更简单的方法……

值得庆幸的是，使用 Google Chrome 的开发者工具有一种更简单的方法。你也可以使用 Firefox 的开发者工具，但我将使用 Chrome 来截屏，因为那是我的首选浏览器。

首先，您需要转到您的实时网站上的帖子。然后，右键单击帖子中的元素并单击检查. 例如，我创建了一个同时使用

标记和常规

标记的帖子：

开发人员工具窗口应弹出在屏幕右侧。您需要在风格盒子。我在下面的屏幕截图中标记了它。看看它怎么说 h1, h2, h3 在顶部？这就是您知道它是您需要复制的样式的方式：

然后，您需要复制整个样式并将其添加到您为 WordPress 编辑器创建的空白样式表中：

对帖子中的每个元素重复此过程——这意味着您需要右键单击并检查常规文本、链接、图像、项目符号列表等。本质上，您需要遵循此过程来复制要复制的任何内容的风格。

我知道这有点乏味，但这是最好的方法，除非你知道足够多的 CSS 来挖掘主题的样式表或从头开始创建 CSS 代码。

到最后，你应该得到这样的东西：

我知道，如果您是 CSS 初学者，我可能会将您直接扔到最深处。对于那个很抱歉！如果您需要帮助，这里有一些可以作为救生圈的额外资源：

第 3 步：通过 FTP 将新样式表上传到您的主题文件夹

添加完所有必要的样式后，您需要使用 FTP 程序将新样式表（称为“custom-editor-style.css”）上传到主题文件夹。

您可以通过转到“…/wp-content/themes/NAME”找到您的主题文件夹。

将样式表上传到与“functions.php”和“stylesheet.css”等其他文件相同的主题文件夹中：

第 4 步：告诉 WordPress 编辑器使用此自定义样式表

最后一步，我保证！现在您只需在主题（理想情况下是子主题）的“functions.php”文件中添加一些代码，以告诉 WordPress 编辑器使用您创建的自定义样式表。

为此，请访问 外观→编辑器→functions.php （请记住，理想情况下您使用的是子主题）。然后，将此代码段添加到您的底部 函数.php 文件：

/**
* Registers an editor stylesheet for the theme.
*/
function wpdocs_theme_add_editor_styles() {
add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

这是什么 函数.php 文件看起来像：