Ответ 1
ОБНОВЛЕНИЕ 24.04.2016.
Я создал учебник на своей странице https://madebydenis.com/ajax-load-posts-on-wordpress/ о реализации этого в теме Twenty Sixteen, так что не стесняйтесь проверить его :)
РЕДАКТИРОВАТЬ
Я проверил это на Двадцать пятнадцать, и оно работает, так что оно должно работать для вас.
В 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>
Это выведет 3 сообщения из категории 8 (у меня были сообщения в этой категории, поэтому я использовал их, вы можете использовать все, что захотите). Вы даже можете запросить категорию, в которой вы находитесь
$cat_id = get_query_var('cat');
Это даст вам идентификатор категории для использования в вашем запросе. Вы можете поместить это в свой загрузчик (загрузить больше 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.
Последняя часть - это сам Аякс. В 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();
}
});
Это должно запустить 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 в свой код и увидев в инспекторе, что они выбрасывают.
$(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();
}
});
И просто настроить соответственно;)
Надеюсь, это поможет :) Если у вас есть какие-либо вопросы, просто задавайте.