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

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

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

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

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

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

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

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

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

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

Страница плагина: 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. Если у вас есть желание задать именно те настройки, что использовал я (и какие показаны на скриншотах), то введите следующее:

Text For Number Of Pages ("Страница x из x", можно вообще удалить)
Страница %CURRENT_PAGE% из %TOTAL_PAGES%

Text For Current Page (Текущая страница, показываем просто ее номер)
%PAGE_NUMBER%

Text For Page (Текст остальных страниц, тоже показываем только их номер)
%PAGE_NUMBER%

Text For First Post (Первая страница, естественно "1")
1

Text For Last Post (Последняя страница, естественно это число всех страниц)
%TOTAL_PAGES%

Text For Next Post (Следующая страница, показываем стрелку)


Text For Previous Post (Предыдущая страница, показываем стрелку)


Text For Next ... (Троеточие у ссылки перехода на след. страницу)


Text For Previous ... (Троеточие у ссылки перехода на пред. страницу)


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

Постраничная навигация WordPress - плагин 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>';


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

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

Теперь давайте попробуем навигацию оформить в черной цветовой гамме. Открывайте файл 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 {	
}


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

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

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

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