编辑:我正在WordPress自定义主题中创建一个部分, 以使用WP_Query在首页模板上显示特定类别的五个最新标题/内容, 并且还希望有一个按钮来加载更多具有相同类别的标题(+5)。
我想通了, 但问题是我希望当用户刷新页面时, 应该已经有五个帖子出现, 并且当用户单击以加载超过其应加载+5的数量时, 依此类推。我正在关注https://www.youtube.com/watch?v=7_lU7_JUS2g。
在front-page.php中
显示内容部分
<
div class="col sunset-posts-container" id="displayResults">
<
/div
加载按钮
<
a class="btn btn-secondary text-light text-center sunset-load-more" data-page="1" data-url="<
?php echo admin_url('admin-ajax.php');
?>
">
在functions.php中
add_action( 'wp_ajax_nopriv_sunset_load_more', 'sunset_load_more' );
add_action( 'wp_ajax_sunset_load_more', 'sunset_load_more' );
function sunset_load_more() {
$paged = $_POST['page']+1;
// the query
$query = new WP_Query(array(
'category_name' =>
'news', 'post_status' =>
'publish', 'posts_per_page' =>
5, 'paged' =>
$paged
));
if ($query->
have_posts()) :
while ($query->
have_posts()) : $query->
the_post();
?>
<
p>
<
a class="text-success" href="http://www.srcmini.com/<
?php the_permalink();
?>" title="<
?php the_title_attribute();
?>
">
<
?php the_title();
?>
<
/a>
<
?php the_category( ', ' );
?>
<
/p>
<
?php endwhile;
wp_reset_postdata();
die;
else :
__('No News');
endif;
}
在ajaxPagination.js中
jQuery(document).ready( function($){
$(document).on('click', '.sunset-load-more', function(){var page = $(this).data('page');
var ajaxurl = $(this).data('url');
$.ajax({
url : ajaxurl, type : 'post', data : {
page : page, action: 'sunset_load_more'
}, error : function( response ){
console.log(response);
}, success : function( response ){
$('.sunset-posts-container').append(response);
}, });
});
});
是否可以进行导航而不是加载更多内容以加载下五个或加载预览五个?当用户单击下一步时, 最后五个将被删除(淡出)。谢谢 :)
#1你需要如下更新代码
在front-page.php中
显示内容部分
<
div class="col sunset-posts-container" id="displayResults">
<
/div>
在functions.php中
add_action( 'wp_ajax_nopriv_sunset_load_more', 'sunset_load_more' );
add_action( 'wp_ajax_sunset_load_more', 'sunset_load_more' );
function sunset_load_more() {
$paged = $_POST['page']+1;
$query = new WP_Query(array(
'category_name' =>
'news', 'post_status' =>
'publish', 'posts_per_page' =>
5, 'paged' =>
$paged
));
if ($query->
have_posts()) :
ob_start();
while ($query->
have_posts()) : $query->
the_post();
?>
<
p>
<
a class="text-success" href="http://www.srcmini.com/<
?php the_permalink();
?>" title="<
?php the_title_attribute();
?>
">
<
?php the_title();
?>
<
/a>
<
?php the_category( ', ' );
?>
<
/p>
<
?php endwhile;
$response= array(
'type'=>
'success', 'html'=>
ob_get_clean(), 'page'=>
$paged
);
wp_reset_postdata();
else :
__('No News');
$response= array(
'type'=>
'failure', 'html'=>
'No News', );
endif;
wp_send_json_success($response);
wp_die();
}
在ajaxPagination.js中
jQuery(document).ready( function($){
$(document).on('click', '.sunset-load-more', function(){var page = $(this).data('page');
var ajaxurl = $(this).data('url');
$.ajax({
url : ajaxurl, type : 'post', data : {
page : page, action: 'sunset_load_more'
}, error : function( response ){}, success : function( response ){
switch(response.data.type) {
case 'success' :
$('.sunset-load-more').attr('data-page', response.data.page);
/* you need remove last five then use html method and if you want append then use append method */
$('#displayResults').html(response.data.html);
break;
case 'failure' :
$('#displayResults').html(response.data.html);
break;
default :
break;
}
}, });
});
});
【如何使用Ajax在WordPress中添加分页(我有需要调试的代码)()】希望现在一切都好, 让我知道仍然需要任何帮助。
推荐阅读
- 如何修改WordPress网站的URL()
- 如何使用WordPress Customizer API在自定义WordPress主题中添加图像滑块
- 如何将自定义帖子类型存档添加到菜单
- 如何向WordPress主题添加评论
- 如何在WordPress自定义主题中为帖子添加评论( [关闭])
- 如何在html5blank_nav()中的ul和li中添加类()
- 如何访问和编辑HTML WordPress代码()
- 如何在内容Genesis主题之后添加一段HTML
- Java技术指南「并发编程专题」针对于Guava RateLimiter限流器的入门到精通(含实