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

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

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

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

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

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

記事タイトルと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」を利用して実装します。

図1:clipboard.js
図1: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を使うとよいでしょう。

図2:clipboard.jsのInstall
図2:clipboard.jsのInstall

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ソースとして挿入します。

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

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;
}

使用する際の注意点(ブラウザ別の挙動)

使用する際の注意点について少し触れておきます。

iOS/Safari
以前はiOSのSafariではJavascriptによるカットやコピーなどのクリップボード操作ができなかったようなのですが、iOS10以降では改善されており、clipboard.jsも正常動作するようになっています。

Windows/IE
WindowsのIEでは環境によるのかもしれませんが、コピー時にクリップボードへのアクセスを許可するかどうかのアラート画面が表示されます。

図3:クリップボードへのアクセス許可を確認するアラート画面
図3:クリップボードへのアクセス許可を確認するアラート画面

「アクセスを許可する」をクリックすると正常にコピーが実行されます。

一方「許可しない」をクリックした場合は、、、

コピーが実行されます(笑)

上記のようにブラウザによっては意図した通りに動作しないケースがあることを認識しておいてください。

またクリップボードへのアクセスを許可するということは、ユーザーにとってはセキュリティ上のリスクに繋がる可能性があるので、、、個人情報や重要なデータを扱うページでは本機能は実装しない方がよいでしょう。

まとめ

SNSのシェアボタンは使い方によっては非常に便利なため、否定するつもりはありませんが、今回ご紹介した「記事タイトルとURLをコピーするボタン」はシェアボタンよりは日常的に使われやすいという点で地味に便利です。

お手軽に実装できるわりに、ユーザビリティの向上に貢献するよい機能ですね。

コンテンツマーケティングの視点から見ても、良質で読みやすい記事を書くのと同じように、ページを訪れたユーザーの手間を軽減して、より簡単にクリップ・情報共有してもらいやすいような機能を付けることも、とても大切です。

このボタンが目に入ることで、多少なりとも記事が共有されやすくなる心理的効果もあるかもしれません。

常にユーザーファーストの視点に立って、読みやすく操作しやすいコンテンツの提供を心掛けたいものですね。

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

この記事を書いた人

永田 健二

石川県金沢市生まれ。大阪育ち。
14年間住んだ東京を離れて、2017年6月より生まれ故郷の金沢に移住。
デザイナー/プログラマーとして数々の制作現場を経て、現在は主にウェブディレクター/マーケティングコンサルタントとして活動中。

ウェブ業界を主戦場にしつつも、北陸地方・石川県の伝統工芸を通じた地方創生や農業をはじめとする第一次産業の新たな価値の創出を目標に掲げて活動しています。
趣味は毎日の食事、地元のスーパー巡り、温泉、ロングウォーキング、ギター。

ご相談・お問い合わせなどありましたら、こちらよりお気軽にお問い合わせください。