• 首页
  • 学技能
    • 技术教程
    • 视觉设计
    • 课程资源
  • 软件仓
    • Windows
    • MacOS
    • Android
  • 源码库
    • 网站源码
    • WordPress插件
    • WordPress主题
  • 超运维
    • SEO排名
    • 建站教程
    • 网络安全
  • 干货
  • 简报
  • 随手记
  • 友人帐
  • MEI图
  • 注册
  • 登录
首页 超运维 建站教程 Wordpress博客网站美化文本复制,弹出版权提示
置顶

Wordpress博客网站美化文本复制,弹出版权提示

乔科 2021-11-02 10:50:41

介绍三种在网站的访客对站点文章文本进行复制内容时弹出版权提示。实现代码:一种较简单,效果也简单; 一种直接调用也还不错,一种稍复杂,效果也更佳,根据自己的喜爱选择进行修改实现博客的美化

一、借助内置弹窗

function.php内添加如下代码

function copyright_tips() {
      echo '<script>document.body.oncopy=function(){alert("复制成功!撰文不易,转载请保留原文链接,谢谢合作!");}</script>';
    }
    add_action( 'wp_footer', 'copyright_tips', 100 );
Wordpress博客网站美化文本复制,弹出版权提示-
第一种内置弹窗实现效果

第二种直接调用的效果

Wordpress博客网站美化文本复制,弹出版权提示-
第二种内置弹窗效果

实现方法:

1、在主题的自定义头部里引用js和css

<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>
Wordpress博客网站美化文本复制,弹出版权提示-
效果

3、若网站没有引入jquery则要引入,如果有请不要复制下面这段代码(默认woedpress不需要加):

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

4、有四种样式:success、error、info、warning,效果类似:仿win10侧边滑出提示框

Wordpress博客网站美化文本复制,弹出版权提示-
仿windows侧边滑出效果

二、美化弹出样式

实现后效果

Wordpress博客网站美化文本复制,弹出版权提示-
美化wordpress美化弹出样式

只需三步就可实现

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>
Wordpress博客网站美化文本复制,弹出版权提示-

3、添加信息

在header.php内最后一行也就是最底部添加版权信息代码即可

<script>document.body.oncopy = function() {swal("复制成功!", "撰文不易,若转载请务必保留原文链接,谢谢合作!","success");};</script>
蓝奏云
第三种美化弹窗css和js可自行上传服务器使用
类型: css,js

本文参考:文本复制-技术松鼠 | 腾讯云—博客复制弹窗提示版权

若不是百炼成钢,谁能饱经风霜;若不是咬紧牙关,谁能一路向前。

每日一句励志文案
# css# js# wordpress# WordPress教程# 文本复制弹窗
1
乔科
因为热爱,所以存在
赞赏
乔科

评论 (2)

请登录以参与评论。
现在登录
  • 高飞

    agars是否啊付啊帅哥

    9月前 安徽省 回复
  • 乔科

    使用

    1年前 陕西省 回复

猜你喜欢

  • reset.css 重置浏览器标签的样式表CSS 工具:重置 CSS
  • WordPress优化 - 为网站配置下雪效果,圣诞雪花动态特效 JS
  • WordPress友情链接模板(附带网址检测)
  • CorePress主题-高颜值性能的极客主题
  • WordPress更新插件,出现正在例行维护模式错误解决方法
  • 过年啦 该挂灯笼了!(给WordPress网站加红灯笼教程)
  • WordPress 5.8.2 官方正式版发布,修补安全漏洞等问题
  • 欢迎来到freeCodeCamp.org适合初学者的在线编程学习网站
  • Cloudreve宝塔Nginx完整详细安装反代理进程守护配置教程
  • 使用js实现倒计时随机跳转到一个网址

热门推荐

推荐文章

HTML源码8

WordPress教程6

建站源码2

技术杂炖8

精选18

要闻6

软件17

乔科
因为热爱,所以存在
87
文章
3
评论
60
获赞
乔科

标签云

Android MacOS SEO排名 Windows WordPress主题 WordPress插件 干货 建站教程 技术教程 教育资源 源码库 简报 网站源码 网络安全 视觉设计 课程资源 超运维 软件下载 随手记

创作不易,打赏有力

  • 索科首页
  • 会员注册
  • 免责声明
  • 友情链接
  • 网站地图
Copyright © 2021.9.18-2023 . Designed by nicetheme. 索科
收录的信息均来自网络,本站不对任何信息做任何担保,如信息有违规或者收录通过后有违规信息出现,请联系我们删除!
陕ICP备2021012070号-1
友情链接: 百克博客 简论博客 猫先生博客 子比主题 低调的猫 故人博客 修罗学院
现在登录
  • HOME
  • 随手记
  • 学技能
  • 源码库
  • 软件仓
  • 干货
  • 简报
  • 超运维
  • MEI图