WordPress 教程：集成底部滚动推荐条——让好文章不再被埋没

很多优质历史文章容易被新内容覆盖，导致流量流失。为解决这一问题，可为 WordPress 网站添加底部滚动推荐条——在页面底部自动轮播随机精选文章，并显示评论数与浏览量，有效提升旧文曝光率。该功能早期多见于知更鸟等主题，也可通过“万戈牌公告栏”插件实现。本教程将指导你如何配置或改造现有公告栏，使其从“仅滚动公告”升级为“智能推荐优质文章”，让好内容持续发光。

底部滚动推荐条 PHP 代码

<div id="gg"> <div class="wp_close"><a href="https://www.haoruanmao.com/javascript:void(0)" onclick="$('#gg').slideUp('slow');" title="关闭">×</a> <div id="feedb"><a href="https://www.haoruanmao.com" rel="nofollow" target="_blank" title="欢迎使用 QQ 邮箱订阅好软猫博客" class="image"><img alt="订阅图标按钮" src="<?php bloginfo('template_directory'); ?>/images/feed.gif" style="width:23px;height:23px;" /></a></div> <div class="bulletin"> <ul> <?php wp_reset_query();query_posts( array ( 'orderby' => 'rand', 'showposts' => 5, 'ignore_sticky_posts' => 10 ) ); while ( have_posts() ) : the_post();?> <li><a href="<?php the_permalink(); ?>" target="_blank" title="细看 <?php the_title(); ?>"> <?php echo '随机推荐：《';the_title();echo '》';if(function_exists('the_views')) {print '( 阅读';the_views();print '次 |</a>';}comments_popup_link('坐等沙发','1 条评论','%条评论'); ?>)</li> <?php endwhile; ?> </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 代码

function turnoff(obj) { document.getElementById(obj).style.display = "none"; } // 文字滚动 (function($) { $.fn.extend({ Scroll: function(opt, callback) { if (!opt) var opt = {}; var _this = this.eq(0).find("ul:first"); var lineH = _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; var upHeight = 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 代码

#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:10px 0 5px #000;-moz-box-shadow:10px 0 5px #000;box-shadow:10px 0 5px #000} #gg a{color:#fff;letter-spacing:2px;text-shadow:0px 1px 0px #000} .wp_close a{float:right;margin:0 10px 0 0} .bulletin{height:23px;color:#fff;margin:0 0 0 20px;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 文件夹当中，如果没有这个文件夹，那就新建一个好了。

①、小喇叭图标：//res.zgboke.com/wp-content/themes/HotNewspro/images/bulletin.gif

②、订阅图标：//res.zgboke.com/wp-content/themes/HotNewspro/images/feed.gif

好了，现在刷新博客应该就能看到效果了！

可选调整

①、本文分享的滚动条默认是随机显示 5 篇文章，如果你想修改这个数目，只要将第一步 PHP 代码中的  ‘posts_per_page’ => 5 修改成你要的数值即可；

②、滚动速度可以修改第二步分享的 JS 代码来调整，里面都有详细注释，我就不赘述了。

③、如果发现底部的滚动条无法滚动，那可能是 Jquery 冲突了，可以【点此】看看我之前分享的文章，参考解决。

好了，本文分享到此就结束了，中意的骚年们，赶紧折腾去吧！