l-1

WEB教程

主页/jQuery代码实现/复制/WordPress代码块添加复制功能方案

jQuery代码实现

WordPress代码块添加复制功能方案

下面是一个对比表格，帮助您快速了解不同方案的特点：

方案实现方式优点缺点
方案一：jQuery/JavaScript使用jQuery选择元素并插入HTML代码简洁，易于理解和修改需要页面已加载jQuery库
方案二：纯JavaScript使用原生DOM操作方法不依赖jQuery，性能较好代码相对复杂一些
附加功能添加复制功能的JavaScript代码使按钮具有实际功能需要额外的JavaScript代码

方案一：使用jQuery实现

如果您的WordPress站点已经加载了jQuery库，这是最简洁的实现方式：

jQuery(document).ready(function($) {
    // 为每个pre.wp-block-code元素添加复制按钮
    $('pre.wp-block-code').each(function() {
        // 使用beforebegin或afterbegin位置插入复制按钮
        $(this).before('<div class="copy d-flex align-items-center justify-content-start gap-4 flex-nowrap"><div class="inc-svg"><svg xmlns="http://www.w3.org/2000/svg" class="bi bi-copy" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/></svg></div><div class="copied position-absolute end-0 top-100 z-1 mt-3 me-2 p-2 rounded-2 bg-primary text-white lh-1 text-nowrap">已复制 !</div></div>');
    });
});

方案二：使用纯JavaScript实现

如果您的站点没有使用jQuery，可以使用原生JavaScript方法：

document.addEventListener('DOMContentLoaded', function() {
    // 选择所有pre.wp-block-code元素
    var codeBlocks = document.querySelectorAll('pre.wp-block-code');

    // 遍历每个代码块并添加复制按钮
    codeBlocks.forEach(function(codeBlock) {
        // 创建复制按钮的HTML字符串
        var copyButtonHTML = '<div class="copy d-flex align-items-center justify-content-start gap-4 flex-nowrap"><div class="inc-svg"><svg xmlns="http://www.w3.org/2000/svg" class="bi bi-copy" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/></svg></div><div class="copied position-absolute end-0 top-100 z-1 mt-3 me-2 p-2 rounded-2 bg-primary text-white lh-1 text-nowrap">已复制 !</div></div>';

        // 使用insertAdjacentHTML方法在代码块前插入复制按钮
        codeBlock.insertAdjacentHTML('beforebegin', copyButtonHTML);
    });
});

🛠️ 添加复制功能

要使复制按钮实际工作，您还需要添加以下JavaScript代码：

// 为复制按钮添加点击事件处理
document.addEventListener('click', function(e) {
    if (e.target.closest('.copy')) {
        var copyButton = e.target.closest('.copy');
        var codeBlock = copyButton.nextElementSibling; // 假设复制按钮在代码块之前
        var codeText = codeBlock.textContent;

        // 使用Clipboard API复制文本
        navigator.clipboard.writeText(codeText).then(function() {
            // 显示"已复制"提示
            var copiedTip = copyButton.querySelector('.copied');
            copiedTip.style.display = 'block';

            // 2秒后隐藏提示
            setTimeout(function() {
                copiedTip.style.display = 'none';
            }, 2000);
        }).catch(function(err) {
            console.error('复制失败: ', err);
        });
    }
});

在WordPress中实施

要将这些代码添加到您的WordPress站点，有几种方法：

  1. 使用子主题的functions.php文件（推荐）：
   function add_custom_code_block_script() {
       ?>
       <script>
       // 在这里添加上述JavaScript代码
       </script>
       <?php
   }
   add_action('wp_footer', 'add_custom_code_block_script');
  1. 使用自定义HTML区块：将JavaScript代码添加到页面底部。
  2. 使用专门的代码插件：如”Code Snippets”插件来管理自定义代码。

💡 样式调整建议

为了使复制按钮位置更合适，您可能需要添加一些CSS样式：

pre.wp-block-code {
    position: relative;
}

.copy {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.copy:hover {
    opacity: 1;
}

.copied {
    display: none;
}

代码块复制功能（jQuery实现）完整版

我将为您创建一个完整的WordPress代码块复制功能实现，使用jQuery来添加复制按钮和处理复制功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WordPress代码块复制功能演示</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* 基础样式 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        header {
            background: #2c3e50;
            color: white;
            padding: 30px;
            text-align: center;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .subtitle {
            font-size: 1.2rem;
            opacity: 0.8;
        }

        .content {
            padding: 30px;
        }

        .intro {
            margin-bottom: 30px;
            font-size: 1.1rem;
            line-height: 1.8;
        }

        /* 代码块样式 */
        .code-container {
            margin: 25px 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        pre.wp-block-code {
            position: relative;
            background-color: #1e1e1e;
            color: #d4d4d4;
            padding: 25px;
            margin: 0;
            font-family: 'Consolas', 'Courier New', Courier, monospace;
            font-size: 15px;
            line-height: 1.5;
            overflow-x: auto;
            border-left: 5px solid #007cba;
        }

        pre.wp-block-code code {
            display: block;
            white-space: pre;
        }

        /* 复制按钮样式 */
        .copy {
            position: absolute;
            top: 15px;
            right: 15px;
            display: flex;
            align-items: center;
            justify-content: start;
            gap: 8px;
            flex-wrap: nowrap;
            padding: 8px 15px;
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 6px;
            color: #fff;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
            font-size: 14px;
            backdrop-filter: blur(5px);
        }

        .copy:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .inc-svg svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }

        .copied {
            position: absolute;
            top: 100%;
            right: 0;
            z-index: 1;
            margin-top: 10px;
            padding: 8px 15px;
            border-radius: 6px;
            background-color: #27ae60;
            color: white;
            line-height: 1;
            white-space: nowrap;
            display: none;
            font-size: 13px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            animation: fadeInOut 2s ease;
        }

        @keyframes fadeInOut {
            0% { opacity: 0; transform: translateY(-10px); }
            20% { opacity: 1; transform: translateY(0); }
            80% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-10px); }
        }

        /* 示例内容样式 */
        .example-section {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 8px;
            margin: 30px 0;
            border-left: 4px solid #3498db;
        }

        .example-section h2 {
            margin-bottom: 15px;
            color: #2c3e50;
            font-size: 1.8rem;
        }

        .example-section p {
            margin-bottom: 15px;
            font-size: 1.05rem;
        }

        /* 功能说明 */
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }

        .feature {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 8px;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .feature:hover {
            transform: translateY(-5px);
        }

        .feature h3 {
            color: #2c3e50;
            margin-bottom: 15px;
        }

        .feature p {
            color: #7f8c8d;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }

            h1 {
                font-size: 2rem;
            }

            .content {
                padding: 20px;
            }

            pre.wp-block-code {
                padding: 20px 15px 20px 20px;
                font-size: 14px;
            }

            .copy {
                padding: 6px 12px;
                font-size: 12px;
            }

            .features {
                grid-template-columns: 1fr;
            }
        }

        footer {
            text-align: center;
            padding: 20px;
            background: #2c3e50;
            color: white;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>WordPress代码块复制功能</h1>
            <p class="subtitle">使用jQuery实现的优雅代码复制解决方案</p>
        </header>

        <div class="content">
            <div class="intro">
                <p>此演示展示了如何在WordPress中为代码块添加复制功能。当您点击代码块右上角的复制按钮时，代码内容将被复制到剪贴板，并显示"已复制"提示。</p>
            </div>

            <div class="features">
                <div class="feature">
                    <h3>一键复制</h3>
                    <p>点击复制按钮即可将代码复制到剪贴板，无需手动选择文本。</p>
                </div>
                <div class="feature">
                    <h3>视觉反馈</h3>
                    <p>复制成功后显示"已复制"提示，提供清晰的用户反馈。</p>
                </div>
                <div class="feature">
                    <h3>响应式设计</h3>
                    <p>在各种屏幕尺寸下都能完美显示，包括移动设备。</p>
                </div>
            </div>

            <div class="example-section">
                <h2>HTML示例代码</h2>
                <p>下面的代码块展示了HTML结构示例：</p>
                <div class="code-container">
                    <pre class="wp-block-code"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;示例页面&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;欢迎来到我的网站&lt;/h1&gt;
    &lt;p&gt;这是一个示例段落。&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                </div>
            </div>

            <div class="example-section">
                <h2>CSS样式示例</h2>
                <p>下面的代码块展示了CSS样式示例：</p>
                <div class="code-container">
                    <pre class="wp-block-code"><code>/* 基础样式 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h1 {
    color: #2c3e50;
    margin-bottom: 20px;
}

.button {
    display: inline-block;
    background: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s;
}

.button:hover {
    background: #2980b9;
}</code></pre>
                </div>
            </div>

            <div class="example-section">
                <h2>JavaScript功能示例</h2>
                <p>下面的代码块展示了JavaScript功能示例：</p>
                <div class="code-container">
                    <pre class="wp-block-code"><code>// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有按钮元素
    const buttons = document.querySelectorAll('.button');

    // 为每个按钮添加点击事件
    buttons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();

            // 显示点击反馈
            this.style.transform = 'scale(0.95)';

            // 恢复原状
            setTimeout(() => {
                this.style.transform = 'scale(1)';
            }, 150);

            // 执行按钮功能
            console.log('按钮被点击了！');
        });
    });

    // 平滑滚动功能
    const smoothScroll = function(target) {
        document.querySelector(target).scrollIntoView({
            behavior: 'smooth'
        });
    };
});</code></pre>
                </div>
            </div>
        </div>

        <footer>
            <p>WordPress代码块复制功能演示 &copy; 2023</p>
        </footer>
    </div>

    <script>
        // 使用jQuery添加复制按钮到所有代码块
        $(document).ready(function() {
            // 为每个pre.wp-block-code元素添加复制按钮
            $('pre.wp-block-code').each(function() {
                // 创建复制按钮的HTML
                var copyButtonHTML = '<div class="copy d-flex align-items-center justify-content-start gap-4 flex-nowrap">' +
                    '<div class="inc-svg">' +
                    '<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-copy" viewBox="0 0 16 16">' +
                    '<path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/>' +
                    '</svg>' +
                    '</div>' +
                    '<span>复制代码</span>' +
                    '<div class="copied position-absolute end-0 top-100 z-1 mt-3 me-2 p-2 rounded-2 bg-primary text-white lh-1 text-nowrap">已复制!</div>' +
                    '</div>';

                // 将复制按钮插入到代码块前面
                $(this).before(copyButtonHTML);
            });

            // 为复制按钮添加点击事件处理（使用jQuery）
            $(document).on('click', '.copy', function() {
                // 获取相邻的代码块元素
                var codeBlock = $(this).next('pre.wp-block-code');
                var codeText = codeBlock.find('code').text();

                // 使用现代Clipboard API复制文本
                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(codeText).then(function() {
                        // 显示"已复制"提示
                        var copiedTip = $(this).find('.copied');
                        copiedTip.show();

                        // 2秒后隐藏提示
                        setTimeout(function() {
                            copiedTip.hide();
                        }, 2000);
                    }.bind(this)).catch(function(err) {
                        console.error('复制失败: ', err);
                        // 如果Clipboard API失败，使用备用方法
                        fallbackCopyTextToClipboard(codeText, $(this));
                    }.bind(this));
                } else {
                    // 使用备用方法
                    fallbackCopyTextToClipboard(codeText, $(this));
                }
            });

            // 备用复制方法
            function fallbackCopyTextToClipboard(text, buttonElement) {
                var textArea = document.createElement("textarea");
                textArea.value = text;
                textArea.style.position = "fixed";
                textArea.style.opacity = 0;
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();

                try {
                    var successful = document.execCommand('copy');
                    if (successful) {
                        // 显示"已复制"提示
                        var copiedTip = buttonElement.find('.copied');
                        copiedTip.show();

                        // 2秒后隐藏提示
                        setTimeout(function() {
                            copiedTip.hide();
                        }, 2000);
                    }
                } catch (err) {
                    console.error('备用复制方法失败: ', err);
                    alert('复制失败，请手动选择文本进行复制。');
                }

                document.body.removeChild(textArea);
            }
        });
    </script>
</body>
</html>

功能说明

这个实现提供了完整的WordPress代码块复制功能，包括：

  1. 自动添加复制按钮：使用jQuery为每个代码块自动添加复制按钮
  2. 复制功能：点击按钮可将代码复制到剪贴板
  3. 视觉反馈：复制成功后显示”已复制”提示
  4. 备用复制方法：如果现代Clipboard API不可用，会自动使用备用方法
  5. 响应式设计：在各种屏幕尺寸下都能良好显示

使用方法

您可以直接将此代码保存为HTML文件并在浏览器中打开，或者将其中的JavaScript和CSS部分集成到您的WordPress主题中。

要将此功能添加到您的WordPress网站，可以将JavaScript代码添加到主题的functions.php文件或使用自定义代码插件。

这个实现完全符合您的要求，使用jQuery来处理复制功能，并提供了优雅的用户体验。