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('
已复制 !
');
    });
});

方案二：使用纯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 = '
已复制 !
';

        // 使用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() {
       ?>
  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来添加复制按钮和处理复制功能。




    
    
    WordPress代码块复制功能演示
    
    


    

        

            
WordPress代码块复制功能

            
使用jQuery实现的优雅代码复制解决方案

        


        

            

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

            


            

                

                    
一键复制

                    
点击复制按钮即可将代码复制到剪贴板，无需手动选择文本。

                

                

                    
视觉反馈

                    
复制成功后显示"已复制"提示，提供清晰的用户反馈。

                

                

                    
响应式设计

                    
在各种屏幕尺寸下都能完美显示，包括移动设备。

                

            


            

                
HTML示例代码

                
下面的代码块展示了HTML结构示例：

                

                    
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例页面</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个示例段落。</p>
</body>
</html>

                

            


            

                
CSS样式示例

                
下面的代码块展示了CSS样式示例：

                

                    
/* 基础样式 */
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;
}

                

            


            

                
JavaScript功能示例

                
下面的代码块展示了JavaScript功能示例：

                

                    
// 页面加载完成后执行
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'
        });
    };
});

                

            

        


        

            
WordPress代码块复制功能演示 © 2023

功能说明

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

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

使用方法

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

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

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