子比主题美化-评论区添加夸夸快速评论功能

1. 将下方代码放到主题根目录下的functions.php中

/*随机评论*/
function kuakua(){
    echo'<style type="text/css">.kuakua-first-box{width:440px;border-radius:16px;bottom:auto;min-height:10rem;left:50%;position:fixed;right:auto;bottom:0%;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(https://cdn.itly.com.cn/qkget/images/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:0px auto 0px 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}</style>
    <a class="but btn-input-expand input-image mr6" id="kuakua" href="javascript:;">
      <svg class="icon" aria-hidden="true"><use xlink:href="#mf-kk"></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="#mf-kk"></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">确定</button>
            </section>
            </div>
        </div>
      </div>
    </div>
    <script>
        $(function(){
        $(".kuakua-cancelBtn").click(function() {
          $.getJSON("https://www.mfba.com.cn/wp-content/themes/zibll/qkget/sjpl/sjpl.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.mfba.com.cn/wp-content/themes/zibll/qkget/sjpl/sjpl.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>';
}

如果点击夸夸里面的换一换没有反应，说明api接口不行，自己做一个接口，里面默认是我的自用的接口。

1. 将下方代码放到主题根目录下的template/comments.php

找到这段代码<div class=”comt-tips-right pull-right”>的后面

<?php kuakua()?>