如何實時自定義 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/