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

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;
}