纯AI代码实现wordpress的pre标签的一键复制功能

由于 Ripro 主题没有提供 pre 标签的自动复制代码功能，我在网上搜索了一番，却发现大多数相关资源都是收费的。

因此，我决定尝试使用 AI 来实现这个功能。经过多次调整提示词，最终成功了。

将以下代码添加到主题的 functions.php 文件中，即可完美实现该功能。本站的效果正是基于以下代码。

//为pre标签添加复制按钮
function add_copy_code_button() {
?>
<!-- 引入 Clipboard.js 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
// 初始化 Clipboard.js
var clipboard = new ClipboardJS('.copy-btn');

// 添加复制按钮的逻辑
function createCopyButton(preBlock, index) {
// 包裹 pre 标签，创建一个相对定位的容器
var wrapper = document.createElement('div');
wrapper.style.position = 'relative';
wrapper.style.display = 'inline-block';
preBlock.parentNode.insertBefore(wrapper, preBlock);
wrapper.appendChild(preBlock);

// 创建复制按钮
var button = document.createElement('button');
button.textContent = '复制';
button.className = 'copy-btn';
button.style.position = 'absolute';
button.style.top = '3px';
button.style.right = '3px';
button.style.background = 'transparent';
button.style.color = 'white';
button.style.border = 'none';
button.style.fontSize = '10px';
button.style.cursor = 'pointer';
button.style.zIndex = '10';
button.style.transition = 'color 0.3s ease';
button.setAttribute('data-clipboard-target', '#code-block-' + index);
wrapper.appendChild(button);

// 为 pre 添加唯一 ID
preBlock.id = 'code-block-' + index;
}

// 遍历所有 <pre> 标签并添加复制按钮
document.querySelectorAll('pre').forEach(createCopyButton);

// 成功复制事件
clipboard.on('success', function (e) {
var button = e.trigger;
button.textContent = '✔ 复制成功';
button.style.color = '#e74c3c';
setTimeout(function () {
button.textContent = '复制';
button.style.color = 'white';
}, 3000); //5秒后恢复
e.clearSelection();
});

// 复制失败事件
clipboard.on('error', function (e) {
var button = e.trigger;
button.textContent = '✘ 复制失败';
button.style.color = '#e74c3c';
setTimeout(function () {
button.textContent = '复制';
button.style.color = 'white';
}, 3000); //5秒后恢复
});
});
</script>
<?php
}
add_action('wp_footer', 'add_copy_code_button');