更新24.04.2016。
编辑
我已经在Twenty Fifteen上testing了它,它正在工作,所以它应该为你工作。
在index.php (假设你想显示在主页上的post,但这应该工作,即使你把它放在一个页面模板)我把:
这将从类别8中输出3个职位(我有这个类别的职位,所以我用它,你可以使用任何你想要的)。 你甚至可以查询你所在的类别
$cat_id = get_query_var('cat');
这会给你在你的查询中使用的类别ID。 你可以把它放在你的加载器(加载更多的div),并像jQuery一样拉
和拉类别
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 .= '
'.get_the_title().'
'.get_the_content().'
在这里,我已经在数组中添加了分页键,以便循环可以跟踪您加载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(); } });
并相应地调整;)
希望这有助于:)如果您有任何问题只是问。