amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}

Бесконечная и постраничная навигация WordPress – создаём пагинацию

Пагинация – это постраничная навигация. В современном веб-дизайне она может быть оформлена по-разному. Из распространённых методов создания пагинации следует отметить следующее:

  • Стандартную постраничную навигацию – когда внизу каждой страницы выводятся нумерованные ссылки на другие страницы или просто кнопки «Назад» и «Вперёд».
  • Бесконечная автоматическая навигация – когда записи и следующие страницы автоматически подгружаются по мере прокрутки скролла.
  • Бесконечная ручная навигация – когда записи со следующих страниц подгружаются после нажатия пользователем специальной кнопки.

В этой статье мы расскажем вам, как реализовать пагинацию всех трёх типов с помощью одного плагина.

Постраничная навигация плагином Ajax Pagination and Infinite Scroll

Вот такое длинное и говорящее само за себя название плагина, который реализует бесконечную и постраничную навигацию. Надо заметить, что он достаточно лёгкий, не нагружает сайт слишком сильно, так что не повлияет на продвижение негативно. Скачайте, установите и активируйте плагин, потом перейдите в его опции, которые находятся в пункте консоли «Настройки» и подпункте «Ajax Pagination settings». Здесь имеются следующие опции:

  • Theme Defaults. Выбирается шаблон, к которому будет применена бесконечная или постраничная навигация. В выпадающем списке имеются все загруженные шаблоны. Также надо заметить, что этот плагин поддерживает и шаблоны, написанные под плагин WooCommerse. О нём мы рассказывали здесь.
  • Posts Selector, Navigation Selector и Next Selector. Эти поля должны заполняться автоматически при выборе того или иного шаблона, к которому будет применяться бесконечная или постраничная навигация. Это CSS селекторы из таблицы стилей, которые оформляют тот иной элемент сайта. Так как можно ввести любые данные, можно оформить какие-то элементы по собственному дизайну, создав свой селектор в CSS.
  • Paging Type. Выбирается тип пагинации. Всего их три: Infinite Scroll – бесконечная автоматическая загрузка, Load More Button – бесконечная ручная и Pagination – постраничная навигация.
  • Infinite Scroll Buffer. Если выбрана автоматическая бесконечная прокрутка, то этот параметр показывает, за сколько пикселей до конца страницы начнут подгружаться записи со следующей страницы навигации.
  • Load More Button Text. Если выбрана бесконечная ручная навигация, то здесь вписывается текст, который будет отображаться на кнопке для загрузки следующих постов, например «Загрузить ещё».

В плагине бесконечной и постраничной навигации есть ещё настройки, но мы их не рассмотрели, так как они не очень влиятельные. После сохранения всех изменений можно посмотреть, как работает этот плагин.

Адель Гадельшин

Recent Posts

Что такое отказы на сайте, почему они происходят, как их уменьшить

Отказы на сайте - это процент посетителей, которые покидают сайт после просмотра только одной страницы.…

8 месяцев ago

Как сделать запуск инфопродукта

Инфопродукт - это любой продукт, который содержит информацию, полезную для потенциальных клиентов. Это может быть…

8 месяцев ago

Как вебмастеру юридически обезопасить себя

Ведение сайта - это не только подержание его работоспособности и наполнение контентом. В последние годы…

8 месяцев ago

Папки WordPress: значение папок /wp-admin, /wp-includes и /wp-content

WordPress - это популярная система управления контентом (CMS), которая позволяет создавать и управлять веб-сайтами различной…

8 месяцев ago

Что такое сертификат Let’s Encrypt и стоит ли его устанавливать

Сертификат Let’s Encrypt - это бесплатный и открытый сертификат SSL/TLS, который позволяет защитить веб-сайт от…

8 месяцев ago

Защита WordPress от вирусов

WordPress - это одна из самых популярных систем управления контентом в мире, которая используется миллионами…

9 месяцев ago