WordPress標準で備わっているコードブロック。
preタグで出力してくれるし、特にタグをエンコード（記号化）しなくても、そのまま貼り付けるだけでOKなので、WordPressの投稿などでコード紹介する際には便利なブロックです。
ただサードパーティの同じ機能を持つプラグインと違いがあるのが以下の3点。
- コードがシンタックスハイライト（コードらしく格好よく表示？）されない
- 列番号を付けることができない
- コピーしてもらう際に、訪問者がドラッグして選択する必要がある
まあ、1と2はデザイン的な問題なので置いといて．．．3については、やっぱりすぐにすべてコピーできた方が親切ですよね？
そこでおすすめなのが、「Code Click-to-Copy」というプラグイン。
設定画面もないシンプルなプラグインなのですが、コードブロックに対して表示画面側でマウスオーバーした際に「クリックするとコピーできるよ！」と言う旨のメッセージを出し、ワンクリックでコードブロック内のコードがすべてコピーできるようになるという優れものプラグインです。
本当に必要な人にしか必要でない？地味なプラグインですけど、個人的にはすごくおすすめです。
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」プラグインへこの機能を追加しました。
もちろん、競合が起きないように、各所コードの変更をしたのと、「Code Click-to-Copy」ではCSSで被せるしかなかった、色関係の設定を管理画面上で行えるようにしてあります。
また、翻訳についても「クリックしてコードをコピー」「コピーしました」になるようにしてあります。
この機能のみならず、特にTwenty Twenty-Two(Three)などのテーマを使用されている方には重宝する機能がたくさん入ってますので、よかったら使ってみてください。
ちなみに現在、当サイトでは、この機能ではなく、以下の方法でコードの表示・コピー機能を実装しています。プラグインではないのでご自身でコードの追加などが必要ですが、チャレンジしてみては？
