• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持滚动公告栏功能,兼容其他浏览器,看到的就是咯,在后台最新消息那里用li标签添加即可。
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 百度口碑求点赞啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊http://koubei.baidu.com/s/.me
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧

使用谷歌浏览器 CHROME 编辑 WORDPRESS 主题的 STYLE.CSS 并实时保存

未分类 飞飞 451次浏览 0个评论

作为 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

注:倡萌在测试本地网站的时候一切功能正常,但是测试在线的网站时,提示我登录后台,但是保存的时候貌似没有成功,不知是不是权限问题,或其他原因。欢迎大家反馈测试结果!

 


乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明使用谷歌浏览器 CHROME 编辑 WORDPRESS 主题的 STYLE.CSS 并实时保存
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址