03/07/2019 04:16 4548
Để làm được rating chúng ta cần nắm ajax wordpress, rồi thì style…Hôm nay tôi sẽ chia sẽ cách làm
1.Đầu tiên là ngôi sao: anh chị cần gọi dashicons, trong dashicons đã support star (ngôi sao)
1 2 3 4 |
add_action( 'wp_enqueue_scripts', 'standard_load_scripts' ); function standard_load_scripts() { wp_enqueue_style( 'dashicons' ); } |
2.Các class star (ngôi sao)
-dashicons dashicons-star-filled: star đã rating
-dashicons dashicons-star-half: star một nữa (áp dụng cho rating có phần thập phân lớn hơn .5)
-dashicons dashicons-star-empty: star chưa có rating
4.Khi hover lên các star chúng ta sẽ sử dụng event mouseenter để thêm class dashicons dashicons-star-filled: một số mã jquery dưới đây để anh chị tham khảo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
$(document).on('mouseenter','.rich-snippets-pro-star-rating',function(e){ var index=$(this).data('index'); if(index == "1"){ $('.rich-snippets-pro-star-rating').removeClass('dashicons-star-filled'); $('.rich-snippets-pro-star-rating').removeClass('dashicons-star-half'); $('.rich-snippets-pro-star-rating').addClass('dashicons-star-empty'); $('.rich-snippets-pro-star-rating:nth-of-type(1)').addClass('dashicons-star-filled').removeClass('dashicons-star-empty'); }else if(index == "2"){ $('.rich-snippets-pro-star-rating').removeClass('dashicons-star-filled'); $('.rich-snippets-pro-star-rating').removeClass('dashicons-star-half'); $('.rich-snippets-pro-star-rating').addClass('dashicons-star-empty'); $('.rich-snippets-pro-star-rating:nth-of-type(1)').addClass('dashicons-star-filled').removeClass('dashicons-star-empty'); $('.rich-snippets-pro-star-rating:nth-of-type(2)').addClass('dashicons-star-filled').removeClass('dashicons-star-empty'); }else if(index == "3"){ $('.rich-snippets-pro-star-rating').removeClass('dashicons-star-filled'); $('.rich-snippets-pro-star-rating').removeClass('dashicons-star-half'); $('.rich-snippets-pro-star-rating').addClass('dashicons-star-empty'); $('.rich-snippets-pro-star-rating:nth-of-type(1)').addClass('dashicons-star-filled').removeClass('dashicons-star-empty'); $('.rich-snippets-pro-star-rating:nth-of-type(2)').addClass('dashicons-star-filled').removeClass('dashicons-star-empty'); $('.rich-snippets-pro-star-rating:nth-of-type(3)').addClass('dashicons-star-filled').removeClass('dashicons-star-empty'); }else if(index == "4"){ $('.rich-snippets-pro-star-rating').removeClass('dashicons-star-filled'); $('.rich-snippets-pro-star-rating').removeClass('dashicons-star-half'); $('.rich-snippets-pro-star-rating').addClass('dashicons-star-empty'); $('.rich-snippets-pro-star-rating:nth-of-type(1)').addClass('dashicons-star-filled').removeClass('dashicons-star-empty'); $('.rich-snippets-pro-star-rating:nth-of-type(2)').addClass('dashicons-star-filled').removeClass('dashicons-star-empty'); $('.rich-snippets-pro-star-rating:nth-of-type(3)').addClass('dashicons-star-filled').removeClass('dashicons-star-empty'); $('.rich-snippets-pro-star-rating:nth-of-type(4)').addClass('dashicons-star-filled').removeClass('dashicons-star-empty'); }else if(index == "5"){ $('.rich-snippets-pro-star-rating').removeClass('dashicons-star-filled'); $('.rich-snippets-pro-star-rating').removeClass('dashicons-star-half'); $('.rich-snippets-pro-star-rating').addClass('dashicons-star-empty'); $('.rich-snippets-pro-star-rating:nth-of-type(1)').addClass('dashicons-star-filled').removeClass('dashicons-star-empty'); $('.rich-snippets-pro-star-rating:nth-of-type(2)').addClass('dashicons-star-filled').removeClass('dashicons-star-empty'); $('.rich-snippets-pro-star-rating:nth-of-type(3)').addClass('dashicons-star-filled').removeClass('dashicons-star-empty'); $('.rich-snippets-pro-star-rating:nth-of-type(4)').addClass('dashicons-star-filled').removeClass('dashicons-star-empty'); $('.rich-snippets-pro-star-rating:nth-of-type(5)').addClass('dashicons-star-filled').removeClass('dashicons-star-empty'); } }); |
5. và khi người dùng rating thì chúng ta sẽ sử dụng event click để gửi dữ liệu đi và lưu rating sau đó sẽ trả về số star người xem vừa đánh giá. Gửi đến anh chị mã jquery và php để tham khảo
Mã jquery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$(document).on('click','.rich-snippets-pro-star-rating',function(e){ var rating=$(this).data('index'); var submit_data = { 'action': 'rich_snippets_pro_rating', 'post_id': $('.rich-snippets-pro-out').data('post_id'), 'rating': rating }; //console.log(submit_data); $.ajax({ type: 'POST', url: richsnippetpro_vars.ajax_url, data: submit_data, success: function ( response ) { console.log(response); if ( 'success' == response.status ) { $('.rich-snippets-pro-star-rating-wrap').html(response.rating_star); $('.rich-snippets-pro-summary-wrap').html(response.rating_summary); $('.rich-snippets-pro-star-rating').off("click"); } else { } }, error: function( e ) { } }); }); |
Mã php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
function rich_snippets_pro_rating(){ session_start(); global $post; $response=array(); $rich_snippet_pro = get_option('rich_snippet_pro'); if(isset($_SESSION['rich_snippet_pro']) && $_SESSION['rich_snippet_pro'] == $_POST['post_id']): $rating_text_thanks=$rich_snippet_pro['you_have_rated_text']; else: $current_rating=get_post_meta($_POST['post_id'],'_rich_snippets_pro_rating',true); $rating_total=!empty($current_rating['rating_total']) ? $current_rating['rating_total'] : 0; $rating_list=!empty($current_rating['rating_list']) ? $current_rating['rating_list'] : ''; if($rating_list == ''): $rating_list=array(); else: $rating_list=explode(",",$rating_list); endif; array_push($rating_list,$_POST['rating']); $rating_list=implode(",",$rating_list); $rating_total=$rating_total + $_POST['rating']; $rating_count=!empty($current_rating['rating_count']) ? $current_rating['rating_count'] : 0; $rating_count=$rating_count+1; $rating=array( 'rating_total' => $rating_total, 'rating_count' => $rating_count, 'rating_list' =>$rating_list ); update_post_meta($_POST['post_id'],'_rich_snippets_pro_rating',$rating); $_SESSION['rich_snippet_pro']=$_POST['post_id']; $rating_text_thanks=$rich_snippet_pro['rating_thanks_text']; endif; $response['session']=$_SESSION['rich_snippet_pro']; $current_rating=get_post_meta($_POST['post_id'],'_rich_snippets_pro_rating',true); if($current_rating): $rating_averating=round(($current_rating['rating_total']/$current_rating['rating_count']),1); $rating_acount=$current_rating['rating_count']; else: $rating_averating=0; $rating_acount=0; endif; if($rating_averating == 0): $rating_star='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span><span class="thanks">'.$rating_text_thanks.'</span>'; $rating_summary='<span class="rich-snippets-pro-summary-count">'.$rich_snippet_pro['no_rating_text'].'</span>'; else: $rating_averating_round_floor=floor($rating_averating); switch ($rating_averating_round_floor) { case '1': if($rating_averating > 1.5): $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-half" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; else: $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; endif; break; case '2': if($rating_averating > 2.5): $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-half" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; else: $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; endif; break; case '3': if($rating_averating > 3.5): $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-half" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; else: $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; endif; break; case '4': if($rating_averating > 4.5): $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-half" data-index="5"></span>'; else: $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; endif; break; case '5': $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="5"></span>'; break; default: $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; break; } if($rating_averating>1): $rating_text=$rich_snippet_pro['many_rating_text']; else: $rating_text=$rich_snippet_pro['one_rating_text']; endif; $rating_star=$build_stars.'<span class="thanks">'.$rating_text_thanks.'</span>'; $rating_summary='<span class="rich-snippets-pro-summary-rating">'.$rating_averating.'/5</span> <span class="rich-snippets-pro-summary-count">('.$rating_acount.' '.$rating_text.')</span>'; endif; $response['status']='success'; $response['rating_star']=$rating_star; $response['rating_summary']=$rating_summary; wp_send_json( $response ); die(); } //handle rating add_action('wp_ajax_rich_snippets_pro_rating','rich_snippets_pro_rating'); add_action('wp_ajax_nopriv_rich_snippets_pro_rating','rich_snippets_pro_rating'); |
6.Sử dụng event mouseleave để cập nhật star từ cơ sỡ dữ liệu. dưới đây tôi xin gửi đến anh chị mã jquery và php tham khảo
mã jquery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$(document).on('mouseleave','.rich-snippets-pro-star-rating-wrap',function(e){ var submit_data = { 'action': 'rich_snippets_pro_rating_mouse_leave', 'post_id': $('.rich-snippets-pro-out').data('post_id'), }; //console.log(submit_data); $.ajax({ type: 'POST', url: richsnippetpro_vars.ajax_url, data: submit_data, success: function ( response ) { //console.log(response); if ( 'success' == response.status ) { $('.rich-snippets-pro-star-rating-wrap').html(response.rating_star); $('.rich-snippets-pro-summary-wrap').html(response.rating_summary); } else { } }, error: function( e ) { } }); }); |
Mã php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
function rich_snippets_pro_rating_mouse_leave(){ global $post; $rich_snippet_pro = get_option('rich_snippet_pro'); $current_rating=get_post_meta($_POST['post_id'],'_rich_snippets_pro_rating',true); $response=array(); if($current_rating): $rating_averating=round(($current_rating['rating_total']/$current_rating['rating_count']),1); $rating_acount=$current_rating['rating_count']; else: $rating_averating=0; $rating_acount=0; endif; if($rating_averating == 0): $rating_star='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; $rating_summary='<span class="rich-snippets-pro-summary-count">'.$rich_snippet_pro['no_rating_text'].'</span>'; else: $rating_averating_round_floor=floor($rating_averating); switch ($rating_averating_round_floor) { case '1': if($rating_averating > 1.5): $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-half" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; else: $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; endif; break; case '2': if($rating_averating > 2.5): $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-half" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; else: $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; endif; break; case '3': if($rating_averating > 3.5): $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-half" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; else: $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; endif; break; case '4': if($rating_averating > 4.5): $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-half" data-index="5"></span>'; else: $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; endif; break; case '5': $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-filled" data-index="5"></span>'; break; default: $build_stars='<span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="1"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="2"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="3"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="4"></span><span class="rich-snippets-pro-star-rating dashicons dashicons-star-empty" data-index="5"></span>'; break; } if($rating_averating>1): $rating_text=$rich_snippet_pro['many_rating_text']; else: $rating_text=$rich_snippet_pro['one_rating_text']; endif; $rating_star=$build_stars; $rating_summary='<span class="rich-snippets-pro-summary-rating">'.$rating_averating.'/5</span> <span class="rich-snippets-pro-summary-count">('.$rating_acount.' '.$rating_text.')</span>'; endif; $response['status']='success'; $response['rating_star']=$rating_star; $response['rating_summary']=$rating_summary; wp_send_json( $response ); die(); } //When mouse leave area stars add_action('wp_ajax_rich_snippets_pro_rating_mouse_leave','rich_snippets_pro_rating_mouse_leave'); add_action('wp_ajax_nopriv_rich_snippets_pro_rating_mouse_leave','rich_snippets_pro_rating_mouse_leave'); |
Nếu bạn chưa xem phần 7 thì xem theo link dưới
Thiết kế theme wordpress phần 6 Chúng ta tiếp
Nếu chưa xem phần 5 thì xem theo link dưới nhé
Nếu bạn chưa xem phần 4 thì xem theo link dưới
Đã khá lâu rồi tôi mới viết bài, vì là quá
Function xử lý upload to media wordpress: function sau đây mình
Dưới đây là function lấy địa chỉ ip, Để đây anh
Thay thế file_get_contents: đôi lúc gặp những hosting function file_get_contents không
Xin lưu ý tài liệu này chỉ dành cho anh em
Một số function thường dùng khi làm theme wordpress (some functions
Mọi sự sao chép xin ghi rõ nguồn là fcwordpress.net
Chuyên trang về wordpress: hướng dẫn thiết kế theme, plugin, thủ thuật wordpress