Как добавить нумерацию страниц в тему WordPress

Один из наших читателей недавно спросил нас, как добавить числовую нумерацию на страницу блога WPBeginner. По умолчанию темы WordPress и многие другие темы отображают ссылки на страницы, добавляя ссылки «Старые сообщения» и «Новые сообщения» внизу страниц архива WordPress. Однако есть много сайтов WordPress, использующих нумерацию страниц, например WPBeginner. По нашему опыту, цифровая нумерация страниц более удобна для пользователя, привлекательна и оптимизирована для SEO. Наиболее продвинутые фреймворки тем WordPress, такие как Genesis, имеют встроенную функциональность для добавления нумерации страниц. В этой статье мы покажем вам, как добавить нумерацию страниц в вашей теме WordPress. Цель состоит в том, чтобы заменить ссылки на страницы «Старые» и «Более новые» в нижней части архивных страниц на удобные для навигации номера страниц.


Разница между стандартной навигацией WordPress и нумерацией страниц

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

Ручное добавление нумерации в ваши темы WordPress

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

Примечание. Этот код взят из Genesis Framework, который мы используем на нашем сайте. Если вы используете Genesis, то вам не нужен этот код или плагин.

function wpbeginner_numeric_posts_nav () {

if (is_singular ())
возвращение;

global $ wp_query;

/ ** Остановить выполнение, если есть только 1 страница * /
если ($ wp_query->max_num_pages <= 1)
возвращение;

$ paged = get_query_var (‘paged’)? absint (get_query_var (‘paged’)): 1;
$ max = intval ($ wp_query->max_num_pages);

/ ** Добавить текущую страницу в массив * /
if ($ paged >= 1)
$ links [] = $ paged;

/ ** Добавить страницы вокруг текущей страницы в массив * /
if ($ paged >= 3) {
$ links [] = $ paged – 1;
$ links [] = $ paged – 2;
}

если (($ paged + 2) <= $ max) {
$ links [] = $ paged + 2;
$ links [] = $ paged + 1;
}

эхо

    ‘ . "\ п";

    / ** Предыдущая запись Ссылка * /
    if (get_previous_posts_link ())
    printf (‘

  • % s
  • ‘ . "\ п", get_previous_posts_link ());

    / ** Ссылка на первую страницу плюс эллипсы при необходимости * /
    if (! in_array (1, $ links)) {
    $ class = 1 == $ paged? ‘класс ="активный"’:’ ‘;

    printf (‘% s

    ‘ . "\ п", $ class, esc_url (get_pagenum_link (1)), ‘1’);

    if (! in_array (2, $ links))
    эхо

  • «;
    }

    / ** Ссылка на текущую страницу, плюс 2 страницы в любом направлении, если необходимо * /
    сортировать ($ ссылки);
    foreach ((массив) $ links как $ link) {
    $ class = $ paged == $ link? ‘класс ="активный"’:’ ‘;
    printf (‘% s

    ‘ . "\ п", $ class, esc_url (get_pagenum_link ($ link)), $ link);
    }

    / ** Ссылка на последнюю страницу плюс эллипсы при необходимости * /
    if (! in_array ($ max, $ links)) {
    if (! in_array ($ max – 1, $ links))
    эхо

  • ‘ . "\ п";

    $ class = $ paged == $ max? ‘класс ="активный"’:’ ‘;
    printf (‘% s

    ‘ . "\ п", $ class, esc_url (get_pagenum_link ($ max)), $ max);
    }

    / ** Следующая запись Ссылка * /
    if (get_next_posts_link ())
    printf (‘

  • % s
  • ‘ . "\ п", get_next_posts_link ());

    эхо

‘ . "\ п";

}

В WPBeginner мы используем этот же код для нумерации страниц на наших страницах архива (например, в нашем блоге или на странице категории учебников WordPress). Этот код делает то, что он извлекает количество страниц и готовит маркированный список нумерованных ссылок. Чтобы добавить это в свои шаблоны, вам нужно будет добавить следующий тег шаблона в index.php, archive.php, category.php и любой другой шаблон страницы архива..

<?php wpbeginner_numeric_posts_nav (); ?>

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

.навигация,
.навигация li: hover,
.навигация li.active a,
.навигация li.disabled {
цвет: #fff;
текст-отделка: нет;
}

.навигация li {
дисплей: встроенный;
}

.навигация,
.навигация li: hover,
.навигация li.active a,
.навигация li.disabled {
цвет фона: # 6FB7E9;
радиус границы: 3 пикселя;
курсор: указатель;
набивка: 12 пикселей;
набивка: 0,75рем;
}

.навигация li: hover,
.навигация li.active a {
цвет фона: # 3C8DC5;
}

Там у вас есть это. У нас есть список нумерации страниц в нашей теме, который выглядит великолепно.

Ручное добавление нумерации страниц в темы WordPress без плагина

Добавление нумерации страниц в WordPress с использованием WP-PageNavi

Теперь давайте посмотрим, как добавить нумерацию страниц в тему WordPress с помощью существующего плагина под названием WP-PageNavi. Первое, что вам нужно сделать, это установить и активировать плагин WP-PageNavi. После активации плагина перейдите на Настройки »PageNavi настроить параметры плагина.

Настройка параметров WP-PageNavi

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

На следующем шаге вам нужно добавить тег шаблона в тему WordPress. Перейдите в папку вашей темы и найдите строки для более старой и новой нумерации страниц в шаблонах страниц архива: index.php, archive.php и любых других файлах шаблонов архива. Добавьте следующий тег шаблона, чтобы заменить старые теги previous_posts_link и next_posts_link.

<?php wp_pagenavi (); ?>

После добавления фрагмента wp_pagenavi числовая нумерация будет выглядеть следующим образом:

Стандартный вид нумерации страниц в wp-pagenavi

Если вы хотите изменить то, как цвета и стиль нумерации страниц в wp-pagenavi выглядят, вам нужно перейти на Настройки »PageNavi. Снимите флажок, чтобы использовать Использовать pagenavi-css.css и сохранить изменения. Теперь иди в Плагины »Редактор. В плагине Select для редактирования выпадающего меню выберите WP-PageNavi и нажмите кнопку Select. Редактор загрузит файлы плагинов в правой боковой панели. Нажмите на pagenavi-css.css, чтобы открыть его в редакторе, а затем скопируйте содержимое файла..

Скопируйте содержимое файла pagenavi-css

Далее вам нужно перейти на Внешний вид »Редактор и вставьте содержимое файла pagenavi-css.css в файл style.css вашей темы. Теперь вы можете изменить цветовую схему и стиль здесь. Причина, по которой мы скопировали содержимое CSS плагина в таблицу стилей темы, заключается в том, чтобы предотвратить потерю изменений стиля, если вы обновите плагин. Вот немного измененная версия нумерации страниц, не стесняйтесь использовать и изменять ее в своей теме.

.wp-pagenavi {
ясно: оба;
}

.wp-pagenavi a, .wp-pagenavi span {
цвет: #FFF;
текстовое оформление: нет;
цвет фона: # 6FB7E9;
граница: 1px solid # B2D1E5;
обивка: 5px 5px;
поле: 2px;
}

.wp-pagenavi a: hover, .wp-pagenavi span.current {
цвет границы: # E9F2F9;
цвет фона: # 6FB7E9;
}

.wp-pagenavi span.current {
вес шрифта: полужирный;
цвет фона: # 3C8DC5;
}

Вот как это будет выглядеть:

Индивидуальный PageNavi CSS

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me