跳至正文

wordpress主题如何给引用代码添加复制功能按钮

主题 functions.php 底部输出 JS(子主题,避免更新覆盖)

外观→主题文件编辑器,打开子主题 functions.php,末尾粘贴:

// 页面底部注入复制代码JS
function add_code_copy_js() {
    ?>
<script>
document.addEventListener('DOMContentLoaded', function(){
    // 匹配所有代码块:古腾堡代码块 + 普通pre code
    const codeBlocks = document.querySelectorAll('.wp-block-code, pre');
    codeBlocks.forEach(block => {
        // 防止重复生成按钮
        if(block.querySelector('.copy-code-btn')) return;
        // 创建按钮
        const copyBtn = document.createElement('button');
        copyBtn.className = 'copy-code-btn';
        copyBtn.innerText = '复制代码';
        block.appendChild(copyBtn);

        // 点击复制逻辑
        copyBtn.addEventListener('click', async function(){
            // 获取代码文本
            const codeText = block.querySelector('code')?.innerText || block.innerText;
            try {
                await navigator.clipboard.writeText(codeText);
                copyBtn.innerText = '已复制!';
                copyBtn.classList.add('copied');
                // 2秒恢复文字
                setTimeout(()=>{
                    copyBtn.innerText = '复制代码';
                    copyBtn.classList.remove('copied');
                }, 2000);
            } catch(err) {
                // 兼容低版本浏览器降级方案
                const tempText = document.createElement('textarea');
                tempText.value = codeText;
                document.body.appendChild(tempText);
                tempText.select();
                document.execCommand('copy');
                document.body.removeChild(tempText);
                copyBtn.innerText = '已复制!';
                copyBtn.classList.add('copied');
                setTimeout(()=>{
                    copyBtn.innerText = '复制代码';
                    copyBtn.classList.remove('copied');
                }, 2000);
            }
        });
    });
})
</script>
    <?php
}
add_action('wp_footer', 'add_code_copy_js');
👀 阅读量:56

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

分享
扫码分享

扫码分享本文