使用谷歌瀏覽器 Chrome 編輯 WordPress 主題的 style.css 并實(shí)時(shí)保存

作為 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é)果！