让WordPress块编辑器看起来像前端设计

让WordPress块编辑器外观与前端设计一致！

作为WordPress用户，您是否也经常需要同时打开两个标签页进行文章编辑？一个标签页显示新的Gutenberg块编辑器，另一个则预览文章前端效果，以确保最终呈现不出错？

WordPress主题样式仅影响网站前端，后端编辑器通常与前端效果大相径庭。但这并非不可改变！通过自定义样式表，您可以让WordPress编辑器几乎完美地镜像前端外观。

这只需两个简单的步骤：

1. 在主题的functions.php文件中添加几行PHP代码，告知编辑器加载自定义样式表。
2. 创建并配置该自定义样式表。

让我们开始操作吧！

第一步：修改functions.php文件

如果您使用的是非自行开发的WordPress主题，强烈建议您先创建一个子主题，然后再对主要主题进行任何修改。

打开主题的functions.php文件（通常位于主题文件夹的根目录），在文件末尾添加以下代码：

// Gutenberg自定义样式表
add_theme_support('editor-styles');
add_editor_style( 'editor-style.css' ); // 确保路径正确指向样式表文件

这段代码告诉WordPress支持使用自定义样式表与Gutenberg协同工作，并指定了样式表文件（editor-style.css）的位置。

第二步：编写CSS样式

现在，我们进入CSS编写环节。

由于WordPress主题种类繁多，不可能编写一个适用于所有主题的样式表。以下示例基于我网站使用的主题，希望能帮助您理解如何为自己的网站构建样式表。文末将提供一个模板，帮助您快速上手。

创建一个名为editor-style.css的新文件，并将其放置在主题的根目录（或子主题目录）。

块编辑器的CSS样式与标准CSS略有不同。例如，以下代码无法在文章中正确应用文本大小：

h2 {
  font-size: 1.75em;
}

要正确设置样式，需要针对块编辑器中的块进行定位。这意味着<h2></h2>元素需要使用.rich-text.block-editor-rich-text__editable类进行作用域限定：

h2.rich-text.block-editor-rich-text__editable {
  font-size: 1.75em;
}

我已经创建了一个基础CSS文件，它遵循此模式来设置常用块编辑器元素的样式。您可以从GitHub获取该文件，并替换样式以匹配您的主题。

我不会在此处详细展开样式表的构建过程，但模板应该能给您一个清晰的思路。一个好的起点是从您的前端样式表中复制元素，但您可能需要更改一些元素类，以便它们应用于块编辑器窗口。

如有疑问，请使用浏览器开发者工具来检查元素并确定其对应的类名。上述链接的模板应该涵盖大部分元素。

效果展示

首先，让我们看看没有自定义样式表的WordPress编辑器：

然后，对比一下我的测试网站前端：

两者差异显著，对吧？我的测试网站使用了大量的渐变色、自定义字体、按钮样式和引用块，容器也不是简单的方形。

无论您喜欢与否，您都会同意这与默认的Gutenberg编辑器UI有很大不同。这就是为什么我需要单独打开一个标签页来预览文章的原因。

现在，让我们加载自定义样式并查看效果：

瞧！编辑器UI现在看起来与我的网站前端几乎完全相同。内容宽度、字体、颜色和各种元素都与前端一致。我甚至拥有与文章标题相同的精美背景！

这意味着——不再需要在另一个标签页中预览。是不是很酷？

让WordPress编辑器与前端外观保持一致，可以极大地提高效率。对我来说，在编辑文章时频繁切换标签页查看前端效果会打断我的思路，因此我更倾向于避免这种操作。

希望以上步骤也能帮助您实现同样的效果！

以上是让WordPress块编辑器看起来像前端设计的详细内容。更多信息请关注PHP中文网其他相关文章！