我浏览了旧问题并尝试了许多似乎可以做到这一点的不同方法。我最接近工作的是这里的这个:How to implement pagination on a custom WP_Query Ajax
我什么都试过了,就是不行。页面上绝对没有任何变化。如果您检查加载更多按钮并单击它,jQuery 将执行加载更多按钮操作,因为它从 <a id="more_posts">Load More</a>
更改。至 <a id="more_posts" disables="disabled">Load More</a>
无论如何,即使那样对我来说也不合适。它没有添加帖子,我想我遗漏了一些简单的东西,但对于我的生活我无法解决。
我的模板文件中的代码是:
<div id="ajax-posts" class="row">
<?php
$postsPerPage = 3;
$args = [
'post_type' => 'post',
'posts_per_page' => $postsPerPage,
'cat' => 1
];
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post(); ?>
<div class="small-12 large-4 columns">
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
</div>
<?php
endwhile;
echo '<a id="more_posts">Load More</a>';
wp_reset_postdata();
?>
</div>
我的函数文件中的代码是:
function more_post_ajax(){
$offset = $_POST["offset"];
$ppp = $_POST["ppp"];
header("Content-Type: text/html");
$args = [
'suppress_filters' => true,
'post_type' => 'post',
'posts_per_page' => $ppp,
'cat' => 1,
'offset' => $offset,
];
$loop = new WP_Query($args);
while ($loop->have_posts()) { $loop->the_post();
the_content();
}
exit;
}
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
我在页脚中的 jQuery 是:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready( function($) {
var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";
// What page we are on.
var page = 5;
// Post per page
var ppp = 3;
$("#more_posts").on("click", function() {
// When btn is pressed.
$("#more_posts").attr("disabled",true);
// Disable the button, temp.
$.post(ajaxUrl, {
action: "more_post_ajax",
offset: (page * ppp) + 1,
ppp: ppp
})
.success(function(posts) {
page++;
$("#ajax-posts").append(posts);
// CHANGE THIS!
$("#more_posts").attr("disabled", false);
});
});
});
</script>
任何人都可以看到我遗漏或能够提供帮助的东西吗?
最佳答案
2016 年 4 月 24 日更新。
我在我的页面 https://madebydenis.com/ajax-load-posts-on-wordpress/ 上创建了教程关于在 26 主题上实现这一点,请随时查看 :)
编辑
我已经在 25 日测试了它并且它正在工作,所以它应该对你有用。
在 index.php 中(假设您想在主页上显示帖子,但即使您将其放在页面模板中也应该可以)我输入:
<div id="ajax-posts" class="row">
<?php
$postsPerPage = 3;
$args = array(
'post_type' => 'post',
'posts_per_page' => $postsPerPage,
'cat' => 8
);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
?>
<div class="small-12 large-4 columns">
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
<div id="more_posts">Load More</div>
这将输出类别 8 中的 3 个帖子(我在该类别中有帖子,所以我使用了它,您可以使用任何您想要的内容)。您甚至可以查询您所在的类别
$cat_id = get_query_var('cat');
这将为您提供要在查询中使用的类别 ID。你可以把它放在你的加载器中(加载更多的 div),然后用 jQuery 拉
<div id="more_posts" data-category="<?php echo $cat_id; ?>">Load More</div>
并使用拉出类别
var cat = $('#more_posts').data('category');
但现在,您可以忽略它。
接下来在functions.php我添加了
wp_localize_script( 'twentyfifteen-script', 'ajax_posts', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'noposts' => __('No older posts found', 'twentyfifteen'),
));
就在现有 wp_localize_script
之后。这将加载 WordPress 自己的 admin-ajax.php,以便我们在 ajax 调用中调用它时可以使用它。
在 functions.php 文件的末尾,我添加了将加载您的帖子的函数:
function more_post_ajax(){
$ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
$page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
header("Content-Type: text/html");
$args = array(
'suppress_filters' => true,
'post_type' => 'post',
'posts_per_page' => $ppp,
'cat' => 8,
'paged' => $page,
);
$loop = new WP_Query($args);
$out = '';
if ($loop -> have_posts()) : while ($loop -> have_posts()) : $loop -> the_post();
$out .= '<div class="small-12 large-4 columns">
<h1>'.get_the_title().'</h1>
<p>'.get_the_content().'</p>
</div>';
endwhile;
endif;
wp_reset_postdata();
die($out);
}
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
这里我在数组中添加了分页键,以便循环可以在您加载帖子时跟踪您所在的页面。
如果您在加载器中添加了您的类别,您将添加:
$cat = (isset($_POST['cat'])) ? $_POST['cat'] : '';
你会用 $cat
代替 8。这将在 $_POST
数组中,您可以在 ajax 中使用它。
最后一部分是 ajax 本身。在 functions.js 我把 $(document).ready();
环境
var ppp = 3; // Post per page
var cat = 8;
var pageNumber = 1;
function load_posts(){
pageNumber++;
var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax';
$.ajax({
type: "POST",
dataType: "html",
url: ajax_posts.ajaxurl,
data: str,
success: function(data){
var $data = $(data);
if($data.length){
$("#ajax-posts").append($data);
$("#more_posts").attr("disabled",false);
} else{
$("#more_posts").attr("disabled",true);
}
},
error : function(jqXHR, textStatus, errorThrown) {
$loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
}
});
return false;
}
$("#more_posts").on("click",function(){ // When btn is pressed.
$("#more_posts").attr("disabled",true); // Disable the button, temp.
load_posts();
});
保存,测试,它可以工作:)
图片作为证明(不要介意粗制滥造的造型,它很快就完成了)。帖子内容也是乱码xD
更新
对于“无限加载”而不是按钮上的单击事件(只需使其不可见,使用 visibility: hidden;
)您可以尝试使用
$(window).on('scroll', function () {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
load_posts();
}
});
当您距离页面底部 100 像素时,这应该会运行 load_posts()
函数。对于我网站上的教程,您可以添加一个检查以查看帖子是否正在加载(以防止两次触发 ajax),并且您可以在滚动到达页脚顶部时触发它
$(window).on('scroll', function(){
if($('body').scrollTop()+$(window).height() > $('footer').offset().top){
if(!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))){
load_posts();
}
}
});
现在在这些情况下唯一的缺点是您永远无法滚动到 $(document).height() - 100
或 $('footer').offset( ).top
出于某种原因。如果发生这种情况,只需增加滚动到的数字即可。
您可以通过将 console.log
s 放入您的代码中轻松检查它,并在检查器中查看它们抛出的内容
$(window).on('scroll', function () {
console.log($(window).scrollTop() + $(window).height());
console.log($(document).height() - 100);
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
load_posts();
}
});
然后进行相应的调整;)
希望这会有所帮助 :) 如果您有任何问题,请随时提出。
关于javascript - 在 WordPress 中加载更多帖子 Ajax 按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31587210/