WP模版实现AJAX点赞 代码版 / WordPress教程

wordpress网站里增加访客互动、展示文章热度的时候，除了阅读数、评论数外，还有个有趣的元素，那就是赞，如QQ空间里的说说一样，赞！
© 懒人资源 0 M! f) h! J5 S
网上也有很多的点赞插件，大家可以去下载，但是呢插件使用起来有点不方便，也不是不方便就是主题给别人用啊什么的如果有插件还要他们自己装，如果集成代码那么就省心多了。
© www.cityed.cn 4 g; c6 W" M* w4 s/ m下面就直接给教程吧
将下面的代码加入到你的functions.php中就是wordpress主题的函数文件
© 懒人资源 4 W1 h. D; b! ~$ m& x7 ]

1. add_action('wp_ajax_nopriv_bigfa_like', 'bigfa_like');
   © https://www.cityed.cn 8 M, B5 v: f  `  d
2. add_action('wp_ajax_bigfa_like', 'bigfa_like');
   
3. function bigfa_like(){
   © 懒人资源 | CITYED.CN . `/ M, i, K9 j. H& R- B
4. global $wpdb,$post;
   © CITYED.CN 版权所有 1 v+ ~8 D, T# P3 {) ~0 v: ~
5. $id = $_POST["um_id"];
   
6. $action = $_POST["um_action"];
   © CITYED.CN 版权所有 / J" S3 J5 ^4 F& b
7. if ( $action == 'ding'){
   
8. $bigfa_raters = get_post_meta($id,'bigfa_ding',true);
   © www.cityed.cn 4 s$ ?; k1 A7 o- Z/ N+ h4 Q
9. $expire = time() + 99999999;
   © 懒人资源 | cityed.cn & t7 c" B+ ~  O; z9 G% b7 h1 \
10. $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
    © 懒人资源 | cityed.cn ! g7 U3 F1 \4 F1 {
11. setcookie('bigfa_ding_'.$id,$id,$expire,'/',$domain,false);
    © CITYED.CN 版权所有 + p; g  s5 }4 K& \) K! T
12. if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
    
13. update_post_meta($id, 'bigfa_ding', 1);
    
14. }
    
15. else {
    + n" ]1 e8 T7 i9 {0 j4 ~; ]/ R3 E9 l
16. update_post_meta($id, 'bigfa_ding', ($bigfa_raters + 1));
    © 整站源码 cityed.cn & y! H2 x! O2 e8 ]
17. }
    
18. echo get_post_meta($id,'bigfa_ding',true);
    © 懒人资源 | CITYED.CN . n! J4 H( e1 l# d
19. }
    
20. die;
    © 懒人资源 | cityed.cn ( Y! y6 X- c$ v) G
21. }

复制代码

© www.cityed.cn & z# q5 }& i6 g. u; tJS代码

1. $.fn.postLike = function() {
   © 懒人资源 : E; o9 W/ C) v: s1 p' {; ^
2. if ($(this).hasClass('done')) {
   
3. return false;
   © 懒人资源 | cityed.cn 1 g; [" s) z+ N: J' Z7 ~) u
4. } else {
   © 懒人资源 % ~0 K( z- U  }* L
5. $(this).addClass('done');
   © https://www.cityed.cn 5 n0 b# \  w4 `5 i2 \$ U2 z3 M
6. var id = $(this).data("id"),
   
7. action = $(this).data('action'),
   © cityed.cn ) w) v8 w! B% Q- C2 f1 K
8. rateHolder = $(this).children('.count');
   © 懒人资源 6 S. j& j, F( r( u
9. var ajax_data = {
   
10. action: "bigfa_like",
    
11. um_id: id,
    © 整站源码 cityed.cn 2 `. F, q& X3 V# C  \
12. um_action: action
    © 懒人资源 | cityed.cn ; s' L0 q; Z$ u& f; L( t5 ^- ?
13. };
    
14. $.post("/wp-admin/admin-ajax.php", ajax_data,
    
15. function(data) {
    © 懒人资源 | cityed.cn # z: B  ~! B% b* {5 W
16. $(rateHolder).html(data);
    © 懒人资源 | CITYED.CN ' I/ E  a$ Z$ y  |& j5 @
17. });
    © CITYED.CN 版权所有   h: A8 s/ s. @
18. return false;
    © 懒人资源 | CITYED.CN 7 J$ k- I: E; o3 k4 R# ^
19. }
    
20. };
    
21. $(document).on("click", ".favorite",
    © 懒人资源 | cityed.cn + J- \0 {. s  {1 A# P+ S
22. function() {
    
23. $(this).postLike();
    : F) c2 p/ B% |8 J9 o6 t
24. });

复制代码

© https://www.cityed.cn ' J/ z: g/ [. I: b, a4 F2 S! \/ Z; c在你想显示的地方加入如下代码，推荐加到文章内容尾部
3 j$ i" Y) w( c- W' ~! m

1. <div class="post-like"><a class="favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])) echo ' done';?>" data-action="ding" data-id="<?php the_ID(); ?>">喜欢<span class="count">
   
2. <!--?php if( get_post_meta($post--->ID,'bigfa_ding',true) ){
   
3. echo get_post_meta($post->ID,'bigfa_ding',true);
   © 懒人资源 0 ~* r" a$ t" D. |  U
4. } else {
   
5. echo '0';
   © CITYED.CN 版权所有 2 l: I% Z8 B4 J
6. }?></span>
   © www.cityed.cn 7 x; N* s/ g% C$ P9 B' G: X0 q
7. </a></div>

复制代码

参考css样式

1. .post-like{text-align:center;padding:10px}
   © 整站源码 cityed.cn " }" b2 q9 r+ T) {) x
2. .post-like a{ background-color:#21759B;border-radius: 3px;color: #FFFFFF;font-size: 12px;padding: 5px 10px;text-decoration: none;outline:none}
   
3. .post-like a.done, .post-like a:hover{background-color:#eee;color:#21759B;}
   © www.cityed.cn 6 V* z% l0 U4 }/ y: p8 P5 X0 c: F8 O9 t
4. .post-like a.done{cursor:not-allowed}

复制代码

© 懒人资源 & ~, [4 \0 ~& @1 q希望大家喜欢，哈哈
© 懒人资源 | CITYED.CN 2 z! I" R" I  z
© 懒人资源 | cityed.cn 0 n: ]1 v4 ]# h