5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

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

你需要弄脏你的手……

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

使用 WordPress 编辑器模拟前端

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

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

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

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

WordPress divi主题

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

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

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

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

使-wordpress-editor-look-like-website2

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

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

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

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

使-wordpress-editor-look-like-website3

fiverr建站WordPress程序员

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

有一个更简单的方法……

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

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

标记和常规

标记的帖子:

独立站选品工具

使-wordpress-editor-look-like-website4

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

使-wordpress-editor-look-like-website5

高质量外链购买

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

使-wordpress-editor-look-like-website6

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

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

JasperAI 10000字免费额度试用

到最后,你应该得到这样的东西:

使-wordpress-editor-look-like-website7

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

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

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

WordPress备份工具updrafplus

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

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

使-wordpress-editor-look-like-website8

第 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-editor-look-like-website8-1

别担心——这段代码来自官方的 wordpress.org 存储库,它只是将 WordPress 编辑器与您的新样式表连接起来。

添加代码片段后,只需保存更改,在使用 WordPress 编辑器时您应该会看到您的前端样式!

使-wordpress-editor-look-like-website9

收拾东西

我知道,对不起……

你不能只安装一个插件就让你的 WordPress 编辑器看起来像你的前端网站。 如果真那么容易就好了…

但是,所需的 CSS 知识确实不是 那么多. 通过自由使用 Google Developer Tool 的 Inspect Element,您应该能够快速挑选出必要的样式。

总的来说,您需要做的就是:

  1. 创建您的自定义 WordPress 编辑器样式表
  2. 添加任何必要/所需的 CSS 来模拟 WordPress 前端
  3. 通过 FTP 将该样式表上传到您的主题文件夹
  4. 通过添加代码片段来链接样式表 函数.php 你的孩子主题

然后你就可以喷射了!

如果您有任何问题,请将它们留在评论部分,我会尽力回答!

5分钟生成10篇英文软文article forge软件试用
tiktok