【Wordpress】ワンクリックでコピーするボタンの作り方！Anything to Clipboardの使い方

ブログやサイトを運営している方で、こんなお悩みがある方に向けたプラグインを紹介します👇

ブログやサイトなどで紹介するコードを読者に簡単にコピーしてもらいたい
ネットのキャンペーンコードを読者に簡単にコピーしてもらいたい
コピーボタンを作りたいけど、CSSやfunction.phpなどを編集が苦手

「Copy Anything to Clipboard」とは
「Copy Anything to Clipboard」のインストール方法
「Copy Anything to Clipboard」の設定方法
コピーボタンの作り方
おわりに

「Copy Anything to Clipboard」とは

「Anything to Clipboard」とは、CSSやfunction.phpなどを編集することなく、プラグイン１つでコードや文章をコピーすることができるボタンを設置することができるプラグインです！

完成イメージ👇

ここのコードをコピー！
ここのコードをコピー！
ここのコードをコピー！

「Copy Anything to Clipboard」のインストール方法

1
プラグインで「Copy Anything to Clipboard」を検索し、インストール＆有効化
2
インストール＆有効化すると👇のような画面が出ますが、「スキップ」を選択
3
このような設定画面が出ればインストールは完了です！

「Copy Anything to Clipboard」の設定方法

「Copy Anything to Clipboard」の設定画面について、詳しくご説明します！

項目	詳細
①Selector	ここで設定したタグでコピーさせたい文章を囲むことでコピーボタンを配置することができます。デフォルトは「pre」となっており、そのままだとテーマの値と被って干渉する可能性がありますので、「copy」といった別名にすることをオススメします。
②Format	フォーマットの設定で「Default」「Google Docs」「Email」の３種類から選べるが、「Default」のままでOK。
③Style	「Button」文章の右上に四角い枠でコピーボタンが表示される「Icon」文章の右上にコピーボタンのアイコンがが表示される「Cover」文章にカーソルを合わせると、テキストがホバー表示される。
④Position ※「③Style」の「Button」と「Icon」のみ選択可	「Inside」ボタンがコピーする文章の内側に表示される「Outside」ボタンがコピーする文章の外側に表示される ※「③Style」の「Cover」では位置調整不可
⑤Button Text ※「③Style」の「Button」と「Icon」のみ選択可	右上のボタンやホバーで表示される文字を書き換えられます。（デフォルトは「Copy」）
⑥After Copy Button Text	コピーボタンを押した時にでる文字を書き換えらます。（デフォルトは「Copied」）
⑦Button Title	コピーボタンのtitle属性のテキスト内容見た目で表示されるものではないので、特にこだわりがなければデフォルトのままでOK

コピーボタンの作り方

設定が終わったら、早速コピーボタンを作って配置してみましょう！

「コード」にコピーボタンを追加する場合

コピーさせたいコードを作成

ここのコードをコピー！
ここのコードをコピー！
ここのコードをコピー！

2
コードの「オプションボタン」を選択
3
「HTMLとして編集」を選択
4
設定画面の「①Selector」で設定したタグをコードの前後に挿入。(cocoonテーマの場合、他タグに干渉するため、今回はタグ名を「copy」にしています)
5
挿入が終わると「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示される場合がありますが無視して記事を保存
6
記事をプレビューしてボタンが設置されている＆ボタンを押してコードがコピーされるのが確認できれば完了です！
```
ここのコードをコピー！
ここのコードをコピー！
ここのコードをコピー！
```