(Последнее обновление: 05.02.2020)

Привет, друзья! Вы хотите добавить бесконечную прокрутку на свой сайт или блог? Тогда читайте как это сделать. Бесконечная прокрутка WordPress позволяет автоматически загружать следующий набор записей, когда посетители приближаются к нижней части главной страницы или страницы записей. Так посетители могут прочитать больше записей без дополнительных усилий.

Как добавить бесконечную прокрутку на сайт WordPress?
Постраничная навигация и бесконечная прокрутка в WordPress

Бесконечная прокрутка постов WordPress устраняет необходимость разбивки на страницы в вашем блоге или на сайте электронной коммерции.

Бесконечная прокрутка (скроллинг) WordPress

Это метод веб-дизайна, который автоматически загружает содержимое следующей страницы сайта, когда пользователи достигают нижней части страницы при прокрутке. В итоге посетители видят больше контента, не нажимая на нумерацию страниц или кнопку "Загрузить еще". Это облегчает просмотр. Использует технологию AJAX.

Бесконечная прокрутка является практически обязательным элементом новостных интерфейсов. Когда пользователь не ищет что-то конкретное, ему нужно просмотреть множество тем, чтобы найти ту, которая понравится. Самые популярные сайты социальных сетей с бесконечной прокруткой это - Facebook, Instagram, Twitter, Pinterest и другие.

Функциональность бесконечной прокрутки может оказать положительное влияние на вовлеченность пользователей и поведенческие факторы. Но правда в том, что бесконечный скроллинг на сайте подходит не для всех. Есть плюсы и минусы бесконечной прокрутки.

Плюсы бесконечной прокрутки:

  • Повышение вовлеченности пользователей - бесконечная прокрутка помогает удерживать людей на вашем сайте в течение более длительных периодов времени. Больше просмотров страниц;
  • Упрощенное чтение. Благодаря бесконечной прокрутке, пользователям будет проще находить контент, о котором они не знали, что они есть на вашем сайте, поскольку они смогут быстро и легко загружать старый контент;
  • Улучшенная навигация по сайту - бесконечная прокрутка делает просмотр вашего сайта простым - все, что вам нужно сделать, это прокрутить страницу вниз;
  • Прокрутка хороша для мобильных устройств.

Минусы бесконечного скроллинга:

  • Отсутствие раздела нижнего колонтитула.  При переходе к бесконечной прокрутке вы не можете добраться до футера. Естественно, ничего страшного тут нет, но надо принять это во внимание, если вы используете подвал вашего сайта для получения важной информации. Тем не менее, липкий футер/подвал решает эту проблему;
  • Нет ощущения "завершения".  Пользователям на самом деле нравится чувство "завершения", когда они достигают конца страницы. Бесконечная прокрутка делает это ощущение невозможным.

Статистика показывает, что люди читают больше записей, когда бесконечная прокрутка внедрена на сайт. И поэтому, я надеюсь, что вам понравится данная функция!

Как добавить бесконечную прокрутку на сайт WordPress?

Если вы решили добавить бесконечную прокрутку в свой блог WordPress, то вы можете сделать это легко. Я покажу вам несколько плагинов, которые вы можете использовать на своём веб-ресурсе. Выбирайте тот, который лучше всего соответствует вашим потребностям. Реализовать бесконечный скроллинг на сайте WordPress можно с помощью бесплатных плагинов. Например:

  1. WordPress Infinite Scroll – Ajax Load More;
  2. Catch Infinite Scroll;
  3. YITH Infinite Scrolling;
  4. Infinite Scroll and Ajax Load More.

Для примера возьмём простой плагин бесконечной прокрутки для WordPress - Catch Infinite Scroll. 

Плагин Catch Infinite Scroll

Бесконечная прокрутка на WordPress с помощью плагина Catch Infinite Scroll
Плагин Catch Infinite Scroll

Catch Infinite Scroll - это плагин WordPress, который позволяет добавить магию бесконечной прокрутки с помощью нескольких настроек на вашем сайте. Плагин поможет увеличить вовлеченность пользователей на вашем сайте ВордПресс. Вдохновением для создания Catch Infinite Scroll является бесконечный свиток модуля Jetpack.

Плагин будет загружать контент автоматически при прокрутке страницы или вы также можете добавить кнопку "Загрузить еще", чтобы загрузить больше контента.

Первым делом вы должны установить плагин Catch Infinite Scroll стандартным способом. То есть, из вашей админки:

Catch Infinite Scroll - плагин WordPress, который добавит магию бесконечной прокрутки
Установка и активация плагина

После активации модуля, перейдите в одноимённый новый раздел Catch Infinite Scroll для того, чтобы настроить параметры плагина. Нам понадобится только вкладка Dashboard:

Страница с настройками модуля бесконечной прокрутки в
Настройка Catch Infinite Scroll

Чтобы включить бесконечную прокрутку на своем веб-сайте выберите в строке Load On (Trigger on) из выпадающего списка функцию Scroll. Функция Click это - загрузить еще при нажатие кнопки. Scroll - будет автоматически загружать посты при прокручивании страницы вниз:

Автоматически загружать контент при прокручивании страницы вниз (опция Scroll)
Выбрать из списка Scroll

Далее вы можете увидеть селектор навигации, следующий селектор, селектор контента и селектор элементов. Вам не нужно ничего менять в этих параметрах, потому что настройки по умолчанию работают достаточно хорошо.

В строке Image, у вас есть возможность загрузить пользовательский значок загрузчика контента. А также в строке Load More Text и Finish Text указать свой текст на русском языке:

Это сообщение будет отображаться для посетителей сайта WordPress
Параметры плагина

Когда вы закончите настройку параметров, нажмите кнопку "Сохранить изменения". Для восстановления всех настроек плагина по умолчанию нужно активировать настройку Check to reset.

Обратите внимание, темы WordPress у всех разные. Catch Infinite Scroll хорошо работает с большинством тем WordPress. Однако, это может не сработать с некоторыми шаблонами. В таком случае вы можете использовать любой из следующих плагинов WP с бесконечной прокруткой.

Альтернативные плагины WordPress для добавления бесконечной прокрутки/скроллинга в WordPress.

WordPress Infinite Scroll – Ajax Load More

Идеальное решение для бесконечной прокрутки и отложенной загрузки для вашего сайта на платформе WordPress. Ajax Load More может бесконечно прокручивать любой тип контента, предлагаемый WordPress - от сообщений в блоге до многостраничного контента продуктов WooCommerce.

Вам не нужно никаких дополнительных настроек, если вы просто хотите использовать плагин для стандартной бесконечной прокрутки. 

Как добавить бесконечную прокрутку на WordPress
Бесплатный плагин Ajax Load More

Ajax Load More - это плагин для WordPress с бесконечной прокруткой для отдельных сообщений, страниц, комментариев и другого с помощью запросов на основе Ajax.

Создавайте сложные пользовательские запросы WordPress с помощью конструктора шорткодов Ajax Load More, а затем добавляйте сгенерированный шорткод на свою страницу с помощью редактора контента или непосредственно в файлы шаблонов.

Решение бесконечной прокрутки постов для вашего сайта на CMS WordPress
Глобальные настройки WordPress Infinite Scroll

Ajax Load More совместим для бесконечной прокрутки с популярными плагинами электронной коммерции, такими как WooCommerce и Easy Digital Downloads.

Infinite Scroll and Ajax Load More

Бесконечная прокрутка или загрузить больше сообщений по нажатию кнопки без нумерации страниц.

Бесконечная прокрутка WordPress с помощью плагина
Бесконечная прокрутка и Ajax загрузить больше

Используя бесконечную прокрутку, вы можете перечислить все посты на одной странице, просто прокрутив страницу вниз.

Другой вариант - вы нажимаете кнопку "Загрузить еще" с помощью шорткода, при нажатии на кнопку "Загрузить больше" на той же странице отображается список сообщений.

Этот плагин используется на всех страницах листинга блога, таких как архив, категория и автор.

Для бесконечной прокрутки просто установите плагин и сделайте настройки
Настройки Infinite Scroll

Полностью настраиваемый для адаптации к вашему сайту и теме. Вы можете изменить изображение загрузчика из настроек. Также для кнопки «Загрузить больше» вы можете изменить цвет кнопки и текст.

И последний плагин для интернет магазина.

YITH Infinite Scrolling WooCommerce

Добавьте бесконечную прокрутку к архивному сообщению или странице интернет магазина.

Бесконечная прокрутка записей плагин WordPress
Плагин для ВордПресс

Бесконечная прокрутка для WooCommerce - плагин для WordPress. Что может быть лучшим решением, чем свобода предлагать своим клиентам весь контент, просто прокручивая страницу вниз? Вы сократите время загрузки следующих страниц и ваши клиенты смогут увидеть все результаты сразу.

Продукты загружаются в Ajax, а плагин работает на страницах блогов и магазинов. Вы можете включить плагин в разделе YITH Plugins - Infinite Scrolling.

Бесплатная версия позволяет включить бесконечную загрузку на одном участке сайта
Настройки бесплатной версии YITH Infinite Scrolling

Любой может легко настроить бесконечную прокрутку с помощью этого плагина. Тем не менее, он не имеет кнопки "Загрузить еще", которая включена в другие плагины упомянутых выше.

И в заключение

Самым значительным преимуществом техники бесконечной прокрутки является удобство просмотра. Пользователям не нужно нажимать на ссылки нумерации страниц вручную. Контент загружается быстро с помощью прокрутки и поддерживает заинтересованность ваших пользователей.

Бесконечная прокрутка - это только один из многих вариантов дизайна, который может улучшить взаимодействие с пользователем и его удержание на сайте. Тем не менее, это не является оптимальным для каждого сайта. Все зависит от того, чего вы пытаетесь достичь с помощью конкретной страницы.

Для мобильных пользователей прокрутка более удобна, чем прикосновение к крошечным ссылкам на страницы.

Что вы думаете об этой технике? Вам это нравится? Вы бы использовали это? Поделитесь своими мыслями, используя раздел комментариев!

Я надеюсь, друзья, что этот пост помог вам узнать, как добавить бесконечный дизайн прокрутки в ваш любимый блог WP. Удачи всем и до новых встреч.