![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d9e50375-e13b-49a8-b5ae-8bb85cb78469/545667f3-4c7d-4cb2-bee3-534e16d4ccd0.png)
前言
用夸夸功能替代传统的评论一言,将它们分开使用,先看看效果图,再考虑使用不使用!
![图片[1]-WordPress评论区添加个夸夸功能-蜡笔傻新源码](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d9e50375-e13b-49a8-b5ae-8bb85cb78469/eb63c313-de89-4eca-9464-e2c0dce2bb30.png)
![图片[2]-WordPress评论区添加个夸夸功能-蜡笔傻新源码](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d9e50375-e13b-49a8-b5ae-8bb85cb78469/95ab7a95-5db9-4531-a824-dac2d47d4379.png)
css代码我已经打包好了,你们下载放到哪都行,只要你们知道路径,或者把css代码拿出来放到你想放的地方!
Funcitons代码
代码放到functions里方便,哪怕再更新也不怕代码该放到哪!老规矩评论拿代码,拒绝白嫖!
下面这个链接是夸人的随机句子API,你们可以修改成你们的,也可以用我的! https://www.xiunobbs.vip/api/sqapi.php?code=yiyan 下面的svg是图标需要图标库的链接 <svg class="icon kuakua-icon" aria-hidden="true"><use xlink:href="#icon-kuakua"></use></svg> 图标库链接,如已经添加就需要更新! <script src="https://at.alicdn.com/t/font_2827587_zt5tfqudn5.js"></script> 这里只是指出,并不需要做什么,重要的还是下面那个functions代码!
//夸夸功能
function kuakua(){
echo'<link rel="stylesheet" type="text/css" href="https://www.xiunobbs.vip/css/kuakua.css">
<a class="but btn-input-expand input-image mr6" id="kuakua" href="javascript:;">
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-kuakua"></use></svg><span class="hide-sm">夸夸</span>
</a>
<div class="kuakua-div" style="width: 9999px;height: 99999px;background: #000;z-index: 1031;position: fixed;top: 0;left: 0;opacity: .6;display:none"></div>
<div class="kuakua-first-box">
<div class="kuakua-ei">
<span class="kuakua-close" title="关闭">
<div>
<svg fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="close" class="sc-eCImPb iRFNEp"><g fill="none" fill-rule="evenodd" stroke="currentColor"><path d="M7.99 7.99L1 1l6.99 6.99L1 14.98l6.99-6.99zm0 0L15 15 7.99 7.99 14.98 1 7.99 7.99z" stroke="currentColor"></path></g></svg>
</div>
</span>
<div>
<div class="kuakua-column">
<section class="kuakua-headerIcon"><svg class="icon kuakua-icon" aria-hidden="true">
<use xlink:href="#icon-kuakua"></use></svg>
</section>
<span size="16" color="black4" class="kuakua-headerTitle">夸夸</span>
</div>
</div>
<div style="position: relative;display: block;">
<div>
<section class="kuakua-modal-body">
<section class="kuakua-contentBox">
<span size="18" color="black4" class="kuakua-comment">还有吗!没看够!</span>
<button type="button" class="kuakua-cancelBtn">换一换</button>
</section>
<button type="button" class="kuakua-confirmBtn">夸夸TA</button>
</section>
</div>
</div>
</div>
</div>
<script>
$(function(){
$(".kuakua-cancelBtn").click(function() {
$.getJSON("https://www.xiunobbs.vip/api/sqapi.php?code=yiyan",function(data){
$(".kuakua-comment").html(data.text);
$("#comment").text(data.text);
});
});
});
$(".kuakua-confirmBtn").click(function() {
$("#submit").trigger("click");
$(".kuakua-first-box").hide(150);//隐藏速度
$(".kuakua-div").hide(150);//隐藏速度
});
$("#kuakua").click(function (e) {//
/*阻止冒泡事件*/
$(".kuakua-first-box").show(150);//显示速度
$(".kuakua-div").show(150);//显示速度
$.getJSON("https://www.xiunobbs.vip/api/sqapi.php?code=yiyan",function(data){
$(".kuakua-comment").html(data.text);
$("#comment").text(data.text);
});
e = window.event || e;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
});
$(".kuakua-close").click(function () {
$(".kuakua-first-box").hide(150);//隐藏速度
$(".kuakua-div").hide(150);//隐藏速度
$("#comment").text("");
});
</script>';
}
comments代码
前面functions代码里已经添加代码了,这里只需要添加进comments文件里面即可!
路径/wp-content/themes/zibll/template/comments.php里87行处添加代码
内容看完了
© 版权声明
请登录后发表评论
注册