WordPressのコードブロックにコピー機能を追加したい

Last Updated on 2026年7月5日 by num46

長いコードだとコピーが面倒なのでコードブロックにコピー機能を追加しようとした。

条件

・今使ってるテーマ(Blocksy)でやりたい

・JavaScriptで機能追加とかできないのでプラグインからコードブロックコピー機能を探す

・WordPress標準のコードブロック表示機能を使いたい(プラグイン独自のコードを使った時に不具合があったりとかプラグイン更新終了、改悪とかされると修正がめんどくさそう＆テーマ移行とかサーバー引っ越しとかで不具合があると修正がめんどくさそうな為)

<pre class="wp-block-code"><code>ソースコード</code></pre>

なのでHighlighting Code Block(https://ja.wordpress.org/plugins/highlighting-code-block/)は除外。でも一番うまくいっていた。

Sticky Copy Button for Code Blocks

理想。コピー時にエラーが出てコピーできない。惜しい。

Code Block Copy Button

1年以上更新無し。コピー時にエラーが出てコピーできない。表示もおかしかった。

Code Click to Copy

コード全体がコピーボタンになっている。うまく動いたが部分的に選択してコピーしようとすると間違って全体コピーされて選択範囲が消えるのでボタン形式だったらもっと良かった。

Copy Anything to Clipboard for WordPress – Copy Button, Copy Text & Copy Code

Copy Anything to Clipboardとしてネットでよく紹介されている。

理想。コピー出来たがコードブロックの周りに枠線表示がされてしまう。惜しい。

Iconic Copy Text Blocks

<!-- wp:ictb/copy-box {"promptText":"コード"} /-->

のような独自コードを使うので却下。あと

--

の入力でダッシュが1本になる。

コピーはうまくいっていた。

Code Block – Embed Code with One-Click Copy Feature

<!-- wp:bch/code-highlight {"cId":"659c04f7-b","language":"html","code":"コード","headerPart":true,"codeBg":{"color":"#F3F3F3"}} /-->

のような独自コードを使うので却下。コピーはうまくいっていた。

結論

とりあえずそのままでいいや、とあきらめた。