首页 网络技术
  1. 正文

WordPress怎么用代码实现一键复制指定内容?

最近想要实现WordPress一键复制指定内容,在网上找了很久自己也亲自测试,终于找到一个通过JS代码实现一键复制指定内容的方法。

WordPress怎么用代码实现一键复制指定内容?

第一步:下载JS文件

clipboard.js 是一个 Github 上的开源项目,可以实现纯 JavaScript 的浏览器内容复制到系统剪贴板的功能!

下载地址:点击下载(提取码: qw6s)

第二步:引用JS与CSS文件

CSS代码:

.red_tkl {
    color: #faddde;
    border: solid 1px #980c10;
    background: #d81b21;
    background: -webkit-gradient(linear, left top, left bottombottom, from(#ed1c24), to(#aa1317));
    background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red_tkl:hover {
    background: #b61318;
    background: -webkit-gradient(linear, left top, left bottombottom, from(#c9151b), to(#a11115));
    background: -moz-linear-gradient(top,  #c9151b,  #a11115);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red_tkl:active {
    color: #de898c;
    background: -webkit-gradient(linear, left top, left bottombottom, from(#aa1317), to(#ed1c24));
    background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}
 
.button_tkl {
    display: inline-block;
    *display: inline;
    vertical-align: baselinebaseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button_tkl:hover {
    text-decoration: none;
}
.button_tkl:active {
    position: relative;
    top: 1px;
}

将下载的 clipboard.min.js 上传到网站根目录,在 WordPress 的 footer.php 的末尾添加如下代码:

<script src="https://ymkt.org/clipboard.min.js" type="text/javascript"></script>
<script>
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>

第三步:使用教程

JS与CSS文件引用之后,在文章中的某个需要复制的地方放一个按钮就可以了,代码如下:

<button class="itemCopy red_tkl button_tkl" id="TKLS"  type="button" data-clipboard-text="需要复制的内容">一键复制</button>

本文标题:WordPress怎么用代码实现一键复制指定内容?
本文链接:https://www.qqooo.cn/post/275.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 feelym@88.com 处理,谢谢!