哪个是最好的 WordPress CSS 编辑器插件？ Microthemer 与 CSS Hero 比较

在某些情况下，我们需要 WordPress CSS 编辑器插件。 例如，当我们使用没有自定义菜单背景选项的 WordPress 主题时。

在这种情况下，我们需要找出控制菜单背景的唯一 CSS 选择器。 有时，这项任务会变得非常复杂。 特别是对于 WordPress 新手或不知道如何使用代码的人。

另一个例子是标志的位置和大小。 许多主题不提供自定义徽标位置和调整大小。 如果您不是 CSS 和 HTML 专家，这可能会让人头疼。

这是CSS 定制器插件介入的地方，可以在 WordPress 前端实时编辑 CSS。 这些插件将更改保存在数据库中，不会因主题更新或删除 WordPress CSS 编辑器插件而被删除。

如果您正在运行 WordPress 网站，并且您不是 CSS 专家，那么一个优秀的 WordPress CSS 插件可以派上用场。 通常，人们使用称为“检查元素”的内置浏览器选项来查找特定元素的 CSS 选择器或安装页面构建器插件，如 Elementor、WPBakery、Beaver Builder 或 Divi（检查 Divi 与 Elementor 比较）。

但是想想如果您可以在 WordPress 前端实时编辑 CSS，并且所有更改都将保存在可以导出到任何地方的安全数据库表中，那该有多好。

这确实可以通过下面提到的插件实现。 CSS Hero 和 Microthemer。 但哪个更好？ 为了确定我已经比较了它们的功能，因此您可以根据您对 WordPress CSS 编辑器插件的需求自行决定。

最佳 WordPress CSS 编辑器插件

您是否曾经希望只需单击 WordPress 主题的任何元素并编辑 CSS 样式？ 不仅如此。 但也有能力立即查看您所做的更改，而无需编写 CSS 代码。

或者，也许您实际上并不介意编写一些代码，但您仍然希望可以看到所做的更改，而无需编辑、保存、刷新、查看外观并再次重复相同的步骤。

两个高级 CSS 编辑器插件将它们与其他插件区分开来。 那些是CSS Hero 和 Microthemer 。 这两个 CSS 可视化编辑器插件都很棒，而且都具有基本相同的强大功能。

Microthemer 与 CSS Hero 比较

• CSS 英雄
• 仅与选定的主题和插件兼容

  CSS Hero 带有一个实验性功能，目前处于测试阶段。 它被称为火箭模式自动检测。 Rocket Mode 尝试自行从您的主题中猜测 CSS 选择器。
• 一个站点的入门计划每年收费 29 美元，个人计划最多 5 个站点，每年收费 59 美元，专业计划最多 999 个站点，每年收费 199 美元。

购买 CSS 英雄

• 插入
• 主题和插件兼容性
• 前端编辑
• 撤销更改的能力
• 实时预览
• 为移动设备定制网站
• 为每个主题存储预设
• 无干扰模式
• 免费试用
• 即使在插件停用后设置仍然存在
• 价钱

• 微型温度计
• 声称与所有 WordPress 主题和插件兼容。
• 最多 3 个站点的标准计划费用为 45 美元，而开发人员计划费用为 90 美元。 这是一次性费用，包含终生更新和支持。

购买 Microthemer

我根据核心功能比较了 Microthemer 和 CSS Hero。 这些插件中的每一个都有更多的可用选项。 请注意，某些功能可能会被删除或添加，因此请务必查看官方网站以获取最准确的信息。

CSS 英雄评论

定价： CSS Hero 有几个计划，具体取决于您打算使用它的 WordPress 站点数量。 一个站点的入门计划每年收费 29 美元，个人计划最多可支持 5 个站点，每年收费 59 美元，专业计划最多可支持 999 个站点，每年收费 199 美元。

所有软件包包括：一年升级，一年支持，CSS Hero 的轻松导出功能可导出所有编辑并在没有 CSS Hero 的情况下使用它们

注意：仅与选定的主题和插件兼容！ 如果它们遵循 WordPress 编码标准，它可以与其他 WordPress 主题一起使用。

如果您是众多想要在不接触 CSS 的情况下自定义 WordPress 网站设计的初学者之一，那么您很幸运。 CSS Hero 是一款出色的高级 WordPress CSS 编辑器插件，用于实时 CSS 编辑。

借助此插件，您可以实时编辑站点上任何元素的 CSS，并且更改会立即在前端完成。 当您激活 CSS hero 时，它会在您网站的右侧显示一个弹出窗口。

弹出窗口可拖动到页面上的任何位置（以管理员身份登录时）。 如果你点击一个圆圈按钮，页面上的 CSS hero 就会被激活，它会检测页面元素。

通过鼠标悬停，您可以在 CSS hero 弹出选项面板中编辑该元素的 CSS 属性。 您可以编辑 CSS 属性，例如内边距、边距、字体样式、大小和颜色、位置、投影、3D 阴影等。

您甚至可以将提供的 CSS 值标记为重要以覆盖该元素的任何现有样式。

每个按钮的功能：

• 主编辑器触发器——它编辑页面上的任何元素。
• 设备模式 -此模式用于在桌面、平板电脑和移动设备预览模式之间切换，以便即时查看作品在手持设备上的显示方式。
• 历史 -它可以管理和浏览当前主题的编辑历史，基于日期/时间的编辑历史的详细列表将存储在此处。
• 预设 -这是一组保存和存储的选项。 用户可以为每个主题存储无限的预设。
• 工具 -此图标可帮助用户将设置重置为主题默认值、清除历史记录或显示生成的 CSS。
• 社交媒体共享 –此图标用于在社交媒体上共享 CSS Hero 插件。
• 全屏模式 -此功能带您进入全屏编辑模式。
• 关闭模式 -关闭 CSS Hero 插件并恢复正常浏览。

如前所述，CSS Hero 是一款高级 CSS 编辑器 WordPress 插件，可让您设计自己的 WordPress 主题，而无需编写任何代码。 不需要 HTML 或 CSS 。

与可视化页面构建器类似，CSS Hero 的工作原理是允许您通过实时可视化编辑器选择和更改网站元素。 编辑器显示在您网站的前端，自定义每个元素就像指向和单击一样简单。

通过生成额外的 CSS 样式表，自定义单独应用于您的原始主题样式。 新代码将替换旧代码，使它们完好无损。

如果您希望在以后恢复默认设置，您可以撤消更改。 所有更改都保存为附加样式表，这意味着您可以升级 WordPress 主题而不必担心丢失更改。

在进行设计自定义时，CSS Hero 可以为您节省大量时间和挫折。

主要功能包括：

• 使用 Google 网络字体自定义您的字体
• 改变几乎任何东西的颜色
• 使用滑块更改边距、文本高度和列宽
• 选择特殊效果，例如渐变、过渡和阴影
• CSS 输出干净且缩小
• 如果您希望撤消某些操作，则包含完整的更改历史记录
• 适用于各种屏幕尺寸的响应式预览模式

如何使用 CSS Hero 自定义您的 WordPress 主题？

首先，您需要安装并激活 CSS Hero 插件。 CSS Hero 的目标是为您提供一个 WYSIWYG（所见即所得）界面来编辑您的主题。

安装 CSS Hero WordPress 插件后，在您网站的每个公共页面上，您都会在右上角看到一个蓝色的闪电图标。 此图标只显示了站点管理员，看起来像这样：

单击该按钮会将您的网站转换为实时预览。 您现在将能够看到 CSS Hero 工具栏。 工具栏上的第一项是选择工具。 只需单击它，然后单击您网站上的任何元素。

CSS Hero 将向您展示您的主题为该特定元素使用的 CSS 选择器。 选择一个选择器后，您将能够看到您可以为该元素修改的所有内容。 这包括文本、边距、填充、背景等。

当您单击某个属性时，它会显示您可以更改的所有选项。 当您编辑值时，您将在实时预览中看到您的更改应用于您的网站。

一旦您对所做的更改感到满意，只需单击“保存”按钮即可存储您的更改。 重复该过程以修改站点任何页面上的任何元素。

使用 CSS Hero 为移动设备定制您的网站

您需要确保您的网站在所有设备和屏幕尺寸上看起来同样出色。 CSS Hero 带有一个内置的预览工具来检查这方面。

只需单击 CSS Hero 工具栏中的桌面图标，然后单击设备类型。 您可以选择移动设备、平板电脑和桌面设备。 预览区域将变为您选择的设备。

您现在可以在为移动设备预览网站的同时编辑您的网站。 此工具对于调整手持设备的主题特别有用。

如何撤消在 CSS Hero 中所做的更改？

撤消/重做 - 历史图标开始发挥作用。 CSS Hero 的一项重要功能是能够随时撤消您所做的任何更改。 CSS Hero 会保留您对主题所做的所有更改的历史记录。 只需单击 CSS Hero 工具栏中的历史记录按钮即可查看更改列表。

单击日期和时间旁边的预览图标以查看您的站点在该点上查看的内容。 如果要恢复到该状态，则需要单击“激活”图标。 如果您只想还原对特定项目所做的更改，该怎么办？

在这种情况下，您不需要使用历史记录工具。 只需单击要还原的元素，然后单击重置按钮。 这会将项目更改回您的 WordPress 主题定义的默认设置。

CSS 英雄主题兼容性

CSS Hero 官方网站有一个兼容主题列表。 该列表会不断更新与 CSS Hero 插件兼容的新主题。

此列表包括许多流行的免费 WordPress 主题。 它还拥有 Elegant Themes、StudioPress 和 WooThemes 中最受欢迎的高级主题。

它与最流行的 WordPress 主题框架兼容，如 Genesis、Thematic、Pagelines 等。那些不在兼容性列表中的主题呢？

CSS Hero 带有一个实验性功能，目前处于测试阶段。 它被称为火箭模式自动检测。 如果您使用的主题不在主题兼容性列表中，那么 CSS Hero 会推荐您尝试火箭模式。

Rocket Mode尝试自行从您的主题中猜测 CSS 选择器。 这在大多数情况下都有效。 如果您的主题遵循 WordPress 编码标准，那么您几乎可以编辑所有内容。 您可能还想联系您的主题开发人员，并要求他们提供与 CSS Hero 的兼容性。

插件与 CSS Hero 的兼容性

CSS Hero与一些最流行和常用的WordPress 插件兼容。 该列表包括 Gravity Forms、Contact Form 7、DW Question Answers、WP Polls 等。

如果您使用的 WordPress 插件生成的输出无法被 CSS Hero 编辑，那么您可以请求插件作者这样做。 他们真的不需要做太多来提供与 CSS Hero 的兼容性。

CSS Hero 插件的优缺点

CSS Hero 插件简单易用。 这个插件的主要目的是提供主题定制支持。 它有助于编辑任何元素或页面，并将其转换为所选的颜色和形状。 CSS Hero 插件适用于响应式主题。

使用 CSS Hero 对主题的 CSS 所做的任何更改都可以导出以在其他站点上使用。 这意味着如果您想将自定义设计传输到客户端站点或类似站点，您不会被锁定在此插件中。

该插件在 CSS Hero Academy 部分提供了大量文档和视频教程。 CSS Hero在 css hero-ready 主题上工作正常，但在其他主题上很不稳定。 火箭模式（测试版）旨在解决这个问题，但它仍然非常有问题。

Hero-ready 也不意味着 100% 可编辑。 这完全取决于为创建英雄就绪文件付出了多少努力，以及为特定主题“准备”了多少元素。

CSS Hero 是 WordPress 的 WYSIWYG 主题编辑器，可帮助您通过点击界面对网站进行视觉更改。 CSS Hero 将自动生成所需的 CSS 代码，并在保存后将其部署到您的网站。

CSS 英雄回顾总结

这个小插件有很大的潜力。 对于那些有基本需求的人，这些功能将提供您进行所需更改所需的一切。

该文档可从 CSS Hero 网站轻松访问，其中包含大量使用每个插件设置的教程。 更新和支持仅在购买后的一年内可用（如果您不续订许可证）。

您可以在已经安装并激活插件的站点上继续使用该插件。 但是，您不会获得更新和支持。 总体而言， CSS Hero 重量轻、易于使用，并且无需自定义 WordPress 主题。

如果您已经掌握了一些设计技能，这个插件将使这个过程变得更快，而零经验的用户最终可以定制他们的网站，而无需支付大量的网页设计费用。

CSS Hero 是权威的 WordPress 插件，可通过简单直观的点击界面轻松自定义主题的每个属性。

Microthemer 评论 – WordPress CSS 可视化编辑器

定价： Microthemer 是一个高级插件，有两个定价计划。 最多 3 个站点的标准计划费用为 45 美元，而开发人员计划费用为 90 美元。 通过开发者定价计划，您可以在无限数量的站点上使用 Microthemer。

最重要的是，与按年付费的 CSS Hero 不同，一旦付费，您就不必再付费了。 这是一次性费用，包含终生更新和支持。

注意： Themeover 将为所有购买 Microthemer 的客户提供终身免费升级。 在不久的将来，他们可能会改用每年付费升级的年度许可模式。

Microthemer 是一个实时的 WordPress CSS 编辑器插件，声称与任何主题或插件兼容。 该插件为任何主题元素生成自己的 CSS，无论主题更新如何，都能保证其安全。

Microthemer 在前端可视化地编辑 CSS，并在您想要的任何地方保存更改。 更改在保存后立即可见。

Microthemer 自动为选定的 CSS 选择器创建 CSS 代码。 为您提供了一个 CSS 面板，您可以在该面板上自定义所选元素的 CSS 属性。 它将创建的 CSS 保存在位于 wp-content 目录中的自己的自定义文件夹中。

即使在插件停用后，这也可以保存您的自定义 CSS（如果您以后不希望使用该插件，您可以将 CSS 样式复制并粘贴到您的主题样式表中）。

全前端实时 CSS 插件

当您单击后端的 Microthemer 按钮时，您将被重定向到由 Microthemer 界面包围的站点主页。 您可以从这里导航到站点中的任何位置并设置任何元素的样式。 要定位任何元素，您需要双击它。

如果您愿意，Microthemer 然后会要求您使用自定义名称保存 CSS 样式并保存在自定义文件夹中。 否则，请从现有文件夹中进行选择。 您可以自由自定义任何 CSS 属性，例如边距、填充、位置、背景、字体类型、大小、文本、渐变等。

一旦您更改任何 CSS 属性，Microthemer 将保存它并立即在实时页面上显示更改。 Microthemer 界面位于您网站的顶部，这样您就可以看到您的风格变化发生时的变化。 所有工具和选项都分为八个部分。

1. CSS 样式组

Microthemer 将超过 80 个 CSS 样式选项分为 11 个类别：字体、文本、列表、阴影、背景、尺寸、边距和填充、行为、边框、位置和渐变。

2.荧光笔

本节突出显示当前“选择器”在您的网页上定位的元素（或多个元素）。 在重新设置样式之前，您需要使用选择器定位页面元素。

3. 选择器导航部分

使您能够在相邻的选择器之间快速切换。 主菜单允许在不同文件夹中的选择器之间进行更高级的导航。

4. 代码编辑器

使用带有语法高亮显示的 ACE 代码编辑器轻松切换到自定义 CSS 代码编辑。

5. 帮助部分

从弹出窗口加载在线文档，而无需离开 Microthemer 界面。

6. 一般选项

解锁 Microthemer、管理全局首选项、设置您自己的响应式媒体查询、定义预览屏幕宽度、从以前的保存点恢复您的设置……。

7. 响应式媒体查询标签

定义仅对特定屏幕宽度（例如小于 480 像素或大于 760 像素）生效的样式。 滑块可用于预览您的网站在不同屏幕宽度下的外观。

8. 样式属性工具栏

为 11 个样式组中的每一个显示单独的 CSS 样式属性（例如“字体”选项组中的字体系列、颜色和字体大小）。 通过这种方式，您可以在一个地方检查和编辑 CSS 样式。

Microthemer 不会加密它创建的 CSS 样式，您可以完全自由地将此样式复制和粘贴到网站的其他任何位置。

这意味着如果您停用插件并将创建的 CSS 复制并粘贴到主题样式表或链接到您网站的任何其他样式表，Microthemer 创建的样式仍然有效。

Microthemer 带有超过 80 个 CSS 样式选项。 大多数属性，例如 font-family 和 box-shadow ，无需先验 CSS 知识就可以相对直观地理解。 其他的，比如“显示”或“浮动”，可能需要一点时间来适应。

Microthemer 将各种样式选项分为 11 类：字体、文本、列表、阴影、背景、尺寸、填充和边距、边框、行为、位置和渐变。

Microthemer 亮点 – 在 WordPress 前端实时编辑 CSS

以下是 Microthemer 的一些重要功能：

• 无需编码——不再需要害怕 HTML 或 CSS。 其实不需要懂一点代码。
• 自定义外观 –无论您使用什么 WordPress 主题，Microthemer 都会为您服务。 它允许您自定义任何 WordPress 主题或插件。
• 直接在您的网站上编辑-编辑选项加载在您实际网站的正上方。 只需指向并单击您的网站并编辑模板！
• 许多新字体 -使用 Microthemer，您可以直观地浏览插件本身中的字体。
• 回滚历史 -包括修订历史，因此如果您犯了错误，您可以简单地回滚到之前 50 个修订中的任何一个。
• 多种设备的响应式设计——对每个特定的设备尺寸应用不同的样式。
• 80 多个 CSS 属性 –插件内置了80 多个 CSS 属性供您选择，可为您的主题中的每个元素设置样式。
• 导入功能 -存档您的设计，然后随时导入其中任何一个。 在不同设计之间切换非常容易。

如果您不确定这是否适合您的需要的 CSS 编辑器插件，您可以随时尝试免费的 Microthemer 试用版。 Microthemer Lite 免费试用版为您提供完整的编辑功能和客户支持。

唯一的区别是它限制您编辑/创建 9 个“选择器”。 选择器针对页面上的单个元素（例如按钮）或一组元素，例如“网站上的所有按钮”。 免费试用没有到期日。

Microthemer CSS 插件的优缺点

Microthemer 优点：

• 自定义任何主题或插件（粗体声明）
• 在不同设备模式下查看（桌面、平板手机）
• 使用 CSS3 Pie 的跨浏览器样式（甚至 IE6）
• 浏览 Google 字体并单击添加，但 Microthemer 只会下载您使用的字体
• 编辑历史
• 您可以停用或完全卸载 Microthemer 并仍然使用您通过 functions.php 文件手动调用 Microthemer 样式表创建的样式
• 带有开发者许可证和终身使用的定价计划

Microthemer 缺点：

• 实时预览与某些主题或插件冲突

Microthemer WordPress CSS 编辑器插件常见问题解答

问：当我更新我的主题时，使用 Microthemer 添加的样式会发生什么变化？

答：当您更新父主题或子主题时，您的 Microthemer 样式是完全安全的。

问：如果我在设置网站样式后禁用或删除 Microthemer 插件，添加的样式会消失吗？

答：您可以停用或完全卸载 Microthemer，但仍然可以通过手动调用 active-styles.css 样式表来使用它创建的样式。 您只需要在主题的 function.php 文件中添加一小段代码。

问：我可以导出 Microthemer 生成的样式表并在其他站点上使用它们吗？

答：是的，您可以使用导出选项在 Microthemer 中导出您的作品（文件夹、选择器、样式、手工编码的 CSS）。

问：我是否需要了解 CSS 和 HTML 才能使用 Microthemer？

答：不可以。Microthemer 是为不了解 HTML 或 CSS 的人设计的。

Microthemer 评论摘要

MicroThemer 是来自 ThemeOver 的强大 WordPress 插件，可让您直观地自定义主题。 被描述为“类固醇的 WordPress 主题选项”，对于那些不习惯使用 CSS 和 HTML 修改主题的人来说，它是一个很棒的插件。

Microthemer CSS 编辑器插件易于使用。 您可能需要时间来适应它，但是一旦习惯了，您就可以在 WordPress 网站上创造奇迹。 文档非常广泛，并且有很多视频可以帮助您。 对于网站上的任何 CSS 更改，我强烈推荐 Microthemer。

PS：Microthemer 还兼容流行的页面构建器插件 Beaver Builder。

最好的免费 WordPress CSS 编辑器插件替代品

如果您不愿意花钱或只需要一些简单的 CSS 编辑任务，您可能会对 WordPress 主题的 CSS 编辑免费解决方案感兴趣。

在这种情况下，我从 WordPress 存储库中检查了一些可用的、免费使用的、有价值的、相对更新的插件。 令我惊讶的是，最近更新的免费替代品并不多。 我设法找到的是以下三个：

1. SiteOrigin CSS

SiteOrigin CSS 是用于 WordPress 的简单但功能强大的 CSS 编辑器。 它为您提供视觉控制，让您可以实时编辑网站的外观和感觉。

初学者会喜欢简单的视觉控制和实时预览。 高级用户会喜欢代码自动完成，它使编写 CSS 比以往更快。

2. Microthemer Lite

Microthemer Lite 是一个免费试用版，可为您提供完整的编辑功能和付费客户获得的相同客户支持。 唯一的区别是它限制您编辑/创建 9 个“选择器”。

3. WP Live CSS Editor （2013年未更新）

一个 CSS 实时编辑器，可让您预览实时 CSS 更改，然后保存更改。 它会保存每次保存的过时备份，因此如果它损坏，您可以返回，并且您应该不时删除备份。

最佳 WordPress CSS 编辑器插件结论

如果我们考虑价格，Microthemer 是最好的选择。 没有经常性费用（一次性费用），终身支持和更新，并且他们声称 Microthemer 可以与每个 WordPress 主题和插件一起使用。

就实时编辑而言，CSS Hero 可能会好一些。 但是我还没有对这两个插件进行过广泛的测试，所以我可能不是说 CSS 编辑更好的最佳人选。

从主题和插件兼容性方面来看，如果我们认为 Microthemer 与任何主题和插件兼容，那么 Microthemer 将是赢家。

但我们不得不怀疑。 我确信这两个插件都有表现不佳的主题或插件。

如果您使用的 WordPress 主题在 CSS Hero 兼容性列表中，那么使用 CSS Hero 将是明智的决定，因为在这种情况下，您可以确保可以完美地编辑任何方面。

但是，如果您使用的主题或插件不在他们的列表中，则在使用 CSS Hero 时可能会遇到问题。 在这种情况下，我会推荐 Microthemer。

您可能应该做一些研究，看看其他人对每个 WordPress CSS 编辑器插件（如果有的话）与您的主题的兼容性有何看法。