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

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

2018年くらいから「この記事のURLとタイトルをコピーする」ボタンを設置してるサイトが増えてきました。
筆者は、別にどっちでもええかなって思ってたんですがそれは大きな間違いでした。
多くの方は、FacebookTwitterくらいやってると思い込みふとスマホでいろいろ見てるとやってない人も一定数いて特にスマホでは超便利なんですね。
今はこのサイトにも設置していますが、意外と簡単に設置できましたね。
このサイト以外でも設置してみましたが基本的にはソーシャルボタンの上下で表示した方がいいですね。
今回は一緒に「この記事のURLとタイトルをコピーする」ボタンを設置してみましょう。

 

目 次

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

記事タイトルとURLをコピーする
スマホを触っていて気づいたのですが、スマホで WordPressから Facebookにシェアするとか TwitterにTweetするとかやらないなーって思って友人に聞いてみたらよほどでないとやらないとのこと
それは、多くの方がアプリで使うことはあってもブラウザで使ってないのでログインしないといけないこと
これは非常に面倒な話ですね
であればボタン1発タップでタイトルとアドレスがコピーできた方がめっちゃ便利
今は、過半数以上の方がスマホで見ている時代です。
これって設置しないと言う選択肢はしない方がいいですね
やるしかないのです。
その方が拡散率もアップすることまちがいなしですね

 

設置方法

コピー完了
設置にはテーマをカスタマイズする必要があるので初心者の方は慣れてる方と一緒に操作すればできるかもしれません。
ほぼコピペで可能ですが、解説みても何のことってクビをかしげる方もいるのでそういう方はちょっと厳しいですね。
カスタマイズ前にテーマを直接触るのではなく子テーマを使うことをオススメしています。
アップデートごとに元に戻るなら本テーマではなく子テーマでカスタマイズすべきなのです。
利用するテーマによって注意すべき点は違ったりしますが・・・

 

single.phpにHTMLを追加する

HTMLとCSS
テーマによってsingle.phpではなく違う PHPファイルを編集する場合もありますが、基本はsingle.phpを編集します。
 Windowsでファイルを開いたりするとShift-JISなどに文字コードがなる場合もあります。
 WordPressでは文字コードがUTF-8が必須になります。
 WindowsであればTerapadというテキストエディタがあるといいですね。
メモ帳の場合は、文字コードの設定ができないので使えません。
macOSの場合は、Sublime Textをおすすめしています。
使い方については、Tech ACADEMYさんで紹介されています。

挿入する場所についてはテーマによって違います。

 

body終了タグ直前に jQueryとJavaScriptを追加する

Jquery
jQueryって何?
って方も気にしなくて大丈夫です。
要は、わからなくてもコピペができれば大丈夫なのです。
どこにコピペすればいいのか?
bodyの終了タグがあるのはほとんどのテーマでfooter.phpになります。

footer.phpに上記のようにコピペしてFTPソフトでファイルをアップロードする

jQuery(ジェイクエリー)は、ウェブブラウザ用の JavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。

 JavaScript(ジャバスクリプト)とは、プログラミング言語のひとつである。 Javaと名前が似ているが、全く異なるプログラミング言語である。

 

スタイルシートを追加する

スタイルシート
 スタイルシートを追加する場所は、外観→カスタマイズの追加CSSの中にコピペします。
この場所にコピペする方が失敗が少ないですね。

 

このコンテンツを閲覧するにはログインが必要です。お願い . あなたは会員ですか ? 会員について

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!