WordPress 点击按钮 一键复制文章链接

Gavin Wu 2023年01月13日 8:01 Wordpress 138 Views

WordPress 点击按钮 一键复制文章链接|微言心语
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 的末尾添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>

WordPress 点击按钮 一键复制文章链接|微言心语
三、在合适的地方添加复制按钮

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注