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

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

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

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

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

が、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公式サイトで公開されていないプラグインですので使用は自己責任でお願いします)

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

3,456 円 (税込) 送料込
<p>プラグインの開発から運用までを網羅</p> <p>※この電子書籍は固定レイアウト型で配信されております。固定レイアウト型は文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。</p> <p>CMSのデファクト・スタン..
WordPressサイト作成塾 サルでき流 [ カワサキタカシ ]

WordPressサイト作成塾 サルでき流 [ カワサキタカシ ]

1,998 円 (税込) 送料込
サルでき流 カワサキタカシ 技術評論社ワードプレス サイト サクセイジュク カワサキ,タカシ 発行年月:2016年09月 ページ数:271p サイズ:単行本 ISBN:9784774182834 カワサキタカシ 楽しく作る技術を学ぶコミュニティ、『サルでき』管理人。元アイ・ビー・エムERPコンサ..
楽天ウェブサービスセンター CS Shop
トップへ戻る