现在位置: 首页 / 网站建设 / B2主题美化 / 正文

WordPress网站美化之评论弹幕气泡2022更新版

见到很多大佬分享过，WordPress也有类似的评论弹幕插件，今天给大家分享的是纯代码实现WordPress网站评论弹幕气泡，以老白博客@老白我正在使用的7B2主题为例（其他主题类似），经过更新修改，目前实现点击评论即可跳转对应文章。

一、效果演示

老规矩，看看效果先 （可直接点击本站评论，增加了点击跳转对应文章话题页面功能）

WordPress网站美化之评论弹幕气泡2022更新版

手机端效果图（可设置隐藏）

WordPress网站美化之评论弹幕气泡2022更新版

电脑端效果图

二、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>

三、相关文章

更多请点击文末标签阅读