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

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



А вот что получится после установки:



Если чуть чуть изменить код, то можно получить вот это:



А воспользовавшись CSS мы можем ее изменить, например, так:



Итак что мы имеем:

Страница плагина: http://wordpress.org/extend/plugins/wp-pagenavi/
Рассматриваемая версия: 2.30
Совместимость с версией WordPress: 2.5 и выше.
Версия плагина 2.50 работает с WordPress версии 2.8 и выше.

ПОЕХАЛИ:

Скачиваем плагин и устанавливаем через админ панель блога в разделе «плагины» или проделываем следующее:
1. Скачиваем и распаковываем архив (в папку wp-pagenavi).
2. Копируем папку wp-pagenavi в /wp-content/plugins/.
3. Заходим в админку блога на вкладку "Плагины" и активируем плагин.

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

<div class="navigation">
	<div class="alignleft"><?php next_posts_link(__('&laquo; Older Entries', 'kubrick')) ?></div>
	<div class="alignright"><?php previous_posts_link(__('Newer Entries &raquo;', 'kubrick')) ?></div>
</div>

И заменяем их на:

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

Теперь постраничная навигация у вас работает. Перевести или задать надписи можно в админке блога на вкладке ПараметрыPageNavi. Если у вас есть желание задать именно те настройки, что использовал я (и какие показаны на скриншотах), то введите следующее:



Написали, сохранили и теперь в блоге наблюдаете такую картину:



Тут мы видим, что ссылки на следующую/предыдущую страницу как-то странно соединены с многоточиями. Давайте их уберем т.к. их наличие не целесообразно и не нужно нам совсем.

Открываем для редактирования файл wp-pagenavi.php из папки wp-pagenavi, находим строчку:

previous_posts_link($pagenavi_options['prev_text']);

Удаляем ее. Находим строчку:

if ($start_page >= 2 && $pages_to_show < $max_page) {

И перед ней вставляем:

echo '<span class="next-prev">'; 
previous_posts_link($pagenavi_options['prev_text']);
echo '</span>';

Тоже самое проделываем и с ссылкой на следующую страницу. Находим:

next_posts_link($pagenavi_options['next_text'], $max_page);

Удаляем ее. Находим строчку:

echo '<a href="'.clean_url(get_pagenum_link($max_page)).'" title="'.$last_page_text.'">'.$last_page_text.'</a>';

И после нее вставляем:

echo '<span class="next-prev">'; 
next_posts_link($pagenavi_options['next_text'], $max_page);
echo '</span>';

Сохраняем файл, открываем блог и видим:



Теперь давайте попробуем навигацию оформить в черной цветовой гамме. Открывайте файл pagenavi-css.css в папке wp-pagenavi и заменяем его содержимое следующим кодом:

.wp-pagenavi  {
	font-family: Sans-Serif; /* IE fix */
}
 
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited {
	padding: 5px 8px 5px 8px; 
	margin: 2px 0px 2px 0px;
	border-top: 1px solid black;
	color: #FFFFFF;
	background-color: #4f4f4f;	
	font-weight: bold;
}
.wp-pagenavi a:hover {	
	border-top: 1px solid black;
	color: #FFFFFF;
	background-color: black;
	font-weight: bold;
}
.wp-pagenavi span.pages {
	padding: 5px 8px 5px 8px;
	margin: 2px 0px 2px 0px;
	color: #FFFFFF;
	border-top: 1px solid black;
	background-color: #4f4f4f;
	font-weight: bold;
}
.wp-pagenavi span.current {
	padding: 5px 8px 5px 8px;
	margin: 2px 0px 2px 0px;
	font-weight: bold;
	border-top: 1px solid black;
	color: #FFFFFF;
	background-color: black;
	font-weight: bold;
}
.wp-pagenavi span.extend {
	padding: 5px 0px 5px 0px;
	margin: 2px 0px 2px 0px;
	border-top: 1px solid black;
	color: #FFFFFF;
	background-color: #4f4f4f;
	font-weight: bold;
}
.wp-pagenavi span.next-prev {	
}

В итоге получаем следующую конструкцию:



Примечание! Если вам требуется использовать стрелочки → и ←, то тогда следует указать в css шрифт, содержащий эти стрелочки. В противном случае стрелочки отобразятся, но в Internet Eplorer-er квадратик со стрелкой станет шире на 1 пиксель. Почему так происходит непонятно, но если для всего блока навигации задать шрифт, то этот баг в IE пропадает. Если нет желания возиться с css стилями, то вы можете воспользоваться дополнительным плагином PageNavi Style, который предоставляет возможность выбора панелей, не влезая в код css.

На этом всё. Пишите комменты :)