WordPress文章内添加一键复制按钮

WordPress 通过 JS 代码实现点击按钮一键复制指定内容

1、下载 Clipboard.js 插件

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

地址：https://img.51yhyh.com/filejscss/js/clipboard.min.js 一键复制

注意有时候clipboard.min.js版本不对也不起效，

2、引入 JS 文件

把下载好的 clipboard.min.js 上传到网站根目录，或者直接引入本站的 js 文件地址

同时在 WordPress 主题的 footer.php 文件的末尾添加下方代码：

<script src="https://img.51yhyh.com/filejscss/js/clipboard.min.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、文章插入代码

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

<button class="itemCopy CopyStyle" type="button" data-clipboard-text="需要复制的内容"> 一键复制 </button> 

4、CSS 文件引入

在 WordPress 主题的 header.php 文件的 </head> 前添加下方代码：

.CopyStyle {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 0px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    margin: 4px 2px;
    cursor: pointer;
}