WordPress如何实现一键复制指定内容?

王商
王商
王商
248
文章
0
评论
2020年11月5日17:07:57 评论

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

WordPress如何实现一键复制指定内容?

第一步:下载JS文件

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

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

第二步:引用JS与CSS文件

CSS代码:

  1. .red_tkl {
  2.     color#faddde;
  3.     bordersolid 1px #980c10;
  4.     background#d81b21;
  5.     background: -webkit-gradient(linear, left topleft 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 topleft 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 topleft bottombottom, from(#aa1317), to(#ed1c24));
  18.     background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
  19.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
  20. }
  21. .button_tkl {
  22.     displayinline-block;
  23.     *displayinline;
  24.     vertical-alignbaselinebaseline;
  25.     margin: 0 2px;
  26.     outlinenone;
  27.     cursorpointer;
  28.     text-aligncenter;
  29.     text-decorationnone;
  30.     font14px/100% ArialHelveticasans-serif;
  31.     padding: .5em 2em .55em;
  32.     text-shadow: 0 1px 1px rgba(0,0,0,.3);
  33.     -webkit-border-radius: .5em;
  34.     -moz-border-radius: .5em;
  35.     border-radius: .5em;
  36.     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  37.     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  38.     box-shadow: 0 1px 2px rgba(0,0,0,.2);
  39. }
  40. .button_tkl:hover {
  41.     text-decorationnone;
  42. }
  43. .button_tkl:active {
  44.     positionrelative;
  45.     top1px;
  46. }

将下载的 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>

效果预览:https://ymkt.org/11.html

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: