WP-PageNavi

02.05.2010
By admin

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

После установки плагина мы получим такое:

После небольшого изменения кода плагина увидим:

И теперь с помощью изменения css мы можем изменить эту панельку как угодно, например, так:

Скачиваем оригинальный плагин с его домашней страницы или берем русскую версию у Dimox‘а и устанавливаем:

1. Распаковываем архив.

2. Копируем папку wp-pagenavi в /wp-content/plugins/.

3. Заходим в админку блога на вкладку «Плагины» и активируем плагин.

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

<div>
	<div><?php next_posts_link(__('&laquo; Older Entries', 'kubrick')) ?></div>
	<div><?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, оформляющих постраничную навигацию, но ни один из них мне не подошел то из-за глюков самих плагинов, то из-за кривой системы оформления панельки в css, которая конфликтует с css моего шаблона. Проще оказалось чуть-чуть изменить код плагина WP-PageNavi и наслаждаться правильной навигацией с очень простой сменой ее оформления через файл с css стилями.

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

previous_posts_link($pagenavi_options['prev_text']);

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

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

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

echo '<span>';
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>';
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 шрифт, в котором эти стрелочки есть. Иначе стрелочки все равно будут показаны, но в IE квадратик со стрелкой станет на 1 пиксель шире. Сущность этого бага мне непонятна, но если для всего блока навигации задать шрифт, то этот баг в IE исчезает. Кто-нибудь может мне объяснить как правильно избавится от бага, не задавая левый шрифт?

Красивые css-шаблоны для плагина брать тут.

Мой блог находят по следующим фразам