WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

Как лучше организовать подгрузку AJAX постов?

Есть страницы category.php в ней выводится в цикле сетка записей. Соответственно отрабатывает пагинация.

Вопрос как сделать лучше подгрузку ajax записей на категории, сейчас дефолтно вводится по 16 записей, при скролле чтобы еще 16 подгружало

0
Рустик
4 июня 2019
  • 2
    Glum600

    Простой пример реализации ajax пагинации на базе twentynineteen child theme.

    На живом сайте не использовать! stop

    <?php
    add_action( 'wp_enqueue_scripts', 'child_scripts' );
    
    function child_scripts() {
    	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    
    	wp_localize_script(
    		'jquery',
    		'frontAjax',
    		['url' => admin_url( 'admin-ajax.php' )]
    	);
    }
    
    add_action( 'wp_footer', 'category_pagination_script' );
    
    function category_pagination_script() {
    	if ( is_category() ) :
    		global $wp_query;
    		?>
    		<script>
    			jQuery( function( $ ) {
    
    				let queryObject = '<?php echo serialize( $wp_query->query_vars ); ?>',
    					currentPage = <?php echo ( $tmp = get_query_var('paged') ) ? $tmp : 1; ?>,
    					maxNumPage = <?php echo $wp_query->max_num_pages; ?>;
    
    				$( document ).on( 'scroll', function() {
    					let footerOffset = $( 'footer.site-footer' ).offset().top - 200,
    						currentOffset = $( 'html' ).scrollTop();
    
    						let data = {
    							query_object: queryObject,
    							current_page: currentPage,
    							action      : 'category_ajax_pagination'
    						};
    
    						if ( currentOffset > footerOffset && ! $( 'body' ).hasClass('loading') ) {
    
    							$( 'body' ).addClass( 'loading' );
    
    							$.post( frontAjax, data ).done( function( response ) {
    								if ( currentPage < maxNumPage ) {
    									$( 'article' ).last().after( response );
    									$( 'body' ).removeClass( 'loading' );
    								}
    								currentPage++;
    							} );
    						}
    				} );
    
    			} );
    		</script>
    	<?php
    	endif;
    }
    
    add_action( 'wp_ajax_category_ajax_pagination', 'category_ajax_pagination' );
    add_action( 'wp_ajax_nopriv_category_ajax_pagination', 'category_ajax_pagination' );
    
    function category_ajax_pagination() {
    	$query_object = unserialize( stripslashes( $_POST['query_object'] ) );
    	$query_object['paged'] = ++$_POST['current_page'];
    
    	query_posts( $query_object );
    
    	if( have_posts() ) :
    
    		while( have_posts() ): the_post();
    
    			get_template_part( 'template-parts/content/content-excerpt', get_post_format() );
    
    		endwhile;
    
    	endif;
    
    	die();
    }
    Рустик 5 Июн. 2019

    у меня своя тема, это все в function.php вставлять ? Вывод верстки в какой строке поправить под свою?

    Glum 5 Июн. 2019

    Вы спрашивали как сделать, я вам показал простой пример! Этот код не для использования на сайте, потому что js должен лежать отдельно от php и нужно добавить проверки. Ну и само собой все селекторы вам не подойдут. Поэтому вы можете ознакомится с работой скрипта и на его примере сделать свой с правильным оформлением

    Рустик 5 Июн. 2019

    мда, это будет не просто

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация