【WordPress】コメントに星の5段階評価をつけるプラグイン(Comment Star Rating)作りました

Comment Star Rating

Comment Star Ratingの主な機能

  • コメントフォームに星の評価機能を追加
  • WordPress.orgのプラグインや、Amazonのように総合評価をグラフで出力
  • ページ、投稿、カスタム投稿の表示、非表示が切り替え可能

追加予定機能

  • リッチスニペット対応

コメントフォームに星の評価機能を追加

Comment Star Rating 入力フォーム

jQuery Ratyを使いました。オプションが豊富で0.5刻みの実装も可能でしたが、現在は1刻みにしています。

wbotelhos/raty
:star2: jQuery Raty - A Star Rating Plugin. Contribute to wbotelhos/raty development by creating an account on GitHub.

WordPress標準のアイコンフォントを使っているのでテーマとの相性もいいと思います

星の色、大きさ、幅はcssで変更できます。

総合評価をグラフで出力

Comment Star Rating 総合評価

D3.jsを使い出力しました。

d3/d3
Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada: - d3/d3

div要素で出力しているので古いブラウザにも対応しています。
グラフは以下のショートコードで表示するので好きな場所に置くことができます。
また、サイズや色はcssで上書きすることが可能です。

以下のショートコードで固定ページや記事内に設置可能です。

4.3 rating based on 23 ratings

5つ星のうち4.3

ページ、投稿、カスタム投稿の表示、非表示が切り替え可能

管理画面より、有効にしたい投稿ページを選択できます。
例えば、固定(page)ページでは無効に、投稿(post)詳細では有効にする場合

Comment Star Rating 設定画面

DEMO

投稿ページで有効にしたのでこのページの下にあるコメント入力フォームで確認することができます。



ダウンロード先

githubにて公開しました。

matometaru/comment-star-rating
Wordpress plugin to rate comments on 5 beautiful stars. - matometaru/comment-star-rating

ついに公式登録完了しました!

Comment Star Rating
Add beautiful star rating to comments

管理画面からインストールする場合は「Comment Star Rating」と検索してください。

Comment Star Rating

機能の追加・修正依頼はこのコメント、またはgithubへお願いします。

新機能の追加報告

Comment Star Ratingに新機能を追加しました。
前の記事が縦長になりすぎてもよくないので、新機能の追加の報告はこちらで行います。 総合ランキングを表示する機能の追加 以下のショートコードで総合ランキングを出力します。デフォルト値がpost_type="post"なので、投稿で使う...

コメント

  1. いぬ より:

    星3つ

    3.0 rating

  2. いぬ より:

    星5つ

    5.0 rating

  3. たなぶー より:

    これは欲しい

    5.0 rating

    • めたる より:

      コメントありがとうございます!
      現在公式に申請中のため、リリースまでもうしばらくお待ち下さい。

      3.0 rating

  4. テスト より:

    テスト

    5.0 rating

  5. Smithe381 より:

    I think this is a real great blog post.Much thanks again. ckbaddcfddffdbef

    3.0 rating

  6. tkd より:

    お世話になります。
    こちらのプラグインですが公式プラグインとして現在公開されているものも動作確認済みでしょうか
    WordPressのバージョン 4.*系で試しておりますがエラーが出て動作しない状況です。
    エラーは以下の様なものです
    Uncaught TypeError: jQuery(…).raty is not a function at HTMLDocument. ((index):98)

    どうもcomment_form_default_fieldsのカスタマイズによって挿入している要素
    id=”input-type-star”が挿入されていないように見えます

    見た目など含め、ここまでシンプルで洗練された投票プラグインがなく
    ぜひともこのプラグインを使いたいと思っております。
    もしお時間ありましたらご確認いただけたら幸いです。よろしくお願いします。

    5.0 rating

    • めたる より:

      ご利用いただきありがとうございます!
      エラー確認出来次第、修正いたします。
      もしよければ使用しているテーマを教えていだけますか?

      3.0 rating

  7. HIRO より:

    お忙しいところ申し訳ございません。
    WordPress 4.8でカスタム投稿を作成し、設定で有効化しようとしたところチェックを入れ変更を保存を押すとチェックが外れ利用できません。
    その後、POSTページ上で有効にしますのチェックが外れなくなってしまいました。
    使用しているテーマはSTINGER5を少しカスタマイズしたものになります。
    ご確認して頂ければ幸いです。宜しくお願いいたします。

    5.0 rating

    • めたる より:

      こちらでも動作確認取れました。
      原因わかり次第すぐに、修正いたします。

      ご迷惑おかけし申し訳ありませんが、もうしばらくお待ちくださいm(__)m

      3.0 rating

  8. 匿名 より:

    ユーザに評価させるシステムを探してました。
    星を指先でタップするんですね。

    4.0 rating

  9. もいもい より:

    探してたのがまさにこれ!!そして日本人が作ってるという安心感www
    最高です!まだできたばかりなようなので少しバグがあるようですが今後に期待です!

    コメントの連投ができてしまい、レーティングの操作?ができてしまうので、選択としてログインしたユーザーのみ1回しかその投稿にレーティングができないなどの制限を設けたほうが良いかもしれません。

    5.0 rating

  10. 匿名 より:

    てすと

    2.0 rating

  11. テストさせてください より:

    テストさせてください

    5.0 rating

  12. 匿名 より:

    test

    5.0 rating

  13. 匿名 より:

    お世話になっております。
    設定の画面でカスタムポストにチェックをつけたいのですが、チェックをつけ保存を押下しても反映されません。
    (チェックボックスが元に戻ってしまいます)

    原因がございましたらご教示お願いします。

    3.0 rating

  14. より:

    3.0 rating

  15. kom より:

    jQueryを読み込むとフォームに星が表示されなくなります。
    解決方法を教えていただけないですか?

    4.0 rating

    • めたる より:

      おそらくjqueryをフッターで読み込んでると思います。
      取り急ぎヘッダーで読み込んでいただければ、解決しそうです。こちらも確認でき次第修正します。

      3.0 rating

  16. 匿名 より:

    口コミサイトにこちらのプラグインを使わせていただいております。コメントでの5段階評価が簡単にできるところや、集計結果をグラフで表示できるところなどが「まさに求めていた機能!」という感じで、こちらのプラグインを作成してくださったことに本当に感謝しております。ありがとうございます。

    質問なのですが、今後総合評価で記事をランク付けするような機能を実装される予定はないでしょうか。例えば、記事Aが「5つ星のうち5」、記事Bが「5つ星のうち4」、記事Cが「5つ星のうち3」であれば、ウィジェットで「1位:記事A 2位:記事B 3位:記事C」と表示させることができるような機能です。全記事でのランク付け、カテゴリーやタグ別のランク付けなどができるようになれば、とても嬉しいです。

    3.0 rating

    • めたる より:

      こちらこそ使っていただきありがとうございます。
      こちら実装検討させていただきます!

      3.0 rating

  17. 匿名 より:

    投稿されたコメントは延々と縦に続いてしまうのでしょうか?

    5.0 rating

  18. なし より:

    投稿テストさせていただきました。

    5.0 rating

  19. 匿名 より:

    非常に有り難いプラグインだと感じます。
    (ただの願望なのですが)amazonのように、星の多さにカーソルを合わせると
    その星評価がまとまった動的なページにいくような機能って実装難しいですよね。

    5.0 rating

    • めたる より:

      https://matometaru.com/post-2160/

      WP_Queryを使ってcsr_average_ratingを指定していただければ、要望のページの生成は可能です。
      現時点ではWPのテーマをカスタマイズする必要があるので、ショートコードとかで追加できるよう機能検討します。

      3.0 rating

  20. テスト より:

    テストテストテスト

    5.0 rating

  21. gura より:

    とても素晴らしいプラグインです。
    欲しい機能が実装されており、シンプルかつ高機能な口コミサイトができそうです。
    これからのアップデートもとても楽しみにしています。

    1つ質問があります。現在リッチスニペットには、対応しているのでしょうか?

    4.0 rating

    • めたる より:

      ありがとうございます。
      現在リッチスニペットは対応できていません。
      近々時間取れそうなので、優先して対応します。

      3.0 rating

  22. 匿名 より:

    お世話になります。
    こちらのプラグインを使わせていただいておりますが、ユーザーとしてログインした上でコメント欄を見ると★が表示されません。(そのままコメントを投稿すると★3で投稿されます)

    ゲスト状態でコメント欄を見ると★が表示され、問題なく投稿できているようです。

    他のプラグインを切ってみたりもしましたが変わらず…
    何か解決法がありましたらお教えいただければ幸いです。

    5.0 rating

  23. あい より:

    はじめまして。
    デザインがわかりやすく、とても使いやすいのでかなり重宝しています。
    作ってくださりありがとうございます。

    1つ要望なのですが、ショートコードで投稿IDを指定して、その指定した記事の評価だけを別の記事に表示させることはできないでしょうか?

    5.0 rating