シェアボタンより便利？記事タイトルとURLをコピーするボタンを設置する方法【地味に便利】

この記事は約 9 分で読めます。

ウェブで見つけた気になる記事やページをSNSでシェア・投稿したり、社内のグループチャットで記事URLを共有する場合、そして個人的に後で読みたい記事をクリップしておきたい場合、みなさんはどのようにしていますか？

やり方はいろいろありますが、記事ページのタイトルやURLをコピペして貼り付ける機会も多いのではないでしょうか？

ほんの数秒の作業かもしれませんが、以下のように記事タイトルとURLをコピペして共有する場合は2回コピペ操作をしなくてはなりません。

そんな地味な作業ですが、ボタン一発でコピーできたら便利ですよね。

今回はそんな便利な「記事タイトルとURLをコピーするボタン」をWordPressに簡単に設置する方法を考察を交えて紹介します。
※WordPress以外でも使えます。

記事タイトルとURLをコピーするボタンが便利な理由
設置方法
使用する際の注意点（ブラウザ別の挙動）
まとめ

記事タイトルとURLをコピーするボタンが便利な理由

誰にとって便利なのか？
それはもちろんユーザにとって、ですよね。

例えば記事をシェアする場合、シェアボタンがあればそれを利用する人もいるかもしれませんが、一昔前と比べるとFaceBookやTwitterでシェアボタンを利用してシェアする人はけっこう少数派だと思います。

ログインしていない場合だと、最低でも「ログイン」⇒「記事投稿」するという2ステップが発生する物理的なハードルも理由としてあるかもしれません。（実際は1画面で完結するケースが多いですが、ステップとして、という意味合いです）

もっと突っ込んで言えば、記事を見ている人の状況を考えてみましょう。
業務上のリサーチで見つけた記事や、会社の昼休みや空き時間のネットサーフィンで見つけた気になるページがあるとします。

会社のPCだとFaceBookやTwitterにログインしている状態というのは考えにくい上に、わざわざログインしてシェアすることはまずないでしょう。

また、スマホでウェブを見る時は主にChromeやSafariなどのブラウザで見ることが多いと思います。

一方でスマホの場合、FaceBookやTwitterはブラウザではなくアプリで開くのが一般的です。

つまり、スマホのブラウザで見ている時にシェアする場合はやはり一旦ログインが求められます

ユーザーにとって記事をシェアするのは意外と物理的ハードルが高いことが分かります。

加えて、一部のヘビーユーザーを除いて、普段あまり投稿しない人が記事をシェアすることも心理的ハードルの高さから現実的ではありません。

では、皆さんどのようにして気になる記事のURLを共有しているのでしょうか？

Evernoteのようなアプリを使ってクリップしている人も、業務用のチャットやメッセアプリで送る場合は恐らくテキストやURLをコピペする機会がそれなりに多いのではないでしょうか。

PCの場合、選択範囲を拾ってコピペするのはそれほど面倒ではないのですが、スマホの場合、URLをコピーする機能はブラウザによっては用意されていますが、アナログ的に手動で記事タイトルやURLをコピーするのはけっこう面倒ですよね。

そんな状況で大活躍するのが今回紹介する「記事タイトルとURLをコピーするボタン」です。

考察が少々長くなってしまいましたが、、、次の章でサラッと設置方法を説明したいと思います。

設置方法

設置に必要なソースは以下で構成されます。

jQuery
clipboard.js
記事タイトルとURLをコピーするボタンのHTML
clipboard.jsを動作させるJS

jQueryに依存するライブラリの「clipboard.js」を利用して実装します。

今回WordePressでの実装を例に紹介しますが、違いはコピー対象のコードだけなので、jQueyを読み込んでいればどのプラットフォームでも利用可能です。

それでは早速実装をしてみましょう。

jQueryの読み込み

WordPressの場合は、自動的にjQueryが読み込まれるようになっているので特に何も作業する必要はありません。（jsまでのパスは例です）

<script src="/wp-includes/js/jquery/jquery.js"></script>

WordPressの以外の場合は、適宜jQueryをアップして読み込むか、CDNから読み込んでください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

実際に影響があるのかどうかは検証していないですが、WordPressでjQueryの最新版を読み込むとWordPress本体と競合が発生するケースがあるらしく、WordPress側で自動読み込みされるjQueryは意図的に古いverが選択されているようです。

clipboard.jsの読み込み

「clipboard.js」の公式サイトからファイルをダウンロードして利用するか、

<script src="clipboard.min.js"></script>

CDNから読み込んでください。

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script>

公式サイトからダウンロードする場合は、「download a ZIP」リンクからZipファイルをダウンロード後に解凍して、dist/clipboard.min.jsを使うとよいでしょう。

jQueryに依存するライブラリなので、clipboard.jsはjQueryの後に読み込まれるようにしましょう。（直接head内にパスを書いたりする場合は注意しましょう）

記事タイトルとURLをコピーするボタンのHTML

jQueryとclipboard.jpの読み込み設定ができたら、HTML上に設置するコピー用のボタンを作成します。

囲うタグは何でもよいですが、必要な記述はCSSのクラス名とdata-clipboard-textの2点です。

<div class="copyBtn" data-clipboard-text="<? php the_title(); ?>
<? php the_permalink(); ?>">
記事タイトルとURLをコピーする
</div>

class=”copyBtn”
CSSクラス名に設定した「copyBtn」は任意の値に置き換えてもかまいません。
ここで設定したクラス名は後述するclipboard.jsから呼び出す際の識別用に使われます。

data-clipboard-text=”<? php the_title(); ?> <? php the_permalink(); ?>
data-clipboard-textの中に入るのがコピーボタンをクリックした際のコピー対象のテキストデータになります。

今回はWordPressの記事タイトルとURLをコピーするためのボタンを設置するので、中には<? php the_title(); ?>＝記事タイトルと<? php the_permalink(); ?>＝URLを入れています。

ちなみにソース内に改行を入れることで、記事タイトルとURLを2行に分けた改行ありの文字列でコピーできます。（改行を入れなければ1行でコピーされます）

この中には固定のテキストを入れたり、JSで動的に取得したデータなどを利用することもできます。

また別の指定方法として、以下のようにdata-clipboard-textに#hogeなどのidを指定した場合、該当するidに設定したvalue値をコピーすることもできます。

<input id="hoge" value="ここにコピーしたい内容を入れます">
<button class="copyBtn" data-clipboard-target="#hoge">id="hoge"で指定した要素のvalueの中身をコピーします</button>

WordPressテンプレートファイルへの設置

ブログ記事用テンプレートファイルの任意の箇所に前述のボタン用のHTMLを設置します。

今回はブログ本文の一番下に設置しているので、<?php the_content(); ?>の下にタグを設置しています。

<div class="article-body">
  <?php the_content(); ?>
  <div class="copyBtn" data-clipboard-text="<? php the_title(); ?>
  <? php the_permalink(); ?>"> 記事タイトルとURLをコピーする </div>
</div>

テーマや構成ファイルによって作業対象となるテンプレートファイルが異なってくるかと思いますので、この辺りは任意で設置してください。

ブログ記事本文の途中で挿入したい場合は、記事内に<div class=”copyBtn”>で囲われたdivタグをHTMLソースとして挿入します。

頻繁に記事内に挿入する場合はショートコードに登録して呼び出した方が使いやすいかもしれませんね。

シェアボタンより便利？記事タイトルとURLをコピーするボタンを設置する方法【地味に便利】

ウェブで見つけた気になる記事やページをSNSでシェア・投稿したり、社内のグループチャットで記事URLを共有する場合、そして個人的に後で読みたい記事をクリップしておきたい場合、みなさんはどのようにしていますか？やり方はいろいろありますが、記事ページのタイトルやURLをコピペして貼り付ける機会も多いのではないでしょうか？ほんの数秒の作業かもしれませんが、以下のように記事タイトルとURLをコピペして…

clipboard.jsを動作させるJS

最後にclipboard.js側で動作させる実装内容を設定していきます。

jQueryとclipboard.jsを読み込んだ後であれば、scriptタグで囲ってインラインで設置しても、外部jsファイルで設置してもどちらでも問題ありません。
当サイトでは他の記述と併せて一括で読み込み指定しているmain.jsの中にまとめて書いています。

// クリップボードへのコピー実装
var clipboard = new Clipboard('.copyBtn');

// コピー成功時（CSSクラスを追加してテキストを変更）
clipboard.on('success', function(e) {
    $(".copyBtn").addClass('isCopied').text('記事タイトルとURLをコピーしました！');
});

// エラー時
clipboard.on('error', function(e) {
    $(".copyBtn").addClass('isCopied').text('お使いのブラウザはこの機能に対応していません');
});

行の冒頭にコメントを入れていますが、項目ごとに順に説明していきます。

new Clipboard(‘.copyBtn’) ;
clipboard.jsでボタンとして扱うCSSクラス名を定義します。
前述のボタン用HTMLに設定したクラス名を入れます。

clipboard.on(‘success’, function(e) {
コピーボタンをクリックしてコピーが成功した時の制御を記述します。
ここではaddClass(‘isCopied’)で成功した時にCSSのクラスを追加しており、text(‘記事タイトルとURLをコピーしました！’)で文言を変更しています。

clipboard.on(‘error’, function(e) {
コピーできなかった時の制御を記述します。
ブラウザによっては正常に動作しないケースがあるので、その際に表示させる内容を記述しています。

完成サンプル

以下が完成したサンプルです。

この記事のタイトルとURLをコピーする

ここまで説明した内容に加えて、ボタンの体裁をCSSで別途調整しています。
ボタンの体裁は本機能とは切り離して自由に調整可能なので、各自お好みでCSSを個別調整してください。

当サイトの例だと、CSSは前述の「.copyBtn」と「.isCopied」の2つのクラスで調整しています。

以下参考までに載せておきます。

.copyBtn{
font-weight:bold;
font-size:.85em;
text-align:center;
margin:30px auto;
padding:12px 20px;
border:1px solid #eee;
}
@media (min-width:769px){
.copyBtn{
max-width:20em;
}
}
.copyBtn:hover{
opacity:0.6;
cursor:pointer;
}
.copyBtn.isCopied{
pointer-events:none;
background:#f7f7f7;
}
.copyBtn.isCopied:hover{
cursor:auto;
}