Все записи на одной странице wordpress

Все записи на одной странице wordpress

Сегодня расскажу вам, как вывести все записи на одной странице или как сделать бесконечную прокрутку. Живым примером является мой собственный блог. Как я это сделал? Не буду утомлять вас ненужными объяснениями функций, как и на чем это реализовано, просто приведу куски кода и расскажу куда их распихать.

Для начала открываем файл header.php. В начало, до тега </head>, но после <?php wp_head(); ?>  (!это важно) вставляем следующее:

<!-- start infinite scroll function  -->
<?php if (!is_single() || !is_page()): ?>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        var count = 2;
        var total = <?php echo $wp_query->max_num_pages; ?>;
        $(window).scroll(function(){
                if  ($(window).scrollTop() == $(document).height() - $(window).height()){
                   if (count > total){
                   	  	return false;
                   }else{
                   		loadArticle(count);
                   }
                   count++;
                }
        }); 

        function loadArticle(pageNumber){    
                $('a#inifiniteLoader').show('fast');
                $.ajax({
                    url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
                    type:'POST',
                    data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop', 
                    success: function(html){
                        $('a#inifiniteLoader').hide('1000');
                        $("#content").append(html);    // This will be the div where our content will be loaded
                    }
                });
            return false;
        }

    });

</script>
<?php endif; ?>	
<!-- end infinite scroll pagination -->

Далее открываем index.php. Находим строки вывода ваших записей (может быть по-разному - нет единого решения, поэтому приведу свой). Скажу только, что это те строки, которые отвечают за вывод записей. Обычно они располагаются в каком-то блоке. Так вот. Если вы знаете, где эти строки, то их нужно заключить в контейнер <div id="content">ТУТ СТРОКИ ВЫВОДА ЗАПИСЕЙ</div>. Это тоже важно! Есть один нюанс! Для работы скрипта нам понадобится эти строки, которые между <div id="content"></div>, вынести в отдельный файл loop.php, который придется создать. Запутал? Привожу код index.php:

<?php get_header(); ?>
<div id="content">
<?php  get_template_part( 'loop', 'index' ); ?>
</div>
<?php get_footer(); ?>

где

<?php  get_template_part( 'loop', 'index' ); ?>

как раз указание, что надо сходить в файл loop.php и забрать его содержимое.

Теперь содержимое файла loop.php (строки вывода записей):

<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_content( __( 'Читать далее...' ) ); ?>
</div>
<?php endwhile; ?>

Теперь идем в functions.php и вставляем туда следующее:

<?php
/*infinite scroll pagination */
add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate');           // for logged in user
add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate');    // if user not logged in

function wp_infinitepaginate(){
    $loopFile        = $_POST['loop_file'];
    $paged           = $_POST['page_no'];
    $posts_per_page  = get_option('posts_per_page');

    query_posts(array('paged' => $paged ));
    get_template_part( $loopFile );
    exit;
}
function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

Осталось всего 3 шага и все будет работать:) Итак, следующий шаг - идем в footer.php и перед </body> добавляем строку:

<a id="inifiniteLoader">Loading... <img src="<?php bloginfo('template_directory'); ?>/images/ajax-loader.gif" /></a>

Это картинка, которая будет появляться, когда мы достигаем низа страницы на то время, пока остальные записи загрузятся. Кстати, о картинке. Берем её и сохраняем, затем закидываем в папку images своей текущей темы.

И, наконец, последний штрих - стили для этой ссылки, которую мы добавили перед картинкой. Идем в style.css и добавляем следующее:

a#inifiniteLoader{
	position: fixed;
	z-index: 2;
	bottom: 15px;
	right: 10px;
	display:none;
}

Вот и все:)

Исходники - для тех кому тяжело, прикрепил необходимые файлы с необходимым содержимым.

04.04.17
Для просмотра сайта обновите браузер.