我浏览了旧的问题,并尝试了许多似乎可以做到的不同方法。我最接近的工作是在这里:如何在自定义WP_QueryAjax上实现分页
我已经尝试了一切,但没有用。页面上没有任何变化。如果您检查并单击“加载更多按钮”,则jQuery会执行“加载更多按钮”操作,因为它从更改<aid="more_posts">Load More</a>
为<a id="more_posts" disables="disabled">LoadMore</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');
页脚中的My 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>
有人可以看到我缺少的东西或能够提供帮助的人吗?
我已经在我的页面https://madebydenis.com/ajax-load-posts-on-
wordpress/
上创建了关于在“二十十六岁”主题上实现该主题的教程,请随时查看:)
我已经在二十一十五测试了它,并且它正在工作,所以它应该对您有用。
在 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'] : '';
而不是8,您输入了$cat
。这将在$_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();
});
保存它,测试它,然后就可以了:)
图像作为证明(不要介意低劣的样式,它很快就完成了)。帖子内容也很乱
更新
对于“无限负载”,而不是按钮上的click事件(只需使用使其不可见visibility: hidden;
),您可以尝试使用
$(window).on('scroll', function () {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
load_posts();
}
});
load_posts()
当您离页面底部100px时,这应该运行该函数。对于我网站上的教程,您可以添加检查以查看帖子是否正在加载(以防止两次触发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();
}
});
并相应地进行调整;)
希望这会有所帮助:)如果您有任何疑问,请问。
问题内容: 首先,我认为这是一个漫长的尝试,但希望有人可以提供帮助。 为了解释当前情况,目前,我有一个自定义插件,可以获取有关用户及其最新4条帖子的各种信息。 我也在使用WPBook插件(所以这是在facebook上,只是一个典型的wordpress网站) 好的,这是我的代码,它为用户抓取了4条最新帖子: 我尝试按照本教程进行操作,但没有使用单独的插件,而是将代码放在了现有的插件中,但现在页面无法
问题内容: 几天前,我发布了一个有关如何在我正在开发的自定义Wordpress模板中滚动到“单个帖子 ”的问题。我需要的是在单击特定链接时将单个帖子加载到定义的DIV中,然后向下滚动到包含新加载内容的DIV。考虑到Wordpress或任何其他CMS的动态内容性质,该链接的URL不能是绝对的。 不幸的是,那时没有任何具体的答案,所以我决定稍作观察。由于主要问题是动态加载内容,因此我决定放大如何在Wo
问题内容: 我熟悉以普通方式在jQuery中使用ajax。 我已经玩了一段时间了,但是不了解Wordpress使其正常工作需要 什么… 我在这里所摘录的内容来自一些教程或文章。 这在 functions.php中 (在子主题中): jQuery本身正在加载并正常工作。 我已经尝试过一些基本的ajax,如下所示: 除此之外,我不知道如何测试以确保它是否从一开始就正确地加载了…… 在这里的任何帮助,将
我创建了一个名为制造商的自定义帖子类型,并添加了大量帖子和类别。单个帖子页面工作,但类别/存档页面不显示任何帖子。 制造商被分成不同的类别,我需要显示每个类别中所有帖子的存档。我去工厂的时候 http://localhost/category/manufactures/ge-speedtronic/ 这就是令人困惑的地方。我为自定义帖子类型“制造商”使用的类别也显示在我的其他自定义帖子类型和默认帖
问题内容: 我在使用jQuery时遇到Rails和ajax的一个非常奇怪的问题(尽管我不认为它特定于jQuery)。 我的Rails应用程序使用cookie会话存储,并且我有一个非常简单的登录名,用于设置会话中的用户ID。如果未在会话中设置user_id,它将重定向到登录页面。这没有问题。jQuery GET请求也可以正常工作。问题是当我执行jQuery POST时- 浏览器将会话Cookie正常
好吧,这一定很容易,我就是搞不懂为什么什么都不管用。 我有一个wordpress主题和3个自定义帖子类型。我想限制对大多数帖子的访问,并允许管理员使一些帖子可供公众查看。我希望它尽可能简单。 我目前拥有的是,我已经将所有帖子设置为默认为private,然后管理员可以进入并将任何他喜欢的帖子设置为“public”,以便未登录的人可以看到它们。 问题是,我无法在fontend上为登录用户显示私人帖子。