WordPressでURLコピーのボタンを自作で実装する方法(サンプルコード付き)

2023.07.19
2023.07.19

みなさんこんにちは!エンジニアの高澤です!
今回はWordPressでURLコピー機能のあるボタンを実装する方法ついて解説したいと思います。

URLコピーボタンは多くのウェブサイトで必要とされるため、URLコピーボタンを実装できることはWordPressエンジニアとして求められるところかと思います。

プラグインを使えば簡単にコピーボタンを実装することはできるかと思いますが、自作でURLコピーボタンを実装することができれば柔軟に対応することができ多くの場面で役に立ちます。

例えばURLのみコピーさせるだけでなく、タイトルテキストなどを含めてコピーするボタンを実装することも実装次第で可能です。

それではURLコピーボタンについて解説していきます。

URLコピーボタンとは

URLコピーボタンとは、ユーザーが特定のURLやテキストを簡単にクリップボードにコピーすることができる機能を実現するためのボタンのことをいいます。

これにより、ユーザーはコピーするために手動でURLを選択してコピーしたり、文字をカーソルで包んでコピーしたりする手間を省くことができます。

URLコピー機能のボタンを実装する方法

URLコピーボタンを実装する方法の流れとしては下記のイメージになります。

  • HTMLでコピーボタンを実装する
  • コピーボタンクリック時の機能を実装する

それぞれ解説させていただきます。

HTMLでコピーボタンを実装する

まずはコピーボタンをHTMLで実装します。
画像を用意し、下記コードのようにaタグで挟んでそのaタグにJavaScriptで関数を直接設置し、クリック時に動きを実装できるようにします。

コピーボタンクリック時の機能を実装する

コピーボタンのクリック時にURLをコピーするための機能をJavaScriptにて実装いたします。
下記のようにJavaScriptのコードをフッターもしくは別で切り分けているjsファイルなどにコピー&ペーストしてください。

const element = document.createElement(‘input’);について

input要素を作成するためのelementという定数を宣言しています。このinput要素は一時的な要素として使用され、クリップボードにコピーするための情報を保持します。

element.value = location.href;について

作成したinput要素のvalueプロパティに、現在のページのURL (location.href) をセットします。つまり、elementに現在のページのURLが設定されます。

document.body.appendChild(element);について

作成したinput要素をドキュメントのbody要素に追加します。これにより、一時的なinput要素がDOMに追加されます。

element.select();について

input要素の内容を選択状態にします。これにより、ユーザーが手動でテキストを選択する必要なく、内容全体が選択されます。

document.execCommand(‘copy’);について

選択されたテキストをクリップボードにコピーします。これはexecCommand()メソッドを使用して行われます。

document.body.removeChild(element);について

input要素をドキュメントから削除します。クリップボードにコピーが完了した後に一時的なinput要素を削除します。

alert(“URLをコピーしました”);について

クリップボードへのコピーが成功したことをユーザーに通知するアラートメッセージを表示します。

この関数を呼び出すことで、ユーザーが現在のページのURLを簡単にコピーできるようになります。
通常、ウェブサイトの共有機能などで使用されることがあります

クリップボードのプラグイン「Copy Anything to Clipboard」について

URLコピーボタンの実装方法としてはプラグインという選択肢もあります。

筆者のおすすめはCopy Anything to Clipboardプラグインです。
このプラグインは非常にシンプルで設定が簡単で使いやすいです。

プラグインで用意されているショートコードを使うことで、ボタンの文字の設定やコピーするためのURLなどコンテンツ部分を非常に簡単に設定することができます。

実際の使い方は下記になります。

URLコピーボタンの設定がシンプルで簡単

Copy Anything to Clipboardプラグインを使ってURLコピーボタンを実装する場合、下記のようにショートコードを使用します。

上記はボタンのテキストをcopyショートコードに挟んむようにして、content属性にはコピーさせたいURLを設定しています。
実際に設定するときはこのように設定してください。

まとめ

以上でWordPressでURLをコピーするためのボタンの実装方法の解説を終わります。

URLコピーボタンはしばしばウェブサイトに必要とされる機能であり、記事ページのSNSシェアボタンと合わせて設置されることがほとんどです。

WordPressはブログを構築するためのCMSであり、記事ページを多く提供する以上SNS発信とは切っても切れない関係といっても過言ではありません。

当記事では今回のようなWordPressエンジニアなどにとって必須の技術を解説しておりますので、よろしければご活用くださいますと幸いです。

2023.07.19
WordPress開発・運用チーム

WordPressを使ったWebサイト制作を得意とする株式会社セルリアのWeb制作チーム。ご要望に合わせ、長く利用頂きやすいホームページをご一緒に制作いたします。集客、Webマーケティングについても貴社のご要望に合わせた形でご提案いたします。また、高度なカスタマイズ、プラグイン開発にも対応可能です。お問い合わせフォームよりお気軽にご相談ください。

こちらの記事を読んだ方におすすめ