演示效果
详细教程
首先，在WordPress主题的<head>部分引入clipboard.js库。将以下代码添加到header.php文件中：
<!-- 引入 clipboard.js 库 -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
在WordPress主题中创建一个短代码，用于显示带有复制按钮的文本。在functions.php文件中添加以下代码：
这段代码定义了一个名为[copy_to_clipboard]的短代码，它将显示一个带有复制按钮的文本输入框。
在WordPress主题的<script>标签或外部JavaScript文件中添加以下代码以初始化clipboard.js：
document.addEventListener('DOMContentLoaded', function() {
// 初始化 clipboard.js
const clipboard = new Clipboard('.clipboard-btn');
// 监听复制成功事件
clipboard.on('success', function(e) {
alert('已复制到剪贴板: ' + e.text);
e.clearSelection();
});
// 监听复制失败事件
clipboard.on('error', function(e) {
alert('无法复制到剪贴板，请手动复制文本: ' + e.text);
});
});
这段代码将在页面加载完成后初始化clipboard.js，并监听复制成功和失败的事件。
现在，您可以在WordPress文章或页面中使用[copy_to_clipboard]短代码来实现一键复制功能。例如：
[copy_to_clipboard]这是要复制的文本[/copy_to_clipboard]
为了在复制成功后显示提示，我们可以使用alert()函数弹出一个提示框。以下是修改后的JavaScript代码，实现了在复制成功后显示提示的功能：
document.addEventListener('DOMContentLoaded', function() {
// 初始化 clipboard.js
const clipboard = new Clipboard('.clipboard-btn');
// 监听复制成功事件
clipboard.on('success', function(e) {
alert('已复制到剪贴板: ' + e.text); // 显示复制成功的提示
e.clearSelection();
});
// 监听复制失败事件
clipboard.on('error', function(e) {
alert('无法复制到剪贴板，请手动复制文本: ' + e.text); // 显示复制失败的提示
});
});为了美化输入框和按钮，您可以使用CSS来定义它们的样式。以下是一个简单的示例，展示如何为输入框和按钮添加样式：
/* 美化输入框 */
.copy-container input {
padding: 10px 15px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 4px;
outline: none;
transition: all 0.3s ease;
}
/* 美化按钮 */
.clipboard-btn {
padding: 10px 15px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
/* 鼠标悬停在按钮上时的效果 */
.clipboard-btn:hover {
background-color: #0056b3;
}
/* 按钮被点击时的效果 */
.clipboard-btn:active {
transform: scale(0.98);
}最后注意：输入框和按钮之间的距离，加空格就能实现
