保山人源码网-WordPress主题美化

子比主题美化 – 评论区添加随机夸夸功能(修复api)

简介

有很多人在网站浏览需要回复,有的比较嫌麻烦不愿意打字,也会收到一些各种评论相对比较杂乱,今天分享一个用夸夸功能,来替代传统的评论一言,将它们分开使用,先看看效果图,再考虑使用不使用!

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

教程

css代码自行本地化 或直接下载

主要代码

以下代码放到子比主题的func.phpfunctions.php中,推荐放func.php

//夸夸功能
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行后(提交评论之前)插入下面这行代码

图片[2]-子比主题美化 – 评论区添加随机夸夸功能(修复api)

至此就修改完成了,因为涉及到CSS,建议清空浏览器缓存再刷新看效果。

因api存在跨域问题,现解决办法是自建夸夸api,教程如下

子比主题美化 – 评论区添加随机夸夸功能(修复api)-保山人源码网-免费PHP网站源码模板,插件软件资源分享平台!
子比主题美化 – 评论区添加随机夸夸功能(修复api)
此内容为免费阅读,请登录后查看
0
搭建同款添加:1911258305(有偿服务)
免费阅读
© 版权声明
THE END
喜欢就支持一下吧
点赞5377 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容