ブロガー

ブログ記事のタイトルとURLをコピーするボタンの作り方

読了時間: 約5
ブログ記事のタイトルとURLをコピーするボタンの作り方

こんにちは、夢実現サポーターの鈴木俊吾(@suzushin7)です。

ブログを運営していると、記事をシェアして欲しいと思う方は多いですよね?
記事がシェアされることで露出の機会が増え、アクセスの増加が期待できます。

一応、私のブログでも、基本的なシェア機能は実装しているのですが…。
もっと手軽にシェアできるようにしたいですよね。
具体的には、記事タイトルURLをサクッとコピーできるようにしたい。

そんなわけで、今回はその機能を実現するためのボタンを作ってみました。
これは、かなり単純な仕組みで実装していますよ。

せっかくなので、この記事では…。
ブログ記事のタイトルとURLをコピーするボタンの作り方を解説します。

あなたがやることは、掲載されているコードを所定の場所にコピペするだけ。
所要時間は、どんなにかかっても10分程度あれば大丈夫なのではないでしょうか?
非常に簡単に導入できます。

ブログ記事をよりシェアされやすい状況にするためにも…。
試して見る価値はあると思いますよっ!

ブログ記事のタイトルとURLをコピーするボタンとは何?

~とは何?

今回、私が実装してみたのは『ブログ記事のタイトルとURLをコピーするボタン』(以下、コピーボタン)です。

何をするかと言うと、そのボタンがクリックされた際に…。
クリップボードに、現在見ているブログ記事のタイトルとURLに関する情報をテキストとしてコピーします。

具体例としては、例えば『1ヶ月-1.5kgのダイエットに成功!凡人の私のやり方とは?』という記事でコピーボタンを起動すると…。
以下のようなテキストが、クリップボードにコピーされます。

1ヶ月-1.5kgのダイエットに成功!凡人の私のやり方とは? https://suzushinlab.com/success-of-diet-in-1-month/

これを見るとお分かりのように…。
最初にブログ記事のタイトル、そしてその後にURLが横並びでテキストになっています。

コピーボタンがあると…。
ブログの運営者が、ブログ記事の拡散を希望しているということのアピールになります。
また、テキスト形式なので、気軽にどこでも貼り付けられます。
ブログはもちろん、各種SNSにも掲載しやすいですよね。

少しでもシェアしやすい状況を作ることで、拡散効果が期待できます。
実際、どの程度の効果があるかは不明ですが…。
やらないよりは、やったほうが良いのではないでしょうか?

ブログ記事のタイトルとURLをコピーするボタンの実装方法

コピーボタン

それでは、本題です。
ブログ記事のタイトルとURLをコピーするボタンを実装していきます。

主な実装の流れとしては、以下のとおり。

  1. functions.phpに、コピーボタンのコードを追記する処理を実装
  2. CSSの追記
  3. JavaScriptのコードを追加

functions.phpに、コピーボタンのコードを追記する処理を実装

まずは、functions.phpに、コピーボタンのコードを追記する処理を実装します。

とは言っても…。
WordPressにあまり詳しくない方が、直接functions.phpをいじると…。
最悪の場合、ブログが真っ白になってしまい、再起が難しくなる可能性があります。

そこで、ここではプラグインを導入します。
『Code Snippets』をインストール・有効化してください。
これを使うと、直接functions.phpを編集せずに済みますよ。

Code Snippets

『Code Snippets』を有効化したら、メニューの『Snippets』→『Add New』をクリック。
すると、新規スニペットの編集画面が表示されます。

タイトルは何でも良いですが…。
とりあえず、『記事本文の下に「タイトルとURLをコピーする」ボタンを設置』とします。
そして、以下のコードを『Code』にコピペしてください。
その後、適用範囲を『Only run on site front-end』に変更し、『Save Changes and Activate』をクリックして有効化しましょう。

function append_copy_button($content) {
	return $content . '<div class="copy-button" data-clipboard-text="'.get_the_title().' '.get_permalink().'">この記事のタイトルとURLをコピーする</div>'; 
}
add_filter('the_content', 'append_copy_button');

Code Snippets - New Snippet

CSSの追記

上記の手順が終わると、記事本文の下にコピーボタンが出現します。
ただ、見た目がボタンっぽくないです…。
そこで、CSSを編集して見た目を変更していきます。

メニューの『外観』→『カスタマイズ』をクリック。
項目の一番下の『追加 CSS』を展開して、以下のコードを追記します。
これは見た目の設定ですので、CSSが分かる方はお好きなように。

.copy-button {
	margin: 20px auto;
	padding: 10px;
	font-weight: bold;
	text-align: center;
	border: 2px solid #999999;
	border-radius: 20px;
}

.copy-button:hover {
	background-color: #cccccc;
	opacity: 0.75;
	cursor: pointer;
}

.copy-button.copied {
	pointer-events: none;
	background-color: #1e90ff;
	opacity: 0.75;
}

ここまでやると、以下のような見た目になります。
マウスをホバーすると灰色背景。
クリップボードにコピーされたときは、青色背景に変更されます。

コピーボタン

JavaScriptのコードを追加

最後に、コピーボタンを押したときに、クリップボードにコピーする処理を追加します。
これはJavaScriptで実装します。
追記するコードは、body終了タグの手前に配置してください。

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

<script>
var clipboard = new Clipboard('.copy-button');
clipboard.on('success', function(e) {
    $(".copy-button").addClass('copied').text("コピーしました");
});
clipboard.on('error', function(e) {
    $(".copy-button").addClass('copied').text('コピーできませんでした');
});
</script>

以上で、全ての工程は完了です。
お疲れ様でした。

実際に、コピーボタンを押してみて…。
クリップボードにテキストがコピーされるかどうかを確認してみてください。

まとめ

まとめの一言

今回の記事では、ブログ記事のタイトルとURLをコピーするボタンを設置する方法について解説してみました。

基本的には、コピペするだけで良いので…。
所要時間的には、約10分もあればできると思いますよ。

ブログ記事がシェアされる可能性を少しでも高めるためにも…。
ぜひあなたもコピーボタンを試してみてはいかがでしょうか?

この記事のタイトルとURLをコピーする
著者情報
読了時間: 約1

鈴木俊吾(すずしん)

【名前】
鈴木俊吾(すずしん)

【肩書き】
フリーライター

【自己紹介】
座右の銘は『一度きりの人生、楽しむべきだよね絶対!』。ブログで情報発信中。顧客のニーズに応えるため、様々な分野の資格取得を目指しています。趣味は、読書・音楽鑑賞・カラオケ・プログラミング・将棋・MTGなど。年間50冊以上の本を読みます。

【スポンサー募集】
当ブログでは、現在スポンサーを募集しています。詳細はPatreonにて。活動を続けるためには、あなたの力が必要です!

【保有資格】
珠算検定2級/実用英語技能検定準2級/普通自動車運転免許/実用マナー検定準3級/安全運転能力検定3級/カラアゲニスト/ミュージックマスター・オンライン5級/DJ検定5級/相続総合コンサルタント補/姿勢診断士5級/タイピング技能検定イータイピング・マスター4級/Googleデジタルワークショップ デジタルマーケティングの基礎/ICTプロフィシエンシー検定試験5級/インターネットにおけるルール&マナー検定ビジネス版/EFSET 59 (B2 Upper Intermediate)/色彩士検定4級/ビジネス実務与信管理検定試験3級/YouTube Music 認定資格/日本化粧品検定3級/将棋29級/フライドポテト・アンバサダー検定(ブロンズ)/.com Master BASIC

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

コメントを残す