WordPress文章代码高亮添加一键复制代码功能

这篇文章将为大家讲解如何为 WordPress 文章中的代码高亮块添加“一键复制”功能。如果您已经按照上一篇文章的教程实现了代码高亮效果，那么可以直接开始本教程。若尚未实现，建议先阅读：WordPress代码高亮免插件纯代码实现。

本文将不再赘述代码高亮的实现，直接进入“一键复制”功能的添加教程。

实现一键复制功能主要依赖于加载一个 JavaScript 库：clipboard.min.js，并编写相应的 JavaScript 代码来实现点击复制逻辑。具体步骤如下：

第一步：加载 Clipboard.js 文件

您需要将 clipboard.min.js 文件加载到您的网站中。可以通过 CDN 引入，也可以下载到本地服务器后引用。

方法一：使用 CDN（推荐用于测试）

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>

方法二：本地加载

1. 从 Clipboard.js 官网 下载库文件。
2. 将 `clipboard.min.js` 上传到您的主题目录下，例如：`/wp-content/themes/your-theme/js/`。
3. 在主题的 `header.php` 文件中的 </head> 标签前添加引用：

<script src="<?php echo get_template_directory_uri(); ?>/js/clipboard.min.js"></script>

第二步：实现一键点击复制功能

接下来，需要在您的主题 JavaScript 文件（例如 `main.js` 或 `custom.js`）中添加以下代码。这段代码会为每个代码块动态添加一个“复制”按钮，并绑定复制事件。

注意：以下代码假设您的代码高亮块是由 <pre><code>...</code></pre> 结构包裹的，并且位于类名为 `.single-content` 的容器内。请根据您自己主题的实际 HTML 结构调整选择器（如 `.single-content pre`）。

// 等待文档加载完毕
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有代码块容器
    var codeBlocks = document.querySelectorAll('.single-content pre');

    // 为每个代码块添加复制按钮
    codeBlocks.forEach(function(preBlock, index) {
        // 获取内部的 code 元素
        var codeElement = preBlock.querySelector('code');
        if (!codeElement) return;

        // 为 code 元素设置一个唯一的 ID，供复制功能定位
        var copyId = 'copy-code-' + index;
        codeElement.id = copyId;

        // 创建复制按钮
        var copyButton = document.createElement('button');
        copyButton.className = 'copy-code-btn';
        copyButton.setAttribute('data-clipboard-target', '#' + copyId);
        copyButton.textContent = '复制代码';
        copyButton.setAttribute('title', '点击复制');

        // 将按钮添加到 pre 块的右上角
        preBlock.style.position = 'relative'; // 设置相对定位以便按钮绝对定位
        copyButton.style.position = 'absolute';
        copyButton.style.top = '8px';
        copyButton.style.right = '8px';
        copyButton.style.padding = '4px 8px';
        copyButton.style.fontSize = '12px';
        copyButton.style.cursor = 'pointer';
        copyButton.style.backgroundColor = '#007cba';
        copyButton.style.color = '#fff';
        copyButton.style.border = 'none';
        copyButton.style.borderRadius = '3px';

        preBlock.appendChild(copyButton);
    });

    // 初始化 Clipboard.js
    var clipboard = new ClipboardJS('.copy-code-btn');

    // 复制成功回调
    clipboard.on('success', function(e) {
        e.clearSelection(); // 清除文本选择
        var originalText = e.trigger.textContent;
        e.trigger.textContent = '已复制！';
        e.trigger.style.backgroundColor = '#46b450'; // 成功时变为绿色

        // 2秒后恢复按钮原始状态
        setTimeout(function() {
            e.trigger.textContent = originalText;
            e.trigger.style.backgroundColor = '#007cba';
        }, 2000);
    });

    // 复制失败回调
    clipboard.on('error', function(e) {
        console.error('复制失败:', e.action);
        alert('复制失败，请手动选择文本后按 Ctrl+C 复制。');
    });
});

代码说明与优化：

1. 选择器调整：原教程代码中的 $('.single-content pre') 和 $('.pre') 选择器可能不通用。上述修改版使用了更标准的 document.querySelectorAll 并明确了容器类名 .single-content，请确保它与您主题中文章内容的容器类名一致。
2. 纯 JavaScript 实现：修改版代码未依赖 jQuery，兼容性更好。如果您的主题已加载 jQuery，也可以使用 jQuery 语法，但无依赖是更优选择。
3. 用户体验优化：复制成功后，按钮文字和颜色会短暂变化以提供视觉反馈，然后自动恢复，比简单的 alert 弹窗体验更佳。
4. 错误处理：复制失败时，除了在控制台输出错误，还给出了友好的手动复制提示。

第三步：检查与测试

完成以上代码添加后，请：

1. 清空浏览器缓存并强制刷新页面（Ctrl+F5 或 Cmd+Shift+R）。
2. 打开一篇包含代码高亮块的文章。
3. 检查每个代码块的右上角是否出现了“复制代码”按钮。
4. 点击按钮测试复制功能，观察成功与失败时的反馈是否符合预期。

如果按钮未出现或功能无效，请按 F12 打开浏览器开发者工具，在“控制台 (Console)”标签页查看是否有 JavaScript 报错，并根据错误信息排查问题（常见问题包括选择器错误、文件路径错误等）。

希望本教程能帮助您成功为 WordPress 代码块添加一键复制功能！