WordPressに独自の「いいね!」機能を実装する

harada 11,609views 更新:2014年11月18日

Facebookのいいね!やInstagramのいいね!は投稿にリアクションするとても簡単で便利な機能ですよね。
WordPressにもそんな風に独自の「いいね!」を実装したいと思ったことはありませんか?

これまでにも何度かそういうことを実装できるプラグインがないかなと検索していたのですが、なかなか希望の要件を満たすプラグインがありませんでした。
ですがやっとピッタリのプラグインが見つかりました。
WP ULike」というプラグインです。

まず試してみたいという方はこの記事の下の方にある「参考になった」ボタンを押してみてくださいね。
→2014/11/27追記:文言を「ありがとう」に変更して位置を右側に移動しています。
→2016/03/09追記:文言を「いいね!」に変更して位置を上に移動しています。

このプラグインを利用することで以下の要件を満たしたオリジナルのいいね!機能が実装できます。

  • WordPress登録ユーザー以外も「いいね!」できる
  • 「いいね!」の数でランキング表示できる
  • WordPress登録ユーザーが「いいね!」した場合に呼び出すことができる
  • 「いいね!」の文言を自由に変更できる
  • コメントにも「いいね!」ボタンを設置できる
  • BuddyPressのアクティビティログにも「いいね!」できる

利用方法

  1. ダッシュボードの「プラグイン」>「新規追加」から「WP ULike」を検索してインストールします。
    またはこちらからダウンロードしてpluginsディレクトリに配置します。
  2. プラグインを有効化します。

※ 初期設定では記事への「いいね!」ボタンと、コメントへの「いいね!」ボタンが自動で表示になっていますのでご注意ください。

設定方法

サイドメニューに「WP ULike」という可愛いアイコン付きのメニューができていますので、こちらから「WP ULike」を開き設定を行います。
比較的新しいプラグインで日本語化はまだなようです。

  1. Image or text? でボタンの表示形式を選択します。テキストで表示したい場合は文言を入力します。
  2. Like Text いいね!を押した後に表示される文言を入力できます。
  3. Dislike Text? いいね!を取り消したあとに表示される文言を入力できます。
  4. Automatic display いいね!ボタンを自動で投稿に挿入するかを選択します。
  5. Comment likes いいね!ボタンを自動でコメントに挿入するかを選択します。
  6. Activity likes BuddyPressと併用の場合のみの設定ですので通常はオフで大丈夫です。
  7. Only registered Users いいね!を押せるのを登録ユーザーに限定するかどうかを設定できます。
  8. BuddyPress Activity BuddyPressと併用の場合のみの設定です。
  9. Show Users Like Box 登録ユーザーがいいね!した場合にアイコンを表示するかどうかを設定できます。
  10. Format Number なんでしょうね?多分1000以上のいいね!が集まらない限り気にしないでよさそうです。
  11. Custom Style ボタンの表示スタイルをカスタマイズすることができます。
  12. 「変更を保存」ボタンを押すと設定が反映されます。

Automatic displayのチェックを外した場合は、テンプレートの表示したい位置に下記のコードを入れることで表示されるようになります。

<?php if(function_exists('wp_ulike_comments')) wp_ulike_comments('get'); ?>

また、初期表示では数字に+がついて「0+」のように表示されています。これの+を取りたい場合はfunctions.phpに下記のコードを入れてください。

add_filter('wp_ulike_format_number','wp_ulike_new_format_number',10,3);
function wp_ulike_new_format_number($value, $num, $plus){
    if ($num >= 1000 && get_option('wp_ulike_format_number') == '1'):
    $value = round($num/1000, 2) . 'K';
    else:
    $value = $num;
    endif;
    return $value;
}

コメント

  1. saneyoshi のコメント (2015年8月10日)

    お世話になります。

    wp ulikeを使用しています。
    デフォルトで人気順に記事を並び替える機能がありますが、
    記事のカテゴリーごとに、人気順に記事を並び替えることは可能なのでしょうか。

    もしお分かりでしたら、教えていただけると幸いです。

    何卒よろしくお願いいたします。

    • harada のコメント (2015年8月13日)

      ご返信が遅くなってしまいまして申し訳ありません!
      自分の管理しているWordPressではカテゴリー毎の人気記事ランキングを表示したことはないので、サポートフォーラムを確認してみたところ、
      https://wordpress.org/support/topic/sorting-most-liked-post
      こちらのhttps://wordpress.org/support/topic/sorting-most-liked-post#post-6637699
      の方法が利用できそうに感じました。
      WP_Queryのところにカテゴリーの指定を加える感じですね。
      試して頂けますと幸いです(^^)

  2. @yu_magokoro のコメント (2016年4月24日)

    お世話になります。
    haradaさんの記事によって、WP ULikeという素敵なプラグインと巡り会えました。
    有難うございます。

    1つ質問させて下さい。
    このWP ULikeを使って、ボタンを並べて二つ表示させることは出来ませんか?

    例えば、「GOOD」、「BAD」のように
    または、ガールズちゃんねるの「+」「-」のような評価ボタンをサイトに実装させたいです。

    目的は、正にガールズちゃんねるのようなトピックとコメントでユーザーさんがワイワイできる
    掲示板サイトの運営です。

    以上、宜しくお願い致します。

    • harada のコメント (2016年4月25日)

      コメントと嬉しいお言葉ありがとうございます!
      @yu_magokoroさんがやりたいことから考えますとこのWP ULikeプラグインではなくて、別のプラグインをさがしたほうが簡単に実現できるのではないかと思いました。
      こちらのプラグインはあくまでいいね!などの単発のリアクションをカウントするものなので、2つのリアクションを組み込むのは難しそうに思います。。
      「リアクション wordpress」などで検索していただくと色々他の該当のプラグインが出てきますので、お試しいただければと思います。ぱっとみて良さそうなプラグインをあげておきます。
      https://wordpress.org/plugins/reaction-buttons/
      https://wordpress.org/plugins/likebtn-like-button/
      https://wordpress.org/plugins/wp-postratings/
      お力になれずにすみませんが、なにかの参考になれば幸いです。

  3. @yu_magokoro のコメント (2016年4月25日)

    haradaさん、早速のご返信ありがとうございました。
    他にも良さげなプラグインを挙げて頂きまして感謝です。
    自分のイメージ通りのサイト作りが出来るよう頑張ってみます。
    それでは!

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません