经验秘籍:wordpress 通过 js 代码实现点击按钮一键复制指定内容-凯发app官网

一键复制

今天有需求想实现点击一个按钮自动一键复制指定的内容，但是搜来搜去都是关于防止 wordpress 内容被复制的教程。后来找到一个通过 clipboard.js 实现利用 js 代码一键复制指定内容的方法，适用于 wordpress，这里分享给大家。

一、下载一键复制 js 库

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

下载地址：（clipboard.min.js）

二、引用 js 库与 css 文件

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

 src="https://qianfangzy.com/clipboard.min.js" type="text/javascript">

其中，https://qianfangzy.com/clipboard.min.js 换成你自己的 js 文件地址。

之后在文章中的某个需要复制的地方放一个按钮就可以了：

 class="itemcopy red_tkl button_tkl" id="tkls"  type="button" data-clipboard-text="需要复制的内容">一键复制

只需要在自己使用的主题模板函数functions.php文件中，添加以下的代码即可。

//添加一键复制按钮
function appthemes_add_quicktags() {
?>

三、效果图

这里再分享下我的 css：

.red_tkl {
	color: #faddde;
	border: solid 1px #980c10;
	background: #d81b21;
	background: -webkit-gradient(linear, left top, left bottom, 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 bottom, 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 bottom, 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: baseline;
	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;
}

一键复制

添加wordpress编辑器按钮（文本查看）

//添加一键复制按钮
function appthemes_add_quicktags() {
?>

历史上的今天:

• 2023:  网站推荐:在线认知偏差知识手册 设计心理学知识
• 2023:  微语录精选:霜降
• 2023:  1111特价会员汇总贴，腾讯视频 京东plus=128
• 2022:  微语录精选:请问你有没有什么很废很无用的技能？
• 2022:  游戏推荐[pc端游戏]没有b计划|early access|no plan b