【WordPress】プラグインなしで各記事への「はてブ」コメントを表示する方法|Knowledge Base

公開日：2018(平成30)年8月20日／最終更新日： 2018(平成30)年8月21日

WordPressには標準でコメント欄があるにはあるのですが、どんなに対策してもスパムは減らないし、何より心無いコメントが来ると正直凹みますよね？まあコメント承認しなかったら公開されることはないにせよ、誹謗中傷のような文面を見るのも嫌なものです。

だけど何もなしというのはちょっと寂しい・・・。そこで通常のコメント代替手段としてよく使われるのがTwitterへのツイート（メンションというそうです）やFacebookコメント、G+のコメント欄を表示する方法。後ろの２つについては

SNSアカウントでのログイン、コメント、シェアボタンを使えるようにするプラグイン「WordPress Social Share, Social Login and Social Comments Plugin – Super Socializer」

を使えば簡単に実装できます。

が、Facebookはちょっと敷居が高いなぁ、Google+はあまり日本では人気ないみたいだし・・・というときに活用できそうなのが【はてなブックマーク】のコメント機能。

シェアボタンを使ってサイトにブックマークされた数字だけでなく、その記事にはてブコメントされたものが表示できれば、コメント欄を削除して一方通行になってしまったサイトもちょっと楽しくなるかと思います（至って個人的見解）。

早速実装してみよう！！ということで調べたら、はてなブックマークには有名なブログ用にはてブコメントを表示できるパーツが用意されているのですが、WordPressのサイトには対応していないらしい・・・で発見したのがこのサイト。

コピペ可！はてなブックマークコメントをWordPressで使いたい

さすがたくさんの人が使っているWordPress。やりたいことは検索すればほぼ１００％解決できるのがすばらしいですね。ありがたいありがたい。

コードや設置方法は上のリンクを見てくださいね（コードの引用は泥棒になってしまいますのでここでは掲載しませんのでご了承ください）

「え？単純に他サイトの紹介記事なの？？」と思われた方、そうではありません。今回はこのコードを当サイトで使っている【Simplity2】テーマで本文下に表示する方法を紹介します。

【Simplity2】テーマでその記事へのはてブコメント一覧を表示する方法

コードは上のリンクから取得してください。手順は以下の通りです。

スクリプトをテーマ内へ挿入する

リンク記事内の「はてな公式ブックマークウィジェットをWordPress用に直す」の項目に書かれているコードをテーマの「footer.php」の末尾（子テーマの場合はfooter-insert.php）へ追記します。

※SSL(HTTPS)接続の場合は紹介されているコードのままだとその部分に差し掛かったときに「Mixed Content～」という警告が出てSSL接続でなくなってしまうことがあります。解決するにはコード内にある「http://～」を「//～」へ変更することで警告が出ないようになります（この方法はいろいろな場面で役に立つので覚えておくといいと思います）。

表示させるコードをテーマ内へ挿入する

リンク記事内の「はてなブックマークコメントを表示部に埋め込む」に書かれているコードを「entry-body.php」の９５行目あたりにある（カスタマイズしてしまっているので正確な行数ではありません）

get_template_part('sns-buttons'); //SNSシェアボタンの取得?>

の下へ追加します。

※phpで現在の投稿を引っ張っているので通常のウィジェットなどへ挿入しても動作しません（ウィジェットなどでphpコードが実行されるようにしているサイトでは動作しますがセキュリティ的にはどう？と個人的には思います）。

これで当サイトと同じようにシェアボタンの下へその記事に寄せられたはてブコメント一覧が表示されるようになります。

デザインの変更などはCSSで調整してくださいね。

このサイトではあまりはてブコメントされる機会が少ない（寂しい・・）のですが、私が作成・管理しているOrdinary Lifeではコメントを頂けている日記が数多くありますので、どんな表示になるのかを見てみてくださいね。

最後に余談ですが、こういうパーツってアクセスされるたびに外部に接続（今回の場合は「はてな」へ接続）してデータを持ってくる分、外部サイトの負荷状況などによって表示速度に影響があることが多いです。そんなときは非同期（要するに読み込んでいる間も他の処理をする）で読み込むというのが一番なのですが、このスクリプトは非同期化するテストをしてみたものの残念ながら非同期に対応していませんので、設置してみて表示速度に問題がないかを確認するようにしてくださいね。

※当サイト・参考サイトともあまり影響があるようだったら外すかも知れません（閲覧時になかったらごめんなさい）。そんなときのために・・・こちらがスクリーンショットです。