九月
23

【插件发布】wordpress主题预览插件-Wave Your Theme(换装游戏)

插件下载地址http://wordpress.org/extend/plugins/wave-your-theme/

wordpress很强大,各种资源也很丰富,尤其是主题,来自全球各地的开发者为wordpress开发了数不清的主题,让人眼花缭乱。

不知道你有没有这样的时候,如果你是一个主题开发者,自己开发了很多主题,想做个demo站来放置自己所有的主题,结果目前的主题预览插件功能太弱,不是没有cookie记录功能,刷新后就又还原默认主题,就是虽然有cookie记录,但是为了访客能任意从一个主题切换到另一个主题,自己还得手动将每一个主题都加上切换其它主题的链接。如果以后又开发了一个主题,还得降之前所有的主题都再加上切换这个主题的链接,简直是麻烦的要命!!

你可能还会遇到下面情况,自己同时喜欢着两款主题,想时不时的就切换过来玩玩,但是又怕影响seo,好纠结。。

又或者你是一个刚踏入WP圈的新人,看着眼花缭乱的主题,欣喜的一个个去下载上传激活预览,但是换了几个,却已经累得快不行了,真是恨自己没长十二根手指头啊。。

正好,如果你符合以下情况,我强烈推荐你试用Wave Your Theme插件。通过它,你可以自由切换主题,毫不拖泥带水的。

第一,对于那些没有搭建本地环境的主题折腾者来说,使用此插件可以在自己在线修改主题时,暂时给博客在后台先换一个主题,然后自己折腾时可以在前台通过此插件切换到自己正在修改的主题,这样即可以不影响别人对博客的访问,自己又折腾修改了主题,一举两得。而且如果你修改主题时出现了严重错误,只需调用

   1: ?preview_theme=主题名字

就可以切换回其它的主题,最重要的是不会影响访客。

第二,对于主题试用达人来说,你不必使用wordpress的官方那个主题预览机制,那样主题是在一个demo站上显示的,并不是在你自己的博客上,所以并不代表真实效果。如果每次都将主题下载下来上传自己主机,在后台一个一个切换的看,也太麻烦了点。使用此插件,你可以一次性下载N多个主题,一次性全部上传主机,然后只需在前台直接切换主题就可,快速又方便。

第三,对于主题开发者来说,这个插件又是开发者搭建自己的demo站的好帮手,使用方便,你只需直接下载插件,后台启用,设置后台那些繁琐的设置你都不用去管,插件会自动帮你处理好一些,自动在页面上生成需要的按钮链接。你无须改动任何一个主题,页面上所需的按钮图标都由插件自动完成,一切都是那么的顺畅、方便。而且插件提供的主题切换面板,你可以自定义显示位置,可以自定义定位方式(相对定位/绝对定位)。按钮的位置你更是可以自己去设置。一切尽在你掌握。其实何必单独再建demo站内,在此插件的帮助下,自己的博客就可以做成DEMO站了。

第四,对于同时喜欢着两个或两个以上主题的人来说,这个插件也是不可多得的。随意切换主题对seo是影响很大的,所以你以前可能不太敢天天切换主题玩。不过有了此插件,你随时可以切换主题,按自己的心情。比如你早上起床时,心情大好,给博客切换个愉悦的主题;中午时被人人生气了,打开博客看到带笑脸图案的主题可能会更生气,那么此时你就可以即时切换到另一个主题。所有这一切,并不会造成主题真正被切换,所以对于其他人、对于搜索引擎的爬虫来说,他们看到的还是你的默认主题,丝毫不受影响。

上面的是我的YY。可以忽视,下面我简单介绍下插件:

此款插件是wordpress主题预览插件。不同于目前的一些主题切换插件,它提供了更为强大的功能。插件会自动在页面上生成一个入口按钮链接,点击链接后,将会发送一条ajax请求道服务器,然后查询出你目前放在服务器上的主题目录里的所有可用主题,并返回给前台。前台接收到返回信息后,会在页面上弹出一个浮动层来显示查询到的所有主题的列表。然后你就可以自由切换主题了,只需要点击主题链接即可。切换成功后会出现提示,然后页面会自动刷新,之后就会应用你切换的主题了。这之间又发生了什么呢?其实是又发送了一条ajax请求,让服务器去设置cookie,之后页面刷新,新主题就显示出来了。

插件目前不仅支持“仅允许管理员预览”,而且已经支持输入密钥预览功能,你可以在后台设置一个密钥,那么想要预览主题的人必须输入一个正确的密钥才可以访问。你可以将这个密钥告诉你想让其访问预览的人。如果密钥被大量散播,你只需在后台更换密钥即可阻止别人再持这个密钥访问预览主题。

Wave Your Theme插件也提供了静态的切换方法,也就是上面提到的使用“preview_theme=主题名字”方式来切换主题。注意,此种方式是不会设置cookie的,也就是说,通过这种静态方法切换的主题,在页面跳转后主题会恢复到默认主题。只有通过ajax方式切换主题,cookie才会被设置。

插件提供了自定义入口按钮链接位置显示功能,但是我强烈不推荐这种做法。因为如果你自己去定义,你需要在每个主题上都添加链接,很麻烦。而默认的则是通过JS在页面上插入节点方式添加的,并不需要你去改动任何主题。

也就是说,插件后台设置的前两项(“自定义显示位置”和“你自己定义的点击后显示主题切换面板的那个链接的id”)最好不要去设置改动。

插件还可以设置将JS、CSS文件的引入位置(头部或尾部),但是你要有相应的wp_head()或wp_footer()函数在头部、尾部。插件还提供了第三个选项,那就是自定义引入。不过自定义方法很麻烦,你需要在你每个主题都引入文件才行。否则你只在当前主题引入文件,结果切换后到了另一个主题,没有插件的JS引入了,就不会出现切换按钮了。(这也是我为什么上面我说自定义显示位置和自定义链接ID两个选项大家不要去设置的原因)

cookie的有效期你可以设置一个,默认是三天,cookie有效期代表切换主题后应用此主题的有效期。

插件在页面上生成的链接按钮默认是绝对定位(fixed),后台有位置显示设置,可以选择左上、左下、右上、右下四个位置。后面还有X轴和Y轴的偏移量设置,我就不多说了,具体的你可以去设置试试。X、Y轴的偏移量都是整数。

插件效果实际预览请到http://www.qiqiboy.com/demo

下面是插件的使用效果截图(位置分别是右下、左上、左下、右上):

2222345454565677

插件我是我昨天晚上奋斗了五个小时才做出来,本来是集成在我的博客上的,我想着简单扒出来做成插件用不了太久时间,但是在制作中为了适应更多种需求,我将JS代码全部重构,结果搞了好久才搞定。但是,这只是插件的第一版,如果你使用中有任何问题、任何建议,欢迎及时和我联系。

=============================FAQ======================================

  1. 问:插件对浏览器支持情况?

    答:插件默认使用fixed定位,因为IE6不支持fixed,所以IE6下是无效的。但是如果你自定义插件显示位置,那么插件将自动启用absolute定位方式,此时,是可以支持IE6的。
  2. 问:默认的衣服小图标很不起眼,也没有文字提示,能不能自定义图标显示呢?

    答:从插件1.1起,已经支持自定义任一大小的图片了。你只需将图片放入Wave Your Theme插件下的img目录,插件会自动搜索到你刚添加的这张图片,然后你就可以到后台去选择你刚才添加的图片了。但是要注意,如果你自定义的图片大小不是22×22,那么你还需要在图标宽度和高度设定里正确填写你自定义的这张图片的宽和高。如果你选择了插件自带的四张衣服图标,请务必在图标宽度和高度里都填入48,否则图标将无法完整显示。

    至于自定义提示文字,将会在下一版的插件中集成,欢迎继续关注本插件。

  3. 问:我安装了插件后,发现页面上什么也没有啊?

    答:首先请查看页面上是否已经加载了插件的JS文件和CSS文件。如果插件文件已被加载到页面还是无法显示,请自行查看你设定的插件显示位置处你的z-index值,插件图标是不输出z-index(或者某个版本中会输出一个不大于500的z-index或者带上自定义z-index功能),如果是因为此原因,你只需要在插件的css样式中指定插件图标的z-index值即可(一般是#WYT_theme)。

    还有一种原因是,插件支持自定义JS、css文件引入位置,如果你主题的头部没有

       1: <?php wp_head() ?>

    或者尾部没有

       1: <?php wp_footer() ?>

    ,而你又恰好设置将插件在这两个位置引入(默认在头部引入),那么肯定是无法自动添加插件文件的。解决办法是在主题的头部和尾部添加以上函数。

  4. 问:为什么我在后台的很多设置在前台不起作用呢?

    答:由于插件的主要依赖JS工作,而相关参数是通过一个JS对象“WYT_options”引入到页面上的,如果你自定义了这个插件JS文件的引入,那么将会导致设定失效。解决办法是请打开插件的JS文件目录,将wave-your-theme.js文件中的内容复制覆盖到到wave-your-theme.min.js,然后修改第119行开始的参数配置。

    主要的参数如下(插件更新版本后,可能会增加其他参数,这里以1.1版本为准)

    image

    图标名字,带后缀,务必填写img目录中存在的图标名字,否则将会导致输出失败。

    width

    图标的宽度,请指定上面你定义的图片的正确宽度

    height

    图标的高度,请指定上面你定义的图片的正确高度

    custom

    是否设置了自定义显示,1为是,0代表未自定义,按钮由插件自动渲染

    location

    插件在页面上的位置,0是左上角,1是右上角,2是左下角,3是右下角。默认是右上角,如果你制定了0-3以外值,将会默认在左上角输出

    x

    图标x轴偏移量

    y

    图标y轴偏移量

    id

    图标的id值,如果你自定义了图标显示(即custom值为1),这里可以指定一个页面上存在的id,插件将自动选择这个节点作为插件的按钮,而不再自动在页面上渲染出默认的按钮。如果指定的id在页面上不存在,那么将会继续使用插件内置渲染机制。

    如果custom值为0,而你又在这里自定义了一个id值,那么插件将会自动将渲染的图标链接的id值改成你这里自定义的。

    tips1

    主题切换成功提示

    tips2

    主题切换失败提示
  5. 问:我如果设置了一个密钥,每次切换访问都必须输入吗?

    答:不是这样的,仅仅在第一次访问时会被要求输入密码,输入正确后就不会再次被要求输入了。
本文标签: , , , , ,

分享

本文短网址: http://qiqi.boy.im/8r

这篇文章已经有 72 条评论

Comments (68) Trackbacks (4)
You can leave a response or Trackback this entry .
  1. winy -#21

    更新了?我突然发现阅读模式没嵌套不大习惯

  2. MOPVHS -#22

    莫非我要果断抛弃“Theme Test Drive”了…

  3. MOPVHS -#23

    全部都换了一遍…爽~~~好给力丫!

  4. IM路人 -#24

    发现用IE8切到你的classic主题后有错位,并无法调出切换菜单

  5. Dianso -#25

    哈哈,换上玩

  6. zwwooooo -#26

    厄~刚才的评论不见了……
    插件css的class名问题:最好用比较复杂的class名,像right这些常用的class名很容跟一些主题冲突

    • QiQiBoY --#1

      @zwwooooo
      嗯。。right和buttom这两个忘记了。。其它都加了插件的前缀。。。感谢提醒。。。O(∩_∩)O~

  7. mice -#27

    评论看完了…文章就大概看了下“ :twisted: 留名,用上再来取` :smile:

  8. lifishake -#28

    进一步的歧视插件开得多的呗?感觉如果后台插件用的多的话,很容易造成主题冲突

  9. Yin -#29

    不错的插件 我已经用上了

  10. 小邪 -#30

    嘎嘎,又爆发鸟 ~ 嘿嘿 ·

  11. 人好哇! -#31

    我勒个去,这么多插件,要命了啊。。。还好我自己不搞插件设计,用不到这个插件,(*^__^*) 嘻嘻……

  12. 球犯 -#32

    强大。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。我先试了再来留言。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

  13. 球犯 -#33

    你让我纠结与到底删掉哪个主题。。。真是个好插件。。。。

  14. 手机糖 -#34

    博主太强悍了!支持一个

  15. tuzhu -#35

    爪机先mark!博主写得好诱人,回去得试试。
    为主题切换而苦恼的路过

  16. 卡门 -#36

    这个插件很有意思,玩起来挺爽

  17. 网页游戏大全 -#37

    哇,这个真棒。

  1. wordpress主题预览插件

    [...] 本文来自:http://www.qiqiboy.com/2010/09/23/wordpress-plugins-wave-your-theme.html [...]

  2. Hello WordPress!

    [...] 2010.09 进入九月份,我无聊的几天便折腾了个读者墙,于是有了这两篇我的读者墙展示(附所用JS代码)、读者墙效果【二】- 头像自由拖拽。这个月最激动人心的就是我发布了自己的ajaxPaled主题颠覆你的wordpress体验–ajaxPaled(全站ajax,杂志型布局)。另外本月我也发布了一个主题预览插件,并起了个动感的名字【插件发布】wordpress主题预览插件-Wave Your Theme(换装游戏) [...]

  3. 颠覆你的wordpress体验

    [...] 【插件发布】wordpress主题预览插件-Wave Your Theme(换装游戏) (65)此款插件是wordpress主题预览插件。不同于目前的一些主题切换插件,它提供了更为强大的功能。插件会自动在页面上生成一个入口按钮链接,点击链接后,将会发送一条ajax请求道服务… [...]

  4. 强推wordpress前台切换主题插件

    [...] 详见:http://www.qiqiboy.com/2010/09/23/wordpress-plugins-wave-your-theme.html [...]

Leave a Reply

Hi , say something.

  • :?:
  • :razz:
  • :sad:
  • :evil:
  • :!:
  • :smile:
  • :oops:
  • :grin:
  • :eek:
  • :shock:
  • :???:
  • :cool:
  • :lol:
  • :mad:
  • :twisted:
  • :roll:
  • :wink:
  • :idea:
  • :arrow:
  • :neutral:
  • :cry:
  • :mrgreen: