WordPress教程 – WordPress集成底部滚动推荐条_让好文章不再被埋没一凡20天前更新关注私信1450 这个功能最开始叫底部滚动公告条,部分 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代码 相关图标 可以看到滚动条的左侧和右侧都有一个小图标,所以你需要下载这 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 冲突了,可以【点此】看看我之前分享的文章,参考解决。 好了,本文分享到此就结束了,中意的骚年们,赶紧折腾去吧! 本文最后更新于2024-08-22 12:17:50,若文章内容或链接失效,请 留言 或 QQ群 反馈!文章没读爽?点我试试随机文章 © 版权声明 本文链接: 1 如果您喜欢本站, 点击这儿 赞助下本站,感谢支持! 2 可能会帮助到你: 下载帮助 | 解压资源 | 进站必看 3 本站内容观点不代表本站立场,并不代表本站赞同其观点和对其真实性负责 4 若作商业用途,请联系原作者授权,若本站侵犯了您的权益请 联系站长 进行删除处理 5本站所有内容均来源于网络,仅供学习与参考,请勿商业运营,严禁从事违法、侵权等任何非法活动,否则后果自负 THE ENDWordPress# wordpress# 底部文章推荐# WordPress教程# 底部滚动公告条 喜欢就支持一下吧点赞0赞赏 分享QQ空间微博QQ好友海报分享复制链接收藏