Как добавить кнопку «показать еще» в WordPress?

На сайтах с большим количеством контента обычно имеется пагинация. Это означает, что для просмотра старого контента посетитель переходит на страницы 2,3,4… или нажимает ссылки “Предыдущие…/Следующие…”

Чтобы быстрее находить нужный материал на сайте, посетителям было бы проще отображать старые публикации на той же странице. Это выглядит так. Дойдя в самый конец списка записей, пользователь увидит кнопку “Показать еще…” После того, как он ее нажмет, перед ним появится “пачка” предыдущих материалов сайта.

Согласитесь, это очень удобно.

Как добавить кнопку «показать еще» в 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]. Если захотите добавить шорткод в шаблон темы, то используйте следующую конструкцию:

<?php echo do_shortcode('[ajax_load_more]'); ?>

Лучший шаблон с бесконечным скроллом

Вместо того чтобы добавлять в шаблон скрипт и настраивать макет так, чтобы ничего не поехало, можно взять готовую русскоязычную тему JournalX с бесконечной прокруткой. В ней данная опция также реализована посредством ajax. При этом код просто “летает” и не нагружает сервер.

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

Читайте подробный разбор всех возможностей JournalX или сразу забирайте с промиком.

Промокод на JournalX

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