Основы работы с CMSИспробовав несколько способов установки постраничной навигации на сайт 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(); ?>Замену кода нужно сделать во всех файлах. После загрузки (замены) файлов, при открытии страниц с рубриками, метками или архивами, в результате Вы получите примерно такую картину:
В общем неплохо. Если такой вариант Вас устраивает, можно его оставить и использовать.
А я хочу предложить немного видоизменить эту конструкцию. Для этого откроем файл стилей нашей темы (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;
}
Если Вы решили применить эти стили, то в настройках плагина отключите штатные стили:
После внесения корректив картинка изменится:
Мне, к примеру, такой вариант нравится больше.
Можно пойти дальше и вставить изображения стрелочек вместо кавычек (« »). Изображения стрелочек можно скачать любые, по поисковому запросу, загрузить их в корневую папку images и в настройках плагина вставить код вывода изображений этих стрелок в поля Предыдущая страница и Следующая страница:
Код вставки изображения обычный:
<img src="/images/wback.png" width="15" height="15" alt="стрелка">
После этого навигация примет следующий окончательный внешний вид:
Настройки плагина WP-PageNavi
Перейдите в Панель администратора → Настройки → WP-PageNavi.
1. В первой строке Шаблон общего списка страниц формируется начальная часть конструкции, а именно запись, например, «Страница 3 из 5»:
Здесь можно сократить слово «Страница» до «Стр»., заменить на другое слово или вовсе удалить. Если, к примеру, удалить участок «из %TOTAL_PAGES%» (общее количество страниц), то запись будет иметь вид — «Страница 3». Но, мне кажется, что самый оптимальный вариант — оставить здесь все по умолчанию.
2. Вторая и третья строки формируют номера страниц. Здесь ничего не нужно менять:
3. Две последующие строки:
выводят надписи (Начало и Последняя) в навигационной конструкции, но только в случае, когда количество страниц для показа будет превышать заданное в настройках:
В данном случае я выставил в строке Количество страниц для показа значение 3:
4. В строках Элемент Предыдущая страница и Следующая страница нужно вставить изображение, указывающее направление перехода. По умолчанию — это кавычки. В моем варианте — коды вставки изображений стрелочек:
5. В строках Элемент «Предыдущие» и «Следующие»
проставьте соответствующие символы в зависимости от широты вашей фантазии.
В подразделе Настройки списка страниц все интуитивно понятно, поэтому какие-либо дополнительные объяснения могут оказаться излишними.
Единственное, хочется сказать, что в строке Всегда показывать список страниц лучше выбрать вариант Нет. Согласитесь, в случае малого количества страниц, такая конструкция выглядит «не айс»:
После окончания процедуры настроек не забудьте сохранить изменения.
PS. Под занавес хочется задать следующий вопрос:
— А как же быть с отдельными записями? Распространяется ли на них влияние плагина?
— Нет, не распространяется!
Файл типа single.php остается без изменений, хотя в нем тоже есть идентичный код. В конце каждой записи (в зависимости от используемой темы) выводится своеобразная, неплохая навигация, например, такая:
На этом позвольте закрыть тему установки и настройки плагина WP-PageNavi. Используйте полученные знания в своей работе с этим нужным и удобным модулем.
Всего доброго. До свидания. Ваш Л.М.
