任意の文字列を1クリックでコピー可能にする、WordPressのプラグインであるCopy Anything to Clipboard。
今回の記事ではこの「Copy Anything to Clipboard」のインストールから、設定方法までについて解説します。
Copy Anything to Clipboardの導入方法
Copy Anything to Clipboardを導入するには、まずWordPressの「ダッシュボード」から「プラグインを追加」を選びます。
つぎに右上のプラグインの検索フォームに「Copy Anything to Clipboard」を入力して検索すると表示される、Copy Anything to Clipboardを「インストール」します。
Copy Anything to Clipboardをインストールしたら「有効化」します。
Copy Anything to Clipboardの初期設定
ダッシュボード左メニューにある「Copy to Clipboard」の中にある「Global Injector」を選択して、画面中央にある「Create First Rule」を選択します。
するとこのようなメッセージが表示されますから、内容を確認して「Allow & Continue」または「Skip」を選択します。
Copy Anything to Clipboardの設定方法
前述した「Global Injector」から「Create New Rule」を選択します。
すると設定画面が表示されますから、上から順に設定していきます。
基本的に設定する項目は、コピーボタンのデザインを指定する「Appearance」までで構いません。
| 分類 | 設定項目 | 設定例＆備考など |
|---|---|---|
| Targeting Logic | Target Elements (CSS Selectors) | コピーを動作させるタグ 重複しなければ標準のpreでも良い  詳細 ⇒ CSS selectors |
| Targeting Logic | Exclude Elements | 除外する要素を指定する？ 基本的に設定不要 |
| Copy As | Select copy as | どの要素で動作するか 推奨 ⇒ Smart Copy |
| Appearance | Select Visual Style | コピーを動作する時のデザイン |
| Appearance | Content Configuration | コピーの前後に表示されるテキスト |
| Appearance | Appearance Styling | コピーのデザインに関するフォント |
設定が終わったら、画面右上にある「Save Changes」から変更した内容を保存します。
Copy Anything to Clipboardの動作確認
Copy Anything to Clipboardの設定を終えたら、任意の文字列を設定したタグで囲み動作するか確認します。
仮にTarget Elements (CSS Selectors)を「copy」にした場合、コピー対象の前後をタグで囲みます。
参考リンク：Copy Anything to Clipboard for WordPress – Copy Button, Copy Text & Copy Code
