WordPress主题添加文章点赞功能实现代码

2015-12-26 22:44 阅读 143 次 评论关闭

我们在网上看到很多WordPress主题都添加了点赞功能,那如何实现WordPress文章点赞功能呢?只需要简单的复制粘贴几条代码,你就能拥有一个漂亮的心形投票按钮。

将这段代码添加到主题的 functions.php 文件中,结束标签(?>)之前:

  1. //添加文章点赞功能
  2. add_action('wp_ajax_nopriv_specs_zan','specs_zan');
  3. add_action('wp_ajax_specs_zan','specs_zan');
  4. function specs_zan(){
  5. global $wpdb,$post;
  6. $id = $_POST["um_id"];
  7. $action = $_POST["um_action"];
  8. if( $action =='ding'){
  9. $specs_raters = get_post_meta($id,'specs_zan',true);
  10. $expire = time()+99999999;
  11. $domain =($_SERVER['HTTP_HOST']!='localhost')? $_SERVER['HTTP_HOST']:false;// make cookies work with localhost
  12. setcookie('specs_zan_'.$id,$id,$expire,'/',$domain,false);
  13. if(!$specs_raters ||!is_numeric($specs_raters)){
  14. update_post_meta($id,'specs_zan',1);
  15. }
  16. else{
  17. update_post_meta($id,'specs_zan',($specs_raters +1));
  18. }
  19. echo get_post_meta($id,'specs_zan',true);
  20. }
  21. die;
  22. }

将这段代码添加到主题的 jQuery.js 文件中,添到末尾:

  1. //自定义 js 代码块
  2. $.fn.postLike =function(){
  3. if($(this).hasClass('done')){
  4. returnfalse;
  5. }else{
  6. $(this).addClass('done');
  7. var id = $(this).data("id"),
  8. action = $(this).data('action'),
  9. rateHolder = $(this).children('.count');
  10. var ajax_data ={
  11. action:"specs_zan",
  12. um_id: id,
  13. um_action: action
  14. };
  15. $.post("/wp-admin/admin-ajax.php", ajax_data,
  16. function(data){
  17. $(rateHolder).html(data);
  18. });
  19. returnfalse;
  20. }
  21. };
  22. $(document).on("click",".specsZan",
  23. function(){
  24. $(this).postLike();
  25. });

将这一段代码添加到主体的 style.css 文件中,尽量添加在前面,切记不要添加到最后面,应为多数主题的 style.css 都是响应式的,后面的 css 是有屏幕大小限制的。

  1. /*自定义样式*/
  2. .post-like{text-align:center;padding:10px}
  3. .post-like a{ background-color:#ff0000; opacity:0.7; border-radius: 5px;color: #FFFFFF;font-size: 18px;padding: 5px 10px;text-decoration: none;outline:none}
  4. .post-like a:hover{opacity:0.8;color:#FFFFFF;}
  5. .post-like a.done{opacity:0.7}

最后将这段代码添加到主题的 single.php 文件中,添加到 < ?php the_content() ?>下一行:

  1.  <divclass="post-like">
  2.      <a href="javascript:;" data-action="ding" data-id="<?php the_ID();?>" class="specsZan <?php if(isset($_COOKIE['specs_zan_'.$post->ID])) echo 'done';?>">♥ 喜欢 <spanclass="count">
  3.      <?php if( get_post_meta($post->ID,'specs_zan',true)){
  4.                echo get_post_meta($post->ID,'specs_zan',true);
  5.      }else{
  6.       echo '0';
  7.      }?></span>
  8.      </a>
  9. </div>

最后的显示效果就是本站这样了。

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:WordPress主题添加文章点赞功能实现代码 | 猎微网

评论已关闭!