为主题添加风格切换功能

Jan 9th, 2009 Add Comment

什么是主题风格切换? 这里有两种含义, 一是在页面上通过触发事件, 保持主题的结构不变, 但外观改变; 二是在后台里通过改变选项, 使得主题结构发生改变或者结构不变的基础上改变外观; 也可能两者兼有.

对于第一种含义, 比较经典的例子是 Wpdesigner7 主题, 它是著名主题设计人小土豆 (Small Potato) 的力作, 可以通过点击页面上的切换按钮实现风格切换.
对于第二种含义, Glued Ideas Subtle 主题是个很好的例子, 就像它的名字一样, 它是一个十分灵活的主题, 可以在后台通过更改选项来控制页面的现实风格. 另外还有本人的 Blocks 主题, 它可以在后台控制页面结构, 实现在两栏和三栏模式之间的切换.
而本人发布的第一个 WordPress 主题 Elegant Box 则属于两者兼具的主题, 可以让访客在页面上切换风格, 也可以在后台选择默认的显示风格和是否允许访客在页面切换风格.

带有风格切换的主题最大的好处就是灵活, 网站管理员可以方便改变网站外观, 访客可以选择符合自己审美的风格. 但也有其弊端, 因为改变风格无法改变页面内容. 比如你的页面上有个 Google 广告, 选择白色作为背景, 主题也选用了白色风格, 而当访客点选了其他风格, 那么就会造成页面的不协调. 当然, 你可以有意识地避免出现这样的问题.

前面介绍了什么是主题风格切换, 它的例子和优缺点, 或许你以为本文还会谈谈如何在主题里添加风格切换功能, 就像题目写的一样. 但很遗憾, 可能会让你失望, 因为内容比较多, 本文只能算是个 "序". 我会在后面几篇文章中, 以 Elegant Box 为例, 完整地说说如何实现这个功能, 下面是我预订的讨论内容:

1. 在页面上简单实现主题风格切换
2. 在页面上自动加载风格切换选项
3. 添加默认风格选项
4. 添加是否允许用户切换风格选项

因为年末比较忙, 感觉自己有点闭塞, 没讯息来源就好像没啥好写了. 所以才打算翻些旧东西出来凑凑文章, 希望农历新年之前可以完成全部章节. 如果你有什么意见或建议, 请不要犹豫, 将你的想法告诉我.

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 为主题添加风格切换功能

  1. http://0.gravatar.com/avatar/029d9d939592de2c97a3c663cf3da402?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    貌似不错的做法。

  2. http://0.gravatar.com/avatar/634555cc6749e338395bf5ce9132b502?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    不错的文章,我也喜欢博主的这个主题。

  3. http://0.gravatar.com/avatar/490cf262668eebb0f0f1a50d9d48d702?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    @feicun
    太抽象了, 难以定夺, 但我觉得我主题都是和做音乐博客.

    @坏人 Huài Rén
    你应该模仿其他 widget 的代码做一个, 如果你不懂, 直接到后台调用 widget 吧.

    @喵小可
    Yes, you are right.

  4. http://1.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G
  5. http://0.gravatar.com/avatar/ad44e048ccb91c56c965ce90fb3e33f4?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    不错,期待教程。

  6. http://1.gravatar.com/avatar/970b27eb9ce557d0b8beb97e78668770?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    恐怕这个得需要修改CSS文件了吧

  7. http://0.gravatar.com/avatar/659bd574512ce7d4783d3af9ea2dd438?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    主题不错 支持下

  8. http://1.gravatar.com/avatar/5440aecce8f1c79202fefe9fa6f7420e?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    :oops:

    代码好像没能显示出来啊,

  9. http://1.gravatar.com/avatar/5440aecce8f1c79202fefe9fa6f7420e?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    老大,我在Backlinks出售链接然后在侧边栏加入了代码
    可那显示的总体感觉不一样来的,就是我那段代码显示出来的效果不对齐啊
    但是我看你的很和谐,具体的我也不知道怎么描述出来,
    http://www.vsssv.net 如果可以的话看一下呢,代码显示在侧边最底部那个Partner links

  10. http://1.gravatar.com/avatar/b19a2eda07d44c4a9e83c8e99046be75?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    @mg12
    这么说吧……期待你做出一个布置了一堆音乐符号或者跟音乐相关的东西,让人一看就知道是个音乐博客的主题…… :roll:

  11. http://0.gravatar.com/avatar/490cf262668eebb0f0f1a50d9d48d702?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    @feicun
    还是不解. 呵呵~

    @xiaorsz
    比起以前, 不行了. 今天还上班, 哎...

    @Oscar
    自己改呗!

    @HK
    应该不会, 以后的主题应该也不会. 合格太折腾人了.

    @痞子C
    我直接用代码, 这是最灵活和最安全的方式了.

  12. http://0.gravatar.com/avatar/0af6e7a5d0cdb4b9b064e2d345bf398e?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    想问一下:
    你blog里首页里文章的readmore...links是用增加代码呢,还是用的插件?
    我看到在2.7里可以用代替,可是我按照CODEX里的做法改了之后还没能实现,希望简单指导一下

  13. http://1.gravatar.com/avatar/1891575277d3811f803b39b9885509da?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G
  14. http://0.gravatar.com/avatar/8bc5a10d6cd90aec2d2e24b53042856f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    iNove主题很强大,一直在使用 :smile: 能否使之也有切换功能呢? :?:

  15. http://0.gravatar.com/avatar/c5f05113dbac04ab474f2083c6e50f5b?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    Elegant Box和blocks主题太宽了,如果有960宽的就好了。

  16. http://0.gravatar.com/avatar/c419cb20777cc932e6edbc4aecf3400d?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    mg12老兄最新更新还是蛮勤快的哈!!!

  17. http://1.gravatar.com/avatar/b19a2eda07d44c4a9e83c8e99046be75?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    @mg12
    这么说吧,期待你做一个适合音乐博客用的主题出来 :smile:

  18. http://0.gravatar.com/avatar/65004a241aac4d31a8d67975b3df428b?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G
  19. http://0.gravatar.com/avatar/490cf262668eebb0f0f1a50d9d48d702?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    @opfish
    嘻嘻~

    @wangyh
    如果你将 "上一篇" 理解为 "Older Entry", 那么放右边就没错的了.

    @feicun
    你说得太抽象了.

  20. http://1.gravatar.com/avatar/b19a2eda07d44c4a9e83c8e99046be75?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    期待mg的这个系列~~另外期待mg啥时候做个音乐主题的皮出来 :razz:

  21. http://0.gravatar.com/avatar/a12f33efc26cdfb36e15f5ae773b4ea7?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    对了,这个留言框下面的“上一篇”和“下一篇”有点问题啊,明明上一篇是“ JavaScript 的命名空间”,这怎么跑右边去还是右边的图标?应该在左边啊0 0

  22. http://0.gravatar.com/avatar/a12f33efc26cdfb36e15f5ae773b4ea7?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    呵呵,文中提到的两种mg兄的主题都有啊,觉得blocks的后台管理不错 :lol:

  23. http://1.gravatar.com/avatar/b3fa81c7f742bac5eba90fe936eb0025?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    @mg12 见笑了,是我太粗心没看到 -_-!

  24. http://0.gravatar.com/avatar/490cf262668eebb0f0f1a50d9d48d702?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    @opfish
    后台可以选择是否显示.

  25. http://1.gravatar.com/avatar/b3fa81c7f742bac5eba90fe936eb0025?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    mg12 你好,很喜欢 inove 这个主题,可有一点我不明白为什么发布的文章 分类 前面总是带着 admin ,我觉着没必要加 admin (难道自己的博客里还有别人发布文章不成),请问该怎么去掉呢?