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

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

一、效果演示

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

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

手机端效果图(可设置隐藏)

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

电脑端效果图

二、WordPress实现教程(7B2主题)

原教程转载自许天,原文链接https://www.ahap.cn/6111.html,本教程在原文基础上新添:点击弹幕跳转文章评论界面

2.1 JS文件

在网站根目录新建一个danmu-qitablog.js文件,然后把下面的东西放进去,注意api地址需要修改成你自己网站的

2.2 CSS样式文件

网站根目录新建一个danmu-qitablog.css文件,然后把下面文件的代码复制进去

2.3 手机端显示/隐藏

 /*需要显示手机端把此段删除即可-www.qitabbs.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>

三、相关文章

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

WordPress网站b2主题美化之文章顶部“新春/活动倒计时模块”

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

WordPress网站设置侧栏“最近访客”小工具美化版

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

WordPress网站7B2主题用户头像旋转特效美化

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

免插件实现WordPress网站侧栏实时疫情图(2022更新版)

更多请点击文末标签阅读

经验·技巧网站建设

WordPress网站美化之添加旋转动态圆圈

2022-4-12 15:02:44

经验·技巧网站建设

7B2主题批量修改文章/圈子话题隐藏内容阅读权限

2022-4-19 17:24:40

2 条回复 A文章作者 M管理员
  1. Nipsih

    按照要求做好了 但是效果没出现

个人中心
购物车
今日签到
有新私信 私信列表
搜索