WordPress標準で備わっているコードブロック。

preタグで出力してくれるし、特にタグをエンコード（記号化）しなくても、そのまま貼り付けるだけでOKなので、WordPressの投稿などでコード紹介する際には便利なブロックです。

ただサードパーティの同じ機能を持つプラグインと違いがあるのが以下の3点。

  1. コードがシンタックスハイライト（コードらしく格好よく表示？）されない
  2. 列番号を付けることができない
  3. コピーしてもらう際に、訪問者がドラッグして選択する必要がある

まあ、1と2はデザイン的な問題なので置いといて．．．3については、やっぱりすぐにすべてコピーできた方が親切ですよね？

そこでおすすめなのが、「Code Click-to-Copy」というプラグイン。

コードブロックへコピー機能を追加できるプラグイン「Code Click-to-Copy by WPJohnny」

https://www.momosiri.info/wppi/code-click-to-copy/ title=

「Code Click-to-Copy by WPJohnny」は、標準のコードブロックへ自動でコピー機能を追加してくれる、ちょっと便利なWordPress用プラグインです。

Knowledge Base

設定画面もないシンプルなプラグインなのですが、コードブロックに対して表示画面側でマウスオーバーした際に「クリックするとコピーできるよ！」と言う旨のメッセージを出し、ワンクリックでコードブロック内のコードがすべてコピーできるようになるという優れものプラグインです。

もちろんこのサイトでも即採用、試しに以下のコードブロックをマウスオーバーして、実際にコピーしてみていただければ、機能は理解いただけると思います。

ここはコードブロックです。
マウスオーバーするとメッセージが表示され、クリックするとコピーされます
コピーしたものをメモ帳などに貼り付けて、きちんとコピーできているか確認してみてくださいね

いかがでしょう？本当に必要な人にしか必要でない？地味なプラグインですけど、個人的にはすごくおすすめです。

1点残念なのは、メッセージの「Click To Copy」「Copied!」という文字列を管理画面で設定できないことですが、通常のプラグイン同様に翻訳ファイルを当ててやれば自由に変更できます。

ちなみに、上記のリンク先ページ（私がメインで管理しているサイト内）では、無料でこのプラグインの翻訳ファイルを配布してますので、よかったらどうぞ！

翻訳ファイル適用後の文字列は、上記デモ同様「クリックしてコードをコピー」「コピーしました」になりますので、ご自身のサイトに合うようにPoeditなどを使って再編集してください。

メッセージのデザインを変えたいときは

マウスオーバー時のメッセージの表示デザインは、プログラム上で以下のようにインラインで書かれています。

<div class="codecopy_tooltip" style="display: inline-block; background: #333; color: white; padding: 0 8px; font-size: 14px; border-radius: 2px; border: 1px solid #111; position:absolute; display: none;"><?= $click_to_copy_str; ?></div>

CSSで各項目を改行すると以下の要素の設定がされています。

.codecopy_tooltip{
display: inline-block;
background: #333;
color: white;
padding: 0 8px;
font-size: 14px;
border-radius: 2px;
border: 1px solid #111;
position:absolute;
display: none;
}

デザインを修正したい場合には、上記のスタイルコードを子テーマのstyle.cssやカスタマイザーの追加CSSへコピーして編集や追加を行えばよいでしょう。

ただし、追加スタイルよりもインラインスタイル（ここではプログラムに書かれているスタイル）の方が優先度が高いため、上記スタイルコードの要素を変更する場合は「!important」を付けて強制する必要があります

「Hima Art Utility」プラグインへ統合

有用な機能だし、コードを参考に実装可能．．ということで、以下で配布している「Hima Art Utility」プラグインへこの機能を追加しました。

WordPressサイトの運営に必要な機能を詰め込んだプラグイン【Hima Art Utility】

もちろん、競合が起きないように、各所コードの変更をしたのと、「Code Click-to-Copy」ではCSSで被せるしかなかった、色関係の設定を管理画面上で行えるようにしてあります。

また、翻訳についても「クリックしてコードをコピー」「コピーしました」になるようにしてあります。

この機能のみならず、特にTwenty Twenty-Two(Three)などのテーマを使用されている方には重宝する機能がたくさん入ってますので、よかったら使ってみてください。