@enid
Чтобы вывести посты через Ajax в WordPress, вам нужно следующее:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
function load_posts_by_ajax_callback() { check_ajax_referer('load_more_posts', 'security'); $paged = $_POST['page']; $args = array( 'post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 5, 'paged' => $paged, ); $posts = new WP_Query( $args ); if ( $posts->have_posts() ) { ob_start(); while ( $posts->have_posts() ) { $posts->the_post(); ?> <h2><?php the_title(); ?></h2> <p><?php the_excerpt(); ?></p> <?php } wp_reset_postdata(); $response = ob_get_contents(); ob_end_clean(); } else { $response = '<p>No more posts to load.</p>'; } echo $response; die(); } add_action( 'wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback' ); add_action( 'wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback' ); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="posts-container">
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 5,
'paged' => $paged,
);
$posts = new WP_Query( $args );
if ( $posts->have_posts() ) {
while ( $posts->have_posts() ) {
$posts->the_post();
?>
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
<?php
}
wp_reset_postdata();
} else {
echo '<p>No posts found.</p>';
|
@enid
А теперь добавьте следующий JavaScript код в ваш файл JavaScript (например, в functions.js):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
jQuery(function($){
var page = 1;
var loading = false;
var $window = $(window);
var $content = $('.posts-container');
$window.scroll(function() {
if( ! loading && $window.scrollTop() + $window.height() > $content.height() - 100) {
loading = true;
var data = {
action: 'load_posts_by_ajax',
page: page,
security: '<?php echo wp_create_nonce("load_more_posts"); ?>'
};
$.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function(response) {
$content.append(response);
page++;
loading = false;
});
}
});
});
|
Теперь, когда пользователь прокрутит страницу до конца, посты будут загружаться через Ajax. Не забудьте заменить название класса .posts-container и количество постов posts_per_page на необходимые вам значения.