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

Рекомендую также:

Внешний вид

навигация

Понравился пост? Подпишись на обновления по RSS или Twitter !

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

AlterEgoREX написал(а) комментарий Цитировать
#271, 27 сентября, 2011 в 00:45

Адекватный блог, все примеры по делу без воды.

basic1 написал(а) комментарий Цитировать
#272, 7 октября, 2011 в 01:54

Помогите разобраться, уже устал ломать голову, как надо вставить в index вот его код:
<?php
get_header();
if (have_posts())
{
while (have_posts())
{
art_post();
}
art_page_navi();
} else {
art_not_found_msg();
}

get_footer();
Что бы плагин работал. Шаблон создан программой Artisteer 3. Заранее спасибо!

basic1 написал(а) комментарий Цитировать
#273, 10 октября, 2011 в 03:27

Разобрался сам вот ссылка как это можно сделать http://www.varebux.ru/?p=48#more-48

Мю Юм написал(а) комментарий Цитировать
#274, 22 октября, 2011 в 19:43

привет!
у меня выводятся посты таким образом:

<?php $numpost=10;
if($paged>1) $offset=$numpost*($paged-1);
else $offset=0;
query_posts('cat=3&offset='.$offset.'&showposts='.$numpost); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
      <div class="interest_post">
...
      <?php endwhile;?>
 
<?php wp_pagenavi(); ?>
	<?php else : ?>
 
		<h2 class="center">Not Found</h2>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
 
	<?php endif; ?>

навигация выводится, содержимое переключается (т.е. фактически переходит по страницам)
но в самой навигации всегда выделена 1я страница и написано "страница 1 из 2"

подскажите, пожалуйста, это можно как-то исправить?

Rus написал(а) комментарий Цитировать
#275, 8 ноября, 2011 в 13:24

добрый день..все поставил как написано..проблема в том, что на сайте появилась 1 первая страница, но деление по страницам не произошло,...возможно нужно, что то нужно еще вставить. сайт работает на вордпресс с темой Jasmin

Геннадий написал(а) комментарий Цитировать
#276, 11 ноября, 2011 в 14:47

Добрый день!
Установил и активировал плагин WP-PageNavi, прописал в archive.php, index.php и search.php, но почему-то меню навигации не видно, подскажите в чем может быть причина?

Боец написал(а) комментарий Цитировать
#277, 20 ноября, 2011 в 15:03

Добрый день! Подскажи из-за чего могла произойти такая проблема, в общем когда нажимаешь на одну из рубрик сайта в рубрике не переходит на другие страницы, пишет что мол страница не найдена и так в каждой рубрике, хотя до этого не было таких проблем, правда на другой теме.

Виталий написал(а) комментарий Цитировать
#278, 29 ноября, 2011 в 21:34

У меня после установки и активации плагина не появилась нумерация страниц в квадратиках, а появились страницы, написанные мелким шрифтом и которые практически сливаются. В общем, смотрится ужасно. Не подскажете, в чем проблема?

Dark Neo написал(а) комментарий Цитировать
#279, 24 декабря, 2011 в 17:57

Установлен плагин WP-PageNavi, WordPress версии 3.1, код поставил там где надо.... Но при выводе постраничной навигации в рубрики стоит только "1" и все, хотя если выводятся странички в поиски или смотреть статьи автора то там постраничная навигация работает... я ка кпонимаю с плагином все в порядке, в какую именно сторону копать не знаю, подскажите если кто сталкивался

Все 1…15 16 17 1819

WP-PageNavi

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

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

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

Последние записи

Рубрики

Теги

Подписка на RSS

Ссылки

Авторизация

Счетчики

Реклама