等待-放飞梦想

勤现在-乐将来

JavaScript实现WordPress自由颜色主题切换

Await / WP相关 前端交互 / 2008/08/14 1:16 / 热度(2,972)

关于自由切换颜色的主题目前有些主题自带这个功能了见下图:

现在来谈谈怎么实现这样一个功能。其实很简单的。不管是换颜色和主题,原理都是一样的,即通个调用不同的CSS来替换掉当前的CSS而实现的;

就上面这个来说:
首先,它有个默认的style.css文件,这个CSS只负责整体的布局,不汲及颜色大小这些原素。然后会有5个CSS[a.css\b.css\c.css\d.css\e.css]文件,每个是一种风格。
默认情况下,载入的是style.css和a\b\c\d\e.css其中的一个,例如,默认情况下载入是style.css和a.css。这样就一种风格,当点击第二种后,b.css文件中的ID和类和a.css文件中的一样,只是属性不同而已,而根据CSS的优先级后面的会复盖前面的属性,所以现在变成style.css和b.css.这就是另一种风格了。同理,c\d\e.css都一样会复盖上一个CSS文件。换色其实就是这样实现的!当然,效果是实现了,不过还有不足这处,那就是这样的话只能实简单的换色,刷新后就又会回到默认的CSS了,也就是style.css和a.css。因为我们换了CSS文件后并没有保存到COOKIE,所以刷新后又会回到原来的。当然,这不是我们希望的。所以我们在切换到另一种风格时,要把它写入COOKIS从而让浏览器记住,现在是哪个CSS文件。这样就不会刷新后失效了!原理就是这样了.

点击这里下载JS文件

评论(2)

  1. maxner
    2011/10/11

    很实用的功能 最近正想给主题加入这个功能 我按照你说的,把【Theme:writeCSSLinks();】粘贴到了header.php里面,images也按照目录做了,但是没有反映甚至连切换的按钮都没有,能具体讲讲吗,求详解。 :?:

  2. winzeng
    2008/11/21

    JS 再次展示它的魅力 我用的就是mg12的theme

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Top 管理

无觅相关文章插件,快速提升流量