网站内容复制(WordPress网站添加一键复制指定内容，方法其实很简单！ )

　　网站内容复制(WordPress网站添加一键复制指定内容，方法其实很简单！

)

　　WordPress网站 添加一键复制指定内容。方法其实很简单。给大家分享一个教程，通过JS代码实现一键复制指定内容。

　　第一步：JS文件下载

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

　　点击下载（提取码：qw6s）

　　第 2 步：引用 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末尾添加如下代码：

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 = "复制失败";

});

　　第 3 步：使用教程

　　引用JS和CSS文件后，在文章中需要复制的地方放置一个按钮，代码如下：

　　一键复制