自作いいね機能について
-
各投稿へのいいね機能をAJAXを用いて自作しております。
いろいろと調べながら機能を実装し下記コードで動作はしているのですが、私があまり深いところまでプログラミングに精通しておらず、現在学習中のためこちらのコードで問題がないか・もっと改善できる点はないかと不安に思っております。
もしよろしければ、コードの改善点や現状のコードだと発生する問題点などご教授いただけませんでしょうか。
よろしくお願いいたします。■仕様
・カスタム投稿など含む各投稿の一覧や詳細ページにいいねボタンを表示させる
・各ユーザーはログイン、未ログイン関係なくいいねボタンの「On」「Off」が可能
・ユーザーがある投稿にいいねを行い、再度サイトに訪れた際に、一定の期間はいいね状態の情報を保持し、該当の投稿では、いいね(On)の状態で表示させる
・いいねした情報は各ユーザーごとに保持させる
例えば、ユーザーAはいいねしたがユーザーBはいいねしていない場合、ユーザーAのみいいね状態とする■コード_サイト表示用ショートコードいいねボタン
/** いいねボタン表示 **/ function view_good_btn() { global $post; $postID = $post->ID; $count = get_field('good_counter', $postID); if(empty($good_count) && $good_count != 0){ //カスタムフィールド「いいね数」が空の場合0をセット update_post_meta( $postID, 'good_counter', 0, $count ); $good_count = get_field('good_counter', $postID); } if(isset($_COOKIE['post_'.$postID])){ //すでにその投稿のいいねをしているか確認 //いいねしていたらOn状態のボタン表示 $output = '<button class="good_button good_in_button" data-id="'. $postID .'">'; $output .= '<span class="good_counter">'. $count .'</span>'; $output .= '</button>'; } else { //いいねしていなければOff状態のボタン表示 $output = '<button class="good_button good_not_button" data-id="'. $postID .'">'; $output .= '<span class="good_counter">'. $count .'</span>'; $output .= '</button>'; } return $output; } add_shortcode('good_btn', 'view_good_btn');
■コード_Ajax(いいねボタンクリック時)
<script> $(document).on('click','.good_button',function(){ var $target = $(this); var count_num = Number($target.find('.good_counter').html()); if($target.hasClass('good_in_button')){ var count = count_num - 1; $target.removeClass('good_in_button'); $target.addClass('good_not_button'); } else { var count = count_num + 1; $target.removeClass('good_not_button'); $target.addClass('good_in_button'); } jQuery.ajax({ url: '<?=admin_url('admin-ajax.php')?>', type: 'POST', data: { 'action' : 'count_up', 'postID' : $target.data('id') }, success: function(data) { $target.find('.good_counter').html(count); } }); return false; }); </script>
■コード_いいねカウント処理
function count_up(){ $postID = $_POST['postID']; //投稿ID $count = get_field('good_counter',$postID); if(isset($_COOKIE['post_'.$postID])){ //すでにその投稿のいいねをしているか確認 if($count > 0){ //すでにいいねしており該当の投稿のいいね数が0より大きければ-1する update_post_meta( $postID, 'good_counter', $count - 1, $count ); } setcookie('post_'.$postID, $postID, time() - 30, '/', $_SERVER['HTTP_HOST']); // Cookieから該当の投稿情報を削除 } else { setcookie('post_'.$postID, $postID, time() + 60 * 60 * 24 * 30, '/', $_SERVER['HTTP_HOST']); //いいねした投稿情報をCookieに保存 update_post_meta( $postID, 'good_counter', $count + 1, $count ); //まだいいねしていなければいいね数を+1 } die(); } add_action( 'wp_ajax_count_up', 'count_up' ); add_action( 'wp_ajax_nopriv_count_up', 'count_up' );
■やっていること
各投稿のいいね数は、ACFを用いてカスタムフィールドを作成し、そちらに保存しております。
いいねした情報をユーザーごとに保持させるためいいねを行った投稿IDをCookieに保存し、管理を行っております。
投稿IDのみをキーとすると、他システムとの競合があるのではと思い、「post_」という文字列を付けております。「サイト表示用ショートコードいいねボタン」にて、いいねと紐づける投稿IDでCookieに情報があれば、「On」状態のClass「good_in_button」をつけたボタンを表示、それ以外の場合は「Off」状態のClass「good_not_button」を付けたボタンを表示させております。
いいねボタンをクリックした際にAjaxにて、「コード_いいねカウント処理」に対してカウント処理を行っております。
また、DB側のカウントの数字は「+1」もしくは「-1」されたものになっておりますが、フロント画面ではリロードしないと反映されない状態のため、jQueryにてカウントの変動を行っております。「コード_いいねカウント処理」では、投稿IDをもとにすでにCookieがあるのであれば、カウントを「-1」してCookieから該当の投稿ID情報を削除しています。
Cookieがなければ、投稿IDをもとにCookieを保存し、カウントを「+1」させております。
- トピック「自作いいね機能について」には新たに返信することはできません。