Данный вариант подгрузки постов «налету» является альтернативой подгрузке постов при скроллинге. Только в данном методе посты будут подгружаться по нажатию на кнопку. Также учтены некоторые особенности шаблона данного сайта высота блоков постов и оформление построения постов.
В файл funсtions.php. В коде ниже жирным выделен шаблон вывода постов при Ajax подгрузке
// Добавляем подгрузку постов function true_loadmore_scripts() { wp_enqueue_script('jquery'); // скорее всего он уже будет подключен, это на всякий случай wp_enqueue_script( 'true_loadmore', get_stylesheet_directory_uri() . '/js/loadmore.js', array('jquery') ); } add_action( 'wp_enqueue_scripts', 'true_loadmore_scripts' ); function true_load_posts(){ $args = unserialize(stripslashes($_POST['query'])); $args['paged'] = $_POST['page'] + 1; // следующая страница $args['post_status'] = 'publish'; $q = new WP_Query($args); if( $q->have_posts() ): while($q->have_posts()): $q->the_post(); ?> <?php get_template_part( 'solus' ); ?> <?php endwhile; ?> <?php endif; wp_reset_postdata(); die(); } add_action('wp_ajax_loadmore', 'true_load_posts'); add_action('wp_ajax_nopriv_loadmore', 'true_load_posts');
Добавляем в шаблон после закрытия if(have_posts()) (после endif;)
<!-- Скрипт подгрузки постов «на лету» --> <?php if ( $wp_query->max_num_pages > 1 ) : ?> <script> var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php'; var true_posts = '<?php echo serialize($wp_query->query_vars); ?>'; var current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>; var max_pages = '<?php echo $wp_query->max_num_pages; ?>'; </script> <div id="true_loadmore">Загрузить ещё</div> <?php endif; ?>
Стиль кнопки
/* Кнопка подгрузки постов на лету */ #true_loadmore { background: #003A73; color: #FFF; padding: 5px; text-align: center; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin: 20px 0; cursor: pointer; float: left; width: 100%; }
Скрипт подгрузки Ajax (loadmore.js). Жирным выделен блок адаптации новых подгруженных блоков под единую общую высоту + шаблон построения постов.
jQuery(function($){ $('#true_loadmore').click(function(){ $(this).html(' Загружаю...'); var data = { 'action': 'loadmore', 'query': true_posts, 'page' : current_page }; $.ajax({ url:ajaxurl, // обработчик data:data, // данные type:'POST', // тип запроса success:function(data){ if( data ) { $('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты // Блок для сайта opttour // Шаблон построения блоков if(localStorage.getItem('construct') == 'lines') { $(".hentry-empty").removeClass("hentry-box hentry-photo"); $(".hentry-empty").addClass("hentry-line"); } if(localStorage.getItem('construct') == 'blocks') { $(".hentry-empty").removeClass("hentry-line hentry-photo"); $(".hentry-empty").addClass("hentry-box"); } if(localStorage.getItem('construct') == 'photo') { $(".hentry-empty").removeClass("hentry-line hentry-box"); $(".hentry-empty").addClass("hentry-photo"); } // Перезагрузка высоты блоков $(".hentry-empty").css("height", "auto"); $(".hentry-empty").setEqualHeight(); // конец блока для opttour current_page++; // увеличиваем номер страницы на единицу if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку } else { $('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку } } }); }); });