Бесконечная нумерация прокрутки вдохновлена Facebook и Twitter. Это просто нумерация страниц, когда пользователю нужно будет прокрутить страницу вниз, чтобы прочитать больше статей. Это один из способов улучшить взаимодействие с пользователем на веб-сайте, но если вы сделаете это неправильно, это также может дать плохой опыт. Если вы собираетесь реализовать этот тип нумерации страниц, убедитесь, что вы не включили важные ссылки внизу страницы. Причина этого заключается в том, что когда пользователь пытается нажать на эту конкретную ссылку, страница автоматически загружает новые записи и каждый раз выталкивает ссылку с экрана. Вы можете установить фиксированную область нижнего колонтитула или сделать боковую панель видимой все время.
Ищете быстрое решение?
Если вы ищете быстрое решение, на Envato Market есть большая коллекция скриптов и плагинов с бесконечной прокруткой . Начиная с нескольких долларов, это отличный способ реализовать что-то за несколько минут, а создание с нуля займет гораздо больше времени!
Независимо от того, хотите ли вы найти решение для WordPress, Magento, WooCommerce или ваших собственных настроек, у вас есть что-то для вас!
Шаг 1 Запланируйте свою нумерацию страниц
Важно, чтобы вы планировали заранее свою нумерацию страниц, где вы хотите включить ее, и как вы собираетесь ее обрабатывать. Обычный способ разбивки на страницы — перечисление номеров страниц внизу страницы. Однако, используя этот метод, в конце списка статей больше не будут появляться номера страниц, так как они больше не нужны. Эту пагинацию можно использовать на всех темах, если вы не включите в раздел нижнего колонтитула много информации, поскольку она может не дать желаемого эффекта.
Наша страница с бесконечной прокруткой будет использовать функциональность jQuery и ajax, чтобы сделать запрос и получить больше статей, которые будут показаны пользователю. В этом уроке я буду использовать тему Twenty Ten в качестве примера, здесь вы можете посмотреть рабочую демонстрацию бесконечной прокрутки.
Шаг 2 Создание функции Ajax
Мы будем использовать функциональность ajax WordPress для вызова этой нумерации страниц. Сначала мы подготовим базовую функцию для нашей нумерации страниц, пожалуйста, вставьте следующий код в functions.php вашей темы
|
01
02
03
04
05
06
07
08
09
10
11
|
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, нам нужен следующий код.
|
1
2
|
add_action(‘wp_ajax_infinite_scroll’, ‘wp_infinitepaginate’);
add_action(‘wp_ajax_nopriv_infinite_scroll’, ‘wp_infinitepaginate’);
|
Действие по умолчанию для WordPress ajax было бы wp_ajax_(our action name) , следовательно, почему имя infinite_scroll используется в примере кода. Нам нужно добавить два действия: одно для зарегистрированных пользователей, а другое для пользователей, которые не вошли в систему.
Далее нам нужно построить функцию ajax, которая будет отправлять две переменные, которые нам нужны для нашей нумерации страниц. Вы можете использовать ловушки WordPress для вставки этой jjuery-функции ajax или сразу же вставить ее в заголовок вашей темы.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<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);
}
});
return false;
}
</script>
|
Это будет основной вызов ajax, который мы собираемся сделать, и мы используем «infinite_scroll» в качестве имени нашего действия. WordPress автоматически вызовет нашу функцию wp_infinitepaginate(); потому что мы определяем это в нашей теме functions.php ранее.
Шаг 3 Определите, когда пользователь прокручивает до нижней части страницы
Чтобы включить нумерацию страниц с бесконечной прокруткой, нам нужно определить, когда пользователь достигнет нижней части страницы. Это может быть легко достигнуто с помощью jQuery, используя следующий код.
|
1
2
3
4
5
6
7
|
<script type=»text/javascript»>
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() — $(window).height()){
// run our call for pagination
}
});
</script>
|
Теперь мы можем знать, когда пользователь достигнет нижней части страницы. Далее нам нужно вызвать функцию loadArticle внутри функции прокрутки. Я добавляю счетчик для использования в качестве номера страницы нашего звонка.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<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);
}
});
return false;
}
</script>
|
Каждый раз, когда пользователь прокручивает страницу до конца, счетчик увеличивается, и это позволяет нам передавать номер страницы нашей функции wp_infinitepage() functions.php нашей темы. С помощью функций scroll и loadArticle теперь мы можем выполнять вызов функции ajax в нашей теме WordPress, но результат может не отображаться, если мы не определили файл цикла в нашей папке темы.
Шаг 4 Настройка нашей темы
Самое главное, нам нужно настроить div, который будет содержать новый контент, запрошенный с помощью нашей функции ajax. В теме Twenty Ten уже есть div, который мы можем использовать, это div с id="content" поэтому мы включим div id в нашу функцию ajax. Если вы используете другие темы, которые не заключают свой цикл в элемент div, вы можете просто обернуть функцию цикла, как в примере кода ниже, для достижения того же результата.
|
1
|
<div id=»content»> loop content </div>
|
Далее нам понадобится файл цикла для этого. В тему «Двадцать десять» уже включен файл цикла, и это главная причина, по которой я выбрал «Двадцать десять» для этого примера, потому что это проще для тех, кто хочет ссылаться на это позже. Если у вас нет файла loop.php , просто создайте новый файл цикла и скопируйте функцию цикла внутри вашего index.php в новый файл и загрузите его в папку вашей темы. Для тех, кто использует тему «Двадцать десять», вы хотели бы закомментировать пагинацию, включенную в файл, потому что она нам больше не нужна (пожалуйста, обратитесь к исходному файлу учебного пособия о том, как это сделать).
Шаг 5 Добавление Ajax Loader
Это необязательно, просто чтобы придать приятный штрих нашей бесконечной пагинации прокрутки. Мы добавим изображение загрузчика ajax, когда мы дойдем до нижней части страницы. Вы можете добавить следующий код в свой footer.php
|
1
|
<a id=»inifiniteLoader»>Loading… <img src=»<?php bloginfo(‘template_directory’); ?>/images/ajax-loader.gif» /></a>
|
а затем добавьте следующий CSS в таблицу стилей.
|
1
2
3
4
5
6
7
|
a#inifiniteLoader{
position: fixed;
z-index: 2;
bottom: 15px;
right: 10px;
display:none;
}
|
Далее мы добавим несколько строк кода в нашу функцию jQuery, чтобы показать и скрыть этот элемент загрузчика ajax.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<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);
}
});
return false;
}
});
</script>
|
Загрузчик ajax будет показан, как только пользователь достигнет нижней части страницы, и будет скрыт, когда запрос ajax завершится.
Шаг 6: Дополнительное ограничение для улучшения бесконечного свитка
До сих пор у нас уже работал бесконечный свиток, но чего-то не хватает. Функция будет срабатывать каждый раз, когда пользователь переходит на нижнюю страницу, даже если больше нет записей для отображения. Это то, чего мы не хотим иметь. Мы добавим элемент управления в нашу функцию прокрутки, поэтому, когда больше не будет отображаться страниц, он остановится.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<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>
|
Мы добавляем в функцию новую сумму итогов, которая будет возвращать общее количество страниц, доступных на нашем сайте. Это будет использоваться для гарантии того, что на страницу не будут поступать дополнительные вызовы, если достигнута максимальная страница. Еще одна вещь, которую мы хотели бы добавить, — это ограничение на загрузку этой функции. Мы просто хотим, чтобы это было на нашей домашней странице, в архиве или, возможно, в поиске, но не на нашем отдельном посте и странице. Итак, мы обернули простой PHP, if else функция в нашем коде jQuery
|
1
2
3
|
if (!is_single() || !is_page()):
// our jQuery function here
endif;
|
Это почти все, что вам нужно для разбивки на страницы, пожалуйста, обратитесь к исходным файлам, например, коду, используемому в этом руководстве. Файлы основаны на теме Twenty Ten.
Вывод
К настоящему времени вы сможете использовать эту функцию в любой своей теме, если у вас есть какие-либо дополнительные предложения или вопросы относительно этого руководства, не стесняйтесь оставлять комментарии или связываться со мной через твиттер . Хотелось бы поделиться любыми идеями с вами, ребята.