WordPress に独自のいいねボタンを設置できる WP-PostRatings

WordPress で、SNS と連携せず独自に動作する「いいね」ボタンを実装したい、というご要望をいただくことがあります。

プラグイン「WP-PostRatings」を使うのが簡単だと思いますので、具体的な使い方を解説いたします。以下のようなシンプルなボタンを設置したい方はぜひご参考に。

• SNS アカウントは不要で誰でもボタンを押せる
• 同じ人が何度も押せないようにする（いたずら防止）
• いいねしてくれた数を表示する

上記は デモサイト   で実際に設置したサンプルです。

WP-PostRatings 設定方法

WP-PostRatings   は、WordPress 公式ディレクトリに登録されているプラグインです。

設定自体はそれほど難しくありませんが、「どうやって表示するか」の部分でつまずくかもしれません。

手順に従って設置していただければと思います。

01. インストール・有効化

管理画面［プラグイン］－［新規プラグインを追加］から、「WP-PostRatings」を検索。

インストール後、そのまま有効化してください。

02. 評価オプション設定

サイドバーに WP-PostRagings が追加されるので、そこから「評価オプション」に入ります。

「評価の画像」は、デフォルトでは星の 5 段階評価となっています。

いいねボタンにしたいときは、heart がおすすめです。heart を選択すると、最高評価の値は「1」に設定されます。

単体のいいねボタンにする場合、リッチスニペットは不要です（設定しても反映されるか微妙なところです）。

商品を販売するときなど、ユーザーの評価を検索結果に出したいときにご利用ください。

ここまで設定したら、「各評価のテキストと値を更新する」をクリックします。

評価の画像がハートマークに変わりますので、評価のテキストを任意に変更しておきましょう。

「いいね！」や「役に立った！」など、お好みで設定してください。

評価のテキストは、ボタンにカーソルを乗せたときに表示されます。

03. 表示 / ユーザー / ログ設定

設定画面下部では、表示・対象ユーザー・ログ方式を設定します。

① と ② はボタンクリック時の動作なので、実際に確認してお好みで変更してください。

① を「はい」にすると、クリックしたときに一瞬「読み込み中です」と表示されるので、あまりスマートではないかもしれません。

③ の部分は、個人ブログかつ不特定多数の投票を受け付けるなら「ゲストのみ」で OK です。会員サイトの場合は「ログインユーザーのみ」でよいでしょう。

④ のログ保存方法は、デフォルトの「Cookie と IP によるログ」で問題ありません。ただし、念のためにプライバシーポリシーにログを保存する旨を記載しておいたほうがよいと思います。

※ ログ保存方法を設定すると、同一ブラウザまたは端末からの投票が 1 回に制限されます

04. 評価テンプレート設定

続いて、サイドメニューから「評価テンプレート」に入りましょう。

ここでは、ボタンまわりのテキストを設定できます。

いいねボタン単体のときに設定が必要なのは、「評価済みの場合」と「評価がまだない場合」の 2 つです。

「ハート型のいいねボタン」と「カウント数」だけを表示するシンプルな形にしたいなら、以下のとおり入力してください（どちらも同じ内容）。

HTML タグも使えるので、CSS で装飾したいときはカウント数部分を <span> などで囲んでクラス名を付けておくと使い勝手がよいと思います。

%RATINGS_IMAGES_VOTE% <span class="iine-count">%RATINGS_SCORE%</span>

以上で設定は完了です。

いいね！ ボタンを表示する方法

ボタンを表示する方法は、2 通りあります。

<!-- いいねボタン -->
<?php if(function_exists('the_ratings')) { the_ratings(); } ?>

[ratings]

過去記事にショートコードを一括で入れる方法

ショートコードで表示するほうが楽だと思いますが、過去記事すべてに手動で設置していくのは大変だと思います。

その場合は、functions.php に以下のコードを追加すると、全記事に一括してショートコードを設置できます。

// 記事の末尾にボタンを表示
function nfx_add_ratings_shortcode_to_content($content) {
    if(is_single() && has_shortcode($content, 'ratings') === false) {
        $content .= '[ratings]';
    }
    return $content;
}
add_filter('the_content', 'nfx_add_ratings_shortcode_to_content');

// 記事の先頭にボタンを表示
function nfx_add_ratings_shortcode_to_content($content) {
    if(is_single() && has_shortcode($content, 'ratings') === false) {
        $content = '[ratings]' . $content;
    }
    return $content;
}
add_filter('the_content', 'nfx_add_ratings_shortcode_to_content');

どちらも、すでにショートコードが入っている場合は重複して出力しないようにしています。

functions.php の編集に慣れていないなら、プラグイン「Code Snippets」がおすすめ。

  Code Snippets の使い方｜カスタマイズコードを一元管理できるプラグイン

下図のとおりコードを入力しておけば OK です。

以下のとおり表示されていれば完了です。

上記は デモサイト   で実際に設置したサンプルです。

※ 「ゲストのみ」に設定していると、ログイン中は動作しません。ログアウトするか、シークレットモードでお試しください。

「いいね！」の管理・活用方法

評価の管理

各投稿に付けられた「いいね！」は、「評価の管理」から確認できます。

どの記事が評価されているかをチェックし、リライトなどに活用するとよいですね。

同画面から過去ログの削除もできます。

  ブログの過去記事をリライト・修正する 18 のポイント

ウィジェットで「いいね！」の多い記事ランキングを表示する

任意のウィジェットエリアに「WP-PostRatings」専用ウィジェットを配置すると、投票の多い順で記事リストを表示できます。

PV 順の人気記事ランキングより、ユーザーの満足度を伝えられるのでよいかもしれません。

商品販売サイトなら「注目度の高いおすすめ商品」というような使い方もできます。

1 人あたりの PV 数を増やしたいときはぜひ使ってみてください。

まとめ

以上、WP-PostRatings を使った独自のいいねボタン設置方法の解説でした。

ボタンをどこに表示するのか、というところだけ難しいかもしれませんが、本記事がご参考になれば幸いです。

読者に何らかのアクションをしてもらう、というのはブログ運営で大切な要素なので、いろいろ試していきましょう。