NO.4：WordPress子比主题评论区添加随机夸夸功能

操作：在本站评论旁边，点击夸夸按钮后，弹出如下随机一言评论窗口，本站效果图如下：

CSS代码

css代码我已经打包好了，你们直接在文章底部下载即可放到哪都行，只要你们知道网络路径，或者css代码直接用下方funcitons代码中本站使用的也是可以的。

在页面显示中的图标，自己自行替换自己喜欢的即可，大雄搜集站的是使用的阿里巴巴矢量svg图标，链接如下：

<script src="//at.aliCDN.com/t/c/font_3192091_hit60aslsg.js"></script>

这里只是最一些简单说明，并不需要做什么，重要的还是下面那个functions代码！

Funcitons代码

将以下实现代码，添加放置到主题中的functions.php文件中。

//夸夸功能
function kuakua(){
   echo'<link rel="stylesheet" type="text/css" href="https://soujiz.com/cdn/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-xingqiu"></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-xingqiu"></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://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>';
}

Comments代码

这里只需要输出调用刚才的函数方法，将其添加进comments文件里面即可！

路径：/wp-content/themes/zibll/template/comments.php里80行左右处添加代码

<!--夸夸功能开头--> 
<?php kuakua()?> 
<!--夸夸功能结尾-->