워드프레스에서 코드 복사 버튼 쉽게 만들기: WPCode로 뚝딱!

今天，我有一个非常有用的小技巧，适用于任何运营编码博客的人，但也适用于其他人：如何添加 WordPress 代码块复制按钮。代码复制对于编程博客来说非常重要，因为它可以方便读者复制和粘贴代码。

在 WordPress 代码块中添加一个漂亮的复制按钮，您的读者只需点击一下就能复制您的代码。是不是很酷？另外 WPCode 插件让添加这一功能变得非常容易，所以请一起来体验吧！

为什么需要复制代码按钮？

코드 복사 버튼이 없는 코드블럭 형식 참고 이미지 — (默认代码块格式参考图片）

事实上，上图所示的默认代码块只是浅蓝色背景上的文字。如果你想复制该代码块中的文本，就必须用鼠标拖动它！不过，在博客中添加 "复制按钮 "有很多好处，包括

方便读者复制和粘贴您的代码。
一次性复制长代码非常方便。
你在移动代码时会少犯错误。
它大大提高了 WordPress 代码锁的可用性。

那么，让我们开始工作，实现 CodeCopy 按钮。

安装 WPCode 插件

首先，您需要安装一个插件，它能让您轻松实现代码块复制按钮。在 WordPress 管理页面，进入插件 > 添加新插件，搜索 "WPCode"，安装并激活它。

如果您进入 Warp 管理页面，就会在顶部菜单中看到 "WPCode"，点击它就能看到 "添加片段 "子菜单。通过它，我们将实现一个 "复制代码块 "按钮，让我们可以轻松复制和粘贴代码，以应用 CSS 和 JavaScript 代码。

( 플러그인 설치 후 워프 관리자 페이지 화면 ) — (安装插件后的 Warp 管理页面界面）

使用 CSS 自定义 "复制代码 "按钮

现在，我们要使用 CSS 来创建复制按钮的外观。首先，我们要使用一个插件，将这种样式添加到整个网站的标题中。

在 WordPress 管理菜单中，点击左侧菜单中的代码片段 > 添加片段或顶部的 WPCode > 添加片段。
单击添加自定义代码（新建代码段）或添加自定义代码段，然后选择 CSS 代码段。
将您的片段命名为 "复制按钮样式"（您需要给它起一个能与其他片段区分开来的名字），然后粘贴下面的代码。

pre {
  position: relative；
}

.copy-button {
  position: absolute；
  top: 5px；
  right: 5px；
  padding：5px 10px；
  background-colour: #f1f1f1；
  border: none；
  border-radius: 3px；
  cursor: pointer；
  color: #000000；
  font-size: 14px；
}

.copy-button:hover {
  background-colour: #ddd；
}

选择位置为 "全站标题"，然后剪辑 "保存片段">"激活"。

这将把 "复制按钮样式 "应用到整个网站的 WordPress 代码块中！

使用 JavaScript 添加代码复制功能

现在是时候添加一些 JavaScript 来使复制按钮实际工作了。这段代码将实现代码块复制按钮的功能。说到 JavaScript，您在上述步骤中需要做的就是选择一个片段并给它一个标题。唯一需要更改的是位置：全站页脚。

document.addEventListener('DOMContentLoaded', function () {
  const codeBlocks = document.querySelectorAll('pre')；

  codeBlocks.forEach(function (block) {
    const copyButton = document.createElement('button')；
    copyButton.className = 'copy-button'；

    const icon = document.createElement('i')；
    icon.className = 'copy-icon'；
    icon.textContent = '🗐'；

    const text = document.createElement('span')；
    text.textContent = ' 复制'；

    copyButton.appendChild(icon)；
    copyButton.appendChild(text)；

    block.appendChild(copyButton)；

    copyButton.addEventListener('click', function () {
      const code = block.querySelector('code').innerText；

      navigator.clipboard.writeText(code).then(function () {
        icon.textContent = '✔'；
        text.textContent = ' 复制'；
        copyButton.disabled = true；

        setTimeout(function () {
          icon.textContent = '🗐'；
          text.textContent = ' 复制'；
          copyButton.disabled = false；
        }, 2000);
      });
    });
  });
});

现在打开一篇你已经使用代码块写好的文章，看看是否能看到像下面这样的复制按钮！你现在应该为每个 WordPress 代码块都准备了一个漂亮的复制按钮！在下图中，上面的代码块有一个"✔ 已复制 "标记，因为我们已经复制了代码。

코드 복사 붙혀넣기 기능 사용 결과 이미지 — (使用复制粘贴代码功能的结果）

总结

只需一些代码和一个插件，您就可以实现这项很酷的功能，而无需修改任何复杂的代码。现在，您的博客读者只需点击一下，就能轻松复制代码或文本。为什么不在您的博客中添加这项功能呢？

顺便提一下，如果你想改变文字大小或更改表情符号，可以看看下面的代码分解，了解如何操作。

如果我们想改进一下我们在经线中使用的按钮呢？所有人请注意：动画按钮脱颖而出的秘诀（WordPress 特写）查看帖子，了解如何操作！

# 术语表

WPCode 插件WordPress：一款可轻松在 WordPress 中添加代码片段的工具。
片段代码：一小段可重复使用的代码。
CSS一种装饰网页设计的风格语言。
JavaScript一种为网页添加动态功能的编程语言。
密码锁:博文中展示编程代码的特殊区域。
剪贴板计算机上的虚拟空间，用于临时存储复制的内容。

# 代码详解

CSS 代码评注

pre { position: relative; }:设置代码块之间的相对位置。
.copy-button { ... }定义复制按钮的默认样式。
position: absolute；将 : 按钮置于代码块中的绝对位置。
top: 5px; right: 5px；将 : 按钮放在右上角。
padding：5px 10px；设置按钮内部的边距。
background-colour: #f1f1f1；：设置按钮背景颜色。
border: none; border-radius: 3px；:去除边框和圆角。
光标：指针；:改变光标悬停时的外观。
color: #000000; font-size: 14px；设置文字的颜色和大小。
.copy-button:hover { ... }定义当鼠标位于按钮上时的样式。

JavaScript 代码注释

document.addEventListener('DOMContentLoaded', function () { ... })；:在页面加载完成后运行脚本。
const codeBlocks = document.querySelectorAll('pre')；:选择页面内的所有代码块。
codeBlocks.forEach(function (block) { ... })；：遍历每个代码块。
const copyButton = document.createElement('button')；创建复制按钮元素。
copyButton.className = 'copy-button'；将 CSS 类应用于 : 按钮。
const icon = document.createElement('i')；创建一个图标元素。
const text = document.createElement('span')；创建文本元素。
copyButton.appendChild(icon); copyButton.appendChild(text)；为 : 按钮添加图标和文字。
block.appendChild(copyButton)；:在代码块中添加一个按钮。
copyButton.addEventListener('click', function () { ... })；处理点击按钮事件。
const code = block.querySelector('code').innerText；:获取代码块中的文本。
navigator.clipboard.writeText(code).then(function () { ... })；:将代码复制到剪贴板。
icon.textContent = '✔'; text.textContent = '复制'；：在复制完成后更改按钮的状态。
setTimeout(function () { ... }, 2000)；:2 秒钟后将按钮状态恢复到初始状态。

在 WordPress 中轻松创建一个复制代码按钮：WPCode 即可！

为什么需要复制代码按钮？

安装 WPCode 插件

使用 CSS 自定义 "复制代码 "按钮

使用 JavaScript 添加代码复制功能