1. David Wu首页
  2. WordPress
  3. WordPress安装教程

WordPress纯代码实现文章收藏功能

最近在开发我们自己的吉他资源平台-乐瑶吉他的时候,用到了文章收藏的功能,之前做这个功能的时候都是适用的现成的插件,这次不想用那么多的插件了,所以就直接自己用代码写了一下这个文章收藏功能。首先将下面的代码放到您的 functions.php 文件中。

  1. function post_shoucang(){
  2.     if(!get_current_user_id()){
  3.         exit(json_encode(['msg'=>'请先登录才能收藏哦!']));
  4.     }
  5.     $id = $_POST["id"];
  6.     $meta = get_post_meta($id,'shoucang',true);
  7.     $shoucang1 = explode(',',get_post_meta($id,'shoucang',true));
  8.     $shoucang =  array_filter($shoucang1);
  9.     $user = get_current_user_id();
  10.     if(in_array($user,$shoucang)){
  11.         foreach($shoucang as $k=>$v){
  12.             if($v==$user){
  13.                 unset($shoucang[$k]);
  14.             }
  15.         }
  16.         update_post_meta($id, 'shoucang', implode(",",$shoucang));
  17.         exit(json_encode(['msg'=>'已取消收藏']));
  18.     }else{
  19.         array_push($shoucang,$user);
  20.         update_post_meta($id, 'shoucang', implode(",",$shoucang));
  21.         exit(json_encode(['msg'=>'收藏成功']));
  22.     }
  23. }
  24. add_action('wp_ajax_post_shoucang','post_shoucang');
  25. add_action('wp_ajax_nopriv_post_shoucang','post_shoucang');

其次,是在文章页中放入下面的 HTML 代码(收藏按钮):

  1. <?php
  2. $shoucang1 = explode(',',get_post_meta(get_the_ID(),'shoucang',true));
  3. $shoucang = array_filter($shoucang1);
  4. $user = get_current_user_id();
  5. ?>
  6. <a class="shoucang <?php if(in_array($user,$shoucang)){ foreach($shoucang as $k=>$v){if($v==$user){echo "on";}}} ;?>" data-id="<?php the_ID();?>" href="javascript:;">
  7. <span>收藏</span>
  8. </a>

样式方面就自己定义吧,其中,如果文章已经收藏过了,会在收藏按钮的 a 标签上多一个 on 的类,你可以使用这个类定义收藏过的样式。最后,还需要有一段 JS 文件,你可以放到您的 footer.php 中。

  1. <script> $('a.shoucang').click(function(){
  2. var id = $(this).data("id");
  3. $.ajax({
  4. url: "/wp-admin/admin-ajax.php",
  5. type:'post',
  6. dataType:'json',
  7. data:{action:'post_shoucang',id:id},
  8. success: function(data){
  9. layer.alert(data.msg, function(){
  10. location.reload();
  11. });
  12. }
  13. });
  14. });</script>

为了更好的体验效果,收藏成功以及取消成功的消息提示使用了 layer 这个 jQuery 弹出层插件,所以,您还需要在主题中引入这个框架的文件(下载地址),下载后把整个文件夹放到您的主题目录中,然后在主题头部引入 layer.js

通过以上方法已经完成了对文章的收藏及取消收藏功能(只有登录用户才能收藏)。收藏后大家肯定还需要获取出来每个用户自己收藏的文章的列表,以往使用插件获取收藏列表的时候样式都是固定的,自定义起来就要改插件,但是使用上面的方法,获取收藏列表的时候你想展示什么样的列表就看你自己了。获取方法如下:

  1. <?php
  2. $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
  3. $args=array(
  4. 'cat' => 5, // 分类ID,如果不需要限定是哪个分类,可以不写这个条件
  5. 'showposts' => 16,
  6. 'paged' => $paged,
  7. );
  8. query_posts($args);
  9. if(have_posts()) : while (have_posts()) : the_post();
  10. ?>
  11. <?php
  12. $shoucangmeta1 = explode(',',get_post_meta($id,'shoucang',true));
  13. $shoucangmeta = array_filter($shoucangmeta1);
  14. ?>
  15. <?php if(in_array(get_current_user_id(),$shoucangmeta)){ ?>
  16. <li>
  17. <a class="videolistbox" href="<?php%20the_permalink();?>" title="<?php the_title();?>">
  18. <div class="thumbbox">
  19. <?php $thumburl = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), array(400,270));?>
  20. <img class="defaultthumb" src="<?php%20echo%20$thumburl[0];?>" alt="<?php the_title();?>" title="<?php the_title();?>">
  21. <i class="videobutton fa fa-caret-square-o-right"></i>
  22. </div>
  23. <h3><?php the_title();?></h3>
  24. <div class="videolisttag">
  25. <span>
  26. <i class="fa fa-calendar" aria-hidden="true"></i>
  27. <?php the_time('m,d');?>
  28. </span>
  29. <span>
  30. <i class="fa fa-eye" aria-hidden="true"></i>
  31. <?php post_views(' ', ' 次'); ?>
  32. </span>
  33. <div class="clearfix"></div>
  34. </div>
  35. </a>
  36. <a class="posteditbutton shoucang" data-id="<?php the_ID();?>" href="javascript:;">取消收藏</a>
  37. </li>
  38. <?php } ?>
  39. <?php endwhile; else : ?>
  40. <div class="sp-mod-empty">
  41. <img src="<?php%20bloginfo('template_directory');%20?>/images/empty.png" class="empty-images">
  42. <p class="empty-txt">您还没有收藏任何弹唱视频哦~</p>
  43. </div>
  44. <?php endif;?>
  45. <div class="clearfix"></div>
  46. <div class="page_navi text-center">
  47. <?php par_pagenavi(9); ?>
  48. </div>
  49. <?php wp_reset_query(); ?>

仔细看上面的代码,其实就是普通的循环获取文章,只不过在循环中多了个判断,判断当前用户的 id 是否在获取到的文章的”shoucang”这个字段里,如果在则显示出来。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/88474

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注