WP-PageNavi

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

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

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

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

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

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

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

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

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

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

 

Автор плагина: Lester "GaMerZ" Chan
Страница плагина: http://wordpress.org/extend/plugins/wp-pagenavi/
Рассматриваемая версия: 2.30 от 12.05.2008
Совместимость с версией WordPress: 2.5 и выше.


Внешний вид
навигация
Добавить в Google Bookmarks Добавить в del.icio.us Добавить в БобрДобр.ru Добавить в Memori.ru Добавить в МоёМесто.ru Добавить в Mister Wong Добавить в Twitter

Понравился пост? Подпишись на обновления по Обновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Комментарии (всего 214 комментария)

Дмитрий написал(а) комментарий Цитировать
#211, 2 сентября, 2010 в 00:26

Здорово! Сделал себе на сайте такую штуку. Спасибо большое!

Zyama написал(а) комментарий Цитировать
#212, 2 сентября, 2010 в 18:54

Я сделал шаблон category. Вывел статичный контент в верхней части шаблона:

Внизу вывод навигации:

И получилось так, что при переходе на последующие странички анонсы записей меняются, а верхний статичный выведеный текст остается. Получается дублирование контента, что не хорошо для SEО Скажите, как сделать так, чтобы поставить условие, чтобы контент выводился только на первой страничке?

Zyama написал(а) комментарий Цитировать
#213, 2 сентября, 2010 в 18:55

Я сделал шаблон category. Вывел статичный контент в верхней части шаблона:

1
2
3
4
5
6
7
8
9
10
11
12

<?php if ( is_category() ): ?>
<div class="entry">
<?php
$my_id = 34;
$post = get_post($my_id);
setup_postdata($post);
?>
<?php query_posts($query_string.'&cat=134'); ?>
 
<?php the_content('Далее...'); ?>
</div>
<?php endif; ?>

Внизу вывод навигации:

1

<div class="pagenavi"><?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?></div>

И получилось так, что при переходе на последующие странички анонсы записей меняются, а верхний статичный выведеный текст остается. Получается дублирование контента, что не хорошо для SEО Скажите, как сделать так, чтобы поставить условие, чтобы контент выводился только на первой страничке?

Павел написал(а) комментарий Цитировать
#214, 4 сентября, 2010 в 17:10

Спасибо огромное за статью! поставил быстро и легко на свой блог WP-PageNavi

Все1…1112131415

Написать комментарий

(обязательно)

(обязательно, не публикуется)

Для вставки кода используйте кнопку "Код", по умолчанию используется синтаксис подсветки языка "php", вы можете поменять его на любой другой поддерживаемый GeSHi язык, например "javascript", "css", "html4strict", "sql" и тд. Используйте предпросмотр!
 


Подписаться на уведомления без комментирования.


Пингбэки и Трекбэки (всего 6 ссылок)