一种简单的主题切换方法

周一,2008 九 22 00:13:19

上次在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>

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

   Await |  前端交互 |  浏览:1,299  

这篇文章已有 7 位网友发表了评论  

  1. [...] 这个插件的地址有点麻烦,不太喜欢,还是用第一个感觉好点 Louis有一种用JS实现主题切换的方法 我们先把需要的JS加载进来: <script [...]

  2. 辐射鱼 说:

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

  3. 旁观者 说:

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

  4. 酋长 说:

    来留言了。。哇卡卡

  5. zEUS. 说:

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

发表新的评论

表情
icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 



注意:
1、本站启用了审核机制,你的留言可能稍后才会显示,请不要重复提交,谢谢。
2、留言时的头像是Gravatar提供的服务。想设置的看这里
3、评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。

goto-top