WordPress子比主题评论区添加夸夸按钮

热帖

文章评论是每个WordPress站点都有的功能,有时候我们为了照顾部分不愿意手动写评论的访客就必须准备一些预设的评论内容,之前我发了一篇评论区添加随机评论内容的文章,算是其中一种办法,今天再分享一个添加夸夸功能的方法,内容主要是夸赞性质的。先上图

实现方法

function kuakua($re = ''){
    $html = '<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"><use xlink:href="#icon-icon-kuakua"></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-icon-kuakua"></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://www.zxmvps.com/zuoxm/yiyan/zxm-kuakuaapi.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.zxmvps.com/zuoxm/yiyan/zxm-kuakuaapi.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>';
        if($re && $re == 'return'){
            return $html;
        }elseif($re && $re == 'echo'){
            echo $html;
        }
}
<?php kuakua('echo');?>
kuakua.css
温馨提示:本文最后更新于2023-12-15 11:02:00,某些文章具有时效性,若有错误或已失效,请在下方留言或联系上网的蜗牛
本文资源整理自网络,仅供学习和研究使用,请在下载后24小时内删除,谢谢合作!

如果觉得本文有用就按Ctrl+D收藏,方便以后随时翻看,免得想看时又找不着 或 发现更多

本站所有资源站长均亲自测试过,确认能正常使用

十二 10

本站历史上的今天

    "吼吼~~~,往年的今天站长不知道跑哪里偷懒去了~~~"
© 版权声明
本文结束
喜欢就支持一下吧
点赞9 分享
评论 共3条

为了防止灌水,需登录后方可发表评论