Плагин WP-PageNavi для WordPress 2.x

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

В данной заметке я хотел бы поговорить о скролерах страниц, пагинаторах, навигаторах… в общем х.з. как его еще назвать. Как таковой поговорим о «навигаторе страниц». В стандартном комплекте движка для этих целей предлагаются функции next_posts_link() и previous_posts_link, которые очень просты в использовании, но иногда хочется чего более солидного что ли.

На свое блоге Курилка.co.ua я решил использовать плагин WP-PageNavi автором которогоя является Lester ‘GaMerZ’ Chan. По мимо ссылок «следующей» и «предыдущей» страницы здесь выводятся ссылки на «начальную» и «конечную» страницы, а также часть страниц в виде цифр, что весьма удобно.

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

Установка плагина WP-PageNavi достаточно простой процесс и состоит из следующих шагов:

1. Скачайте сам архив плагина, если что, берите последнюю версию.
2. В архиве будет папка wp-pagenavi/, а уже в ней pagenavi/ именно ее нужно скопировать в папку плагинов Вашего блога (по умолчанию: wp-content/plugins).
3. Далее заходив в админ панель, переходим на страницу Плагины(Plugins), где активируем(activate) интересующий нас плагин WP-PageNavi.
4. Для настройки внешнего вида «навигатора страниц», в админ панеле переходим на страницу Настройки(Options) и в подменю выбираем пункт PageNavi, далее ориентируйтесь, так сказать, на местности и в соответствии с Вашими пожеланиями.
5. Однако чтобы «навигатор страниц» отображался, его необходимо разместить в используемой Вами теме(шаблоне). Как таковой, автор плагина предлагает просто в Подвале(Footer) вашего шаблона разместить следующий код:

   <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

   Для меня было достаточным разместить этот код в index.php, т.е. главный шаблон(main index template) и archive.php, т.е. архив(archives). Так или иначе, вам придется избавиться от выше упомянутых стандартных функций навигации, если вы не хотите дублирования «навигаторов страниц».

Оформление WP-PageNavi

Как я уже говорил, настройка некоторый параметров «навигатора страниц» можно произвести из админ панели: Настройки(Options) -> PageNavi, но ко всему прочему есть и отдельный CSS, который находится в папке с плагином wp-content/plugins/pagenavi/pagenavi-css.css. Перед тем же как предложить свой вариант CSS давайте разберем HTML-код генерируемый нашим плагином, а он может иметь, как пример, следующий вид (естественно по умолчанию):

<div class="wp-pagenavi">
<span class="pages">Page 1 of 22</span>
<span class="current">1</span>
<a href="/page/2/" title="2">2</a>
<a href="/page/3/" title="3">3</a>
…
<a href="/page/2/">&raquo;</a>
<span class="extend">...</span>
<a href="/page/22/" title="Last
&raquo;">Last »</a>
</div>

И так, жирным я выделил те объекты, которые нас могут заинтересовать при создании своего CSS и теперь вот мой вариант:

.wp-pagenavi { color: #555555; }
.wp-pagenavi .pages {
  color: #E60000;
  padding-right: 5px;
}
.wp-pagenavi .current {
  color: #FFFFFF;
  padding-left: 5px;
  padding-right: 5px;
  background: #5E9C04;
}
.wp-pagenavi .extend {}
.wp-pagenavi a {
  padding-left: 5px;
  padding-right: 5px;
}
.wp-pagenavi a:hover {
  background: #F5F5F5;
}

Как видите, я сделал несколько упрощенный вариант. Т.к. использовался span, т.е. не блоковый объект, я просто дал отступы по бокам. Для ссылок сделал легкое затемнение при наведении, а текущая страница выводится на зеленом(салатовом, называйте как угодно) фоне белыми цифрами. Ну и красным выделил Page 1 of 22, чтоб пользователь не искал мой «навигатор страниц»  а сразу усидел его.

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