@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
на необходимые вам значения.