WP-PageNavi постраничная навигация

24.06.2008, обновлено: 23.02.2010

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

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

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

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

Скачиваем оригинальный плагин с его домашней страницы или берем русскую версию у Dimox'а и устанавливаем:
1. Распаковываем архив.
2. Копируем папку wp-pagenavi в /wp-content/plugins/.
3. Заходим в админку блога на вкладку "Плагины" и активируем плагин.
Чтобы включить отображение работы плагина открываем те файлы вашего шаблона, где используется вывод навигации. Находим там строчки (на примере шаблона Default):

 
 next_posts_link(__('« Older Entries', 'kubrick')) ?>
 previous_posts_link(__('Newer Entries »', 'kubrick')) ?>

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

 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 ''; 
previous_posts_link($pagenavi_options['prev_text']);
echo '';

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

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

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

echo '.clean_url(get_pagenum_link($max_page)).'" title="'.$last_page_text.'">'.$last_page_text.'';

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

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

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

Теперь код черной панельки с этого сайта. Открывайте файл 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-шаблоны для плагина брать тут.

Последняя версия плагина 2.50 работает только с WordPress версии 2.8 и выше.

http://www.wordpressplugins.ru/look/wp-pagenavi.html