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" |
將以上程式碼中的 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 衝突了，可以【點此】看看我之前分享的文章，參考解決。
好了，本文分享到此就結束了，中意的騷年們，趕緊折騰去吧！