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

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

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

【Super Socializer】は、シェアボタンの設置、SNSアカウントでのログイン、SNSアカウントでのコメント機能がセットになった便利なプラグインです。

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

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

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

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

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

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

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

スポンサーリンク

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

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

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

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

  3. 表示させるコードをテーマ内へ挿入する
  4. リンク記事内の「はてなブックマークコメントを表示部に埋め込む」に書かれているコードを「entry-body.php」の95行目あたりにある(カスタマイズしてしまっているので正確な行数ではありません)

    get_template_part(‘sns-buttons’); //SNSシェアボタンの取得?>
    の下へ追加します。

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

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

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

このサイトではあまりはてブコメントされる機会が少ない(寂しい・・)のですが、私が作成・管理している

ではコメントを頂けている日記が数多くありますので、どんな表示になるのかを見てみてくださいね。

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

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

はてブコメント表示例の画像

おまけ プラグインで実装したいときは

はてなブックマークでブックマークされているか?各記事へのコメント一覧を表示するためのプラグインは

Wordpressで記事にされた「はてブ(はてなブックマーク)」コメントを表示する方法と管理画面上でSNS共有された記事を一覧で表示する方法を紹介します

で紹介しています(テスト環境では問題なく動作しましたが、Wordpress公式サイトで公開されていないプラグインですので使用は自己責任でお願いします)

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
【中古】WordPressレッスンブック ステップバイステップ形式でマスタ-できる /ソシム/エ・ビスコム・テック・ラボ (単行本)

【中古】WordPressレッスンブック ステップバイステップ形式でマスタ-できる /ソシム/エ・ビスコム・テック・ラボ (単行本)

258 円 (税込) 送料込
◆◆◆ディスク有。中古商品のためキズ、日焼け、使用感等ある場合が御座いますが概ね良好な状態になります。迅速・丁寧な発送を心がけております。【毎日発送】商品状態著者名:エ・ビスコム・テック・ラボ発行者:ソシム発売日2010年09月
WordPressによるウェブアプリケーション開発 [ Rakhitha Nimesh Ratnayake ]

WordPressによるウェブアプリケーション開発 [ Rakhitha Nimesh Ratnayake ]

4,104 円 (税込) 送料込
Rakhitha Nimesh Ratnayake プライム・ストラテジー オライリー・ジャパンワードプレスニヨルウェブアプリケーションカイハツ ラーキサ ニーメシュ ラーネヤク プライム ストラテジー 発行年月:2014年11月26日 予約締切日:2014年11月25日 ページ数:364p サイズ:単行本 I..
楽天ウェブサービスセンター CS Shop
トップへ戻る