【WordPress プラグイン】初心者でもできる！コピーボタンの設置について

コピーボタンを設置したい！と思っているあなた。
こんにちは。zepto（ゼプト）です。

コピーボタンとは、下図のように文字列をクリップボードにコピーできる機能になります。

Copyを押すことで、文書の文字列がコピーできるようになる機能です。

読者の皆さんにコピーしてほしい文字列があって、わざわざカーソルでコピー範囲を選択して～と操作してもらうのは面倒ですよね。

今回は、WordPressのプラグイン「Copy Anything to Clipboard」を利用してコピーボタンの設置をおこなっていきます！

この記事はこんな人にオススメです！

では、早速やっていきましょう！！

はじめに

WordPressの管理画面へアクセス

WordPress管理画面にアクセスします。

「ユーザー名またはメールアドレス」「パスワード」を入力後、「ログインする」ボタンをクリックします。

プラグインの準備

Copy Anything to Clipboard のインストール

では、さっそく「Copy Anything to Clipboard」をインストールしましょう！

画面左メニューの「プラグイン」＞「新規追加」をクリックします。

「Copy Anything to Clipboard」を検索し、インストールをおこないます。
インストール後、「有効化」ボタンを押下します。

「有効化」ボタンを押下すると、下図のような画面が表示されます。
「スキップ」ボタンを押下しましょう。

プラグインの設定

無事にプラグインのインストールが完了したら、設定をおこないます。

画面左メニューの「Copy to Clipboard」をクリックすると、画面右にCopy to Clipboardの設定画面が表示されます。

「Add New」ボタンをクリックし、コピーボタンを設置するタグを設定します。

タグの設定

ここでは各機能について説明します。

それぞれの項目について順に説明します。

項目名	説明
Selector	コピー機能を適用するHTML要素を指定します。デフォルトは「pre」になります。 テーマによっては干渉する場合があるため、場合によっては、任意の値に変更して設定するとよいでしょう。
Style	コピーボタンの見た目（色、サイズ、形など）をカスタマイズします。 画面右の「PreView」で確認することができます。
Button Position	コピーボタンの位置を設定します。 テキストエリアの外側か内側か選択できます。 Styleの「Button」「SVG Icon」選択時のみ表示されます。
Copy Format	コピー時のテキストフォーマットを設定します。 例えば、テキストのままコピーするか、HTMLタグを含むかなどを設定することができます。 デフォルトの「Default」はテキストのままコピーされます。
Button Text	コピーボタンのテキストを設定します。 「コピー」といった文字列に書き換えることができます。
Button Copy Text	コピーボタンのコピー後に表示されるテキストを設定します。 「コピーされました」といった文字列に書き換えることができます。
Button Title	コピーボタンのツールチップ（ボタンにカーソルを置いた時に表示される小さなテキストボックス）に表示されるテキストを設定します。 「クリップボードにコピー」といった文字列に書き換えることができます。

各項目の設定を入力したら、「Create」ボタンをクリックして完了です。

利用方法

表示（見え方）について

では作成したタグを実際に利用してみましょう！

下図は編集ページならびに実際のページの表示になります。

編集ページによる編集方法は、「カスタムHTML」を選択後します。
その後、HTML内に作成したタグを含めたサンプルを挿入します。

＜編集ページ＞
※分かりやすくするため、枠のスタイルを設定

＜実際のページ＞

実際に体験してみる

コピーボタンが下記となります。

右側の「コピー」をクリックすると、「コピーされました」と表示されます。
実際にクリップボードにコピーされています。

コピーボタンが設置できました！

終わりに

「Copy Anything to Clipboard」は、コピーボタンを設置できるシンプルなプラグインですが、手軽にコピーすることを機能として提供してくれます。

日々の作業をより効率的に、よりスムーズに進めることを可能にしブログ記事のユーザビリティを向上させる手助けとなること間違いなしです。

読者の皆さんも、ぜひ利用してみてはいかがでしょうか？