Бесконечная загрузка постов при прокрутке страницы

04.11.2014

Тенденции таковы , что интерфейсы становится все проще,а пользователи все ленивее 🙂 , и сейчас стало весьма модно использовать на своих сайтах/блогах , в новостных лентах бесконечную подгрузку контента при прокрутки страницы.

И да,ниже я опишу вам как это можно сделать на ваших сайтах

В первую очередь вставте это код, в файл с выводом новостей, в вашем шаблоне это может быть category.php , archive.php или index.php или любой другой файл который отвечает за вывод всех постов ,на нужной вам странице.

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
31
32
33
34
35
36
<?php
global $wp_query, $post, $wpdb;
if (  $wp_query->max_num_pages > 1 ) : ?>
    <script id="true_loadmore">
    var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php';
    var current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>;
    </script>
<?php endif; ?>
<script>
jQuery(function($){
    $(window).scroll(function(){
        var bottomOffset = 2500; // отступ от нижней границы сайта, до которого должен доскроллить пользователь, чтобы подгрузились новые посты
        var data = {
            'action': 'loadmore',
            'page' : current_page
        };
        if( $(document).scrollTop() > ($(document).height() - bottomOffset) && !$('body').hasClass('loading')){
            $.ajax({
                url:ajaxurl,
                data:data,
                type:'POST',
                beforeSend: function( xhr){
                    $('body').addClass('loading');
                },
                success:function(data){
                    if( data ) {
                    $( ".items.grid-block" ).append(data);//вы можете вставлять,дополнять data как вам удобно,у каждого свои настройки , в данном случае , подгружаеммый контент будет добавлен в контейнер с классом .items.grid-block ,после всего контента в этом контейнере
                        $('body').removeClass('loading');
                        current_page++;
                    }
                }
            });
        }
    });
});
</script>

После нужно добавить код в файл – «functions.php», который находится в папке с вашей активной темой оформления, поместить следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function true_load_posts(){
    $page = $_POST['page'] + 1; // следующая страница
global $query_string;
global $post;
query_posts($query_string .'&paged='.$page); //так же можете дополнить эту строчку нужными вам параметрами

while (have_posts()) {
//сюда вставте нужный вам цикл вывода статей
}
}
 
 
add_action('wp_ajax_loadmore', 'true_load_posts');
add_action('wp_ajax_nopriv_loadmore', 'true_load_posts');

И на этом все,в целом данный код универсален,но требует дороботок под вашу верстку

Важно! Перед изменением файла «functions.php» сделайте его копию, и если не уверенны в своих силах,обратитесь к профессионалам 😉

Пример можно посмотреть тут
На этом все,оставляйте ваши комментарии,задавайте ваши вопросы , и до новых встреч в моем блоге 🙂