暑いね。そろそろセミ来るよ。

サイト運営

【WordPress】WP-PostRatingsでクリックカウントするだけの「いいね!」ボタン作ったよ


こんにちは。
記事の最後に「♥いいね!」ボタンを設置したので、みんなにも共有します~!
5分ぐらいで設置できるのでおすすめ。超簡単!

まくらさん
まくらさん

1日数人しか閲覧してないのに…

おふとん
おふとん

いいのー!これほしかったの!いずれたくさん「いいね!」されるのを見越してるのさ

いいの!これほしかったの!いずれたくさん「いいね!」されるのを見越してるのさ

「ツイッターにシェア」とか「Facebookでいいね!」とか、
「いいね!」ボタンがあって押そうとしたら「ログインしてからにしてね」ってなることないですか?

見てる記事が「いいなあ」と思ってポチリしようとしただけなのに、
わざわざ何かに登録してログインして~って…。登録してる間に「いいなあ」の大切な気持ちなくなっちゃうよ!
てゆーか登録したりシェアするほどは「いいなあ」と思ってないわ!

このサイトではその小さな「いいなあ」が欲しい!
そのふんわりしたあなたの感情を見える何かに置き換えて見たいの!!

ということで、ただボタンを押したらカウントされるだけの「いいね!」ボタンの作り方、どうぞ!
※Wordpress用の記事です。

WP-PostRatingsで「いいね!」ボタン設置までの道のり

プラグイン「WP-PostRatings」をインストール

まずはちゃっちゃとインストールしちゃいます。

プラグインの新規追加ページ
WP-PostRatingsと入力

WPダッシュボードの左メニューから「プラグイン」→「新規追加」を選びます。

検索結果

右上の検索窓に「WP-PostRatings」と入力すると、

検索結果に「WP-PostRatings」が表示されるので、「インストール」ボタンをポチリ。
インストールが終わったらそのまま「有効化」ボタンをポチリ!

これでインストール完了です!

Ratings Optionsページで設置ボタンを選ぶ

WP-PostRatingsには「いいね!」的なボタン以外に食べログとかにある「☆☆★★★」とか、「good↑ bad↓」とか色々な種類のボタンを設置できます。

今回は「いいね!」ボタンを設置するための設定をします。

WP-PostRatingsをインストール

WP-PostRatingsをインストールすると左メニュー下に「Ratings」というメニューが追加されているので、そこから「Ratings Options」をポチリ。

設定欄の説明

❶ Ratings Image設置ボタンの種類です。
「いいね!」ボタンは「heart_crystal」「heart」ですね。二つの違いは見た目だけです。個人的には「heart」の見た目のほうが好きです。
❷ Max Ratings評価する値の数です。
例えば「いいね!」は1つです。「good↑ bad↓」は2つです。「★★☆☆☆」は5つです。
星はこの数値を変えることで、星を7つにしたり10つにしたりすることができます。
いいね!は1つで固定です。
❸ Enable Google Rich Snippets?Googleのリッチスニペットを有効にするかしないか聞いています。
リッチスニペットというのはGoogleで検索した時の結果に追加される、タイトルと説明文以外の付加要素です。
例えば私の大好きなアプリゲーム「Alto’s Adventure」を検索した時に表示されるここの部分です。
❹ Rating Textハートの後ろに表示される文言です。私は「いいね!」にしました。
❺ Show Loading Image With Text「いいね!」した後の文言が出てくるまでの時間に、ローディング画像を出すか出さないか聞いています。お好みでどうぞ。私はYesにしています。
❻ Show Fading In And Fading Out Of Ratings「いいね!」した後の文言の表示・非表示をふんわりするかしないか聞いています。お好みでどうぞ。私はYesにしています。
❼ Who Is Allowed To Rate?誰が評価できるかを聞いています。Wordpress使ってる人も使っていない人もみんなに評価してもらいたい場合は「Logged-in Users And Guests」を選択!
❽ Ratings Logging Method評価してくれた人の記録を何で残すか聞いています。記録を残しておかないと、何度も「いいね!」を押せるようになってしまいます。
  • Do Not Log:記録を残さない。1人が何度も押せるようになります。
  • Logged By Cookie:Cookieで認識します。サーバーに記録されます。
  • Logged By IP:IPアドレスで認識します。基本的にプロバイダと契約した時に割り当てられるやつです。
  • Logged By Cookie And IP:CookieとIPの両方で認識します。
  • Logged By Username:Wordpresのユーザーネームで認識します。Wordpressにログインしていないと押し放題になりますw 私はCookieとIPの両方で認識を選択しました。

「Save changes」をポチリしたら設定は終了!

Ratings Templatesページで文言を決める

「Ratings Templates」ページでは、評価される前の文言、評価された後の文言、初めて評価される時の文言など、いろんな場面の文言を決められます。

私は下記3つの文言のみ変更しました。

Ratings Templatesページ
❶ Ratings Vote Text通常の文言です。
%RATINGS_IMAGES_VOTE% %RATINGS_USERS%いいねされています☀
❷ Ratings Voted Text「いいね!」されたあとの文言です。
私は感謝の言葉を入れました。 %RATINGS_IMAGES% %RATINGS_USERS%いいね!ありがと☺
❸ Ratings Noneまだ「いいね!」をしてもらっていない人あてに表示される文言です。
「いいね!」してねを前面に押し出しています。 %RATINGS_IMAGES_VOTE% 記事が気に入ったらいいね!してね!

「Save changes」をポチリして文言設定も終了です!

おふとん
おふとん

ただ私は1人1回しか押せないようにしてるから、のみしか表示されない気がする

まくらさん
まくらさん

設定しておけば予期せぬパターンになった時に表示されるからいいんじゃないかしら

single.php内にタグを埋め込む

もろもろの設定ができたら、タグを埋め込みますよ。

テーマの編集ページを選ぶ
テーマの編集ページからsingle.phpを探す
テーマの編集ページにタグを設置


WPダッシュボードの左メニューから「外観」→「テーマの編集」を選びます。

右サイドバーから「single.php」を探します。

場所はどこでもよいのですが、各記事の最後に設置したい場合は「<?php the_content(); ?>」の後に埋め込むと良いです。
下記を埋め込んでください。

<?php if(function_exists('the_ratings')) { the_ratings(); } ?>

おしまい!

終わりに

できた?できましたかね?超いい感じですよね。楽ちん!

本当はアイコンも変えられたらいいんですけどねえ。好きなアイコンにしたいですよね。

おふとん
おふとん

いいのー!これほしかったの!いずれたくさん「いいね!」されるのを見越してるのさ

今回はこれでおしまい!
せっかくだからいいね!してね!w

いいね! 271いいねされています☀
読み込み中...
おふとん
About author

おふとんはいつもやさしいね。 ウェブ制作会社でコーダーをしています。ゲーム大好き。愛する夫&息子と小さく暮らしています。
Related posts
サイト運営

雑記ブログ10記事目の運営報告と目標

サイト運営

このブログ立ち上げてすぐにハッキングされた悲しい話

2 Comments

  • アバター

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です