★活ノートシリーズ月間100,000ページビュー達成! 今後も楽しい記事をお届けします!★

【THE THOR ザ・トール】プラグイン「wp-hatena拡張版」で機能アップ?

【THE THOR ザ・トール】プラグイン「wp-hatena拡張版」でシェアボタン追加に挑戦してみた結果。

 

katsuです。先日の記事でご紹介しましたが、はてなIDを取得してはてなブックマークにデビューしました。ブログのアクセスアップに使えるのでは?と考えたためです。詳しくはこちらの記事をご覧ください。

関連記事

はてなブックマークでブログアクセスアップできるのか?使い方と初期設定方法を調べてみた。 katsuです。このブログも140記事ほどの投稿を目前として、ふと アクセスアップのことを考えてみること[…]

 

はてなブックマークが何なのか理解できたのは大収穫なのですが、ふと僕のブログに使っているシェアボタンのことが気になりました。

 

ブログで使用しているWordpressのテーマ「THE THOR(ザ・トール)」にはシェアボタンを表示する機能が最初から搭載されています。記事の下に表示しているこんなボタンです。

コメント 2019-08-18 203904
※こちらはサンプル画像です。

 

自分が利用しているSNSのボタンをクリックすると、簡単に記事をシェアできるというスグレモノです。はてなブックマークボタンも僕の知らないうちに皆さん使って頂いていました。(ありがとうございます。)

 

ここでひとつやりたいことができました。

 

シェアボタンにどれだけクリックされているか数を表示させたい!

 

読者の方が見るとこの記事はこれだけシェアされているのか~と人気度をすぐに推し量ることができますし、執筆する側もモチベーションアップに繋がります。そこで目を付けたのが新たなプラグイン、wp-hatena拡張版です。

 

シェアボタンにカウントを表示するためには、各サイトからカウント情報をもらってくる必要があります。プラグインwp-hatena拡張版はこの作業を、かなり自由度高くやってくれそうなのです。

 

早速使い方をご紹介しましょう!そして最初に申し上げておきますが、残念ながらwp-hatena拡張版はうまく機能しませんでした。THE THORとの相性もあるのだと思います。それでもチャレンジしてみたい方は、ぜひこの続きをご覧ください。


wp-hatena拡張版とは

wp-hatena拡張版とは、hibikiさんが作られたWordPress用のプラグインです。こちらのサイトが公式ページです。

http://wppluginsj.osdn.jp/wp-hatena-extended/

 

hiromasaさんが作られた「wp-hatena」をhibikiさんが改造されたもののようですね。このプラグインで追加できるボタンはこんな感じです。画像が全てを物語っています。

コメント 2019-08-19 201836

 

はてなブックマークやツイッター、フェイスブックのカウンターが表示されています。まさにこれがやりたいのです!

wp-hatena拡張版の導入方法

wp-hatena拡張版は上記のhibikiさんのサイトからダウンロードすることができます。ページに上部近くに、このようにzipファイルがダウンロードできるようになっています。

コメント 2019-08-19 202106

 

このzipファイルはプラグインファイルですが、一手間加える必要があります。一旦解凍すると、「img_sample」というファイルが現れます。これを「img」に変更し、再び圧縮してzipファイルに戻しましょう。

コメント 2019-08-17 185440

赤線のフォルダを「img」に変更し、プラグインファイルの準備は完了です。Wordpressの管理画面からプラグインの追加を行います。「プラグイン」⇒「新規追加」から「プラグインのアップロード」を選びます。指示に従ってインストールを行いましょう。

 

コメント 2019-08-17 190646

 

こちらの画面で「プラグインを有効化」します。WordPressの管理画面に戻り、「設定」タブに「wp-hatena」がこのように表示されれば導入完了です。

 

コメント 2019-08-17 190825

 

導入自体はそれほど難しくありませんね。管理画面の「設定」からはこんな設定ができます。全て日本語なのがありがたいですね。ちなみに設定を全く変更せずとも利用できます。

コメント 2019-08-17 191019

コメント 2019-08-17 191049

wp-hatena拡張版でシェアボタンを表示する方法(THE THOR版)

さて、プラグインwp-hatena拡張版を導入した後は、記事にボタン表示を追加する処理を行う必要があります。記事のどこに表示するかを「PHPファイル」と呼ばれるシステムファイル内で指定します。

 

THE THORの場合は「single.php」のコード内にタグを追記する必要があります。十分注意して作業を行います。WordPressのタスクバーから「外観」→「テーマエディター」を選び「single.php」を探し出します。THE THORの場合は親テーマ内にこのような感じで表示されます。

 

コメント 2019-04-30 215031

 

ここからはPHPファイルを変更します。十分注意し、自己責任で変更を行ってください。190行目付近の所定の位置に、このようにタグコードを追加します。

コメント 2019-08-17 213632

 

記事の上部にボタンを表示したい場合は「post_top_widget」内の赤線部分の位置に、下部にボタンを表示したい場合は「postContents」の橙色の位置にタグコードを追記します。

 

こちらの画像では、記事上部にはてなブックマークボタンを配置しています。(記事下部の橙色部分は「いいやん!」ボタンを表示するためのタグが書いています。)このようにタグを追加すると・・・

コメント 2019-08-17 214123

 

はてなブックマークボタンが表示されました!

 

PHPファイルの変更さえ十分注意すれば、このように比較的簡単にシェアボタンを追加することができます。また、シェアボタンの種類はかなりたくさん用意されており、追加したいボタンのタグコードを列記することで、ボタンを横並びで表示することが可能です。

 

主なシェアボタンのタグ例はこんな感じです。(列記方法は公式サイトに例があります。)

はてなブックマーク  $wph->addhatena();
はてブのブックマーク数をテキスト表示  $wph->addHatenaCountTxt();
はてブのブックマーク数を画像表示  $wph->addHatenaCount();
Evernoteクリップ  $wph->addEvernoteClip();
Facebookいいね!  $wph->addFacebook();
Facebookシェア  $wph->addFacebookShare();
twitterつぶやく  $wph->addTweetBtn();



wp-hatena拡張版の問題点(THE THOR版)

さて、このように無事プラグインの導入を終え、やりたかったカウント数の表示を行うことができました。こんな感じ。

コメント 2019-08-17 222706

しかし!!

大きな問題がありました。インターネットエクスプローラで記事ページを開くと、この表示が出るようになってしまいました。

 

コメント 2019-08-17 222126

 

よく見るヤツですね。そしてコンテンツを表示」ボタンがクリックされれば正しくカウントが表示されるのですが、押されなければカウントは表示されません。しかもGoogle Chromeでページを開くとこのように表示されてしまいます。

 

コメント 2019-08-17 222734

 

スマホやタブレットではChromeを使っておられるパターンが多いと思うので、こんなひどい画面が毎回表示されてしまうわけです。

 

更に、このプラグインを導入することで記事ページの表示がかなり遅くなってしまいました。ページを表示するときに、各シェアボタンのカウントを各々のサイトまで拾いにいくわけです。その分表示に時間がかかるというわけですね。

 

思った以上に微妙な感じだったので、残念ながら今回はプラグインの導入を諦めました。


さいごに

さて、今回の記事はプラグインを導入しようとして失敗したお話です。

 

何の役にも立たないかもしれませんが・・・wp-hatena拡張版の導入を考えておられる方は参考にしてください。そしてTHE THORを利用している方、記事のトップ・ボトムにタグを入れる方法は他にも活用できるはずなので、参考にしてください。

 

シェアボタンにカウントを表示するのはなかなか見栄えもよさそうなので、今後も良いプラグインが無いか探してみようと思います。

活ノートでは最新記事の投稿情報をメールでお伝えしています。お気軽にご登録ください!


 

配信例はこちらにあります。

いいやん!
↑2いいやん!されています。良い記事でしたら「いいやん!」クリックお願いします。

下のSNSボタンから記事拡散にもご協力お願い致します。
読み込み中...

記事はいかがでしたか?
今後もぜひ応援をお願い致します!


最新情報をチェックしよう!
>活ノートでつながる。

活ノートでつながる。

記事にはお気軽にコメントをどうぞ!
ご意見、ご質問、記事の執筆依頼などなどお待ちしております。

ブログ『活ノート』シリーズ
・活ノート
・詐欺情報をまとめるブログ。by活ノート
・コミュボード。by活ノート

ブログランキングに参加中です。
順位の確認はこちらです。
人気ブログランキングブログランキング・にほんブログ村へFC2ブログランキング