欢迎光临
个人知识库,ERP、IT知识分享和应用

WordPress博客实现 点击按钮 一键复制 指定内容教程

https://www.jkmeng.cn/1775.html

番茄以前使用的是Discuz!论坛,这个程序帖子页是自带 复制链接 按钮的,可以一键复制帖子标题和链接,可以非常方便的对帖子进行分享,今天就把这个功能移植到WordPress博客,做一个记录,希望这个帖子可以帮助到同样是使用WordPress博客的朋友,下面我们就开始教程。

一、下载一键复制 JS 库
clipboard.js 是一个 Github 上的开源项目,可以实现纯 JavaScript 的浏览器内容复制到系统剪贴板的功能。
clipboard.js 下载地址:
天翼网盘:https://cloud.189.cn/t/E36fInY7feua
百度网盘:https://pan.baidu.com/s/1PvFVRRul_i2hpXnxn2uRsQ 提取码: tav6
不限速:https://www.lanzoui.com/i74bpmj

二、引用 JS 库与 css 文件
将下载的 clipboard.min.js 上传到网站根目录,在 WordPress 的 footer.php 的末尾添加如下代码:

<script src=“https://www.jkmeng.cn/clipboard.min.js” type=“text/javascript”></script>
<script type=“text/javascript”>
var clipboard = new Clipboard(‘.itemCopy’);
clipboard.on(‘success’,
function(e) {
if (e.trigger.disabled == false || e.trigger.disabled == undefined) {
e.trigger.innerHTML = “复制成功”;
e.trigger.disabled = true;
setTimeout(function() {
e.trigger.innerHTML = “复制链接”;
e.trigger.disabled = false;
},
2000);
}
});
clipboard.on(‘error’,
function(e) {
e.trigger.innerHTML = “复制失败”;
});
</script>

其中,https://www.jkmeng.cn/clipboard.min.js 换成你自己的 js 文件地址。

之后在文章中的某个需要复制的地方放一个按钮就可以了:一般是这个文件single.php (这个代码是复制帖子标题加帖子链接)

<button id=“TKLS” class=“itemCopy red_tkl button_tkl” type=“button” data-clipboard-text=“<?php the_title(); ?>:<?php the_permalink() ?>”>复制链接</button>

代码添加位置:
WordPress博客-实现-点击按钮-一键复制-指定内容教程

按钮位置预览:
WordPress博客-实现-点击按钮-一键复制-指定内容教程

复制出来的效果预览:
WordPress博客-实现-点击按钮-一键复制-指定内容教程

未经允许不得转载:Blog.XiaoMing.Xyz » WordPress博客实现 点击按钮 一键复制 指定内容教程
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址