21 Shares

WordPressブログにSNSと連携しない独自のいいねボタンを設置する方法

Love is All

ブログのアクセスアップを考えたとき、SNS シェア・フォローボタンは欠かせませんよね。

アクセス数だけではなくシェアされること自体が運営者にとって励みになりますし、カウントを表示しておけばどのくらい人気がある記事なのかも読者にアピールできます。

でもなかには、『シェアしたりコメントするほどではないけど、運営者には読んだことを伝えたい』という方もいるでしょう。

そんな方のために、SNS と連携しない独自の「いいね」ボタンを設置してみてはどうでしょうか。プラグイン「WP-PostRatings」を使えば簡単ですよ!

ブログ独自のいいねボタンを設置するメリット

Twitter や Facebook のシェアボタン・フォローボタンも、プラグインで簡単に設置できます。

(良くも悪くも)「これはぜひ広めたい!」と思ってくれた瞬間にシェアボタンがあればいろいろな人が拡散してくれますし、「また読みたい!」と思ってくれたならフォローしてくれるでしょう。

でも、皆がみんな SNS アカウントを持っているわけではありませんし、良記事を見つけたらシェアせずにこっそりとブックマークしておきたい方もいるかもしれません。

SNS と連携しない独自の「いいね!」ボタンがあれば、そんな方でも気楽にリアクションしてくれるのがメリットです。

あちこちボタンだらけだと読みづらいブログになってしまうので、そこだけ注意してくださいね。

ただカウントするだけのいいねボタンがほしい

というわけで、WP-PostRatings を使ってこんなボタンを作ってみましょう。

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

それでは、設定方法を解説いたします。

WP-PostRatingsの設定と使い方

インストール・有効化

プラグインは管理画面から検索・インストールできます。

[プラグイン]-[新規追加]から WP-PostRatings で検索してください。

WP-PostRatings インストール

有効化後、サイドバーに「Ratings」が表示されるので、ここから初期設定を行います。

WP-PostRatings サイドバー項目

WP-PostRatingsの基本設定

「Ratings Options」から設定画面に入ります。

このプラグインは、ただ「いいね」ボタンを設置するだけではなく、星やプラスマイナスボタンで記事へ投票する形にもできます。

Ratings Settings

  1. Ratings Image でボタンの仕様を選択
  2. Max Ratings で投票の最大値を決定(ハートの場合は 1 で固定されます)
  3. Enable Google Rich Snippets? でリッチスニペットを出力するか選択

今回は投票ではなく「いいね!」ボタンを作成するので、「heart」もしくは「heart_crystal」を選択します。

この場合、Max Ratings は 1 で固定されますが、星やプログレスバーを選択すると何段階で投票できるかを自由に設定できます。なんと、100 段階に設定することも可能です。

また、リッチスニペットで「YES」を選択すると、自動的に構造化データマークアップを行ってくれます。口コミサイトなどを作るときは重宝する機能ですね。

リッチスニペットとは

検索結果に表示されるサイトの概要はスニペットと呼ばれていますが、これはテキストのみが使われます。リッチスニペットはさらに視覚的な情報を付け加えます(※構造化データマークアップを行えば必ず反映されるわけではありません)。

リッチスニペット例

つづいて、ボタンの動きを設定します。

WP-PostRatings ボタンの動きとログ設定

  1. 上で作成したボタンを表示
  2. ボタンクリック時に表示するテキストを設定
  3. ボタンクリック時に「Loading」を表示するか
  4. ボタンにフェードイン/アウトの効果をつけるか
  5. ボタンをクリックできるのは誰か
  6. 再クリックを許可するか

「Show Loading Image With Text」と「Show Fading In And Fading Out Of Ratings」はボタンクリック時の効果です。両方 YES にしておくと、こんな感じの動きになります。

いいねボタンのアニメーション

「Allow To Rate」では、WordPress に登録済みのメンバーのみ投票できるようにも設定できます。不特定多数の読者にいいねボタンを押してもらうときは「Guests Only」で OK です。

「Logging Method」では再クリックを許可するかどうか選べますが、いたずら防止のためにひとり 1 回のみが良いかなと思います(IP またはクッキーで同一人物かどうかを判定します)。

Post Ratings Templates設定方法

基本設定が終わったら、ボタンの動きと表示するテキストを設定しましょう。

「Ratings Templates」に移動してください。ここで設定できるのは、以下の項目です。

Ratings Vote Text 投票前に表示するテキスト(※ IP やクッキーで投票回数を制限している場合は使いません)
Ratings Voted Text 投票後に表示するテキスト
Ratings No Permission Text 投票権限がない旨をあらわすテキスト(※登録ユーザーのみ投票できるようにしている場合に使います)
Ratings None まだ誰も投票していないときのテキスト
Highest Rated 得票点が高い記事一覧(※ウィジェットやテンプレートタグで出力できます)
Most Rated 投票数が多い記事一覧(※ウィジェットやテンプレートタグで出力できます)

今回必要なのは、「Ratings Voted Text」と「Ratings None」です。

「ハート型のいいねボタン」と「カウント数」だけを表示するよう設定してみます。

Ratings Voted Text %RATINGS_IMAGES_VOTE% %RATINGS_SCORE%
Ratings None %RATINGS_IMAGES_VOTE% %RATINGS_SCORE%

どちらも同じ内容ですね。

HTML タグを使うこともできるので、CSS で装飾したいときはカウント数部分を <span> などで囲んでクラス名をつけておくと良いでしょう。

以上で設定は終了です。

ボタンの表示位置を設定する

ボタンが完成したら、ボタンを表示したいところに以下のコードを挿入します。

挿入位置はテーマによって異なりますが、一般的なつくりであれば single.php の <?php the_content(); ?> が記事本文を出力する部分なので、その下あたりが良いでしょう。

トップページやアーカイブページの記事一覧に「いいね数のみ」表示させたい場合は、以下のコードです。

特定の記事のみにいいねボタンを表示させたい場合は、in_category などで条件分岐してください。

テンプレートファイルをさわったことがない場合、ここだけちょっと難しいかもしれませんね。

設定をすませてコードを挿入したら、ブログ独自のいいねボタン完成です!

いいねボタン完成形

Manage Ratingsでカウント数を管理する

「いいね」の一覧は管理画面(Manage Ratings)に表示されます。

画像では見切れていますが、右側には「いいね」してくれた方の IP も表示されます

画像では見切れていますが、右側には「いいね」してくれた方の IP も表示されます

管理画面下部では、データ・ログの削除ができます。

いいね数の削除

特定の記事のいいね数を削除する場合は ID を、全記事のいいね数を削除する場合は「all」と書けば削除できます。

なお、記事単位での削除となるので、一部の「いいね」だけ削除することはできません。

ウィジェットで一覧表示する

[外観]-[ウィジェット]にある「Ratings」を使うと、ウィジェットエリアに「いいね数が多い記事一覧」などを表示できます。

WP-PostRatings ウィジェット

口コミ投稿サイトで威力を発揮しそうですね。

かなり細かく設定できるので、以下の記事を参考に設置してみてください。

まとめ

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

Like Button Voting & Rating」というさらに高機能なプラグインもあって、こちらは「いいねボタンを押したらさらに SNS シェアボタンを表示する」ことができます。ただ、フリー版だと設定項目に制限があるのでちょっと使いづらいかもしれません。

その点 WP-PostRatings は無料で使えて、カスタマイズもある程度自由にできるのが良いですね。

設置してみてあまり反応がなければプラグインを削除すれば良いだけなので、ぜひ試してみてください。

それでは、また。