介绍三种在网站的访客对站点文章文本进行复制内容时弹出版权提示。实现代码:一种较简单,效果也简单; 一种直接调用也还不错,一种稍复杂,效果也更佳,根据自己的喜爱选择进行修改实现博客的美化
一、借助内置弹窗
function.php内添加如下代码
function copyright_tips() {
echo '<script>document.body.oncopy=function(){alert("复制成功!撰文不易,转载请保留原文链接,谢谢合作!");}</script>';
}
add_action( 'wp_footer', 'copyright_tips', 100 );

第二种直接调用的效果

实现方法:
<script src="https://szfx.top/js/toastr.js"></script>
<!--文本复制弹窗引用-->
<script src="https://szfx.top/js/toastr.js"></script>
<link rel="stylesheet" href="https://szfx.top/css/toastr.css" />
<!--css部分-->
<style>
/*文字复制弹窗css*/
.toast-top-right {
top: 72px;
right: 12px;
}
.toast-success {
background-color: #7486E7;
}
</style>
2、添加复制监听函数
<script type="text/javascript">
function copy_remind(){
toastr.success("撰文不易,请保留出处,谢谢!", "复制成功!");
clear_toastr(1600);
// 动态设置消息提示时间
function clear_toastr(time){
setTimeout(
function(){
toastr.clear();
}, time);
}
}
document.addEventListener("copy",function(e){
if(window.getSelection(0).toString()){
copy_remind(); //若所选文本不为空则显示
}
});
</script>

3、若网站没有引入jquery则要引入,如果有请不要复制下面这段代码(默认woedpress不需要加):
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
4、有四种样式:success、error、info、warning,效果类似:仿win10侧边滑出提示框

二、美化弹出样式
实现后效果

只需三步就可实现
1、上传文件;将底部附件上传至服务器
sweetalert.css、sweetalert.min.js
2、引入文件;在header.php的添加如下下代码,这里是直接调用我给大家准备的js和css,如果有想自己在本地调用的可下载文章中的js和css已为大家整理打包
<link rel="stylesheet" href="https://www.zsoco.com/text/css/sweetalert.css" type='text/css' />
<script src="https://www.zsoco.com/text/js/sweetalert.min.js"></script>

3、添加信息
在header.php内最后一行也就是最底部添加版权信息代码即可
<script>document.body.oncopy = function() {swal("复制成功!", "撰文不易,若转载请务必保留原文链接,谢谢合作!","success");};</script>
蓝奏云
第三种美化弹窗css和js可自行上传服务器使用
类型:
css,js
本文参考:文本复制-技术松鼠 | 腾讯云—博客复制弹窗提示版权
若不是百炼成钢,谁能饱经风霜;若不是咬紧牙关,谁能一路向前。
每日一句励志文案
agars是否啊付啊帅哥
使用