1. 程式人生 > >WordPress整合底部滾動推薦條,讓好文章不再被埋沒

WordPress整合底部滾動推薦條,讓好文章不再被埋沒

最新訊息:目前該功能張戈部落格已推出 WordPress 外掛,歡迎安裝使用!詳細介紹=>>

這個功能最開始叫底部滾動公告條,部分 WordPress 主題整合自帶,比如知更鳥主題。主題沒整合的還可以使用萬戈牌公告欄外掛來實現這個功能。不過以往外掛或主題整合的公告欄功能都只會滾動公告,即後臺會有一個公告撰寫欄,可以編輯數條公告然後在前臺底部滾動顯示。

最開始,張戈部落格也是用了知更鳥主題特有的公告功能來發布一些公告,後來在我折騰中國部落格聯盟展示導航的時候,發現原來要實現滾動其他內容也是非常簡單的!

因此,我就將鳥哥主題的公告欄程式碼修改了一下,實現了目前部落格的公告欄效果:隨機滾動數篇歷史文章,並顯示評論和瀏覽數目,用了幾天了,感覺還不錯!就來分享一下,也許會有朋友喜歡!

下面是實現方法:

一、PHP 程式碼

PHP
12345678910111213 <div id="gg"><div class="wp_close"><ahref="javascript:void(0)"onclick="$('#gg').slideUp('slow');"title="關閉">×</a><div id="feedb"><ahref="http://list.qq.com/cgi-bin/qf_invite?id=71a2f28dff63348c301ded982b0a083857be253891e9bae8"
rel="nofollow"target="_blank"title="歡迎使用QQ郵箱訂閱張戈部落格"class="image"><img alt="訂閱圖示按鈕"src="<?phpbloginfo('template_directory');?>/images/feed.gif"style="width:23px;height:23px;"/></a></div><div class="bulletin"><ul><?phpwp_reset_query();query_posts(array('orderby'=>'rand','showposts'=>5,'ignore_sticky_posts'=>10));while(have_posts()):the_post();?><li><ahref="<?phpthe_permalink();?>"target="_blank"title="細看 <?phpthe_title();?>"><?phpecho'隨機推薦:《';the_title();echo'》';if(function_exists('the_views')){print'( 閱讀';the_views();print'次 |</a>';}comments_popup_link('坐等沙發','1條評論','%條評論');?>)</li><?phpendwhile;?></ul></div></div><script type="text/javascript"src="<?php bloginfo('stylesheet_directory'); ?>/gg.js"></script>

將以上程式碼中的 QQ 郵箱訂閱連結地址修改成你自己部落格的訂閱地址,然後貼上到 WordPress 主題目錄的 footer.php 的</body>之前儲存即可。

二、CSS 和 JS

做完第一步,現在需要部署相關 js 和 css 了。

①、js 程式碼

JavaScript
123456789101112131415161718192021222324252627282930313233343536373839404142 functionturnoff(obj){document.getElementById(obj).style.display="none";}// 文字滾動(function($){$.fn.extend({Scroll:function(opt,callback){if(!opt)varopt={};var_this=this.eq(0).find("ul:first");varlineH=_this.find("li:first").height(),line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),speed=opt.speed?parseInt(opt.speed,10):7000,//捲動速度,數值越大,速度越慢(毫秒)timer=opt.timer?parseInt(opt.timer,10):7000;//滾動的時間間隔(毫秒)if(line==0)line=1;varupHeight=0-line*lineH;scrollUp=function(){_this.animate({marginTop:upHeight},speed,function(){for(i=1;i<=line;i++){_this.find("li:first").appendTo(_this);}_this.css({marginTop:0});});}_this.hover(function(){clearInterval(timerID);},function(){timerID=setInterval("scrollUp()",timer);}).mouseout();}})})(jQuery);$(document).ready(function(){$(".bulletin").Scroll({line:1,speed:1000,timer:5000});//修改此數字調整滾動時間});

將以上程式碼儲存為 gg.js,然後上傳到 WordPress 主題目錄。

②、CSS 程式碼

CSS
123456 #gg{position:fixed;bottom:0;background:#000;width:100%;height:23px;line-height:23px;z-index:9999;opacity:.60;filter:alpha(opacity=60);_bottom:auto;_width:100%;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));-webkit-box-shadow:10px05px#000;-moz-box-shadow:10px05px#000;box-shadow:10px05px#000}#gg a{color:#fff;letter-spacing:2px;text-shadow:0px1px0px#000}.wp_close a{float:right;margin:010px00}.bulletin{height:23px;color:#fff;margin:00020px;background:url(./images/bulletin.gif)no-repeat;min-height:23px;overflow:hidden}.bulletin a{float:left}.bulletin li{height:23px;padding-left:25px}

將以上 CSS 程式碼新增到主題的 style.css 當中。

三、相關圖示

可以看到滾動條的左側和右側都有一個小圖示,所以你需要下載這 2 個圖片,然後上傳到 WordPress 主題目錄下的 images 資料夾當中,如果沒有這個資料夾,那就新建一個好了。

好了,現在重新整理部落格應該就能看到效果了!

四、可選調整

①、本文分享的滾動條預設是隨機顯示 5 篇文章,如果你想修改這個數目,只要將第一步 PHP 程式碼中的  'posts_per_page' => 5 修改成你要的數值即可;

②、滾動速度可以修改第二步分享的 JS 程式碼來調整,裡面都有詳細註釋,我就不贅述了。

③、如果發現底部的滾動條無法滾動,那可能是 Jquery 衝突了,可以【點此】看看我之前分享的文章,參考解決。

好了,本文分享到此就結束了,中意的騷年們,趕緊折騰去吧!