简介
有很多人在网站浏览需要回复，有的比较嫌麻烦不愿意打字，也会收到一些各种评论相对比较杂乱，今天分享一个用夸夸功能，来替代传统的评论一言，将它们分开使用，先看看效果图，再考虑使用不使用！
操作：在本站评论旁边，点击夸夸按钮后，弹出如下随机一言评论窗口，本站效果图如下：
教程
css代码内容
[hidecontent type=”reply”]
.kuakua-first-box{
margin: auto;
width: 440px;
border-radius: 16px;
bottom: auto;
min-height: 10rem;
left: 50%;
position: fixed;
right: auto;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
z-index: 1032;
box-shadow: 0px 0px 20px #0000001f;
display: none;
}
@media screen and (max-width: 500px){.kuakua-first-box{width:94%;}}
.kuakua-ei{
border-radius: 4px;
overflow: inherit;
}
.kuakua-close{
z-index: 9999;
right: 14px !important;
display: flex;
position: absolute;
right: 8px;
top: 4px;
padding: 16px;
cursor: pointer;
}
.kuakua-column{
position: absolute;
width: 298px;
height: auto;
top: -28px;
left: 0px;
right: 0px;
z-index: 6000;
background: url(/sucai/kua-ribbon.png) 0% 0% / 298px 83px no-repeat;
margin: 0 auto;
text-align: center;
}
.kuakua-headerIcon{
border-radius: 50%;
position: relative;
text-align: center;
padding: 6px;
background-color: rgb(255, 255, 255);
width: 78px;
height: 78px;
margin: 0 auto;
}
.kuakua-icon{
width: 60px !important;
height: 60px !important;
fill: currentcolor;
transition: transform 0.3s ease 0s;
cursor: pointer;
}
.kuakua-headerTitle{
font-size: 20px;
font-weight: 600;
}
.kuakua-modal-body{
position: relative;
background-color: transparent;
text-align: center;
border-bottom: none;
border-top: none;
border-radius: 0px;
box-shadow: none;
padding: 65px 30px 20px 30px;
}
.kuakua-contentBox{
width: 100%;
min-height: 102px;
padding: 15px 20px;
margin-top: 20px;
border-radius: 0;
box-sizing: border-box;
position: relative;
background-color: rgb(244, 244, 244);
text-align: center;
border-bottom: none;
border-top: none;
box-shadow: none;
}
.kuakua-comment{
margin-bottom: 10px;
line-height: 26px;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
word-break: break-all;
transition: all 0s ease 0s;
color: rgb(68, 68, 68);
font-size: 18px;
}
.kuakua-cancelBtn{
background-color: rgb(255, 255, 255);
color: rgb(102, 102, 102);
border: none;
border-radius: 36px;
transition: all 0.3s ease 0s;
padding: 4px;
width: 80px;
display: inline-block;
margin-top: 10px;
}
.kuakua-confirmBtn{
background: rgb(255, 227, 0);
width: 118px;
height: 36px;
display: inline-block;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
background-color: rgb(255, 227, 0);
color: rgb(68, 68, 68);
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease 0s;
box-sizing: border-box;
margin-top: 20px;
}
.form-control:focus {
border: 1px solid rgb(148 148 148) !important;
box-shadow: none !important;
}
#kuakua {
background-image: linear-gradient(to right, #e52d27 0%, #b31217 51%, #e52d27 100%);
padding: 4px 15px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 5px;
}
#kuakua:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}主要代码
以下代码放到子比主题的func.php或functions.php中，推荐放func.php。
[hidecontent type=”reply”]
//夸夸功能
function kuakua(){
echo'<link rel="stylesheet" type="text/css" href="这里放CSS文件路径">
<a class="but btn-input-expand input-image mr6" id="kuakua" href="javascript:;">
<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" role="img">
<image href="/sucai/眼红.svg" width="14px" height="14px" />
</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">
<image href="/sucai/眼红.svg" width="65px" height="60px" /></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://21lhz.cn/cdn/api/yiyanapi.php?encode=kuakua",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://21lhz.cn/cdn/api/yiyanapi.php?encode=kuakua",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>';
}我没引入阿里巴巴矢量图标，可自行引入并更换代码
子比主题下/template/comments.php中约88行后（提交评论之前）插入下面这行代码
<!--夸夸功能开头-->
<?php kuakua()?>
<!--夸夸功能结尾-->至此就修改完成了，因为涉及到CSS，建议清空浏览器缓存再刷新看效果。
给力项目：创业猫会员可免费下载 加入会员友情提醒： 请尽量登录购买，防止付款了不发货！
QQ交流群：226333560 站长微信：qgzmt2
