子比主题-评论区添加夸夸功能

用夸夸功能替代传统的评论一言(文章/论坛),将它们分开使用,先看看效果图,再考虑使用不使用!

图片[1]-子比主题-评论区添加夸夸功能
图片[2]-子比主题-评论区添加夸夸功能

CSS代码

.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(//21lhz.cn/cdn/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;
}

Funcitons代码

代码放到functions里方便,哪怕再更新也不怕代码该放到哪!老规矩评论拿代码,拒绝白嫖!

夸夸API地址分享:

夕阳API:https://21lhz.cn/cdn/api/yiyanapi.php?encode=kuakua

星空API:https://api.71xk.com/portal/kuakua/api.php?encode=kuakua

满心API:https://www.lovelu.top/cdn/yiyanapi.php?code=yiyan

comments代码

前面functions代码里已经添加代码了,这里只需要添加进comments文件里面即可!

文章评论区:路径/wp-content/themes/zibll/template/comments.php里88行处添加代码

<?php kuakua('echo');?>
图片[3]-子比主题-评论区添加夸夸功能

comment代码

论坛评论区:路径/wp-content/themes/zibll/inc/functions/bbs/inc/comment.php里77行处添加代码

$btns_r .= kuakua('return');
图片[4]-子比主题-评论区添加夸夸功能
- - - - - 本页内容已结束,喜欢请分享 - - - - -

感谢您的来访,获取更多精彩文章请收藏本站。

子比主题-评论区添加夸夸功能-满心博客
子比主题-评论区添加夸夸功能
此内容为付费阅读,请付费后查看
100积分
付费阅读
已售 87
© 版权声明
THE END
喜欢就支持一下吧
点赞675 分享
评论 共2条

请登录后发表评论