WordPress添加底部滚动文章推荐条

051232
温馨提示：本文最后更新于2023-12-27 10:25:20，某些文章具有时效性，若有错误或已失效，请在下方留言或联系站长

前言

这个功能最开始叫底部滚动公告条，部分 WordPress 主题集成自带，比如知更鸟主题。主题没集成的还可以使用万戈牌公告栏插件来实现这个功能。不过以往插件或主题集成的公告栏功能都只会滚动公告，即后台会有一个公告撰写栏，可以编辑数条公告然后在前台底部滚动显示。

最开始，张戈博客也是用了知更鸟主题特有的公告功能来发布一些公告，后来在我折腾中国博客联盟展示导航的时候，发现原来要实现滚动其他内容也是非常简单的！

因此，我就将鸟哥主题的公告栏代码修改了一下，实现了目前博客的公告栏效果：随机滚动数篇历史文章，并显示评论和浏览数目，用了几天了，感觉还不错！就来分享一下，也许会有朋友喜欢！

下面是实现方法：

一、PHP 代码

<div id="gg">
  <div class="wp_close"><a href="javascript:void(0)" onclick="$('#gg').slideUp('slow');" title="关闭">×</a>
    <div id="feedb"><a href="http://list.qq.com/cgi-bin/qf_invite?id=71a2f28dff63348c301ded982b0a083857be253891e9bae8" 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>
<div id="gg">
  <div class="wp_close"><a href="javascript:void(0)" onclick="$('#gg').slideUp('slow');" title="关闭">×</a>
    <div id="feedb"><a href="http://list.qq.com/cgi-bin/qf_invite?id=71a2f28dff63348c301ded982b0a083857be253891e9bae8" 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>
<div id="gg">
  <div class="wp_close"><a href="javascript:void(0)" onclick="$('#gg').slideUp('slow');" title="关闭">×</a>
    <div id="feedb"><a href="http://list.qq.com/cgi-bin/qf_invite?id=71a2f28dff63348c301ded982b0a083857be253891e9bae8" 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
  }); //修改此数字调整滚动时间
});
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
  }); //修改此数字调整滚动时间
});
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}
#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}
#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 冲突了，可以【点此】看看我之前分享的文章，参考解决。

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

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

------关注微信公众号：胖大海TuT------
© 版权声明
版权声明 1 本网站名称：胖大海博客资源网
2 本站永久网址：https://www.pdha.top
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ941093035进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
WordPress教程
喜欢就支持一下吧
点赞32 分享
The most important thing is to enjoy your life—to be happy—it's all that matters.
享受生活才是最重要的，要快乐，这样就够了。
xiaohai的头像-胖大海博客资源网黄金会员
相关推荐
评论 抢沙发

请登录后发表评论

    暂无评论内容

文章目录
超清无广告视频观看 速讯影院
在线视频解析 蓝光解析
抖音视频去水印 抖音去水印
实用较全的工具箱 胖大海工具箱
胖大海免费API接口 免费API
微信公众号：胖大海TuT