使用谷歌瀏覽器 Chrome 編輯 WordPress 主題的 style.css 並實時保存

作為 WordPress主題 開發者,一直都在使用谷歌瀏覽器作為默認的瀏覽器來進行主題調試修改。最常用的當然就是Chrome自帶的開發者工具(按 F12 鍵即可開啟),一般用來檢查網站的 js沖突,和調試修改 css 樣式代碼。

在開發者工具中調試修改css是可以及時預覽到修改效果的,但是不能自動更新保存到css文件中,一旦刷新頁面,調試修改的css代碼就丟失瞭,所以在此之前,都是調試修改好以後,手動復制到css文件中保存,這個過程要浪費很多時間。今天特地到Chrome擴展網站搜索瞭下,找到瞭 WordPress Style Editor 這個擴展,試用瞭下,太好用瞭!

WordPress Style Editor 是一個谷歌瀏覽器擴展,讓你將在開發者工具所做的CSS修改,直接保存到WordPress的主題樣式表 style.css 文件中。它的工作原理,是調用 WordPress 內置的主題編輯器的功能,通過 ajax 方式更新CSS文件。由於 WordPress 自身的限制,目前,該擴展隻能作用於主題根目錄的 styl​​e.css 文件

1.安裝 WordPress Style Editor 擴展

通過 Chrome 官方網址線上安裝:https://chrome.google.com/webstore/detail/wordpress-style-editor/bgdpllcnhcmpfcheafdhimpklhjoommn?hl=en-US&gl=US

這個網址在國內可能無法正常訪問,具體解決方法,請參考:

http://jingyan.baidu.com/article/d621e8da18f8372865913fdc.html

擴展開源地址:https://github.com/stri8ed/wordpress-style-editor-chrome-ext (這是離線包)

2.安裝啟用以後,訪問並登錄你要調試的 WordPress網站,在前臺頁面按 F12 打開谷歌瀏覽器的開發者工具,編輯CSS後,點擊瀏覽器網址欄的下圖那個圖標,你可以手動點擊保存更改,也可以勾選下面的選項自動保存。自己試試吧!

0120-cmhello_com

註:在測試本地網站的時候一切功能正常,但是測試線上的網站時,提示我登錄後臺,但是保存的時候貌似沒有成功,不知是不是權限問題,或其他原因。歡迎大傢反饋測試結果!

發佈留言