前些日子公布了万戈牌工具条的插件,看童鞋们的反应还是比较热烈的,感谢大家对我首款 WordPress 插件的支持,也感谢不断向我反馈意见和建议的朋友们,我将综合听取各方需求在下一个插件版本中尽量完善。与此同时有童鞋表示期待万戈牌工具条的非插件版本。

非插件版本当然有非插件版本的优势,我本人就是在使用非插件的方法(主题是自己做的,集成进去更是得心应手)。第一,可以更加的个性化,显示自己想要的内容;第二,加载速度更快,因为非插件版我去掉了后台选项,更加简洁了;第三,折腾帝就爱非插件的,即使比插件版的效率并不高到哪里去。

好了,下面就是代码部分:

第一步,是 PHP + HTML,把下面代码放到 footer.php 中的 </body> 闭合标签之前就可以了。

<!– Start 万戈牌工具条代码版 –>
<div id="wgToolBar">
<?php
function wgToolBar_notice( $num = 5){
date_default_timezone_set(‘PRC’);
require_once (ABSPATH . WPINC . ‘/class-feed.php’);
$feed = new SimplePie();
$feed->set_feed_url( ‘http://t.wange.im/rss.xml’ );    //RSS 地址
$feed->set_file_class(‘WP_SimplePie_File’);
$feed->set_cache_duration( 600 );    //缓存时间,600秒
$feed->init();
$feed->handle_content_type();
$items = $feed->get_items( 0, $num );
echo ‘<ul id="wgNotice">’;
foreach ($items as $item) {
echo ‘<li><a title="’.strip_tags($item->get_date(‘j F Y | g:i a’)).’" href="’.$item->get_permalink().’">’.strip_tags($item->get_content()).'</a></li>’;
}
echo ‘</ul>’;
}
wgToolBar_notice( 5 );    //输出数量
?>
<ul id="wgSNS">
<li><a id="tb_tencent" href="http://t.qq.com/wange1228" target="_blank" title="QQ 微博">QQ 微博</a></li>
<li><a id="tb_twitter" href="http://twitter.com/wange1228" target="_blank" title="Twitter">Twitter</a></li>
<li><a id="tb_facebook" href="http://www.facebook.com/wange1228" target="_blank" title="Facebook">Facebook</a></li>
<li><a id="tb_fav" title="加入收藏" href="javascript:void(0)" onclick="addFavorite()">加入收藏</a></li>
<li><a id="tb_mail" title="Email" href="mailto:[email protected]">Email</a></li>
<li><a id="tb_rss" title="订阅本站" target="_blank" href="http://feed.wange.im">订阅本站</a></li>
</ul>
</div>
<!– End 万戈牌工具条代码版 –>

注意:

1、在插件版中为了做得更傻瓜更易用,所以没给 feed 输出加上缓存,而 WordPress 默认缓存周期是 24 小时,这实在是太漫长了,有童鞋以为不更新呢,所以在此代码版中我加上了缓存的功能,需要先在网站根目录新建一个 cache 文件夹,输出的 RSS 地址、数量以及缓存周期可以根据以上代码注释中的修改。

2、以上代码中我只是示例加了 QQ 微博、Twitter、Facebok 三个 SNS,如果需要添加更多,可以根据以下样式对应 ID 继续添加,样式中支持了新浪微博、搜狐微博、网易微博、百度说吧、Twitter、QQ 微博、嘀咕、豆瓣、Facebook 九大主流 SNS、微博。

第二步,是 CSS 部分,把以下样式复制到你 WordPress 主题的 style.css 中去就可以了。

/* Start 公有样式 */
html{_background-image:url(about:blank);_background-attachment:fixed;}
#wgToolBar{width:100%;height:30px;position:fixed;background:#000;z-index:9999;overflow:hidden;opacity:0.7;filter:alpha(opacity=70);-moz-opacity:.7;}
#wgToolBar a{text-decoration:none;}
#wgNotice{float:left;background:url(images/notice_icon.gif) no-repeat 10px 3px;margin:0;padding:0 0 0 40px;}
#wgNotice li{list-style-type:none;color:#fff;font:13px/30px Arial,SimSun;}
#wgNotice li a{color:#fff;}
#wgNotice li a:hover{color:#06c;}
#wgSNS{float:right;padding:5px 10px 0 0;margin:0;}
#wgSNS li{float:left;margin:0 5px;display:inline;list-style-type:none;}
#wgSNS li a{width:20px;height:20px;display:block;background:url(images/sns_icon.png) no-repeat;text-indent:-9999em;}
#wgSNS li a:hover{transform:scale(1.5);-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);}
#wgSNS #tb_fav{background-position:0 0;}
#wgSNS #tb_mail{background-position:0 -25px;}
#wgSNS #tb_rss{background-position:0 -50px;}
#wgSNS #tb_sohu{background-position:0 -75px;}
#wgSNS #tb_twitter{background-position:0 -100px;}
#wgSNS #tb_sina{background-position:0 -125px;}
#wgSNS #tb_net163{background-position:0 -150px;}
#wgSNS #tb_baidu{background-position:0 -175px;}
#wgSNS #tb_douban{background-position:0 -200px;}
#wgSNS #tb_facebook{background-position:0 -225px;}
#wgSNS #tb_tencent{background-position:0 -250px;}
#wgSNS #tb_digu{background-position:0 -275px;}
/* End 公有样式 */
/* Start 顶部工具条 */
body{margin-top:30px;}
#wgToolBar{border-radius:0 0 5px 5px;box-shadow:0px 5px 5px #565656;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-khtml-border-radius:0 0 5px 5px;-webkit-box-shadow:0px 5px 5px #565656;-moz-box-shadow:0px 5px 5px #565656;top:0;_position:absolute;_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+"px");}
/* End 顶部工具条 */
/* Start 底部工具条 */
body{margin-bottom:30px;}
#wgToolBar{border-radius:5px 5px 0 0;box-shadow:0px -5px 5px #565656;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;-khtml-border-radius:5px 5px 0 0;-webkit-box-shadow:0px -5px 5px #565656;-moz-box-shadow:0px -5px 5px #565656;bottom:0;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,0)||0)-(parseInt(this.currentStyle.marginBottom,0)||0)));}
/* End 底部工具条 */

注意:

1、考虑到有的童鞋对工具条放置于底部和顶部不同的需要,我还是把样式分开来写了,如果要把工具条放于顶部,那就把“底部工具条”的样式删掉即可;如果要把工具条放于底部,同样,把“顶部工具条”的样式删掉即可。

2、另外,样式中用到两张图片,同学们可以去下载万戈牌工具条,把其中 images 中两张图片复制到你 WordPress 主题的 images 文件夹中吧,这里就不再提供图片打包了。

第三步,加载脚本。

首页我们需要一个 jQuery 库,如果你的网站已经加载了,那就可以跳过这步。如果还没有 jQuery,可以直接调用 google 服务库上的:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=1.3.2"></script>

在 jQuery 库加载之后,注意,一定是要在 jQuery 之后,再加载 JS 执行脚本,如下:

<script type="text/javascript">
jQuery(document).ready(function($){
$(‘#wgNotice’).css(‘width’,$(window).width() – $(‘#wgSNS’).outerWidth() -40);
$("#wgNotice li:gt(0)").css("display","none");var B=$("#wgNotice li:last");var C=$("#wgNotice li:first");setInterval(function(){if(B.is(":visible")){C.fadeIn(500).addClass("in");B.hide()}else{$("#wgNotice li:visible").addClass("in");$("#wgNotice li.in").next().fadeIn(500);$("#wgNotice li.in").hide().removeClass("in")}},5000);
});
function addFavorite(){if(document.all){try{window.external.addFavorite(window.location.href,document.title)}catch(e){alert("加入收藏失败,请使用 Ctrl+D 进行添加")}}else if(window.sidebar){window.sidebar.addPanel(document.title,window.location.href,"")}else{alert("加入收藏失败,请使用 Ctrl+D 进行添加")}}
</script>

洋洋洒洒又是一大篇,比起插件版本,已经是很简洁了,有需要的拿去尽情地折腾吧。对了,今天是个好日子,大家都快活去了,一定没多少人看我的代码,也只有我还有这闲情逸致整理出这些个东东,希望大家多多支持啦~