ワードプレスでコピーボタンを設置するプラグイン(Copy Anything to Clipboard)の使い方

2022年5月11日

記事内にコピーして使ってもらう文字列があったとして、読者にわざわざその文字列を選択してコピーしてもらうのは面倒です。

今回はそんな問題を解消するプラグインの紹介です。

特定の文字列をワンボタンでコピーできるようになります。

面白い機能なのであなたの今後のブログ運営の参考になればと思います。

Copy Anything to Clipboardを有効化する

まずは、プラグインの新規追加から「Copy Anything to Clipboard」を検索→インストール→有効化しましょう！

インストール済みプラグインにCopy Anything to Clipboardが追加されているので、「Add new」へ進みます。

このAdd newを押すことで、新規のコピーボタンが作成されます。

基本的にはそのままの設定で使えます。

ボタンのカスタマイズ

新規のコピーボタン作成ページです。

Selector

Selectorはコードの名称です。

この値が一番重要です。

Selectorの値で囲まれた文字列のコピーボタンを作るわけですが、初期設定は「pre」になっています。

つまり、htmlタグ<pre></pre>で囲まれた文字列でコピーボタンが作られます。<pre>コピーされる文字</pre>です。

実はこの「pre」、WordPressにおいては既に使用されているhtmlタグなのでpreでやろうとするとコピーボタンが機能しません。

なので、Selectorは必ずpreから変更してください。自分の好きなコードで大丈夫です！

とりあえずclipとでもしておきましょう！

Style

Styleはボタンのデザインです。

初期設定は「Botton」になっています。

これはプレビューを見ながら好きなボタンに変更してください。

Button Position

Button Positionはボタンの配置です。

インサイドとアウトサイドしかありません。

これもプレビューを見ながら好みの設定に変更しましょう。

Button Text

Button Textはボタンに表示する文字です。

初期設定は「Copy」になっています。

好きな文字を入れましょう。

Button Copy Text

Button Copy Textはコピーボタンを押したときに表示する文字です。

初期設定は「Copied!」になっていますが、これも好きな文字を入力してください。

英字よりも「コピーしました！」みたいな感じにするとわかりやすいかもしれません。

Button Title

Button Titleはボタンにカーソルを合わせたときに表示する文字です。

ここも好みの設定で大丈夫です。

一度作成したボタンは再設定も可能

一度作成したボタンは「設定」→「Copy to Clipboard」から再設定が可能です。

ここから指定したボタンの設定画面に移動して、カスタムフィールドから全ての設定を変更できます。

コピーボタンを設置する手順

それでは実際にコピーボタンを設置してみましょう。

これはブロックエディタとクラシックエディタでやり方が変わってきます。

両者ともにhtml編集モードができれば可能です。

クラシックエディタでコピーボタンを設置する手順

テキストモードにしてSelectorで設定した値(ここではclip)で囲みましょう。

これだけです。

これで実際に記事を見てみるとコピーボタンが作成されています。

ブロックエディタでコピーボタンを設置する手順

ブロックエディタでは段落のブロックメニューに「HTMLとして編集」という項目があるので、そちらをクリックします。

これであとはSelectorの値<clip></clip>で囲みます。

以上になります。

まとめ

今回は「Copy Anything to Clipboard」を使ってコピーボタンを作成する手順を紹介しました。

ボタンは一種類ではなく何種類も作れるので臨機応変に使えます。

使ってみるとなかなか面白いのでオススメです。

わからないことなどあればお気軽にお問い合わせよりメッセージください。