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

公開日:2018年8月20日 サイト作成日記
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シェアボタンの取得?>
    【注意】コードをコピーして使用する前に必ずお読みください

    この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

    使用については自己責任でお願いします

    コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

    万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

    コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

    コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

    その場合には以下の方法で修正を行ってみてください

    1. コードの中に全角の記号が入っていませんか?
    2. 半角にすることで解消できます
    3. コードの中に全角の空白(スペース)がありませんか?
    4. 半角にすることで解決できます
    5. コードは合っているはずなのに更新できないときは
    6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
    7. 「何かが間違っています...」と表示され、更新できないときは
    8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
      ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
    これらのエラー対処については以下のページが参考になるかも知れません

    コードを転載する場合には

    ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

    の下へ追加します。

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

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

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

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

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

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

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

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

データベースを使わないCMS【Grav】を使う ~①サーバー要件とインストール~

全然違うサイトみたいになった

【備忘録】存在しないページへアクセスしてくるGoogle Analyticsのリファラスパム対策方法


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

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

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

1,738 円 (税込)
基本情報ジャンル建築・理工フォーマット本出版社インプレス発売日2019年07月ISBN9784295006664発売国日本サイズ・ページ280p 21×19cm関連キーワード 9784295006664 出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方/石川栄和/大串肇/星野邦敏【合計3000円以上で送料無料】

いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方/石川栄和/大串肇/星野邦敏【合計3000円以上で送料無料】

1,738 円 (税込)
著者石川栄和(著) 大串肇(著) 星野邦敏(著)出版社インプレス発行年月2019年08月ISBN9784295006664ページ数280P9784295006664内容紹介Webサイトをはじめて作る初心者でも安心!大きな画面の操作手順で迷わない。人気のテーマで、パソコン&スマホ両対応のWebサイトを作れる!..
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報