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

发布于 2023.02.10

最近在开发我们自己的吉他资源平台-乐瑶吉他的时候，用到了文章收藏的功能，之前做这个功能的时候都是适用的现成的插…

最近在开发我们自己的吉他资源平台-乐瑶吉他的时候，用到了文章收藏的功能，之前做这个功能的时候都是适用的现成的插件，这次不想用那么多的插件了，所以就直接自己用代码写了一下这个文章收藏功能。首先将下面的代码放到您的 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”这个字段里，如果在则显示出来。

类别：WordPress教程、

本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。

猜你喜欢GUESS YOU LIKE

WordPress添加贴吧表情

PhpStorm配置Xdebug调试WordPress

PHP使用Imagick扩展处理图片

WordPress添加百度主动推送

WordPress文章底部添加相关文章

Windows上配置Nginx+PHP7+WordPress

评论 (0)COMMENT