+ 收藏我们

网站模板

网站模板搜索
404模板 营销型模板 外贸网站模板 单页模板 双语模板 标签大全
电话:18630701785
首页 > wordpress > WordPress 用户中心订阅栏目功能的实现——Ajax 免插件方式 >

WordPress 用户中心订阅栏目功能的实现——Ajax 免插件方式

时间:2024-08-02 12:00:48

使用网易新闻客户端看新闻的朋友对网易新闻的新闻栏目订阅功能都会比较熟悉。WordPress 有着非常强大并且方便的内容管理界面,非常适合做一个新闻资讯类的网站。

如果你的网站上栏目非常多,提供一个订阅功能,让用户只订阅自己感兴趣的栏目是非常有必要的,在帮一个客户做 WordPress 新闻资讯主题的时候实现过这样的功能,抽空整理了一下其中的关键代码,在这里分享给大家。

dingyuepindao
用户中心订阅栏目功能

用户中心订阅功能的关键后台代码

复制/*订阅功能*/
add_action( 'wp_ajax_skill_exchange', 'ajax_skill_exchange' );
add_action( 'wp_ajax_nopriv_skill_exchange', 'ajax_skill_exchange' );
function ajax_skill_exchange() {

	$fid = $_POST['fid']; // 为ajax提交获取参数

    //获取当前用户id
	$current_user = wp_get_current_user();
	$uid = $current_user->ID;

    //获取当前用户订阅的栏目数组(下称订阅数组)
	$fids = get_user_meta($uid, 'fids', true);

	if(count($fids) == 0){//如果订阅数组长度为0,说明该用户没有订阅任何栏目。
		$fids = array($fid);
		$msg = array(
			'msg' => "订阅成功",
			'text' => "取消订阅"
		);
	} else {//如果不为0,说明用户已经订阅了一些栏目
		if(!in_array($fid, $fids)){//如果当前分类不在订阅数组,添加当前分类到订阅数组,订阅成功。
			array_push($fids, $fid);
			$msg = array(
				'msg' => "订阅成功",
				'text' => "取消订阅"
			);
		}else{//如果当前分类在订阅数组中,说明已经订阅过了,从订阅数组中移除此分类id,取消订阅成功
			foreach($fids as $k => $v) {
				if($v == $fid){
					unset($fids[$k]);
				}
			}
			$msg = array(
				'msg' => "取消订阅成功",
				'text' => "订阅栏目"
			);
		}
	}

    // 排除空数组
    $following_ids = array_filter($following_ids, function ($value) { return $value !== ''; });
    //最后,更新用户订阅,返回信息。
	update_user_meta($uid, 'fids', $fids);
	wp_send_json_success($msg);
}

订阅功能的前台关键代码

前端直接把栏目 ID 写到 HTML 里面,方便获取。并根据用户订阅状态,判断按钮上面的文字是订阅还是取消订阅。

复制<?php $fids = (array)get_user_meta($uid, 'fids', true); ?>
<?php foreach($wp_query as $q) { ?>
    <a class="exchange" href="" data-id="<?php echo $q->ID ?>" title=""><?php echo(!in_array($q->ID, $fids)) ? "订阅" : "取消订阅"; ?></a>
<?php } ?>

前端通过 Ajax 提交需要订阅的栏目 ID 到后端。

复制jQuery(document).ready(function($) {
	/*订阅和取消订阅*/
	$('.exchange').click(function(){
		event.preventDefault();
		$.ajax({
		method: 'POST',
			url: ajax_object.ajaxurl,
			dataType: "json",
			data: {
				action: 'skill_exchange',
				fid: $(this).data("id")
			},
			success: function(data){
                if(data.success === true){
                    alert(data.data.msg);
                }
				window.location.reload()
			}}
		);
	});
});
dingyueyonghu
用户中心订阅用户功能

除了订阅栏目,以上代码稍作修改,我们还可以订阅(关注)用户,只需要把上面的分类 ID 修改为用户 ID 就可以了。

有问题可以加入网站技术QQ群一起交流学习

本站会员学习、解决问题QQ群(691961965)

客服微信号:lpf010888

pbootcms教程

织梦教程

站长学院

SEO

wordpress

竞价教程

信息流

Title