微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

首先将下面的代码放到您的functions.PHP文件中。

/**

* wordpress日记——文章收藏功能

* https://www.wp-diary.com/749.html

*/

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,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,implode(",",$shoucang));

exit(json_encode(['msg'=>'已取消收藏']));

}else{

array_push($shoucang,$user);

update_post_Meta($id,$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(),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弹出层插件,所以,您还需要在主题中引入这个框架的文件(下载地址:http://res.layui.com/static/download/layer/layer-v3.1.1.zip),下载后把整个文件夹放到您的主题目录中,然后在主题头部引入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(',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"这个字段里,如果在则显示出来。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐