为代码模块添加一个复制按钮

可以选择在主题编辑器中 页脚“body”前插入

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 使用 MutationObserver 监听 DOM 变化
    const observer = new MutationObserver(function(mutationsList) {
        mutationsList.forEach(function(mutation) {
            if (mutation.type === 'childList') {
                // 只针对 <pre> 元素变化做处理
                var codeBlocks = document.querySelectorAll('pre.wp-block-code');
                codeBlocks.forEach(function(block) {
                    // 检查是否已经插入了按钮，避免重复插入
                    if (!block.querySelector('button.copy-code-button')) {
                        var code = block.querySelector('code');
                        if (code) {
                            var button = document.createElement('button');
                            button.classList.add('copy-code-button');
                            var buttonText = document.createTextNode('复制代码');
                            button.appendChild(buttonText);

                            // 设置按钮样式
                            button.style.cssText = 'position: absolute; top: 4px; right: 4px; padding: 4px 8px; font-size: 12px; background-color: rgba(0, 0, 0, 0.2); color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease-in-out; z-index: 10;';
                            
                            // 按钮的 hover 效果
                            button.addEventListener('mouseenter', function() {
                                button.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
                            });
                            button.addEventListener('mouseleave', function() {
                                button.style.backgroundColor = 'rgba(0, 0, 0, 0.3)';
                            });
                            
                            // 按钮点击事件：复制代码内容
                            button.addEventListener('click', function() {
                                var textarea = document.createElement('textarea');
                                textarea.value = code.textContent || code.innerText; // 获取代码内容
                                document.body.appendChild(textarea);
                                textarea.select();
                                textarea.setSelectionRange(0, 99999); // 适配移动设备

                                // 执行复制命令
                                try {
                                    var successful = document.execCommand('copy');
                                    if (successful) {
                                        button.innerText = '已复制';
                                        button.style.backgroundColor = '#333';
                                        button.style.color = '#fff';

                                        setTimeout(function() {
                                            button.innerText = '复制代码';
                                            button.style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
                                            button.style.color = '#fff';
                                        }, 3000);
                                    } else {
                                        alert('复制失败，请手动复制');
                                    }
                                } catch (err) {
                                    console.error('复制失败:', err);
                                    alert('复制失败，请手动复制');
                                }

                                document.body.removeChild(textarea);
                            });

                            block.style.cssText = 'position: relative;';
                            block.insertBefore(button, code);
                        }
                    }
                });
            }
        });
    });

    // 配置 observer 监听 <pre> 元素的变动
    observer.observe(document.body, { childList: true, subtree: true });

    // 初始调用，确保页面加载完成时执行一次
    setTimeout(function() {
        var codeBlocks = document.querySelectorAll('pre.wp-block-code');
        codeBlocks.forEach(function(block) {
            if (!block.querySelector('button.copy-code-button')) {
                var code = block.querySelector('code');
                if (code) {
                    var button = document.createElement('button');
                    button.classList.add('copy-code-button');
                    var buttonText = document.createTextNode('复制代码');
                    button.appendChild(buttonText);

                    button.style.cssText = 'position: absolute; top: 4px; right: 4px; padding: 4px 8px; font-size: 12px; background-color: rgba(0, 0, 0, 0.2); color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease-in-out; z-index: 10;';
                    
                    button.addEventListener('mouseenter', function() {
                        button.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
                    });
                    button.addEventListener('mouseleave', function() {
                        button.style.backgroundColor = 'rgba(0, 0, 0, 0.3)';
                    });

                    button.addEventListener('click', function() {
                        var textarea = document.createElement('textarea');
                        textarea.value = code.textContent || code.innerText;
                        document.body.appendChild(textarea);
                        textarea.select();
                        textarea.setSelectionRange(0, 99999);

                        try {
                            var successful = document.execCommand('copy');
                            if (successful) {
                                button.innerText = '已复制';
                                button.style.backgroundColor = '#333';
                                button.style.color = '#fff';

                                setTimeout(function() {
                                    button.innerText = '复制代码';
                                    button.style.backgroun

或者是安装并激活插件 Insert Headers and Footers，在 WordPress 后台，点击 设置 → Insert Headers and Footers，将上面提供的 JavaScript 代码粘贴到 Scripts in Footer 部分，保存更改。

PS:代码部分的注释可自行删除，代码来源ChatGPT，如有雷同，纯属巧合。