プラグインなしで独自のいいねボタンの実装

表題の通りなんですが、簡単に言うとクリックしたらカウントアップするボタンをつくりますよってことです。
↓こいつです

簡単にやり方を言うと

まず、いいねの数を記録するカスタムフィールドを作って、フロント画面にあるボタンを押したら現在の数を取得、それに1を足して値を上書きする。
ってな感じの流れです。まぁ、割と簡単なのでやっていきましょう。

前準備

いいね数のカスタムフィールドをつくろう

まぁ、これは言うまでもないというか。。。
プラグインを使ってもいいですし、自分で作っても大丈夫です。僕は「Advanced Custom Fields」を使っています。

ここではフィールド名を「good_counter」としています。フィールドタイプはテキストでもナンバーでもどっちでもいいです。初期値は0としましょう（ここ、忘れがちだけど重要）。

ボタンの表示

<button class="good_button" data-id="<?=$post->ID?>">
  <span class="good_counter"><?php the_field('good_counter') ?></span>　いいね
</button>

と言う感じで、シングルページなどにボタンをつくりましょう。

ボタンを押した時の処理

準備が整ったので、あとはカウントアップしていくだけです。
やり方はいろいろあると思いますが、今回はAjax通信をつかっていきます。
WordPressのAjax通信はURLが決められていて、functions.phpにAjaxのアクションを登録して使用する感じになります。僕の説明が下手なので「？」だらけかと思いますが、やってみればわかるかと思います。

Ajaxのアクションを用意する

function count_up(){
  $postID = $_POST['postID'];
  $count = get_field('good_counter',$postID);
  update_post_meta( $postID, 'good_counter', $count + 1, $count );
  die();
}
add_action( 'wp_ajax_count_up', 'count_up' );
add_action( 'wp_ajax_nopriv_count_up', 'count_up' );

functions.phpに上記コードを書きます。
wp_ajax_{action}、wp_ajax_nopriv_{action} はどちらもAjaxのアクションを登録するフックで、前者がログインユーザー用、後者が非ログインユーザー用のフックとなっています。
このアクションフックによって「count_up()」が実行され、該当ページのカスタムフィールド「good_counter」の値が+1されて登録されることになります。
あとはフロント画面にてAjax通信を行い、このアクションを動かしてやります。

いよいよAjax通信

$(document).on('click','.good_button',function(){
  var $target = $(this);
  var count = Number($target.find('.good_counter').html())+1;
  jQuery.ajax({
    url: '<?=admin_url('admin-ajax.php')?>',
    type: 'POST',
    data: {
      'action' : 'count_up',
      'postID' : $target.data('id')
    },
    success: function(data) {
      $('.good_counter').html(count);
    }
  });
  return false;
});

といった感じで実装完了です。
上の見てわかる通り、「.good_button」をクリックしたらAjax通信を行ってくださいね。って書いてます。
WordPressでAjax通信を行う時は「admin_url(‘admin-ajax.php’)」こちらのURLを指定します。そこにactionを先程のwp_ajax_{action}、wp_ajax_nopriv_{action}で記述したものと同じ値を渡してやると、functions.phpに書いてある「count_up()」が実行されるという仕組みです。
で、まぁここまででDBの数字は+1されたものになっているんですが、フロント画面ではリロードしないと反映されない状態なので、jQueryなりでカウントアップしときましょう！って感じですね。

あと、このままじゃ延々押せるので、クッキーなどで制限を設けても良いと思います。