在WordPress中加载更多文章Ajax Button

我浏览了一下旧的问题，并尝试了许多不同的方法，似乎这样做。 最近我必须在这里工作： 如何在自定义WP_Query Ajax上实现分页

我已经尝试了一切，它只是没有工作。 页面上绝对没有任何变化。 如果你检查加载更多的button，并点击它，jquery使更多的button操作，因为它从<a id="more_posts">Load More</a>更改为<a id="more_posts" disables="disabled">Load More</a> ，即使这对我来说似乎不对。 这不是添加post，我想我错过了一些简单的事情，但对于我的生活，我无法解决这个问题。

我的模板文件中的代码是：

 <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> 

任何人都可以看到我失踪或能够帮助？

Answer 1

更新24.04.2016。

我在我的页面上创build了教程https://madebydenis.com/ajax-load-posts-on-wordpress/关于在Twenty Sixteen主题上实现这个function，所以请随时查看:)

编辑

我已经在Twenty Fifteen上testing了它，它正在工作，所以它应该为你工作。

在index.php （假设你想显示在主页上的post，但这应该工作，即使你把它放在一个页面模板）我把：

  <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中join

 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文件的末尾，我添加了将会加载你的post的函数：

 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'); 

在这里，我已经在数组中添加了分页键，以便循环可以跟踪您加载post时的页面。

如果您已经在加载器中添加了您的类别，则可以添加：

 $cat = (isset($_POST['cat'])) ? $_POST['cat'] : ''; 

而不是8，你会把$cat 。 这将在$_POST数组中，并且您将能够在ajax中使用它。

最后一部分是ajax本身。 在函数 $(document).ready();我放在$(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(); }); 

保存它，testing它，它的工作:)

图像certificate（不要介意以次充好的造型，它很快完成）。 另外发布的内容是胡言乱语xD

UPDATE

对于“无限加载”，而不是单击button上的事件（只是使其不可见，与visibility: hidden; ）你可以尝试与

 $(window).on('scroll', function () { if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) { load_posts(); } }); 

这应该在页面底部100px的时候运行load_posts()函数。 在我的网站上的教程的情况下，您可以添加一个检查，以查看是否正在加载post（以防止两次发射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来轻松地检查它，并在检查器中看到他们扔掉了什么

 $(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(); } }); 

并相应地调整;）

希望这有助于:)如果您有任何问题只是问。