WordPressテーマのSimplicityに記事のタイトルとURLをコピーするボタンを設置してみた

Twitterを眺めているとTLに、「WEB企画LABO」というブログの「記事タイトルとURLをコピーする」だけのボタン、というツイートが流れてきました。

ブログに「記事タイトルとURLコピーする」というたったそれだけのボタンを付けたら色々と便利だったのでご紹介します!これまではブックマークレットで対応していた方も多いと思いますが、このボタンだければソーシャルボタンを使う際の不満を軽減できるかもしれません!

記事を読むと、活用してもよいとのことでしたので、早速設置してみることにしてみました。

jsをダウンロードする

まず、「clipboard.js — Copy to clipboard without Flash」にある「download a ZIP」をクリックして、zipファイルをダウンロードします。

「download a ZIP」をクリック
「download a ZIP」をクリック

ダウンロードした「clipboard.js-master.zip」を解凍し、「dist」フォルダ内にある「clipboard.min.js」を子テーマにアップロードします。

js

下記のjsを「copy.js」などとして、子テーマにアップロードします。

footer-insert.php

子テーマの「footer-insert.php」に下記の記述をします。

sns-buttons-icon.php

「Simplicity2」の「sns-buttons-icon.php」ファイルの一番上に下記の記述をしました。

「data-clipboard-text」内がコピーする内容になるので、WordPressのタイトルとURLに相当する「<?php wp_title(); ?>」と「 <?php the_permalink(); ?>」を記述します。テキストだけだと味気ないので、divの中にSVGアイコンを記述しました。

css

下記のスタイルを子テーマの「style.css」に記述しました。

確認

実際に「Outlook.comのメールの自動振り分け2」の記事でコピーボタンをクリックして貼り付けると、下記のようになります。

コピーボタンをクリックして貼り付け
コピーボタンをクリックして貼り付け

記事のタイトルとURLがコピーされていることがわかります。

まとめ

  • クリップボード用のjsをダウンロードする。
  • コピーボタン用のjsを作る。
  • 子テーマの「footer-insert.php」に各jsを読み込ませる。
  • コピーボタン用のCSSを作り、子テーマの「style.css」に記述する。

「WEB企画LABO」さんの記事にもあったように、タイトルとURLのコピー用ボタンを作成する意義は、記事をソーシャルボタンを利用してシェアする際にログインを求められたり、複数回のコピーを余儀なくされる場合の煩雑さを解消できる点にあります。

訪問ユーザーにとってなかなか便利な機能だと思うので、導入を検討してみてはいかがでしょうか。

スポンサーリンク

シェアする

フォローする

WordPressテーマのSimplicityに記事のタイトルとURLをコピーするボタンを設置してみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!