WordPressでコードを表記した時にコピーボタンを追加

2026年2月9日

このブログはWordPressを使っており、最近はコードを記載する事も増えてきました。その際、コピーボタンがあったほうが便利なので、簡単にコピーボタンを実装する方法を。
コードエディタを使用している場合の、プラグインを使わない方法です。

CSS（外観 → カスタマイズ → 追加CSS）

pre {
  position: relative;
  background: #f1f5f9;
  color: #000;
  padding: 1em;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.5;
}

pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #000;
}

.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #e2e8f0;
  color: #000;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  opacity: 0.9;
}

.copy-btn:hover {
  opacity: 1;
}

functions.php に追加

add_action('wp_footer', function () {
?>
<script>
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll("pre").forEach(pre => {
    const btn = document.createElement("button");
    btn.className = "copy-btn";
    btn.textContent = "Copy";
    pre.appendChild(btn);

    btn.addEventListener("click", () => {
      const text = pre.querySelector("code")?.innerText || pre.innerText;
      navigator.clipboard.writeText(text).then(() => {
        btn.textContent = "Copied!";
        setTimeout(() => btn.textContent = "Copy", 1200);
      });
    });
  });
});
</script>
<?php
});

使う時は、WordPressの「コード」ブロックでそのまま記載するだけです。もしくは「カスタムHTML」で次のように書いても良いです。