WordPress实现一键复制指定内容

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

第一步：下载JS文件

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

下载地址：点击下载（提取码: qw6s）

第二步：引用JS与CSS文件

CSS代码：

1. .red_tkl {
2.     color: #faddde;
3.     border: solid 1px #980c10;
4.     background: #d81b21;
5.     background: -webkit-gradient(linear, left top, left bottombottom, from(#ed1c24), to(#aa1317));
6.     background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
7.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
8. }
9. .red_tkl:hover {
10.     background: #b61318;
11.     background: -webkit-gradient(linear, left top, left bottombottom, from(#c9151b), to(#a11115));
12.     background: -moz-linear-gradient(top,  #c9151b,  #a11115);
13.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
14. }
15. .red_tkl:active {
16.     color: #de898c;
17.     background: -webkit-gradient(linear, left top, left bottombottom, from(#aa1317), to(#ed1c24));
18.     background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
19.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
20. }
22. .button_tkl {
23.     display: inline-block;
24.     *display: inline;
25.     vertical-align: baselinebaseline;
26.     margin: 0 2px;
27.     outline: none;
28.     cursor: pointer;
29.     text-align: center;
30.     text-decoration: none;
31.     font: 14px/100% Arial, Helvetica, sans-serif;
32.     padding: .5em 2em .55em;
33.     text-shadow: 0 1px 1px rgba(0,0,0,.3);
34.     -webkit-border-radius: .5em;
35.     -moz-border-radius: .5em;
36.     border-radius: .5em;
37.     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
38.     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
39.     box-shadow: 0 1px 2px rgba(0,0,0,.2);
40. }
41. .button_tkl:hover {
42.     text-decoration: none;
43. }
44. .button_tkl:active {
45.     position: relative;
46.     top: 1px;
47. }

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

1. <script src="https://ymkt.org/clipboard.min.js" type="text/javascript"></script>
2. <script>
3. var clipboard = new Clipboard('.itemCopy');
4. clipboard.on('success',
5. function(e) {
6.     if (e.trigger.disabled == false || e.trigger.disabled == undefined) {
7.         e.trigger.innerHTML = "复制成功";
8.         e.trigger.disabled = true;
9.         setTimeout(function() {
10.             e.trigger.innerHTML = "一键复制";
11.             e.trigger.disabled = false;
12.         },
13.         2000);
14.     }
15. });
16. clipboard.on('error',
17. function(e) {
18.     e.trigger.innerHTML = "复制失败";
19. });
20. </script>

第三步：使用教程

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

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