Постраничная навигация в WordPress с плагином WP-PageNavi

Испробовав несколько способов установки постраничной навигации на сайт WordPress, я сделал выбор в пользу плагина WP-PageNavi.

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

Эта другая система может быть установлена с применением нескольких вариантов. Одним из них является использование плагинов. В этой статье рассмотрим плагин WP-PageNavi.

Установка плагина

Установить плагин можно как из админ-панели, так и загрузив с официального сайта WordPress. Процедура установки обычная.

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

Такие изменения касаются нескольких файлов вашей активной темы WordPress с заведомо прописанной штатной функцией навигации.

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

index.php;
archive.php;
search.php;
category.php.

Примечание: в некоторых темах могут наблюдаться небольшие отличия в плане присутствия именно этих перечисленных мною файлов. Например, в темах, которые я тестировал (Cardio и Inventor), есть файл category.php, а в остальных — нет. В итоге, вам нужно выбрать файлы, отвечающие за вывод категорий, меток, архивов и страниц поиска.

Помимо этих файлов, может быть задействован так же файл style.css, если Вы планируете прописывать собственные стили.

Все вышеперечисленные файлы находятся в папке вашей темы по адресу:
ваш сайт/wp-content/themes/название активной темы/

Для внесения изменений можно использовать встроенный редактор WordPress, но в данном случае, все таки, лучше применить файловый менеджер и текстовой редактор, например, Notepad++ и в нем выполнять корректировки. В таком варианте у Вас будет возможность сохранять копии файлов на компьютере, чтобы в любой момент можно было исправить ошибку, обратившись к оригиналу.

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

xxxxx_pagination()

в большинстве современных тем или

next_posts_link() и previous_posts_link()

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

Откройте эти файлы в Notepad++ и найдите строки с кодом прежней навигации, визуально или используя поиск.

Штатный код вывода навигации может иметь примерно такой вид:

<?php the_post_navigation(); ?>

А в большинстве тем WordPress бывает такой:

<?php название темы_pagination(); ?>

В более ранних темах коды могут выглядеть так:

<div>
<div>
<?php next_posts_link('Предыдущие записи') ?>
</div>
<div>
<?php previous_posts_link('Следующие записи') ?>
</div>
</div>

Далее нужно заменить прежний код на следующий:

<?php wp_pagenavi(); ?>

Замену кода нужно сделать во всех файлах. После загрузки (замены) файлов, при открытии страниц с рубриками, метками или архивами, в результате Вы получите примерно такую картину:

Постраничная навигация в WordPress с плагином WP-PageNavi

В общем неплохо. Если такой вариант Вас устраивает, можно его оставить и использовать.

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

/* Постраничная навигация */

.wp-pagenavi {
 clear: both;
 margin: 35px;
}

.wp-pagenavi a, .wp-pagenavi span {
 text-decoration: none;
 border: 1px solid #BFBFBF;
 padding: 3px 12px;
 margin: 2px;
 background-clip:padding-box;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 box-shadow:3px 3px 3px #666666;
 -webkit-box-shadow 5px 5px 15px #666666;
 -moz-box-shadow: 5px 5px 15px #666666;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
 border-color: #BFBFBF;
}

.wp-pagenavi span.current {
 font-weight: bold;
}

Если Вы решили применить эти стили, то в настройках плагина отключите штатные стили:

Отключение штатных стилей

После внесения корректив картинка изменится:

Постраничная навигация в WordPress с плагином WP-PageNavi

Мне, к примеру, такой вариант нравится больше.

Можно пойти дальше и вставить изображения стрелочек вместо кавычек (« »). Изображения стрелочек можно скачать любые, по поисковому запросу, загрузить их в корневую папку images и в настройках плагина вставить код вывода изображений этих стрелок в поля Предыдущая страница и Следующая страница:

Вставка изображений

Код вставки изображения обычный:

<img src="/images/wback.png" width="15" height="15" alt="стрелка">

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

Внешний вид постраничной навигации

Настройки плагина WP-PageNavi

Перейдите в Панель администратора → Настройки → WP-PageNavi.

1. В первой строке Шаблон общего списка страниц формируется начальная часть конструкции, а именно запись, например, «Страница 3 из 5»:

Настройки плагина WP-PageNavi

Здесь можно сократить слово «Страница» до «Стр»., заменить на другое слово или вовсе удалить. Если, к примеру, удалить участок «из %TOTAL_PAGES%» (общее количество страниц), то запись будет иметь вид — «Страница 3». Но, мне кажется, что самый оптимальный вариант — оставить здесь все по умолчанию.

2. Вторая и третья строки формируют номера страниц. Здесь ничего не нужно менять:

Настройки плагина WP-PageNavi

3. Две последующие строки:

Настройки плагина WP-PageNavi

выводят надписи (Начало и Последняя) в навигационной конструкции, но только в случае, когда количество страниц для показа будет превышать заданное в настройках:

Внешний вид навигации

В данном случае я выставил в строке Количество страниц для показа значение 3:

Количество страниц

4. В строках Элемент Предыдущая страница и Следующая страница нужно вставить изображение, указывающее направление перехода. По умолчанию — это кавычки. В моем варианте — коды вставки изображений стрелочек:

Настройки плагина

5. В строках Элемент «Предыдущие» и «Следующие» Настройки плагина

проставьте соответствующие символы в зависимости от широты вашей фантазии.

В подразделе Настройки списка страниц все интуитивно понятно, поэтому какие-либо дополнительные объяснения могут оказаться излишними.

Единственное, хочется сказать, что в строке Всегда показывать список страниц лучше выбрать вариант Нет. Согласитесь, в случае малого количества страниц, такая конструкция выглядит «не айс»: Внешний вид навигации

После окончания процедуры настроек не забудьте сохранить изменения.

PS. Под занавес хочется задать следующий вопрос:
— А как же быть с отдельными записями? Распространяется ли на них влияние плагина?
— Нет, не распространяется!
Файл типа single.php остается без изменений, хотя в нем тоже есть идентичный код. В конце каждой записи (в зависимости от используемой темы) выводится своеобразная, неплохая навигация, например, такая:

Навигация в отдельных записях

На этом позвольте закрыть тему установки и настройки плагина WP-PageNavi. Используйте полученные знания в своей работе с этим нужным и удобным модулем.

Всего доброго. До свидания. Ваш Л.М.

Постраничная навигация