如何实时自定义 Live WordPress 主题？ 嗯，CSSHero 是一个插件，可以以简单的方式进行更改

WordPress 是一个 CMS 框架，充满了自定义功能，并提供了许多 API 和钩子，任何开发人员都可以使用它们来修改主题和插件。 这就是目前我们确实可以选择从 WordPress 官方存储库的数千个可用插件中选择插件的原因。

在这篇文章中，我们将讨论新插件CSSHero的所有细节。 但在我们开始之前，让我们关注these questions 。

• 如何对您的 WordPress 网站make live changes ？
• 主题实时变化？
• 有什么简单的方法可以知道 WordPress 主题的 CSS 属性数量吗？
• 使用实时预览编辑您的 WordPress 博客
• 在 WordPress 主题上线之前对其进行自定义

如果您有上述任何问题，那么您来对地方了。

如果您想在without any help的情况下自己进行实时更改，那么您需要事先了解大约~300 of CSS properties 。 修改这些以在实时主题模式中看到真正的变化是不可能的。 WordPress customizer器允许您修改一些属性，但不是全部，这是我们遇到的真正问题。

我想说我们确实有两个选择：

选项 1) 手动执行 CSS 更改

• 在 Chrome / Mozilla 中打开您的博客
• 右键单击 CSS 元素，例如 Header、Post、图像等
• 单击Inspect以查看 CSS 属性
• 进行更改以查看效果
• 一旦你很好 - 转到主题的style.css文件并保存更改
• 多次重复该过程

Option-2) 使用具有内置功能的插件，在我们的例子中是 CSSHero

• 使用编辑器在live site上执行更改
• 查看实时结果
• 点击Save button ，你就done

CSSHero 与 Crunchify 合作，向 Crunchify 读者赠送10 free Licenses 。 填写这个谷歌表格列出你的名字。 - 赠品结束

让我们安装 CSSHero 并执行实时 WordPress 主题更改

NOTE ：在这篇文章的底部结帐完整的视频。

第1步

为什么选择 CSSHero？ CSSHero 是一个premium WordPress 插件。 基本许可证起价$29/site 。 我想说——如果你是初学者或专业人士，值得一试。 它提供30 days退款保证。

使用代码CRUNCHIFY可在 Starter、Personal Plans 上享受34% off ，在 Pro 计划上享受40% off 。

注册您的许可证并从您的仪表板下载最新版本的CSSHero plugin ： http ://www.csshero.org/

第2步

• 从您的 WordPress 管理面板安装并激活它
• 激活时会要求输入Key
• 只需单击Get my Key Now! 按钮，它将打开一个带有许可证密钥的页面
• 单击Get License ，一切就绪

Point-1) 让我们开始了解功能

• 现在转到您的博客home page ，您将在top right看到 CSSHero 动画按钮。
• 单击它，插件将加载适用于您的主题的control panel

看看下面的带有所有CSSHero options的 gif：

Point-2) CSSHero 主题编辑器选项

theme editor的想法是使用简单的可视化编辑器更改所有theme's style 。 在 CSSHero 主题编辑器的帮助下，您可以更改

• 标题文本
• 字体
• 边境
• 款式等

同样适用于

• 正文内容
• 条目
• 元值
• 标头值
• 页脚
• 侧边栏等。看看下面的GIF。

Point-3) 单击方便的设备布局选项

正如您在下图中看到的，主题编辑器为我们提供了一个选项，只需鼠标悬停和单击即可检查主题的不同移动、iPhone、iPad Layouts的数量。

Point-4）如何撤消您最近的更改？

用户可以选择使用简单的Change history模块撤消所有最近的更改。 我敢打赌，没有一个开发人员在第一次尝试时就把事情做好了，至少我不是:)。 这对我来说非常方便。

CSSHero 还提供了非常方便的模块，可以显示all of your save changes 。 您可以回到timeline并恢复到以前的版本。 这不是方便的工具吗？ 到目前为止，我已经多次使用过这个工具并且很喜欢它。

Point-5) 设置和工具选项

Preset Settings和Tools Options 。

看看我们捕获的详细视频，它显示了CSSHero WordPress 自定义 CSS 编辑器插件的所有功能。

详细的 Youtube 视频：

现在您已经看到了所有功能，是时候提出以下问题了:)。

Point-6）这个插件是否适用于我的主题？

根据 CSSHero 官方网站的信息，插件适用于以下所有 WordPress 主题框架。

• 创世纪框架
• 生成新闻
• 层WP
• 最后通牒主题
• 全部的
• 前期
• WP 引导程序
• 专题
• 必填+基础
• 欧米茄
• 页线 DMS

如果您的主题与 CSSHero isn't compatible ，请no worries 。 它将向您显示启用Rocket mode的选项。

Message ：不存在对此主题的本机支持。 想试试火箭模式自动检测吗？ 只需enable it并尝试CSS again ，您应该会看到与上面视频中看到的相同的选项。

Point-7）插件支持和文档怎么样？

一些流行的 WordPress 插件，如 Gravity Forms、WooCommerce、Contact Form7、WP Pools 等都与 CSSHero 框架兼容。

这意味着，CSSHero 不仅适用于theme customization ，还适用于plugin layout customization 。

最后但同样重要的是，在官方网站上，有许多详细的tips and tricks文章可供您阅读。

我能想到的Only Cons就是熟悉所有功能。 您可能需要一些时间才能开始并成为专业人士。 一旦您熟悉了 CSSHero，我相信它对于所有 WordPress 博主来说都是very handy solution 。

如果您确实有您认为想要推广的产品、插件、主题等，请与我们联系。

这是 CSSHero 的 Crunchify 独家优惠：

嗨，Crunchify 读者——

我们很高兴地宣布 CSSHero WordPress 主题定制插件up-to 40% off的折扣。

请看下面的步骤

第1步

• 转到站点 CSSHero： https ://www.csshero.org/
• 点击Pricing Plans链接

第2步

• 点击按钮I have a coupon code

第三步

• 输入优惠券代码： CRUNCHIFY

第四步

• 单击“兑换”按钮可享受 Starter 和 Personal Plan 的34% off
• 获得 Pro 计划40% off

所有交易清单： https://crunchify.com/deals/