★活ノートシリーズ月間100,000ページビュー達成! 今後も楽しい記事をお届けします!★

【WordPress】ブログに超シンプル「いいね!」ボタンを設置する方法

【Wordpress】ブログに超シンプル「いいね!」ボタンを設置する方法

 

katsuです。ブログにまた少し変更を加えたので備忘録に残します。
今回追加したのは、記事の下にクリックカウントするだけの「いいね!」ボタンです。

 

僕が使っているWordPressのテーマTHE THOR(ザ・トール)はとても優秀な有料テーマなのですが、こういったお遊び機能が少ないと感じています。詳しくはこちらの記事でもまとめています。

活ノートの関連記事

【Wordpress】THE THOR(ザ・トール)の不満点まとめkatsuです。久しぶりにWordpressのテーマTHE THOR(ザ・トール)のネタです。 さて、有料テーマのTHE THORを導入してから[…]

achievement-3408115_1920

というわけで、新たにプラグインを追加して「いいね!」ボタンを設置しました。プラグインはサイトの処理速度に影響するので少なければ少ないほど良く、僕もできるだけ少なく抑えていました。ただ、今回はデメリットより楽しさの方が増すと思いましたので、プラグイン追加に至りました。

 

そもそも記事下に何の意味もなく、ただカウントするだけの機能がなぜ必要なの?と言われそうですが・・・。記事を作る側、読む側どちらにもメリットがあると思います。

 

記事を作る側にとっては、読んでくれた人が良い記事と思ってくれたのかどうかがわかります。社交辞令的に押してもらっても嬉しいものです。読む側にとっても「他にも大勢の人が読んでいるんだ!」と記事に安心感を持つことができるでしょう。

 

さて、そんな思いから追加したプラグインWP-PostRatingsの設置方法を説明していきます。同じWordPressブロガーの方ぜひ参考にしてください!


WP-PostRatingsの使い方

このプラグインは一見設定が難しいように見えます。でも意味がわかると案外使いやすいものです。ここでは僕の設定方法をご紹介しましょう。マネして頂ければ同じボタンが設置できますよ。

WP-PostRatingsのインストール方法

プラグイン新規追加画面で「WP-PostRatings」と検索し、インストールと有効化を行ってください。Wordpressブロガーの方なら慣れっこでしょう・・・。検索すると大きな黒星マークが出てくるはずです。(黒星って・・・。)

コメント 2019-04-30 205537

WP-PostRatingsの「Ratings Options」を設定する

インストールが完了すると左のタスクバーに「★Ratings」が現れます。設定項目は3種類あります。中身を見ると英語ばっかりでゾッとしますが大丈夫。順番に設定していきましょう。まずは「Ratings Options」を設定します。

設定方法はこんな感じです。

コメント 2019-04-30 220207

コメント 2019-04-30 213217

基本的にはこの画像通りで設定をsaveして終了です。少しだけ設定内容を説明しておきましょう。

Ratings Image

「いいね!」ボタンの画像をHeartまたはHeart_crystalのどちらにするかを選びます。僕の場合は「Heart」を選びました。

 

他にもいろんな画像がありますが、いいねボタンではなく星によるランク付けなどなどに使うボタンです。「いいね!」ボタンの設置は必ずHeartになるわけです。

Max Ratings

ここはイメージにハートを選ぶと自動的に「」に設定されます。星によるランク付けなどに使う設定ですね。星を5段階、なんて設定ができるようです。

Enable Google Rich Snippets

Googleのリッチスニペットを有効にするかどうかの設定です。僕は「No」に設定しました。

 

Googleで検索するとタイトル、説明文の他に星でのランク付けが表示されたりすることがありますよね。これをリッチスニペットというようです。ただのいいねボタンの設置で検索エンジンに悪影響を与えるとマズイので、「No」に設定しました。

Rating Text

いいねボタンの名前をつけることができます。活ノートは滋賀県発ですので関西弁の「いいやん!」にしてみました。PCでいいねボタンの上にカーソルを動かすと「いいやん!」と表示されるようになります。

Rating Value

いいねボタンが押されることでカウントをいくつ増やすかの設定です。いいねボタンなので「+1」です。

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」を選びました。

 

クリックされた記憶を残しておかなければ誰でも何回でもクリックできることになってしまいます。基本的にひとり1クリックとしたいので、クリックされた際に相手のCookie登録とIPアドレスを記憶しておくことで、2度クリックされることを防ぐわけです。他にもCookieのみやIPアドレスのみ、Wordpressのユーザーネームでの認識などなど設定を選ぶことができます。

 

これでRatings Optionsの設定は終了です!


WP-PostRatingsの「Ratings Templates」を設定する

さて、僕が一番苦労したのはこちらの設定です。どこに何を設定すればどうなるのか理解するのが大変でした・・・。ここでは僕の設定をそのままご紹介します。(ただし将来変更する可能性もあります)

 

いくつか設定箇所があるのですが、いいねボタンで設定する必要がある項目は3つだけです。下記3項目以外はデフォルト設定のままでOKです。

 

「%RATINGS_IMAGES_VOTE%」「%RATINGS_IMAGES%」はクリック前後のハート画像のこと。「%RATINGS_USERS%」はクリック数が入るものと考えてください。

Ratings Vote Text
%RATINGS_IMAGES_VOTE% <br><strong>↑%RATINGS_USERS%いいやん!</strong>されています。良い記事でしたら「いいやん!」クリックお願いします。

過去に既に他の人にクリックされていて、自分がまだクリックしていない場合に表示される文言です。

Ratings Voted Text
%RATINGS_IMAGES% <br><strong>↑%RATINGS_USERS%いいやん!</strong>されています。クリックありがとうございます!他の記事もぜひご覧くださいませ。

自分がクリックした後に表示される文言です。

Ratings None
%RATINGS_IMAGES_VOTE% <br><strong>↑まだ0いいやん!</strong>です。良い記事でしたら最初の「いいやん!」をお願いします。

まだ誰もクリックされておらず、自分もクリックしていない場合に表示される文言です。

 

これでRatings Templatesの設定は終了!英語ばかりで驚くかもしれませんが、設定はこれだけです。・・・これだけですが苦労しました・・・。

【’19.12.14追記】
上記コードに以下のコードを追加しました。上のコードにそのまま付け足します。

<br><br><span class=”marker-halfYellow” style=”color: #ff6600;font-size: 14pt”><strong>下のSNSボタンから記事拡散にもご協力お願い致します。</strong></span>
このコードを追加するとこんな感じになります。
コメント 2019-12-14 215506
下に置いてあるシェアボタンもぜひ押して頂きたい。そんな思いから言葉を追加しました。少しボタンとの空間は気になりますが。この書き方はTHE THORでのものですが、アイデアでこんな使い方もできるというわけです。

single.php内にタグを記入する

この作業は必ずバックアップをとってから行ってください。当サイトでは責任を負うことができません。また、下記の例は当サイトで使用しているテーマTHE THOR(ザ・トール)に基づきます。

ふたつの項目の設定が終わったら、「single.php」のコード内にタグを追記する必要があります。十分注意して作業を行います。

 

WordPressのタスクバーから「外観」→「テーマエディター」を選び「single.php」を探し出します。THE THORの場合は親テーマ内にこのような感じで表示されます。

コメント 2019-04-30 215031

 

さて、ここからが重要です。single.phpのエディター内で検索(Ctrl+F)をし、「the_content()」の記述を探し出します。THE THORの場合は1つしか存在しないはずです。その後ろにコードを埋め込みます。こんな感じです。

 

コメント 2019-04-30 214955

 

このように「<?php if(function_exists(‘the_ratings’)) { the_ratings(); } ?>」の1行を「<?php the_content(); ?>」の後に入力します。最後に設定を保存して終了です。

 

【’19.5.25追記】
上記の記事をそのままコピー&ペーストすると、エディタに貼り付けた時にカンマ「’」が全角になってしまいます。必ず半角に書き直してください。

また、テーマを更新するとshingle.phpも書き換えられてしまいます。テーマ更新の際は改めてshingle.php内にコードを追記する必要がありますのでご注意ください。



Manage Ratingsを確認しておく

さて、ここまでで「いいやん!」ボタンの設置は完了です。最後に「★Ratings」内の残った項目「Manage Ratings」を覗いておきましょう。

 

このページは設定ページではなく、クリック状況のまとめページです。下の方にはいいね設定を取り消す欄もあります。「Delete Ratings Data/Logs」でPost IDを設定してDeleteを押せばいいねカウントをクリアすることができます。このIDは投稿IDであることに注意してください。

さいごに

さて、「いいやん!」ボタンいかがでしょうか。実はこのプラグイン、クリック状況をウィジェット表示することもできます。いろいろ使い道はありそうですね!

 

ぜひ今後も当サイトの「いいやん!」、そして応援宜しくお願い致します。

↓せっかくです。押してください!

いいやん!
↑346いいやん!されています。良い記事でしたら「いいやん!」クリックお願いします。

下のSNSボタンから記事拡散にもご協力お願い致します。
読み込み中...

記事はいかがでしたか?
今後もぜひ応援をお願い致します!


最新情報をチェックしよう!
>活ノートでつながる。

活ノートでつながる。

記事にはお気軽にコメントをどうぞ!
ご意見、ご質問、記事の執筆依頼などなどお待ちしております。

ブログ『活ノート』シリーズ
・活ノート
・詐欺情報をまとめるブログ。by活ノート
・コミュボード。by活ノート

ブログランキングに参加中です。
順位の確認はこちらです。
人気ブログランキングブログランキング・にほんブログ村へFC2ブログランキング