WordPressのコードブロックにコピーボタンを付ける方法【SWELL対応】

CSSなどのコードを記事に載せるとき、「そのままコピーして使ってほしいな」と思うことありますよね。

でも実際には、ドラッグしてコピーするのってちょっと面倒だったり、うまく選択できなかったりで、地味にストレスがかかるポイントでもあります。

そこで「コピーボタンを付けたい」と思うわけですが、プラグインを入れるほどでもないし、できればサイトは軽く保ちたい…という方も多いはずです。

今回はそんな方向けに、プラグインなしでコードをワンクリックでコピーできるようにする方法を紹介します。

CSSと少しのJavaScriptだけで実装できるので、シンプルに導入したい方にもおすすめです。

コピペするだけで完了します！

プラグインなしでコードをコピーできるようにしたい理由

私のブログでは、SWELLのカスタマイズ方法を紹介しているので、どうしてもCSSなどのコードを掲載する場面が多くなります。

せっかく紹介するなら、そのまま便利に使ってほしい。
なので、コードを一括でコピーできるような仕組みは用意したいなとずっと思っていました。

ただ、ここで悩んだのがプラグインです。
コピーボタンを付ける系のプラグインはいくつかあるんですが、どうしても「サイトが重くなる」「他のプラグインと干渉する」といったリスクが気になります。

さらに、こういう系のプラグインって更新頻度が低かったりして、セキュリティ的にも少し不安が残るんですよね。

個人的には、そこまで高機能じゃなくていいし、見た目もシンプルでOK。
それよりも「軽くて、サクッとコピーできる」方が重要でした。

そんなことを考えていく中で、プラグインを使わずに実装できる今回の方法にたどり着きました。

プラグインなしでコピーボタンを実装する方法

ここからは、実際にコピーボタンを実装する方法を紹介します。

やることはシンプルで、CSSで見た目を整える → JavaScriptでコピー機能を付けるだけです。

プラグインは使わず、軽量な構成で実装できます。

完成イメージ

こんな感じで、コードブロックの右上に「コピー」ボタンが表示され、クリックするとそのままコードをコピーできるようになります。

追加CSS（見た目を整える）

まずはコードブロックの見た目と、コピーボタンのデザインを整えます。

以下のCSSを「外観」→「カスタマイズ」→「追加CSS」に貼り付けてください。

pre.wp-block-code {
  position: relative;
  background: #f7f7f8;
  border: none;
  border-radius: 16px;
  padding: 24px !important;
  overflow-x: auto;
}

pre.wp-block-code code {
  display: block;
  font-family: Consolas, Monaco, Menlo, monospace;
  font-size: 14px;
  line-height: 1.8;
  color: #1f2937;
}

.copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: #333;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
}

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

.copy-btn.copied {
  background: #16a34a;
}

@media (max-width: 767px) {
  pre.wp-block-code {
    padding-top: 64px !important;
  }
}

JavaScript（コピーボタンの実装）

次に、コピーボタンの動作を実装します。

以下のコードを、「外観 → カスタマイズ → 高度な設定 → bodyタグ終了直前に出力するコード」に貼り付けてください。

<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('pre.wp-block-code').forEach(function (block) {
    const code = block.querySelector('code');
    if (!code) return;

    if (block.querySelector('.copy-btn')) return;

    const button = document.createElement('button');
    button.type = 'button';
    button.className = 'copy-btn';
    button.textContent = 'コピー';

    button.addEventListener('click', async function () {
      try {
        await navigator.clipboard.writeText(code.textContent.trim());
        button.textContent = 'コピー済み';
        button.classList.add('copied');

        setTimeout(function () {
          button.textContent = 'コピー';
          button.classList.remove('copied');
        }, 1800);
      } catch (e) {
        button.textContent = '失敗';
      }
    });

    block.appendChild(button);
  });
});
</script>

コードを貼り付ける時の注意点

この方法は、Gutenbergの「コード」ブロックを使うことが前提です。

「整形済みテキスト」や装飾系のブロックでは、うまく動作しない場合があります。

そのため、コードを掲載するときは必ず「コード」ブロックを使うようにしてください。

また、今回の実装ではスマホで見たときにコピーボタンとコードが重ならないように調整しています。

そのままコピペで使えるようにしているので、細かい調整なしでも問題なく使えるようにしています。

この方法のメリット・デメリット

ここまで紹介した方法はシンプルで使いやすいですが、良い点・気になる点もあります。

導入する前にざっくり把握しておきましょう。

メリット

とにかく軽い
プラグインを使わないので、余計な読み込みが増えずサイトの表示速度にも影響しにくいです。

プラグイン不要で管理がラク
アップデートや不具合を気にする必要がなく、シンプルに運用できます。

自由にカスタマイズできる
ボタンのデザインや表示位置もCSSで自由に調整できるので、自分のサイトに合わせやすいです。

デメリット

少しだけコードの知識が必要
CSSやJavaScriptをコピペするだけとはいえ、まったく触ったことがないと少しハードルはあります。

テーマによっては調整が必要な場合がある
テーマ側のCSSが強い場合は微調整が必要になることもあります。

ただ、どちらも一度設定してしまえばあとはほぼ触らない部分なので、最初だけ少し頑張ればOKです。

まとめ｜シンプルに実装したいならこの方法でOK

今回は、プラグインを使わずにコードをワンクリックでコピーできる方法を紹介しました。

やること自体はシンプルで、CSSとJavaScriptを少し追加するだけで、使いやすさをぐっと改善することができます。

コードを掲載する記事では、「そのまま使えるかどうか」がかなり重要なので、こういった細かい工夫がユーザー体験に大きく影響してきます。

プラグインを増やさずにサイトを軽く保ちたい方や、できるだけシンプルな構成で運用したい方には特におすすめの方法です。

ぜひ一度試してみてください！