Тенденции таковы , что интерфейсы становится все проще,а пользователи все ленивее 🙂 , и сейчас стало весьма модно использовать на своих сайтах/блогах , в новостных лентах бесконечную подгрузку контента при прокрутки страницы.
И да,ниже я опишу вам как это можно сделать на ваших сайтах
В первую очередь вставте это код, в файл с выводом новостей, в вашем шаблоне это может быть 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'); |
И на этом все,в целом данный код универсален,но требует дороботок под вашу верстку
[worningbox]Важно! Перед изменением файла «functions.php» сделайте его копию, и если не уверенны в своих силах,обратитесь к профессионалам ;)[/worningbox]
Пример можно посмотреть тут
На этом все,оставляйте ваши комментарии,задавайте ваши вопросы , и до новых встреч в моем блоге 🙂