WordPressプラグイン『Copy Anything to Clipboard』の使い方などをまとめた設定・備忘録記事です。
記事内のテキストやコードをワンタッチでコピーできたら便利かなと思って『Copy Anything to Clipboard』を利用してみました。
一般的なテキスト、プログラミングのコード、URL、etc…、色々と使い道がありそうでした。
基本情報
『Copy Anything to Clipboard』は、投稿・固定ページなどサイト内にコピーボタンを追加・設置できるプラグイン。
コピーボタンを追加する方法は大別すると「ショートコード」「HTMLタグ」「CSS」の3種類。
| プラグイン名 | Copy Anything to Clipboard |
|---|---|
| 作者 | Mahesh M. Waghmare |
| バージョン | 2.6.5 最終更新：2023年9月20日 ※2023年10月時点 |
| 有効インストール数 | 10,000+ |
| 検証済みWP最新バージョン | 6.3.1 |
| PHP バージョン | 5.6またはそれ以降 |
| 備考 | 無料（有料版あり） |
基本的な設定
設定画面
メインの設定画面へは「管理画面」→「設定」→「Copy to Clipboard」からアクセス。
コピーボタンの新規作成は、設定画面上部の「Add New」から。
コピーボタンの新規作成
HTMLタグ、CSSを用いたコピーボタンを作ることができる。
- Selector（対象とするタグ・クラス）
コピーボタンを表示するHTMLタグやCSSのクラス名を指定する
HTMLタグならそのまま、CSSのクラス名なら先頭にドット「.」を付ける
HTMLタグは独自タグも使える - Style（ボタンのスタイル）
Button（テキスト表示）、SVG（画像）、Cover（マウスオーバーで暗転表示） - Button Position（ボタンの位置）
要素のInside（内側）かOutside（外側） - Copy Format
Default、Google Docs、Emailの3種類。
Defaultだと空行が消える（整形されて無くなる）
Google Docsだと空行もコピーできていた - Button Text
コピーボタンに表示されるテキスト - Button Copy Text
コピー後に表示されるテキスト - Button Title
コピーボタンのtitle属性のテキスト
画面右側にプレビューが表示される。
有料版だとボタンのデザインを設定画面から変更できるようです。
コピーボタンの編集
コピーボタンの編集画面には、メインの設定画面のリストに表示されるタイトルをクリックでアクセス可能。
編集したい各項目を書き換えて、右側の更新ボタンを押す。
基本的な使い方
ショートコード
基本的な書式は、[copy]対象[/copy]。
[copy]https://tonahazana.com[/copy]
上段のテキストがコピーボタンになっています。
デフォルト表示だけだとコピーできるか分かりにくい（分からない）ので、デザインの工夫やカスタマイズが必要でしょう。
HTMLタグ
基本的な書式は、<設定したタグ名>対象</設定したタグ名>。
ブロックエディターなら「HTMLとして編集」や「コードエディター」などでタグを追加する。
ボタン外側
0123456789
<copy-button-1><div class="wp-block-cocoon-blocks-sticky-box blank-box block-box sticky"><!-- wp:paragraph --> <p>0123456789</p> <!-- /wp:paragraph --></div></copy-button-1>
ボタン内側
# Security Headers Header always set Strict-Transport-Security: "max-age=63072000; includeSubDomains; preload" Header always set Content-Security-Policy "upgrade-insecure-requests" Header always set X-Content-Type-Options "nosniff" Header always set X-XSS-Protection "1; mode=block" Header always set Referrer-Policy: "no-referrer-when-downgrade" Header always append X-Frame-Options SAMEORIGIN Header always set Permissions-Policy: "camera=(),geolocation=(),gyroscope=(),magnetometer=(),microphone=(),midi=()" # End Security Headers
<copy-button-3><pre class="wp-block-preformatted"># Security Headers Header always set Strict-Transport-Security: "max-age=63072000; includeSubDomains; preload" Header always set Content-Security-Policy "upgrade-insecure-requests" Header always set X-Content-Type-Options "nosniff" Header always set X-XSS-Protection "1; mode=block" Header always set Referrer-Policy: "no-referrer-when-downgrade" Header always append X-Frame-Options SAMEORIGIN Header always set Permissions-Policy: "camera=(),geolocation=(),gyroscope=(),magnetometer=(),microphone=(),midi=()" # End Security Headers</pre></copy-button-3>
ボタン位置はデフォルトだと右上です。
違和感なく馴染むように調整したほうがいいかも?
CSSの場合は、対象となる要素のクラス属性（class=””）に設定したクラス名を追加します。
あとがき
シンプルなコピーボタンを追加したい場合に便利そうなプラグインでした。
コピーボタンの位置やデザインを調整すると視認性が上がって使いやすくなると思います。
