WordPress教程 · WPtech

WordPress添加底部滚动随机推荐栏

•̀.̫•́✧ · 2月22日 · 2020年本文3329字 · 阅读9分钟358

前言

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

后来在我折腾中国博客联盟展示导航的时候,发现原来要实现滚动其他内容也是非常简单的! 因此,我就将鸟哥主题的公告栏代码修改了一下,实现了目前博客的公告栏效果:随机滚动数篇历史文章,并显示评论和浏览数目,用了几天了,感觉还不错!就来分享一下,也许会有朋友喜欢!

实现方法

PHP代码

内容查看此隐藏内容查看价格1立即支付

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

js代码

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

内容查看此隐藏内容查看价格1立即支付

将以上代码保存为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('https://ae01.alicdn.com/kf/Hf7170dadfa014d0f8b1948b54d2dc7deu.gif') no-repeat;min-height:23px;overflow:hidden}
.bulletin a{float:left}
#gg .bulletin li{height:23px;padding-left:25px;list-style:none}

将以上CSS代码添加到主题的style.css当中。

可选调整

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

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

③、如果发现底部的滚动条无法滚动,那可能是Jquery冲突了。

0 条回应