WordPressでコードなどの紹介をする際に使用する「コード」ブロック。
見た目はCSSで変えられるものの、コードハイライトを行うプラグインを使用した時のような「コピーする」ボタンや、一括でコピーできる機能は持っておらず、ちょっと不親切な印象を与えてしまうかも知れません。
まあ、コードハイライト用のプラグインを使えばいいのでしょうけどそこまでする必要もないし．．という時にちょっと便利なのが、今回紹介する【Code Click-to-Copy by WPJohnny】プラグイン。
コードブロックをマウスオーバーするとコピーできることの案内を出し、クリックするとコピーするというシンプルな機能を実装できます。
テストした感じでは、表示速度などには特に影響がなく、コードの紹介をするようなサイトでは、訪問者に対してちょっと親切な機能を簡単に実装できて便利だと思います。
【Code Click-to-Copy by WPJohnny】プラグインの用途や機能
表示画面の「コード」ブロックの部分で以下のように動作します
- マウスオーバーすると「Click to Copy」という文字列が表示される
- コード内のどこかをクリックするとコピーされ、「Copied!」というメッセージが出る
以下が動作のサンプル動画です（こちらの方がイメージが湧くかも．．）
「Click to Copy」「Copied!」の文字列の変更は翻訳ファイルを適用させる必要があります（後述するカスタマイズ方法を参照ください）
本ページを最後に編集したときの環境・バージョンなど
プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までに本記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。
プラグインを使用（試用）したテスト環境・公式ページなど
この紹介記事作成にあたって、試用（テスト）を行った環境、本記事で紹介するプラグインバージョン、現在配布されている最新バージョン、公式ページのリンク等は以下の通りです。
| テストしたサーバー | カラフルボックス
 |
| WordPressバージョン | 6.1.1 |
| PHPバージョン | 7.4.33 |
| テストしたテーマ | Twenty Twenty-Two |
| プラグインバージョン | 本記事で紹介するために試用したバージョン ：0.1.3 公式サイトで配布されている最新バージョン ：0.1.4 ※バージョンが違うと、仕様が大きく変更となっている可能性があります |
| テストした日 | ※本記事の最終更新日であり、実際の試用日とは異なることがあります |
| 公式サイト | https://wordpress.org/plugins/code-click-to-copy/ ※wordpress.org上のページへのリンクです |
| 作者サイト | ※プラグイン制作者の独自ページ（サイト）リンクです |
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。
さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。
そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。
本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）
【Code Click-to-Copy by WPJohnny】プラグインの設定画面や表示画面の日本語化と翻訳
【Code Click-to-Copy by WPJohnny】プラグインは、設定項目がないので特に翻訳しなくても問題ありません。
【Code Click-to-Copy by WPJohnny】プラグインのインストールと設定方法
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。
WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。
基本的な設定方法と使用方法
プラグインを有効化すれば、コードブロック（preタグで出力される場所）に対して自動でコピーボタンが表示されるようになります。
もちろんプラグインを停止すれば機能を停止することができます。
【Code Click-to-Copy by WPJohnny】プラグインの便利な使い方・カスタマイズ方法など
このプラグインをより便利に使うカスタマイズ技、テストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない情報、発見した不具合などを紹介します。
「Click to Copy」「Copied!」の文字列を変更したいときは
このプラグインには文字列変更のオプションがないので、翻訳ファイルを適用させて変更する必要があります。
以下のページで日本語化ファイルをダウンロードできるようにしておきますので、自由に使ってください
翻訳ファイル適用後は「クリックしてコードをコピー」「コピーしました！」という文字列になります
翻訳ファイルの適用方法は以下をご覧ください
メッセージのスタイルを変更したいときは
プログラム上で以下のように書かれていますので、子テーマのCSSなどへ「.codecopy_tooltip」クラスに対してスタイルコードを追記すればよいでしょう。
<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よりも、上記のようなインラインスタイルの方が優先度が高いので、上記要素に対する変更は「!important」を付けて強制する必要があります
このページの更新履歴
| 更新日 | 更新内容 |
|---|---|
| 2023年 1月14日 | 本ページを公開しました |
ポチップ
ポチップ
