WordPress网站如何实现一键复制(附JS代码)

2022-08-28 409 0

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

第一步:JS文件下载

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

第二步:引用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);//https://2bcd.com
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);//https://2bcd.com
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;//https://2bcd.com
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 的末尾添加如下代码:



第三步:使用教程

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

相关文章

为什么所有直播工作室都要来一个店播播AI自动播系统
淘宝网购怎么退货流程(淘宝网购电动车退货难)
引流推广的工作内容怎么写(奶粉推广的工作内容怎么写)
天猫店铺转让出售网住宅家具定制(二手天猫店铺出售转让)
网络市场调研包括哪些内容(市场调研背景包括哪些内容)
鸿福郎酒这个酒怎么样(鸿福郎酒50度喝着怎么样)