【Wordpress】ブログに超シンプル「いいね！」ボタンを設置する方法
katsuです。ブログにまた少し変更を加えたので備忘録に残します。
今回追加したのは、記事の下にクリックカウントするだけの「いいね！」ボタンです。
僕が使っているWordPressのテーマTHE THOR（ザ・トール）はとても優秀な有料テーマなのですが、こういったお遊び機能が少ないと感じています。詳しくはこちらの記事でもまとめています。
【Wordpress】THE THOR（ザ・トール）の不満点まとめkatsuです。久しぶりにWordpressのテーマTHE THOR（ザ・トール）のネタです。 さて、有料テーマのTHE THORを導入してから[…]
というわけで、新たにプラグインを追加して「いいね！」ボタンを設置しました。プラグインはサイトの処理速度に影響するので少なければ少ないほど良く、僕もできるだけ少なく抑えていました。ただ、今回はデメリットより楽しさの方が増すと思いましたので、プラグイン追加に至りました。
そもそも記事下に何の意味もなく、ただカウントするだけの機能がなぜ必要なの？と言われそうですが・・・。記事を作る側、読む側どちらにもメリットがあると思います。
記事を作る側にとっては、読んでくれた人が良い記事と思ってくれたのかどうかがわかります。社交辞令的に押してもらっても嬉しいものです。読む側にとっても「他にも大勢の人が読んでいるんだ！」と記事に安心感を持つことができるでしょう。
さて、そんな思いから追加したプラグインWP-PostRatingsの設置方法を説明していきます。同じWordPressブロガーの方ぜひ参考にしてください！
WP-PostRatingsの使い方
このプラグインは一見設定が難しいように見えます。でも意味がわかると案外使いやすいものです。ここでは僕の設定方法をご紹介しましょう。マネして頂ければ同じボタンが設置できますよ。
WP-PostRatingsのインストール方法
プラグイン新規追加画面で「WP-PostRatings」と検索し、インストールと有効化を行ってください。Wordpressブロガーの方なら慣れっこでしょう・・・。検索すると大きな黒星マークが出てくるはずです。（黒星って・・・。）
WP-PostRatingsの「Ratings Options」を設定する
インストールが完了すると左のタスクバーに「★Ratings」が現れます。設定項目は3種類あります。中身を見ると英語ばっかりでゾッとしますが大丈夫。順番に設定していきましょう。まずは「Ratings Options」を設定します。
設定方法はこんな感じです。
基本的にはこの画像通りで設定をsaveして終了です。少しだけ設定内容を説明しておきましょう。
Ratings Image
「いいね！」ボタンの画像をHeartまたはHeart_crystalのどちらにするかを選びます。僕の場合は「Heart」を選びました。
他にもいろんな画像がありますが、いいねボタンではなく星によるランク付けなどなどに使うボタンです。「いいね！」ボタンの設置は必ずHeartになるわけです。
Max Ratings
ここはイメージにハートを選ぶと自動的に「１」に設定されます。星によるランク付けなどに使う設定ですね。星を５段階、なんて設定ができるようです。
Enable Google Rich Snippets
Googleのリッチスニペットを有効にするかどうかの設定です。僕は「No」に設定しました。
Googleで検索するとタイトル、説明文の他に星でのランク付けが表示されたりすることがありますよね。これをリッチスニペットというようです。ただのいいねボタンの設置で検索エンジンに悪影響を与えるとマズイので、「No」に設定しました。
Rating Text
いいねボタンの名前をつけることができます。活ノートは滋賀県発ですので関西弁の「いいやん！」にしてみました。PCでいいねボタンの上にカーソルを動かすと「いいやん！」と表示されるようになります。
Rating Value
いいねボタンが押されることでカウントをいくつ増やすかの設定です。いいねボタンなので「＋１」です。
Show Loading Image With Text
デフォルトの「Yes」に設定しています。いいねボタンをクリックした時にローディング画像を表示する設定・・・という意味ですね。特に深く考えずにYesにしました。見た目の設定ですのでお好みでどうぞ。
Show Fading In And Fading Out Of Ratings
デフォルトの「Yes」に設定しています。こちらも見た目の設定ですね。いいねボタンをクリックしたときなどの表示、非表示をフェードイン・フェードアウト（徐々に表示・非表示）することができます。こちらもお好みで。
Who Is Allowed To Rate?
誰がいいねボタンをクリックすることができるかです。デフォルトの「Logged-in Users And Guests」を選択しておけば誰でもクリックすることができるようになります。ただし自分でもクリックできてしまうので・・・そこもお好みで。
Ratings Logging Method
いいねボタンをクリックしてもらったとき、どのようにその記録を残すかの設定です。ここもデフォルトの「Logged By Cookie And IP」を選びました。
クリックされた記憶を残しておかなければ誰でも何回でもクリックできることになってしまいます。基本的にひとり１クリックとしたいので、クリックされた際に相手のCookie登録とIPアドレスを記憶しておくことで、２度クリックされることを防ぐわけです。他にもCookieのみやIPアドレスのみ、Wordpressのユーザーネームでの認識などなど設定を選ぶことができます。
これでRatings Optionsの設定は終了です！
WP-PostRatingsの「Ratings Templates」を設定する
さて、僕が一番苦労したのはこちらの設定です。どこに何を設定すればどうなるのか理解するのが大変でした・・・。ここでは僕の設定をそのままご紹介します。（ただし将来変更する可能性もあります）
いくつか設定箇所があるのですが、いいねボタンで設定する必要がある項目は３つだけです。下記３項目以外はデフォルト設定のままでOKです。
「%RATINGS_IMAGES_VOTE%」「%RATINGS_IMAGES%」はクリック前後のハート画像のこと。「%RATINGS_USERS%」はクリック数が入るものと考えてください。
Ratings Vote Text
過去に既に他の人にクリックされていて、自分がまだクリックしていない場合に表示される文言です。
Ratings Voted Text
自分がクリックした後に表示される文言です。
Ratings None
まだ誰もクリックされておらず、自分もクリックしていない場合に表示される文言です。
これでRatings Templatesの設定は終了！英語ばかりで驚くかもしれませんが、設定はこれだけです。・・・これだけですが苦労しました・・・。
【’19.12.14追記】
上記コードに以下のコードを追加しました。上のコードにそのまま付け足します。
single.php内にタグを記入する
ふたつの項目の設定が終わったら、「single.php」のコード内にタグを追記する必要があります。十分注意して作業を行います。
WordPressのタスクバーから「外観」→「テーマエディター」を選び「single.php」を探し出します。THE THORの場合は親テーマ内にこのような感じで表示されます。
さて、ここからが重要です。single.phpのエディター内で検索（Ctrl+F）をし、「the_content()」の記述を探し出します。THE THORの場合は１つしか存在しないはずです。その後ろにコードを埋め込みます。こんな感じです。
このように「<?php if(function_exists(‘the_ratings’)) { the_ratings(); } ?>」の１行を「<?php the_content(); ?>」の後に入力します。最後に設定を保存して終了です。
【’19.5.25追記】
上記の記事をそのままコピー＆ペーストすると、エディタに貼り付けた時にカンマ「’」が全角になってしまいます。必ず半角に書き直してください。
また、テーマを更新するとshingle.phpも書き換えられてしまいます。テーマ更新の際は改めてshingle.php内にコードを追記する必要がありますのでご注意ください。
Manage Ratingsを確認しておく
さて、ここまでで「いいやん！」ボタンの設置は完了です。最後に「★Ratings」内の残った項目「Manage Ratings」を覗いておきましょう。
このページは設定ページではなく、クリック状況のまとめページです。下の方にはいいね設定を取り消す欄もあります。「Delete Ratings Data/Logs」でPost IDを設定してDeleteを押せばいいねカウントをクリアすることができます。このIDは投稿IDであることに注意してください。
さいごに
さて、「いいやん！」ボタンいかがでしょうか。実はこのプラグイン、クリック状況をウィジェット表示することもできます。いろいろ使い道はありそうですね！
ぜひ今後も当サイトの「いいやん！」、そして応援宜しくお願い致します。
↓せっかくです。押してください！
↑349いいやん！されています。良い記事でしたら「いいやん！」クリックお願いします。
下のSNSボタンから記事拡散にもご協力お願い致します。
読み込み中...
