Я просмотрел старые вопросы и попробовал многие из разных методов, которые, похоже, делают это. Самое близкое, что мне нужно для работы, это здесь: Как реализовать разбиение на страницы на пользовательский 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>
Кто-нибудь может увидеть что-то, чего я не могу или не могу помочь?
Я создал учебное пособие на своей странице https://madebydenis.com/ajax-load-posts-on-wordpress/ об осуществлении этой темы на Twenty Sixteen, поэтому не стесняйтесь проверить это:)
Я тестировал это в Twenty 15 и работал, поэтому он должен работать для вас.
В 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.
Последняя часть - сама 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
UPDATE
Вместо "бесконечной нагрузки" вместо нажатия кнопки на кнопке (просто сделайте ее невидимой, 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();
}
});
И просто отрегулируйте соответственно;)
Надеюсь, что это поможет:) Если у вас есть вопросы, просто спросите.
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;