WordPress整合底部滾動推薦條,讓好文章不再被埋沒
最新訊息:目前該功能張戈部落格已推出 WordPress 外掛,歡迎安裝使用!詳細介紹=>>
這個功能最開始叫底部滾動公告條,部分 WordPress 主題整合自帶,比如知更鳥主題。主題沒整合的還可以使用萬戈牌公告欄外掛來實現這個功能。不過以往外掛或主題整合的公告欄功能都只會滾動公告,即後臺會有一個公告撰寫欄,可以編輯數條公告然後在前臺底部滾動顯示。
最開始,張戈部落格也是用了知更鳥主題特有的公告功能來發布一些公告,後來在我折騰中國部落格聯盟展示導航的時候,發現原來要實現滾動其他內容也是非常簡單的!
因此,我就將鳥哥主題的公告欄程式碼修改了一下,實現了目前部落格的公告欄效果:隨機滾動數篇歷史文章,並顯示評論和瀏覽數目,用了幾天了,感覺還不錯!就來分享一下,也許會有朋友喜歡!
下面是實現方法:
一、PHP 程式碼
PHP12345678910111213 | <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 程式碼
JavaScript123456789101112131415161718192021222324252627282930313233343536373839404142 | 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 程式碼
CSS123456 | #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 衝突了,可以【點此】看看我之前分享的文章,參考解決。
好了,本文分享到此就結束了,中意的騷年們,趕緊折騰去吧!