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

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

作者 : 资源客 发布时间: 2019-11-11

直接自己用代码写了一下这个文章收藏功能。首先将下面的代码放到您的 functions.php 文件中。

function post_shoucang(){
    if(!get_current_user_id()){
        exit(json_encode(['msg'=>'请先登录才能收藏哦!']));
    }
    $id = $_POST["id"];
    $meta = get_post_meta($id,'shoucang',true);
    $shoucang1 = explode(',',get_post_meta($id,'shoucang',true));
    $shoucang =  array_filter($shoucang1); 
    $user = get_current_user_id();
    if(in_array($user,$shoucang)){ 
        foreach($shoucang as $k=>$v){
            if($v==$user){
                unset($shoucang[$k]);
            }
        }
        update_post_meta($id, 'shoucang', implode(",",$shoucang));
        exit(json_encode(['msg'=>'已取消收藏']));
    }else{
        array_push($shoucang,$user);
        update_post_meta($id, 'shoucang', implode(",",$shoucang));
        exit(json_encode(['msg'=>'收藏成功']));
    }   
}
add_action('wp_ajax_post_shoucang','post_shoucang');
add_action('wp_ajax_nopriv_post_shoucang','post_shoucang');

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

<?php
$shoucang1 = explode(',',get_post_meta(get_the_ID(),'shoucang',true));
$shoucang = array_filter($shoucang1);
$user = get_current_user_id();
?>
<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:;">
<span>收藏</span>
</a>

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

<script> $('a.shoucang').click(function(){
var id = $(this).data("id");
$.ajax({
url: "/wp-admin/admin-ajax.php",
type:'post',
dataType:'json',
data:{action:'post_shoucang',id:id},
success: function(data){
layer.alert(data.msg, function(){
location.reload();
});
}
});
});</script>

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

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

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args=array(
'cat' => 5, // 分类ID,如果不需要限定是哪个分类,可以不写这个条件
'showposts' => 16,
'paged' => $paged,
);
query_posts($args);
if(have_posts()) : while (have_posts()) : the_post();
?>
<?php
$shoucangmeta1 = explode(',',get_post_meta($id,'shoucang',true));
$shoucangmeta = array_filter($shoucangmeta1);
?>
<?php if(in_array(get_current_user_id(),$shoucangmeta)){ ?>
<li>
<a class="videolistbox" href="<?php%20the_permalink();?>" title="<?php the_title();?>">
<div class="thumbbox">
<?php $thumburl = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), array(400,270));?>
<img class="defaultthumb" src="<?php%20echo%20$thumburl[0];?>" alt="<?php the_title();?>" title="<?php the_title();?>">
<i class="videobutton fa fa-caret-square-o-right"></i>
</div>
<h3><?php the_title();?></h3>
<div class="videolisttag">
<span>
<i class="fa fa-calendar" aria-hidden="true"></i>
<?php the_time('m,d');?>
</span>
<span>
<i class="fa fa-eye" aria-hidden="true"></i>
<?php post_views(' ', ' 次'); ?>
</span>
<div class="clearfix"></div>
</div>
</a>
<a class="posteditbutton shoucang" data-id="<?php the_ID();?>" href="javascript:;">取消收藏</a>
</li>
<?php } ?>
<?php endwhile; else : ?>
<div class="sp-mod-empty">
<img src="<?php%20bloginfo('template_directory');%20?>/images/empty.png" class="empty-images">
<p class="empty-txt">您还没有收藏任何弹唱视频哦~</p>
</div>
<?php endif;?>
<div class="clearfix"></div>
<div class="page_navi text-center">
<?php par_pagenavi(9); ?>
</div>
<?php wp_reset_query(); ?>

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

http://xzh.i3geek.com
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途及非法用途,否则后果自负!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"qq301.com",如遇到无法解压的请联系管理员!
资源客是一个优秀的分享资源站,本站资源均为各位友友分享而来,特殊原创会标明如有侵犯版权等可联系删除

资源客 » WordPress纯代码实现文章收藏功能