WordPress infinite scroll ajax load more как настроить

Бесконечная прокрутка для сайта WordPress

Просмотров: 2 019

Привет, друзья! Вы хотите добавить бесконечную прокрутку на свой сайт или блог? Тогда читайте как это сделать. Бесконечная прокрутка 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

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

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

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

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

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

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

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

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

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

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

WordPress Infinite Scroll – Ajax Load More

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

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

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

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

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

Infinite Scroll and Ajax Load More

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

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

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

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

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

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

YITH Infinite Scrolling WooCommerce

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

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

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

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

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

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

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

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

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

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

Источник

Как добавить бесконечный свиток на свой сайт WordPress (шаг за шагом)

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

Бесконечная прокрутка — это метод веб-дизайна, который автоматически загружает содержимое вашей следующей страницы, когда пользователи достигают нижней части страницы. Это позволяет пользователям видеть больше контента в вашем блоге, не нажимая на нумерацию страниц или кнопку «Загрузить больше».

В этой статье мы покажем вам, как легко добавить бесконечную прокрутку в ваш блог WordPress (шаг за шагом).

Что такое бесконечный свиток?

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

Традиционно пользователи должны были нажимать кнопки «Далее», «Предыдущие» или номера страниц, чтобы увидеть старые статьи блога.

При использовании краткого обозначения AJAX для асинхронного Javascript и XML веб-страницы могут обмениваться данными с сервером без перезагрузки всей страницы. Это позволяет веб-приложениям обрабатывать запросы пользователей и доставлять данные без обновления.

Лучшими примерами дизайна бесконечной прокрутки являются популярные сайты социальных сетей, такие как Facebook, Twitter, Instagram, Pinterest и другие. Если вы используете какой-либо из них, то вы знаете, как бесконечно загружается контент на вашей временной шкале в социальных сетях.

Подходит ли бесконечная прокрутка для каждого сайта?

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

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

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

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

Но с другой стороны, это также может усложнить навигацию по сайту. При постоянной загрузке трудно определить, где (на какой странице) находится статья в блоге. Некоторые пользователи даже не могут видеть множество статей одновременно.

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

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

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

Если вы решили добавить бесконечную прокрутку в свой блог WordPress, то вы можете сделать это легко. Мы покажем вам несколько плагинов, которые вы можете использовать, чтобы вы могли выбрать тот, который лучше всего соответствует вашим потребностям.

Добавление бесконечной прокрутки в ваш блог WordPress с помощью Catch Infinite Scroll

Первое, что вам нужно сделать, это установить и активировать плагин Catch Infinite Scroll. Для более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.

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

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

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

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

После этого появляется опция «Изображение», в которую можно добавить значок загрузчика контента. По умолчанию у него есть загрузчик GIF-изображения. Если у вас есть лучшая картинка, то вы можете изменить ее.

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

После этого нажмите кнопку «Сохранить изменения».

Это оно! Бесконечная прокрутка теперь активна в вашем блоге. Вы можете посетить свой блог и увидеть бесконечную прокрутку в действии.

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

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

1. Ajax Загрузить больше

Подобно Catch infinite Scroll, плагин Ajax Load More также позволяет добавлять бесконечные прокрутки и нажимаемые кнопки Load More на ваш сайт WordPress.

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

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

Это потребует некоторых навыков кодирования, чтобы применить бесконечную прокрутку с этим плагином.

2. YITH Бесконечная прокрутка

YITH Infinite Scrolling — простая альтернатива плагину Ajax Load More или Catch Infinite Scroll.

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

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

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

Если вам понравилась эта статья, пожалуйста, подпишитесь на наш канал YouTube для видеоуроков WordPress. Вы также можете найти нас на щебет и фейсбук.

Пост «Как добавить бесконечный свиток на ваш сайт WordPress» (шаг за шагом) впервые появился на WPBeginner.

Источник