如何给WP添加一个复制提示框

在别人浏览我们的网站的时候,有时会看到一些有趣的文章,所以选择复制内容,然后分享给大家,但是,总是不标注来源地址就很伤心,这次我就搞了一个提示框和强行一起复制的部分内容。不行你就复制看看啊!

什么,你还是不愿意标注来源地,我************。呼,是我失态了,话也不多说了,接下来就开始我们的教学吧。

【部分有此功能的主题就别看了!!!还有,转载给我标注来源地!!!】

第一步

我们来到主题自带的页头代码页脚代码添加以下代码

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>
<script type="text/javascript">
/**复制自动添加版权声明*/
$(document).on("copy", function(e) {
  var selected = window.getSelection();
  var selectedText = selected.toString().replace(/\n/g, "<br>");
  var copyFooter =
      "<br>-----------------------------------------------------------<br>著作权归作者所有。<br>" +
      "商业转载请联系作者获得授权,非商业转载请注明出处。<br>" +
      "作者:茗茶<br> 源地址:" +
      document.location.href +
      "<br>来源:茗茶の博客<br>© 版权声明:本文为博主原创文章,转载请务必保留原文链接!";
  if (document.location.pathname === "/") {
    var copyFooter =
        "<br>----------------------------------------------------------<br>" +
        "来源:茗茶の博客<br> 源地址:" +
        document.location.href +
        "<br>© 版权声明:商业转载请联系作者获得授权,非商业转载请注明出处。<br>";
  }
  var msgContent =
      '<span style="font-weight: 700;margin: 0 !important;">【茗茶の博客(www.asukatea.cc)】<br>复制成功,若要转载请务必保留原文链接</span>' + copyFooter;
  layer.msg(msgContent, {
    time: 2000,
    shift: 2,
    shade: 0.3,
    skin: "wiiuii-layer-mode"
  });
  var copyHolder = $("<div>", {
    id: "temp",
    html: selectedText + copyFooter,
    style: {
      position: "absolute",
      left: "-99999px"
    }
  });
  $("body").append(copyHolder);
  selected.selectAllChildren(copyHolder[0]);
  window.setTimeout(function() {
    copyHolder.remove();
  }, 0);
});
</script>

第二步

我们来到WP后台>主题>主题文件编辑器>自定义css文件【style.css】
添加以下代码。

/*layui弹窗样式美化*/
.wiiuii-layer-mode{
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border: none !important;
border-radius: 8px !important;
}
本片文章是由【茗茶】所编写的。
如要转载此文章必须经过本文章作者【茗茶】授权允许
转载本文章【如何给WP添加一个复制提示框】时,需要标注来源地址!否则后果自负!
本片文章的网址是:https://www.asukatea.cc/835.html | 请标注来源地哦~~~
THE END
分享
二维码
打赏
海报
如何给WP添加一个复制提示框
在别人浏览我们的网站的时候,有时会看到一些有趣的文章,所以选择复制内容,然后分享给大家,但是,总是不标注来源地址就很伤心,这次我就搞了一个提示框和……
<<上一篇
下一篇>>
文章目录
关闭
目 录