​标题很显然,今天给大家介绍的是:

访客复制内容时弹出版权提示。

介绍两种实现代码:

一种较简单,效果也简单;
一种稍复杂,效果也更佳。

一、借助内置弹窗

这种方法很简单,只需在

function.php内添加如下代码

function copyright_tips() {
      echo '<script>document.body.oncopy=function(){alert("复制成功!撰文不易,转载请保留原文链接,谢谢合作!");}</script>';
    }
    add_action( 'wp_footer', 'copyright_tips', 100 );

实现效果:在浏览器弹出

v2-b52f70a180847aef35909133d219e45f_720w

二、美化弹出样式

看看效果如何?只需三步就可实现

1、上传文件

将底部附件上传至服务器

sweetalert.css、sweetalert.min.js

2、引入文件

在header.php添加如下下代码

<link rel="stylesheet" href="你的sweetalert.css位置" type='text/css' /> 
<script src="你的sweetalert.min.js位置"></script>

需在<head></head>中间哦~

v2-94914b6fc65d7ea7f5d4f236fb113972_720w

3、添加信息

在header.php内添加版权信息

<script>document.body.oncopy = function() {swal("复制成功!", "撰文不易,若转载请务必保留原文链接,谢谢合作!","success");};</script>

注意添加在最底部

v2-f2d369f950c7eea744d081273cc996ae_720w

刷新缓存,可以看到效果了~

此法转载自腾讯云社区-博客复制弹窗提示版权

进阶版本

将之前的js改为下列即可

document.addEventListener("copy",function(e){
   if(window.getSelection(0).toString()){
       swal({title:"复制成功",
           text:"撰文不易,若转载请务必保留原文链接,谢谢合作!!",
           type:"success",
           showCancelButton:false,
           showConfirmButton:false,
           buttons: false,
           timer: 2200,
       })
  }  
  else{
    swal({title:"复制提示",
           text:"啊噢...你没还没选择文字呢!!",
           type:"error",
           showCancelButton:false,
           showConfirmButton:false,
           buttons: false,
           timer: 1200,
       })
  }
}); 






文件名称:复制弹窗代码
适用版本:HTML
更新日期:2018-07-31
文件大小:9.1KB

点击下载

Invitation
QQ Group
1095632335

created:04/01/2020

Welcome to the Group

Use this card to join us and participate in a pleasant discussion together .

Welcome to JISHUSONGSHU Group,wish you a nice day .