作為 WordPress主題 開發(fā)者,倡萌一直都在使用谷歌瀏覽器作為默認(rèn)的瀏覽器來進(jìn)行主題調(diào)試修改。最常用的當(dāng)然就是Chrome自帶的開發(fā)者工具(按 F12 鍵即可開啟),一般用來檢查網(wǎng)站的 js沖突,和調(diào)試修改 css 樣式代碼。
在開發(fā)者工具中調(diào)試修改css是可以及時(shí)預(yù)覽到修改效果的,但是不能自動(dòng)更新保存到css文件中,一旦刷新頁面,調(diào)試修改的css代碼就丟失了,所以在此之前,倡萌都是調(diào)試修改好以后,手動(dòng)復(fù)制到css文件中保存,這個(gè)過程要浪費(fèi)很多時(shí)間。今天倡萌特地到Chrome擴(kuò)展網(wǎng)站搜索了下,找到了 WordPress Style Editor 這個(gè)擴(kuò)展,試用了下,太好用了!
WordPress Style Editor 是一個(gè)谷歌瀏覽器擴(kuò)展,讓你將在開發(fā)者工具所做的CSS修改,直接保存到WordPress的主題樣式表 style.css 文件中。它的工作原理,是調(diào)用 WordPress 內(nèi)置的主題編輯器的功能,通過 ajax 方式更新CSS文件。由于 WordPress 自身的限制,目前,該擴(kuò)展只能作用于主題根目錄的 styl??e.css 文件。
1.安裝 WordPress Style Editor 擴(kuò)展
通過 Chrome 官方網(wǎng)址在線安裝:https://chrome.google.com/webstore/detail/wordpress-style-editor/bgdpllcnhcmpfcheafdhimpklhjoommn?hl=en-US&gl=US
這個(gè)網(wǎng)址在國內(nèi)可能無法正常訪問,具體解決方法,請參考:
http://jingyan.baidu.com/article/d621e8da18f8372865913fdc.html
擴(kuò)展開源地址:https://github.com/stri8ed/wordpress-style-editor-chrome-ext (這是離線包)
2.安裝啟用以后,訪問并登錄你要調(diào)試的 WordPress網(wǎng)站,在前臺(tái)頁面按 F12 打開谷歌瀏覽器的開發(fā)者工具,編輯CSS后,點(diǎn)擊瀏覽器網(wǎng)址欄的下圖那個(gè)圖標(biāo),你可以手動(dòng)點(diǎn)擊保存更改,也可以勾選下面的選項(xiàng)自動(dòng)保存。自己試試吧!

注:倡萌在測試本地網(wǎng)站的時(shí)候一切功能正常,但是測試在線的網(wǎng)站時(shí),提示我登錄后臺(tái),但是保存的時(shí)候貌似沒有成功,不知是不是權(quán)限問題,或其他原因。歡迎大家反饋測試結(jié)果!





子主題主持嗎?
這已經(jīng)是好幾年前的東西了, 不知道是否還可用,自己測試下吧
哇哦這個(gè)功能好強(qiáng)大,謝謝分享!