在 WordPress 中插入带复制按钮的代码块的完整指南

为什么需要带复制按钮的代码块？

对于技术类 WordPress 网站，代码展示是核心需求之一。带复制按钮的代码块能显著提升用户体验：

• 访客可一键复制代码，无需手动选择
• 减少复制过程中的格式丢失问题
• 专业的外观提升网站可信度
• 降低用户操作门槛，提高内容分享率

实现方法一：使用专业插件

已安装代码高亮插件的情况下，推荐以下增强方案：

1. Enlighter 插件方案

// 在文章编辑器中直接插入代码块
[enlighter lang="php"]
function add_copy_button() {
    // 你的代码在这里
}
[/enlighter]
        

启用插件设置中的 “Toolbar” 选项即可自动添加复制按钮。

2. Prism.js 手动集成

<div class="code-container">
    <button class="copy-btn" onclick="copyCode(this)">复制</button>
    <pre><code class="language-javascript">
    const message = "Hello World";
    console.log(message);
    </code></pre>
</div>

<script>
function copyCode(btn) {
    const code = btn.nextElementSibling.textContent;
    navigator.clipboard.writeText(code);
    btn.textContent = "已复制!";
    setTimeout(() => btn.textContent = "复制", 2000);
}
</script>
        

纯CSS解决方案

无需JavaScript的轻量级方案：

.code-block {
    position: relative;
    background: f8f8f8;
    padding: 1em;
    border-radius: 4px;
}
.copy-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    background: 2271b1;
    color: white;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 3px;
}
        

SEO优化建议

• 为代码块添加适当的 alt 文本描述
• 在代码块周围添加解释性文字
• 确保复制按钮不影响移动端体验
• 使用 <pre> 标签增强语义化

常见问题解答

Q：复制按钮在移动设备上不工作？

A：确保使用 navigator.clipboard 的兼容性写法，或改用 document.execCommand('copy') 作为备用方案。

Q：如何更改按钮样式？

A：通过CSS覆盖插件默认样式，或使用 !important 声明提高优先级。