自带完整数据 快速建站好帮手
客服QQ客服QQ 客服微信客服微信 公众号公众号

想给wordPress添加个点击查看更多文章怎么实现

本文介绍了想给wordPress添加个点击查看更多文章怎么实现,大家应当站点见到许多的站点沒有采用分页查询效果,反而是 "点击加载更多文章 "实现换页作用,针对有一些项目来讲,尤其是手机端站点,体验上采用加载分页查询功能的确要好些。一起来看看怎么开发吧。

wordPress查看更多文章实现教程:

第一、代码部分

//实现点击加载更多内容JS部分

jQuery(document).ready(function($) {

$('#pagination a').click(function() {

$this = $(this);

$this.addClass('loading').text("我们在在努力加载中,稍等");

var href = $this.attr("href");

if (href != undefined) {

$.ajax({

url: href,

type: "get",

error: function(request) {

},

success: function(data) {

$this.removeClass('loading').text("点击查看更多文章");

var $res = $(data).find(".blockGroup .post-list"); //这里重要,需要根据实际需要调整

$('.blockGroup').append($res.fadeIn(500));

var newhref = $(data).find("#pagination a").attr("href");

if (newhref != undefined) {

$("#pagination a").attr("href", newhref);

} else {

$("#pagination a").remove();

}

}

});

}

return false;

});

});

这个是我们定义加载效果的JS代码部分。

第二、样式部分

#pagination{display:inline-block;position:relative;height:30px;margin-bottom:20px;padding:2px 16px;color:rgba(0,0,0,.44);background:rgba(0,0,0,0);font-size:15px;text-align:center;text-decoration:none;cursor:pointer;border:1px solid rgba(0,0,0,.05);vertical-align:bottom;white-space:nowrap;text-rendering:auto;box-sizing:border-box;border-radius:999em}

可以根据实际需要修改样式。

第三、调出功能

<?php next_posts_link(__('点击加载更多文章')); ?>

把上面的代码放到模板里面就可以使用了。

TAG标签:wordPress查看更多文章

上一个:wordPress想让网址自动变成超链接怎么实现
下一个:怎么将wordPress留言板里的URL链接项删除掉

织梦网站源码

咨询客服

QQ:1847629575

全年 09:00-23:00

(其他时间请留言)

在线客服

Copyright©2021 www.why114.com 瓦窑源码 版权所有 鲁ICP备20017802号

展开