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 文件看起来像:
别担心——这段代码来自官方的 wordpress.org 存储库,它只是将 WordPress 编辑器与您的新样式表连接起来。
添加代码片段后,只需保存更改,在使用 WordPress 编辑器时您应该会看到您的前端样式!
收拾东西
我知道,对不起……
你不能只安装一个插件就让你的 WordPress 编辑器看起来像你的前端网站。 如果真那么容易就好了…
但是,所需的 CSS 知识确实不是 那么多. 通过自由使用 Google Developer Tool 的 Inspect Element,您应该能够快速挑选出必要的样式。
总的来说,您需要做的就是:
- 创建您的自定义 WordPress 编辑器样式表
- 添加任何必要/所需的 CSS 来模拟 WordPress 前端
- 通过 FTP 将该样式表上传到您的主题文件夹
- 通过添加代码片段来链接样式表 函数.php 你的孩子主题
然后你就可以喷射了!
如果您有任何问题,请将它们留在评论部分,我会尽力回答!