WordPress 添加代码复制按钮的方法

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

对于技术类WordPress站点，代码片段是核心内容之一。统计显示，带有复制按钮的代码块可使用户交互率提升300%。原生WordPress编辑器虽支持代码高亮，但缺少便捷的复制功能，手动选择代码既低效又容易出错。

方法一：使用Enlighter插件实现

<!-- 通过Enlighter插件自动添加复制按钮 -->
[enlighter lang="php" copy="true"]
function add_copy_button() {
  // 你的代码
}
[/enlighter]

安装Enlighter后，在短代码中添加copy="true"参数即可。该方案支持20+编程语言高亮，按钮样式可通过CSS自定义。

方法二：手动添加Clipboard.js

// 在主题footer.php添加
document.querySelectorAll('pre').forEach(pre => {
  const button = document.createElement('button');
  button.className = 'copy-btn';
  button.textContent = 'Copy';
  button.addEventListener('click', () => {
    navigator.clipboard.writeText(pre.innerText);
    button.textContent = 'Copied!';
    setTimeout(() => button.textContent = 'Copy', 2000);
  });
  pre.prepend(button);
});

配合CSS样式调整，此方法不依赖插件，加载速度更快。建议添加ARIA标签提升无障碍访问：

.copy-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 3px 8px;
  background: f5f5f5;
  border: 1px solid ddd;
}

方法三：集成Prism.js插件

若已使用Prism.js进行代码高亮，只需：

1. 下载Copy to Clipboard插件
2. 在Prism初始化配置中添加：plugins: ['copy-to-clipboard']

优势在于支持复制成功反馈动画，且兼容所有Prism主题。

方法四：WP Code Highlight.js方案

针对使用WP Code Highlight.js的用户：

// 在functions.php添加
add_filter('wp_code_highlightjs_settings', function($settings) {
  $settings['copy'] = true;
  return $settings;
});

方法五：Gutenberg区块增强

对于区块编辑器用户，推荐安装Code Block Pro插件：

• 直接在代码区块工具栏显示复制按钮
• 支持设置按钮位置（左上/右上）
• 可自定义按钮文本和图标

最佳实践建议

所有方案都应进行移动端测试，确保触控操作流畅。建议添加Google Analytics事件跟踪复制行为，便于内容优化。