The posts pagination: the_posts_pagination() | Function | WordPress Developer Resources

WordPress: Причудливая навигация по сайту с помощью the_posts_pagination()

Только после выпуска WordPress 4.1 создание навигации по блогу с разбивкой на страницы было довольно громоздким делом, которое требовало либо определенных усилий разработчиков, либо плагина. WordPress 4.1 оставляет это в прошлом. Это позволяет вам создать навигацию по блогу с разбивкой на страницы, добавив один единственный тег в тему index.php . Теперь вам нужно немного CSS, чтобы получить достойный дизайн. И это все. Разработка навигации занимает не более 10 минут, а результат просто потрясающий. Давайте подробнее рассмотрим возможности нового тега шаблона. В нашем примере мы используем тему Twenty Twelve.

Исходное состояние: Тема Twenty Twelve WordPress

Тема Twenty Twelve не обеспечивает навигацию по блогам с разбивкой по страницам. Вместо этого вы можете перемещаться по страницам блога, используя довольно простую навигацию «Старые сообщения/Новые сообщения». Twenty Twelve — далеко не единственная тема, использующая такую ​​навигацию. Скриншот показывает начальное состояние:

Эта навигация может быть преднамеренной, но она некрасива и не удобна для пользователя, так как вы не можете с первого взгляда увидеть, на какой странице блога вы находитесь. Поэтому сегодня мы покажем вам, как создать навигацию с разбивкой на страницы. До выпуска WordPress 4.1 для разбиения на страницы требовалась специально закодированная функция или плагин, такой как WP-PageNavi.

Разбивку на страницы также можно было реализовать с помощью тега шаблона paginate_links() ; однако этот тег, существующий с версии WordPress 2.1.0, оказался одним из самых тщательно охраняемых секретов. Я не могу вспомнить ни одного случая, когда он использовался. В этой статье рассматривается недавно введенный тег the_post_pagination() .

Шаг 1: локализация и деактивация старой навигации по блогу

Прежде чем мы начнем настраивать новую навигацию, нам нужно сначала деактивировать и локализовать старую навигацию по блогу темы Twenty Twelve. Для этого откройте файл темы index.php в любом редакторе HTML. В строке 28 вы найдете тег ·twentwelve_content_nav( ‘nav-below’) , отвечающий за отображение старой навигации. Добавьте две косые черты после открытия php, чтобы деактивировать функцию.

При обновлении веб-сайта вы заметите, что навигация по страницам блога исчезла.

Шаг 2. Интеграция тегов нового шаблона

Поместите новый тег под деактивированным тегом. Подробнее о том, где (строка 30) и как установить тег, смотрите на скриншоте.

Результат нового тега в исходном коде

Теперь у нас есть разбитая на страницы навигация по блогу в представлении темы, которая выглядит следующим образом:

Вот как код выглядит в исходном коде HTML:

Мы получаем Элемент nav и элемент div , содержащий элементы a и элемент span . Немного CSS превращает этот код в красивую навигацию.

Шаг 3: Настройте тег the_posts_pagination()

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

Требуемый и немного расширенный тег выглядит следующим образом:

HTML-код, созданный этим расширенным тегом шаблона, именно то, что нам нужно: замечательный список.

Новая навигация по списку блогов в представлении темы:

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

Исправление неполного перевода

При более внимательном рассмотрении HTML-вывода тега шаблона the_posts_pagination() вы заметите, что он переведен не полностью. Это не идеально, но это можно быстро исправить. Как уже упоминалось, the_posts_pagination() основан на существующем теге paginate_links() , поэтому вы можете использовать его параметры. Просто добавьте в тег шаблона следующее:

После обновления сайта вы получите хорошо переведенную навигацию. Если вы хотите использовать специальные символы, как я, вот полезный веб-сайт для всех специальных символов HTML.

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

Шаг 4. Создайте необходимый CSS

/* =Блог-Навигация - Разбиение на страницы
-------------------------------------------------------------- */
nav.pagination {
положение: родственник;
дисплей: блок;
}
.nav-ссылки {
положение: родственник;
}
.nav-ссылки ул {
маржа: 0;
заполнение: 0,
}
.nav-ссылки ул ли {
стиль списка: нет;
поле: 0 10px 0 0;
заполнение: 0;
плыть налево;
}
.nav-links ul li span.current {
отступ: 10px 12px;
фон: #777;
граница: 1px сплошная #777;
дисплей: блок;
высота строки: 1;
радиус границы: 4px;
цвет: #fff;
}
. nav-links ul li a {
отступ: 10px 12px;
фон: #ддд;
цвет: #666;
текстовое оформление: нет;
граница: 1px сплошная #ccc;
радиус границы: 3px;
дисплей: блок;
высота строки: 1;
}
.nav-links ul li a:hover {
фон: #999;
цвет границы: #888;
цвет: #fff;
}
 

Окончательное состояние: Завершенная навигация по блогу с разбивкой на страницы

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

Заключение

Вы можете создать привлекательную навигацию по блогу с разбивкой на страницы за 15 минут, используя один единственный тег шаблона. Разработка занимает меньше времени, и вам больше не нужен плагин.

Ссылки по теме

• WP-PageNavi – загрузка с WordPress.org
• Кодекс WordPress: Справочник по функциям/ссылки на страницы
• Веб-сайт с наиболее важными специальными символами HTML
• Пример CSS как суть
• Кодекс WordPress: дочерние темы

(дпэ)

Эта статья была первоначально опубликована 24 апреля 2015 г. и обновлена ​​21 октября 2021 г.

Учитесь жить и работать умнее, а не усерднее!

Получайте наши лучшие статьи каждую неделю прямо в свой почтовый ящик.

АВТОР

Андреас Хехт

Андреас Хехт — журналист и специалист по WordPress и безопасности WordPress. Он бродит по сети с момента ее создания. Он опубликовал электронную книгу по безопасности WordPress, на которую вы, возможно, захотите взглянуть.

Виджет разбивки на страницы постов — неограниченное количество элементов для Elementor

Создавайте сложные веб-сайты за меньшее время.

Pro

Карусель сообщений

Настройте виджет карусели сообщений на свои веб-сайты Elementor…

Посмотреть демо

Бесплатно

Lordicon: анимированные иконки

Мощная премиальная библиотека анимированных иконок с более чем 1500 анимированными…

Посмотреть демоверсию

Pro

Карусель продуктов WooCommerce

Помогает продемонстрировать ваши продукты Woocommerce на любой странице Elementor. ..

Посмотреть демо

Бесплатно

Карусель карточек

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

Просмотреть демонстрацию

Pro

Динамическая карусель шаблонов

Виджет позволяет создавать циклический элемент, как один…

Просмотреть демонстрацию

Pro

Аккордеон изображений

Неограниченные возможности дизайна для изменения стилей в соответствии…

Просмотреть демо

Pro

Боковое меню

Создание расширенных меню WordPress для управления стилем для…

Просмотреть демо

Pro

Открытка Слайдер

Настройте виджет слайдера открытки для своих веб-сайтов Elementor…

Просмотреть демонстрацию

Pro

Динамическая сетка шаблонов

Позволяет создавать циклический элемент так же, как одиночный шаблон.

..

Посмотреть демо

Pro

Сетка сообщений

Виджет сетки сообщений можно использовать для размещения ваших сообщений рядом с… способ настроить простой…

Демонстрация

Pro

Вкладки со значками

Вкладки со значками помогают отображать содержимое веб-сайта в интерактивном…

Виджет Load More / Infinite Scroll дает вам возможность…

Посмотреть демо

Pro

Поиск AJAX

Самый быстрый виджет поиска AJAX для вашего сайта WordPress. Легко…

Посмотреть демо

Бесплатно

Flip Box

Флип-боксы имеют полностью настраиваемое содержимое спереди и сзади…

Посмотреть демо

Бесплатно

Блоки сообщений

Блоки сообщений

макет сетки для отображения вашего блога…

Посмотреть демо

Бесплатно

Post Carousel Lite

Отличный способ продемонстрировать сообщения в интерактивной карусели. .. it…

Посмотреть демо

Бесплатно

Анимированный значок гамбургера

Этот виджет имеет 9 различных эффектов на выбор. Пока вы…

Посмотреть демо

Бесплатно

Числовое поле

Виджет числового поля поможет вам создать потрясающие числовые поля…

Посмотреть демо

Pro

Таблица без ограничений

Виджет таблицы без ограничений дает вам самый простой способ создать таблицу…

Посмотреть демонстрацию

Pro

Фильтр вкладок

Используйте виджеты Tab Filters с любым из наших виджетов сообщений, чтобы помочь…

View Demo

Pro

Сетка журнала сообщений

Создавайте динамические макеты журнала сообщений для ваших сообщений WordPress..

Посмотреть демонстрацию

Pro

Фоновый переключатель

Дополнение для фонового переключателя позволяет настроить классные блоки контента.