WordPress网站美化之评论弹幕气泡2022更新版
见到很多大佬分享过,WordPress也有类似的评论弹幕插件,今天给大家分享的是纯代码实现WordPress网站评论弹幕气泡,以老白博客@老白我正在使用的7B2主题为例(其他主题类似),经过更新修改,目前实现点击评论即可跳转对应文章。
一、效果演示
老规矩,看看效果先 (可直接点击本站评论,增加了点击跳转对应文章话题页面功能)
![WordPress网站美化之评论弹幕气泡2022更新版](https://www.xcbtmw.com/wp-content/uploads/2023/07/82505-61e268f12ab3f51d9129d2f6.jpg.webp)
手机端效果图(可设置隐藏)
![WordPress网站美化之评论弹幕气泡2022更新版](https://www.xcbtmw.com/wp-content/uploads/2023/07/8c200-61e269662ab3f51d912a30d7.jpg.webp)
电脑端效果图
二、WordPress实现教程(7B2主题)
原教程转载自许天,原文链接https://www.ahap.cn/6111.html,本教程在原文基础上新添:点击弹幕跳转文章评论界面
2.1 JS文件
在网站根目录新建一个danmu-qitablog.js文件,然后把下面的东西放进去,注意api地址需要修改成你自己网站的
/**
由老白博客@老白引用,详细美化使用教程:https://www.xcbtmw.com/14052.html
姓名:冯宇
site: http://fy.035k.com
更新时间 :2018-04-03
QQ : 515184405
github : https://github.com/515184405/barrage 还有一些其他的项目哦,欢迎star
**/
$.fn.barrage = function(opt) {
var _self = $(this);
var opts = { //默认参数
data: [], //数据列表
row: 5, //显示行数
time: 2500, //间隔时间
gap: 15, //每一个的间隙
direction: 'bottom right', //方向
ismoseoverclose: true, //悬浮是否停止
}
var settings = $.extend({}, opts, opt); //合并参数
var M = {},
Obj = {};
Obj.data = settings.data.data;
M.vertical = settings.direction.split(/s+/)[0]; //纵向
M.horizontal = settings.direction.split(/s+/)[1]; //横向
M.bgColors = ['#f79a3e', '#e66760', '#5382af', ' #aea79f', '#37b8af', '#008b5d', ' #f0b849', '#499df3',
' #5f6c72', ' #8c88cd'
]; //随机背景色数组
Obj.arrEle = []; //预计存储dom集合数组
M.barrageBox = $('<div id="Danmu""></div>'); //存所有弹幕的盒子
M.timer = null;
var createView = function() {
var randomIndex = Math.floor(Math.random() * M.bgColors.length);
var ele = $('<li class="overflow-text" style="opacity:0;text-align:' + settings.direction.split(/s+/)[
1] + ';float:' + settings.direction.split(/s+/)[1] + ';background-color:' + M.bgColors[
randomIndex] + '"; ><a class="img" target="_blank" href="' + (Obj.data[0].user.link ? Obj
.data[0].user.link : "javascript:;") + '"><img src="' + Obj.data[0].user.avatar +
'"width="40" height="40"></a><div class="xtw-dm-content"><a target="_blank" href="' + (Obj.data[0].post.link ? Obj
.data[0].post.link : "javascript:;") + '">' + Obj.data[0].content + '</a></div></li>');
var str = Obj.data.shift();
ele.animate({
'opacity': 1,
'margin-bottom': settings.gap
}, 1000)
M.barrageBox.append(ele);
Obj.data.push(str);
if (M.barrageBox.children()
.length > settings.row) {
M.barrageBox.children()
.eq(0)
.animate({
'opacity': 0,
}, 300, function() {
$(this)
.css({
'margin': 0,
})
.remove();
})
}
}
M.mouseClose = function() {
settings.ismoseoverclose && (function() {
M.barrageBox.mouseover(function() {
clearInterval(M.timer);
M.timer = null;
})
.mouseout(function() {
M.timer = setInterval(function() { //循环
createView();
}, settings.time)
})
})()
}
Obj.close = function() {
M.barrageBox.remove();
clearInterval(M.timer);
M.timer = null;
}
Obj.start = function() {
if (M.timer) return;
_self.append(M.barrageBox); //把弹幕盒子放到页面中
createView(); //创建试图并开始动画
M.timer = setInterval(function() { //循环
createView();
}, settings.time)
M.mouseClose();
}
return Obj;
}
$.ajax({
type: "POST",
data: {
count: 20, //获取的评论数量
paged: 1, //分页
},
url: 'https://www.xcbtmw.com/wp-json/b2/v1/getNewComments', //api地址
success: function(data) {
var Obj = $('body')
.barrage({
data: data,
//数据
row: 6,
//显示行数
time: 2500,
//时间
gap: 15,
//间隙
ismoseoverclose: true,
//悬浮是否停止
})
if ($('#Danmu')
.length == 0) {
Obj.start();
}
}
});
2.2 CSS样式文件
在网站根目录新建一个danmu-qitablog.css文件,然后把下面文件的代码复制进去
https://qtrj.lanzoul.com/igdm6ysx31e
如果需要点击跳转文章功能,把下面的css代码放到上面下载的css文件底部即可
2.3 手机端显示/隐藏
/*需要显示手机端把此段删除即可-www.xcbtmw.com*/
@media (max-width: 780px) {
#Danmu {
right: 0;
bottom: 57px;
display: none;
}
}
2.4引入js与css
在主题文件footer.php文件底部,</body>标签之前添加以下代码引用我们之间建立的js与css文件,注意两个文件的地址,这里写的是根目录
<link rel="stylesheet" href="/danmu-qitablog.css">
<script type="text/javascript" src="/danmu-qitablog.js"></script>
如果是子主题,则还需要引入jQuery,引用代码如下(jquery写死,https,绝对路径),在header.php,</head>标签之前引入
<!--B2主题-->
<script type="text/javascript" src="/jquery.js"></script>
<!--非B2主题-->
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
三、相关文章
更多请点击文末标签阅读
现在还有效么,试试
6不6!
ddddd
不错不错
谢谢大佬分享
欢迎捧场![emoji](https://www.xcbtmw.com/wp-content/themes/theme-document-master/assets/smilies/huaji2.png)
![emoji](https://www.xcbtmw.com/wp-content/themes/theme-document-master/assets/smilies/huaji.png)
谢谢大佬分享