На ресурсах с внушительным объемом информации зачастую можно заметить систему пагинации. Это подразумевает, что для поиска старого контента пользователю нужно переходить на страницы 2, 3, 4… или использовать ссылки “Предыдущие…/Следующие…”.
Для более удобного поиска материалов на сайте было бы разумнее отображать старые публикации на одной странице. Это может выглядеть следующим образом: достигнув конца списка, пользователь увидит кнопку “Показать еще…”. Нажав на нее, он сможет просмотреть дополнительные записи.
Согласитесь, это довольно удобно.
Для реализации этой функции в WordPress можно использовать плагин, например, «Ajax Load More», который позволяет загружать записи на страницу без перезагрузки. После установки и активации плагина, следует настроить его параметры и добавить шорткод на нужной странице или в записи. Вы также можете изменить стиль кнопки с помощью CSS, чтобы она соответствовала общей теме вашего сайта.
Кроме того, в WordPress есть возможность внедрения кастомного кода, используя функции темы. Например, вы можете написать функцию, которая будет выводить дополнительные записи при клике на кнопку, и использовать AJAX для динамической загрузки контента. Это требует немного больше технических знаний, но позволит создать уникальный опыт для пользователей вашего сайта.
Не забудьте протестировать внедрение на различных устройствах, чтобы убедиться, что кнопка «Показать еще» работает корректно и удобно на мобильных и десктопных версиях вашего сайта.
Как добавить кнопку «показать еще» в WordPress?
Существует несколько методов для загрузки постов на странице, но давайте рассмотрим самый простой вариант — использование бесплатного плагина Ajax Load More.
Плагин Ajax Load More
Этот плагин создает шорткод, который необходимо добавить на страницу или запись. Здесь и будет осуществляться бесконечная прокрутка вывода постов. Если все записи будут загружены, плагин уведомит об этом. В случае, если в браузере пользователя отключен JavaScript, будет работать традиционная постраничная навигация. Однако сначала его необходимо настроить.
Во-первых, установите и активируйте плагин.
Затем перейдите в админ-панель по пути Ajax Load More -> Repeater Templates.
В этом разделе представлен код шаблона для вывода записей, т.е. так, как будут выглядеть загруженные посты. Вы имеете возможность изменить его в соответствии со своими требованиями. Для редактирования шаблона потребуется знание PHP и структуры WordPress.
Стоит отметить, что по умолчанию шаблон будет показывать только отрывки записей. Если необходимо вывести полный контент публикаций, замените функцию the_excerpt() на the_content().
Если вы решили внести изменения в шаблон, не забудьте сохранить новую версию, нажав кнопку Save Template.
Создание шорткода
Теперь перейдите в админ-часть Ajax Load More -> Shortcode Builder.
В этом разделе вы сможете создать шорткод, который будет инициировать процесс загрузки постов. Его нужно будет вставить в шаблон вашей активной темы WordPress.
Плагин предлагает множество настроек, позволяющих определить поведение и отображение загружаемых записей. Некоторые из них:
- Типы записей (вкладка Query Parameters -> Post Type) – выбор типов записей для загрузки (по умолчанию – Записи). Также доступны Страницы, Медиафайлы и пользовательские типы.
- Категории (вкладка Query Parameters -> Category) – выбор категорий записей для загрузки. Плагин по умолчанию выбирает все категории, но вы также можете исключить ненужные.
- Автор (вкладка Query Parameters -> Author) – выбор автора, чьи записи будут отображаться.
- Количество записей на странице (вкладка Query Parameters -> Posts Per Page) – число записей, которые будут загружены при обновлении.
- Пауза (вкладка Display Settings -> Pause) – управление поведением автоматической загрузки постов. false – автоматическая загрузка, true – загрузка по нажатию кнопки Load More.
- Прокрутка (вкладка Display Settings -> Scrolling) – автоматическая загрузка постов при прокрутке вниз страницы.
После того, как плагин будет настроен, вы увидите сгенерированный шорткод справа.
Теперь остается лишь вставить шорткод в нужное место на сайте. Если вы хотите добавить его в контент записи или страницы, откройте их на редактирование и вставьте [ajax_load_more]. Для добавления шорткода в шаблон темы используйте следующую конструкцию:
Если вы хотите глубже настроить внешний вид кнопки «показать еще», вы можете использовать дополнительные CSS-стили. Например, измените цвет фона и шрифта кнопки, добавьте отступы или обводку, чтобы сделать её более заметной на вашем сайте. Это можно сделать через раздел Дополнительные стили в настройках вашей темы или с помощью плагинов для кастомизации CSS.
Также учтите, что для лучшего пользовательского опыта важно тестировать работу кнопки на различных устройствах и браузерах, чтобы убедиться, что она функционирует должным образом и везде выглядит привлекательно.
Не забудьте обновить кэш вашего сайта, если используете кэширующие плагины, чтобы увидеть изменения сразу после их внесения.
Лучший шаблон с бесконечным скроллом
Вместо того чтобы добавлять скрипт в шаблон и настраивать его, чтобы всё работало корректно, можно воспользоваться готовой русскоязычной темой JournalX, в которой реализована функция бесконечной прокрутки. Эта опция также использует ajax, что позволяет избежать лишней нагрузки на сервер.
Шаблон JournalX для WordPress избавляет от ненужных сложностей и все функционирует “из коробки”, как в записях, так и в рубриках. При прокрутке страницы автоматически загружаются новые посты. Особого внимания заслуживает стильный дизайн и отсутствие громоздких фреймворков.
Промокод на JournalX
Кроме того, шаблон предлагает встроенные настройки для кастомизации внешнего вида, что позволяет адаптировать его под любые потребности вашего проекта. Вы можете легко менять шрифты, цвета и другие элементы дизайна. Также стоит отметить наличие адаптивной верстки, что обеспечивает корректное отображение на мобильных устройствах.
Важным аспектом является также оптимизация скорости загрузки. Благодаря современным методам кэширования и минимизации запросов к серверу, JournalX обеспечивает быструю загрузку страниц, что явно улучшает пользовательский опыт и положительно сказывается на SEO-показателях.