この記事のURLとタイトルをコピーするボタン設置
2018年くらいから「この記事のURLとタイトルをコピーする」ボタンを設置してるサイトが増えてきました。
筆者は、別にどっちでもええかなって思ってたんですがそれは大きな間違いでした。
多くの方は、FacebookかTwitterくらいやってると思い込みふとスマホでいろいろ見てるとやってない人も一定数いて特にスマホでは超便利なんですね。
今はこのサイトにも設置していますが、意外と簡単に設置できましたね。
このサイト以外でも設置してみましたが基本的にはソーシャルボタンの上下で表示した方がいいですね。
今回は一緒に「この記事のURLとタイトルをコピーする」ボタンを設置してみましょう。
記事タイトルとURLをコピーするボタンが便利な理由
スマホを触っていて気づいたのですが、スマホで WordPressから Facebookにシェアするとか TwitterにTweetするとかやらないなーって思って友人に聞いてみたらよほどでないとやらないとのこと
それは、多くの方がアプリで使うことはあってもブラウザで使ってないのでログインしないといけないこと
これは非常に面倒な話ですね
であればボタン1発タップでタイトルとアドレスがコピーできた方がめっちゃ便利
今は、過半数以上の方がスマホで見ている時代です。
これって設置しないと言う選択肢はしない方がいいですね
やるしかないのです。
その方が拡散率もアップすることまちがいなしですね
設置方法
設置にはテーマをカスタマイズする必要があるので初心者の方は慣れてる方と一緒に操作すればできるかもしれません。
ほぼコピペで可能ですが、解説みても何のことってクビをかしげる方もいるのでそういう方はちょっと厳しいですね。
カスタマイズ前にテーマを直接触るのではなく子テーマを使うことをオススメしています。
アップデートごとに元に戻るなら本テーマではなく子テーマでカスタマイズすべきなのです。
利用するテーマによって注意すべき点は違ったりしますが・・・
single.phpにHTMLを追加する
テーマによってsingle.phpではなく違う PHPファイルを編集する場合もありますが、基本はsingle.phpを編集します。
Windowsでファイルを開いたりするとShift-JISなどに文字コードがなる場合もあります。
WordPressでは文字コードがUTF-8が必須になります。
WindowsであればTerapadというテキストエディタがあるといいですね。
メモ帳の場合は、文字コードの設定ができないので使えません。
macOSの場合は、Sublime Textをおすすめしています。
使い方については、Tech ACADEMYさんで紹介されています。
|
1 2 3 4 5 |
/* single.phpにHTMLを追加 */ <div class="copy_btn" data-clipboard-text="<?php the_title(); ?> <?php the_permalink(); ?>"> この記事のURLとタイトルをコピーする </div> |
挿入する場所についてはテーマによって違います。
body終了タグ直前に jQueryとJavaScriptを追加する
jQueryって何？
って方も気にしなくて大丈夫です。
要は、わからなくてもコピペができれば大丈夫なのです。
どこにコピペすればいいのか？
bodyの終了タグがあるのはほとんどのテーマでfooter.phpになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* jQueryとJavaScriptを追加する */ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- ↓クリップボード操作のために使用するjsを読み込む ( https://clipboardjs.com/ ) --> <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script> <script> var clipboard = new Clipboard('.copy_btn'); //clipboard.min.jsが動作する要素をクラス名で指定 //クリックしたときの挙動 $(function(){ $('.copy_btn').click(function(){ $(this).addClass('copied'); //ボタンの色などを変更するためにクラスを追加 $(this).text('コピーしました'); //テキストの書き換え }); }); </script> </body> </html> |
footer.phpに上記のようにコピペしてFTPソフトでファイルをアップロードする
jQuery（ジェイクエリー）は、ウェブブラウザ用の JavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。
JavaScript（ジャバスクリプト）とは、プログラミング言語のひとつである。 Javaと名前が似ているが、全く異なるプログラミング言語である。
スタイルシートを追加する
スタイルシートを追加する場所は、外観→カスタマイズの追加CSSの中にコピペします。
この場所にコピペする方が失敗が少ないですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* スタイルシートを追加する */ .copy_btn { width: 100%; max-height: 200px; display: block; border: 2px solid #666; text-align: center; font-weight: 700; padding: 30px 0 26px; margin: 0 auto 10px; !important } .copy_btn:hover {cursor: pointer; color: #fff; background: #111111; opacity: .6;} .copy_btn.copied { pointer-events: none; background: #333333; color: #ffffff; !important } .copy_btn.copied:hover {cursor: auto;} |
 |
くまはちLABのご利用ありがとうございます！ |
Evernoteに保存