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

青木

3个月前更新

1690

免费领流量卡

流量卡包邮

本站同款主题

广告招租

这个功能最开始叫底部滚动公告条，部分 WordPress 主题集成自带，比如知更鸟主题。主题没集成的还可以使用万戈牌公告栏插件来实现这个功能。不过以往插件或主题集成的公告栏功能都只会滚动公告，即后台会有一个公告撰写栏，可以编辑数条公告然后在前台底部滚动显示。实现了博客的公告栏效果：随机滚动数篇历史文章，并显示评论和浏览数目。

效果图

图片[1] - WordPress教程 – WordPress集成底部滚动推荐条_让好文章不再被埋没 - 狐狸资源网

PHP 代码

此处内容已隐藏，请评论后刷新页面查看.

将以上代码中的 QQ 邮箱订阅链接地址修改成你自己博客的订阅地址，然后粘贴到 WordPress 主题目录的 footer.php 的</body> 之前保存即可。

CSS 和 JS

做完第一步，现在需要部署相关 js 和 css 了。

CSS样式

javascript代码

#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 当中。

以子比主题为例：主题设置 - 自定义代码 - 自定义CSS样式

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 主题目录。

以子比主题为例：主题设置 - 自定义代码 - 自定义javascript代码