子比主题评论区新增夸夸一言快捷评论方式

很多用户在评论的时候不知道说什么,而子比主题又没有夸夸功能,于是我们可以通过一言的模式来接入子比主题,实现夸夸功能,用户只需要点击一次,即可自动的生成一段评语,用户点击评论即可,实现方法十分的简单,可以参考下面的教程,效果可以参考下图,也可以直接前往评论区尝试

image-20220621223837877

为了方便,可以使用hitokoto一言功能,也可以自己写API,当然hitokoto是相当的简单实用的,具体用法可以参考官方的教程文档:

官方文档,支持多种模式,这里北忘山只是使用的是最简单的方式,但是不管使用何种方式,最好不要选择format的那种,我们默认的选择以json模式返回即可。你也可以使用北忘山写好的获取一言的方式,直接在代码中使用

首先需要准备两个文件,这两个文件我直接放在下方,大家自行下载即可,不要问我为什么要积分,签到就有30积分,注册就有20积分,下载绰绰有余!

将这两个文件上传到你的网站根目录下面,记住是根目录,不是主题的目录。

你也可以在根目录创建一个目录,例如:api,那么访问地址就是:你的网站/api/xx文件

为什么强调这个,因为你需要修改后面的代码中的文件地址,不要使用我的,我加了限制,会使用不了

主要代码

在主题的function.php中添加以下代码,如果担心每次主题更新会丢失这些自定义的代码,可以参考北忘山的另一种方法:

放入的代码如下:

//夸夸功能
function kuakua(){
    echo'<link rel="stylesheet" type="text/css" href="xx/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-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-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://v1.hitokoto.cn/",function(data){
            $(".kuakua-comment").html(data.hitokoto);
            $("#comment").text(data.hitokoto);
          });
        });
      });
      $(".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://v1.hitokoto.cn/",function(data){
          $(".kuakua-comment").html(data.hitokoto);
          $("#comment").text(data.hitokoto);
        });
        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>';
}

需要修改的地方有1个,大家直接搜索替换吧!

xx/kuakua.css 替换为自己的 css文件位置,自己将文件上传到自己的服务,然后替换位置即可;

其中代码中的 https://v1.hitokoto.cn/为hitokoto一言功能api地址,可以按照其官方文档自定义,不指定就用我这个吧

主题设置

然后在主题设置 -> 自定义底部HTML代码 中引入js文件

<script src="https://xx.com/font_2827587_zt5tfqudn5.js"></script>

其中的地址也是需要替换为自己的路径

修改主题文件

修改主题路径/wp-content/themes/zibll/template/comments.php里87行处添加代码、

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

然后保存,最后到文章页面刷新即可看到效果

子比主题评论区新增夸夸一言快捷评论方式-北忘山
子比主题评论区新增夸夸一言快捷评论方式
此内容为付费资源,请付费后查看
39积分
概不退款
技术支持
自动发货
下载说明积分系统即将上线,快速注册吧!
付费资源
已售 36
© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 共1条

请登录后发表评论