一种简单的主题切换方法

上次在zEus那看到一篇关于切换主题的文章:“WordPress 表情插件和主题切换插件 ”就一直在思考是不是有种更简单的方法。好像目前的方法都是通过一个叫Theme Switcher的插件来实现。对于这个插件的使用方法zEus作了说明,在这不再讲了,现在要讲的是这个“简单的方法”。
我想大家都2.6版本里的主题预览记忆很深吧,它实现了直接预览,是不是很方便。

现在的问题是我们要怎么样把它应用到前台来,仔细想了想,后台的实时预览是通过thickbox实现的,我们点击主题后,它的链接是这样的形式:

http://leotheme.cn/?preview=1&template=bluesky&stylesheet=bluesky&TB_iframe=true&width=1292&height=627

看得出它把主题的预览放在一个thickbox的框架里。继然是这样,就简单了,首先我们用上面这个链接打开一个新窗口,看看,发生了什么,它把你的主题换了,当然这种换只是暂时的并没有保存到COOKIE,但这也是我们需要的,不然谁都可以切换你的主题了。现在我们要怎样不是在新窗口中打开而是像后台一样,通过加载一个框架来实现前台的实现预览。
我之前写过一篇叫给你的BLOG添加漂亮的登陆效果的文章,我们通过加载一个基于JQuery的JS文件来实现弹出一个登陆窗口,其实它有4种加载方法,包括文本,页面ID里的内容,HTML文件,还有就是框架。现在什么都有了,就看怎么实现了。
我们先把需要的JS加载进来:

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/message/message.js"></script>
<script type="text
/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.cookie.js"></script>

假如我们有一个链接它的样式是shrink,用来预览主题。我们在head区加入下面代码:

jQuery(".shrink").click(function() {
        
message("Theme-BlueSky","iframe:http://localhost/wordpress/?preview=1&template=shrink&stylesheet=shrink","1000px","500px","");
                  
return false;
    
});
Html>>
<
div class="shrink"><a href="#">DEMO</a></div>

好了,到此我们已经实现了主题的前台实事预览,具体可以看我的主题页面。

GOTOP7 条评论 To 一种简单的主题切换方法

  1. 辐射鱼 说道:

    内容框怎么变小了?看着怪不舒服

  2. 最新电影 说道:

    学习了……

  3. 旁观者 说道:

    我虽然看不懂,但是我明白原理,这是我的伟大之处,哈哈

  4. 酋长 说道:

    来留言了。。哇卡卡

  5. zEUS. 说道:

    哈哈,是很简单,但是不懂代码和原理的朋友肯定就难得看懂了~

发表评论

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

*

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

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