Wordpress主题技巧

使用谷歌浏览器 Chrome 编辑 WordPress 主题的 style.css 并实时保存

使用谷歌浏览器 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

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

Wordpress主题技巧

更多有关于 Wordpress主题技巧

V9火车采集器,快速入门!

塔克网整站模板 安装使用指南

WordPress如何备份网站数据库和文件?WordPress整站搬家操作流程。

WordPress网站安全设置教程

国外英文广告联盟网站模板,WordPress主题整站演示地址列表

WordPress主题开发:开启文章缩略图功能

WordPress 自定义头像插件:WP User Avatar

WordPress 后台管理界面UI自定义插件:WP Admin UI Customize

WordPress 自定义文章/页面阅读权限的插件:User Specific Content

本人擅长Ai、Fw、Fl、Br、Ae、Pr、Id、Ps等软件的安装与卸载,精通CSS、JavaScript、PHP、ASP、C、C++、C#、Java、Ruby、Perl、Lisp、Python、Objective-C、ActionScript、Pascal等单词的拼写,熟悉Windows、Linux、OS X、Android、iOS、WP8等系统的开关机。

通过下面的方式来联系我们:

电邮:138762189@qq.com

联系QQ:点击这里给我发消息

官方站:www.tadke.com

※ ※ 联系请加我的企鹅号 ※※

※ ※技术支持请微信联系站长 ※※

Copyright © 2016 Tadke.com. Powered by Wordpress.