WordPress纯代码实现文章收藏功能
时间:2019-11-17
本文章向大家介绍WordPress纯代码实现文章收藏功能,主要包括WordPress纯代码实现文章收藏功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近在开发我们自己的吉他资源平台-乐瑶吉他的时候,用到了文章收藏的功能,之前做这个功能的时候都是适用的现成的插件,这次不想用那么多的插件了,所以就直接自己用代码写了一下这个文章收藏功能。首先将下面的代码放到您的 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"这个字段里,如果在则显示出来。
原文地址:https://www.cnblogs.com/idid/p/11877404.html
- 无限级分类(非递归算法/存储过程版/GUID主键)完整数据库示例_(2)插入记录
- Centos中yum方式安装java
- 微信小程序新革命催生新物种新物种带来大红利!玩转行业新玩法
- 无限级分类(非递归算法/存储过程版/GUID主键)完整数据库示例_(3)删除记录
- 部署Zipkin分布式性能追踪日志系统的操作记录
- 无限级分类(非递归算法/存储过程版/GUID主键)完整数据库示例_(4)显示记录
- Android 2.x中使用actionbar - Actionbarsherlock (2)
- python读txt和xml
- 让Jexus支持高并发请求的优化技巧
- 数据压缩算法LZO (C#)
- Html之初体验
- 基于Wolfpack开发业务监控系统
- Android 2.x中使用actionbar - Actionbarsherlock
- Python-操作Memcache、Redis、RabbitMQ、
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法