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


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

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

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

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

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

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

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

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

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 и выше.

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s