Как настроить бесконечную прокрутку WordPress сайта
Опубликовано: 01.09.2018
" Бесконечная " прокрутка страниц в блоге была в свое время создана под влиянием интерфейса таких социальных медиа, как Facebook and Twitter . Чтобы прочесть старые посты, в такой системе перелистывания достаточно прокрутить страницу вниз.
С одной стороны, такая система перелистывания страниц существенно улучшает опыт использования сайта, но при неправильной настройке она может испортить впечатление посетителей вашего сайта. Так что если вы собираетесь внедрить "бесконечную" прокрутку, убедитесь, что в нижней части страницы в текущем дизайне нет никаких важных навигационных ссылок. Потому что при бесконечном прокручивании страницы попытка кликнуть на одну из таких ссылок будет приводить к появлению новых постов, а сама ссылка будет "убегать" от пользователя. Для того, чтобы избежать таких негативных последствий, важные ссылки придется перенести в боковую панель либо зафиксировать расположение футера в вашем блоге. Итак, приступим к настройке.
Бесконечная прокрутка страницы WordPress - плагин Infinite scroll
| Скачать исходники |
Шаг 1. Планируем деление на страницы при новой прокрутке
Важно спланировать деление блога на страницы перед тем, как настроить новый тип прокрутки и навигации. Обычно деление на страницы происходит путем перечисления номеров страниц в нижней части главной страницы. Но теперь при условии, что прокрутка будет динамической, вам такая нумерация и разбивка на номера не понадобится.
Бесконечная прокрутка страниц сайта или постраничная навигация
Наша бесконечная прокрутка использует функциональность jQuery и ajax для обработки запросов к странице и постам, которые отображаются для пользователя, как только он достигает видимого " дна " страницы. В этом пользовательском руководстве я расскажу вам, как настроить динамическую прокрутку на примере темы Twenty Ten (демо-версию работающей настроенной темы вы можете просмотреть тут ).
Шаг 2. Создаем функцию Ajax
Мы воспользуемся функцией WordPress ajax , чтобы создать процедуру обработки вызова новых постов при разбивке на страницы с эффектом "бесконечной" прокрутки. Сначала надо задать основную функцию для нашего деления на страницы, для этого следующий код понадобится добавить в functions.php
function wp_infinitepaginate(){ $loopFile = $_POST['loop_file']; $paged = $_POST['page_no']; $posts_per_page = get_option('posts_per_page'); # Load the posts query_posts(array('paged' => $paged )); get_template_part( $loopFile ); exit; }Эта функция будет использоваться для вызова нашей процедуры деления на страницы, и обычно у нас тут происходит отправка двух переменных при помощи ajax : одна задает номер страницы , а другая - файл шаблона , который использует такую новую прокрутку. Чтобы включить эту функцию и использовать ее совместно при помощи WordPress ajax, нам понадобится следующий код:
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Действие по умолчанию для WordPress ajax будет wp_ajax_(our action name) , поскольку имя infinite_scroll используется в коде темы, которая служит примером в данном посте. Нам надо добавить 2 действия : одно — для авторизованных пользователей сайта, а другое - для тех, кто не авторизован на сайте.
Далее нам надо создать ajax-функцию , которая будет отправлять 2 переменных , необходимых для нашей процедуры деления на страницы. Вы можете использовать следующие примеры кода WordPress для вставки jQuery ajax-функции либо же напрямую добавить этот код в файл header.php вашей темы:
<script type="text/javascript"> function loadArticle(pageNumber) { $.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){ $("#content").append(html); // This will be the div where our content will be loaded } }); return false; } </script>Перед нами — основной вызов ajax , который будет осуществляться, и мы используем " infinite_scroll " как имя производимого действия. WordPress будет автоматический вызывать функцию wp_infinitepaginate(); потому что мы задали ее в нашем файле functions.php .
Шаг 3. Определяем действие в момент, когда пользователь достигает "дна" страницы
Чтобы включить "бесконечную прокрутку", нам надо определить тот момент, в который пользователь достигает видимого " дна " страницы. Добиться этого можно при помощи jQuery , используя следующий код:
<script type="text/javascript"> $(window).scroll(function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()){ // run our call for pagination } }); </script>Теперь мы можем узнать, когда пользователь достигнет прокруткой видимой нижней границы на странице. Далее надо вызвать функцию loadArticle в рамках функции прокрутки. Для этого я добавляю счетчик , который определяет номер страницы для дальнейшего вызова функции:
<script type="text/javascript"> var count = 2; $(window).scroll(function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()){ loadArticle(count); count++; } }); function loadArticle(pageNumber){ $.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){ $("#content").append(html); // This will be the div where our content will be loaded } }); return false; } </script>Каждый раз, когда пользователь прокручивает страницу до нижней границы, значение счетчика возрастает и включает передачу номера страницы в функцию wp_infinitepage() в рамках файла functions.php из нашей темы оформления. При помощи функций scroll и loadArticle мы можем осуществить вызов функции ajax в нашей теме для WordPress; но результат не отобразится, если мы не поместили файл цикла в папке с нашей темой оформления.
Шаг 4. Настраиваем тему оформления
Наиболее важный этап: нам надо настроить значение div , которое содержит новый контент, запрашиваемый функцией ajax . В теме оформления Twenty Ten уже есть div , который мы можем использовать. Этот div имеет значение id="content" , поэтому мы укажем div id в нашей функции ajax . Если вы для оформления используете другие темы, которые не оформляют цикл в div , вы просто можете оформить функцию цикла так, как это сделано в приведенном фрагменте кода, чтобы получить аналогичный результат:
<div id="content"> loop content </div>Далее нам понадобится файл цикла . В теме Twenty Ten уже есть файл цикла, вот одна из причин, почему я и взял эту тему для нашего сегодняшнего урока. Если у вас в теме нет файла loop.php , просто создайте новый файл цикла и скопируйте функцию цикла в рамках файла index.php в ваш новый файл, а затем новый файл цикла загрузите в папку с темой.
Для всех, кто использует тему Twenty Ten , можно еще "закомментировать" деление на страницы в рамках файла, потому что нам оно больше не понадобится (изучите исходный файл руководства для того, чтобы узнать, как это правильно сделать).
Шаг 5. Добавляем загрузчик Ajax
Это действие — необязательное, чтобы просто "украсить" нашу бесконечную прокрутку страниц. Для этого мы добавим образ загрузчика ajax к нижней границе нашей страницы. Для этого просто вставьте следующий фрагмент кода в ваш файл footer.php :
<a id="inifiniteLoader">Loading... <img src="<?php bloginfo('template_directory'); ?>/images/ajax-loader.gif" /></a>а затем вставьте следующий CSS -код в лист стилей темы:
a#inifiniteLoader{ position: fixed; z-index: 2; bottom: 15px; right: 10px; display:none; }Далее надо дописать пару строк кода в нашу функцию jQuery , чтобы показать и скрыть элемент загрузчика ajax :
<script type="text/javascript"> jQuery(document).ready(function($) { var count = 2; $(window).scroll(function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()){ 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>Загрузчик ajax будет отображаться сразу, как только пользователь достигнет нижней границы на странице, и сразу скроется, как только завершится ajax-запрос на показ новой порции постов.
Шаг 6. Дополнительные ограничения для улучшения бесконечного механизма прокрутки
Мы написали вполне рабочий механизм бесконечной прокрутки, но кое-чего ему не хватает. Эта функция будет срабатывать каждый раз, как только пользователь достигает " дна " страницы, даже если постов уже больше нет. А вот такого эффекта нам совсем не надо. Потому мы добавим настройку, которая будет контролировать режим отображения постов, и если постов уже больше не осталось, то действие "бесконечной" прокрутки будет прекращаться :
<script type="text/javascript"> 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++; } }); </script>Мы дописали var total в функцию: она возвращает суммарное число страниц, доступных для просмотра на нашем сайте. Таким образом каждый раз перед срабатыванием функции бесконечной прокрутки будет производиться проверка, не исчерпался ли лимит постов и не достигнуто ли максимальное число страниц на данном сайте.
Еще нам надо добавить ограничение, которое указывает, где именно применяется данная функция: на главной странице, на страницах архива или может в поиске — но не в рамках 1 поста или отдельно взятой страницы блога. Потому нам понадобится довольно простой PHP -параметр функции if else в коде jQuery :
if (!is_single() || !is_page()): // our jQuery function here endif;Вот и все, что вам понадобится, чтобы создать эффект бесконечной прокрутки на вашем сайте. Пожалуйста, пользуйтесь данным руководством, а также файлами-исходниками и примерами кода из данного поста для того, чтобы создать свое оформление такого рода. Все файлы и примеры в этом посте приведены на основе темы Twenty Ten для WordPress.