经常会见到网站上各种“一键复制”的友好体验按钮,不局限于 code 的复制,这样友好的体验,方便快捷的操作对访客来说百利无一害。在网上搜索了一番关于“JS 实现一键复制”的文章数不胜数啊。用得较多的就是通过 clipboard.min.js 来实现复制,毕竟现在 Flash 在各浏览器中被禁用等等各种不友好。阅读数十篇文章中可偏偏没有 WordPress 的插件,或者是纯代码,奈何只能自己来操作。倒腾了有 2 天多,在朋友的帮助下,实现了“一键复制指定内容”的功能,也将代码集成在文章编辑器中,也还是很方便了。
WordPress实现一键复制指定内容步骤
1、下载 clipboard.js 文件。clipboard.js 是一个 github 上的开源项目,可以实现纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。
2、将以下代码放在 footer.php 中,其中 clipboard.min.js 路径请自行修改。
- <script src=“JS 路径” type=“text/javascript”></script>
- <script>
- 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=“复制失败”;
- });
- </script>
3、在 header.php 头部引入以下 amazeui.css 文件。以下 amazeui-2.css 文件引入的是无删减版,大家也可以使用压缩包里面的 amazeui.css 文件,自行选择即可。
- <link rel=“stylesheet” href=“https://tu2.aitao779.com/amazeui-2.css “>
4、在文章中引用按钮代码。在编写文章的时候,将代码放在合适的位置,把 data-clipboard-text 的值“复制的内容”修改成指定的内容即可。
- <button class=“itemCopy am-btn am-btn-warning am-round am-btn-xs” id=“TKLS” type=“button” data-clipboard-text=“复制的内容”>一键复制</button>
建议把这个功能集成到主题编辑器中,方便操作。如果对代码比较模糊不懂修改 CSS 代码的话建议不要修改中间的 id 和 class 部分。
到这里差不多就完成了,说实话我自己都觉得有点粗糙。但是在摸索的路上收获颇多。也希望路过的大佬们,来指点和优化下代码。做出更好更方便的复制功能。具体效果请前往本文原地址下方点击『一键复制』按钮试试效果。