Настраиваем постраничную навигацию с помощью плагина WP-PageNavi | BloggerMen

Настраиваем постраничную навигацию с помощью плагина WP-PageNavi

Рубрика: WordPress

Wp pagenavi настройкаЗдравствуйте уважаемые читатели блога bloggermen.ru. В этой статье рассмотрим, как настроить постраничную навигацию с помощью плагина WP-PageNavi для блогов на WordPress.

По умолчанию в WordPress функция постраничной навигации реализована не очень удобно и пользователю для перемещения по страницам сайта приходится постоянно нажимать «Следующая страница», «Предыдущая страница» или «Раньше», «Позже». Чтобы избежать этих неудобств и сделать навигацию более удобной, функциональной и красивой, можно воспользоваться популярным плагином для вывода постраничной навигации PageNavi.

Конечно, некоторых может устроить и вариант «по умолчанию». Но представьте, что вам захотелось посмотреть 50-ю страницу. Согласитесь, не очень удобно 50 раз нажимать на «следующая». Для этого и нужен плагин PageNavi. Он не только облегчает перемещение по страницам сайта для пользователей и улучшает дизайн, но и добавляет некоторое количество страниц второго уровня вложенности. А это довольно важно для тех, кто занимается продажей ссылок.

После установки этого полезного плагина постраничная навигация будет иметь вид:

Wp pagenavi настройка

Согласитесь, так намного лучше. Причем это только первоначальный вариант. А ведь можно настроить вид постраничной навигации так, чтобы она гармонично вписывалась в дизайн вашего сайта. Да и как может быть по другому, если мы говорим про блог вебмастера?

Как установить и настроить плагин для вывода постраничной навигации PageNavi.

Для начала нужно скачать плагин PageNavi с официального сайта себе на компьютер и распаковать архив. В результате вы получите папку PageNavi с несколькими файлами. Далее настраивает соединение с хостингом с помощью ftp-менеджера FileZilla и заливаем ее на сервер, в директорию /wp-content/plugins/.

После чего открываем админ-панель WordPress, заходим во вкладку плагины, находим PageNavi и нажимаем «активировать».

На этом установка и активация плагина PageNavi завершена. Осталось только прописать в файлах index.php, archive.php и search.php код, который отвечает за вывод постраничной навигации. Для этого откройте файлы с помощью текстового редактора Notepad++ и найдите следующие строки:

<div class="navigation">
<div class="alignleft">
< ?php next_posts_link(__('&amp;amp;amp;amp;amp;laquo; Предыдущие записи', 'kubrick')) ?>
</div>
<div class="alignright">
< ?php previous_posts_link(__('Следующие записи &amp;amp;amp;amp;amp;raquo;', 'kubrick')) ?>
</div>
</div>

Замените их на:

< ?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

После этого постраничная навигация будет выводиться на этих страницах. Но зачастую ее оформление не вписывается в дизайн блога, поэтому ее нужно настроить. Для этого открываем в админке блога «Настройки» и выбираем пункт «Список страниц». Откроется такое окно:

Wp pagenavi настройка

В нем вы можете внести изменения по своему вкусу. Например, убрать слово «страница» в первой строке или вообще ее очистить и т. д. В общем экспериментируйте, пока не получите вариант, который вас устроит. Для этого блога я оставил все как есть. Ниже укажите стиль списка страниц, сколько страниц показывать и нажмите сохранить.

Wp pagenavi настройка

Теперь переходим непосредственно к настройке внешнего вида постраничной навигации. Для этого придется отредактировать файл стилей плагина PageNavi — pagenavi-css.css. Откойте его с помощью текстового редактора Notepad++ и внесите необходимые изменения в следующий код:

.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:active {
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}
.wp-pagenavi a:hover {
border: 1px solid #114477;
color: #114477;
background-color: #FFFFFF;
}
.wp-pagenavi span.pages {
padding: 2px 4px 2px 4px;
margin: 2px 2px 2px 2px;
color: #000000;
border: 1px solid #000000;
background-color: #FFFFFF;
}
.wp-pagenavi span.current {
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #000000;
color: #000000;
background-color: #FFFFFF;
}
.wp-pagenavi span.extend {
padding: 2px 4px 2px 4px;
margin: 2px;
border: 1px solid #000000;
color: #000000;
background-color: #FFFFFF;
}

Можете изменить цвет текста, фона, будет ли изменяться цвет текста после наведения курсора и т. д. После того, как внесете все изменения, сохраните файл и оцените результат. Кстати, значительно облегчит работу плагин FireBug для браузера Firefox.

Popularity: 6% [?]

 

Похожие записи:

Комментарии: (30)

Судя по описанию — классный плагин, на голову выше аналога по функционалу Seo-Pager

Seo-Pager удобен тем, что настроить его можно через админку, а для pagenavi приходится редактировать стили. Но все-равно второй мне нравится больше.

Может вы сможете дать совет? На форумах проблему решить не удалось.

Плагин перестал отображаться на главной странице. В категориях или архивах он работает, а на главной его нет. Откатил все изменения по сайту сделанные за последнее время, заменял страницы на страницы из архива, сделанного ранее, когда плагин отображался — не помогает. Ставил другие подобные плагины — эффект тот же. Плагин вставлен в футер. В чем может быть проблема?

зы. Заметил одну особенность. Если код pageNavi ставить в home.php до кода featured post, то плагин отображается и корректно работает. Если после — не работает.

Или подскажите, куда еще обратиться? Спасибо.

Для начала попробуйте вставить код вывода навигации в index.php.

Попробовал — без результата. Не отображается.

Я так понимаю мы говорим о блоге, который у вас в подписи? Если да — тогда все у вас отображается, только в рубриках и архивах в верхней части футера, а на главной — в самом низу. Посмотрите, в каком именно месте вы вставили код вывода навигации. Скорее всего ошиблись при редактировании футера.

нет. Та конструкция что сейчас видна в индексе, это мое временное обходное решение проблемы. То что отображается в div с position:fixed не имеет отношения к проблеме и находится оно не в подвале а в home.php.

как я уже писал выше: «Если код pageNavi ставить в home.php до кода featured post, то плагин отображается и корректно работает.» Но нужен он в футере, а из футера он выводится соответственно ниже featured post и не отображается в индексе.

Сложно что-то сказать заочно. Если хотите, пишите на E-mail (есть в Контактах), посмотрим код.

ладно, спасибо. Лень заморачиваться, оставлю пока «обходной» вариант.

Если передумаете, обращайтесь. Посмотрим ваш код.

Я пыталась установить этот плагин, так «трудилась», что сбила тему блога, пришлось обращаться к Артему Беляйкину за помощью, он все поставил на место. В файле index.php текст стал как-то по-другому отображаться. Так что я оставила эту затею. А нет ли плагина, чтобы только установить и активировать?

 

Обратитесь к какому-нибудь фрилансеру. Установка плагина обойдется копейки.

Есть такой плагин.

Правда не совсем стандартный.

Называется jquery-pagebar.

Использует джейквери библиотеки.

Устанавливаете. Активируете. В настройках уже по умолчанию выставлена галочка 

«Заменить стандартную навигацию»

Спасибо! Настроил!

А я думаю установил нормально, а он чего то не работает то...

проблема при настройке плагина прикрепляю скриншот

как решить?

narod.ru/disk/7645451001/1.jpg.html

Скорее всего просто код неправильно прописан. Нужно смотреть в шаблоне где нужно прописать.

Подскажите нубу что я не так делаю, в индекс.пхп меняю вот это

<div class="pagers">

<p class="alignleft"><?php next_posts_link ('&laquo; Раньше') ?></p>

<p class="alignright"><?php previous_posts_link ('Позже &raquo;') ?></p>

</div>

на вот это < ?php if (function_exists ('wp_pagenavi')) { wp_pagenavi (); } ?>

в итоге внизу страницы просто отображается эта часть кода < ?php if (function_exists ('wp_pagenavi')) { wp_pagenavi (); } ?> %)

Может неправильно вставили код? Нужно смотреть.

Спасибо за статью! А то намучился я с этим плагином. При добавлении кода в начало файла footer.php – появилась навигация, но на серой полосе через всю страницу, сдвинутая сильно влево и старые надписи «вперед-назад» тоже остались. Потом вернул footer.php в исходное состояние.

Заменил код с надписями «вперед-назад» на нужный код в шаблонах home.php (т.к. в index.php не нашел что заменять), archive.php и search.php. В результате все отлично работает и стили не пришлось редактировать, нормально получилось.

Не за что :)

Плагин супер, что бы я делал перелистывая по одной, а тут просто класс хочешь на 1-ю страницу или 10 — ю  жми и ступай. СУПЕР

Как в этом плагине убрать:"Поделитесь в соц.сетях" Не нашла в каком файле. Заранее признательна %)

очень понравилась идея... делала вроде все как есть, но на блоге появилась  такая фигня:(( cs319027.userapi.com/v319.../03VKK9zCGLY.jpg что делать?

К сожалению на странице меток навигация не работает. Отображает только первую страницу, а при переходе на вторую и так далее выдаёт 404. И с плагином и с кодом не в какую.Не подскажите как это исправить?

Скорее всего версии плагина и Wordpress не соответствуют друг другу

Здравствуйте. Плагин добавил. Его стало видно. Но при нажатии на следующую страницу появляется страница с аналогичным содержанием...

Хотя в адресной строке адрес меняется: с  irktop.com на _http://irktop.com/page/2/

Записей в блоге много, я вывожу по 20 на главную.

Как сделать, чтобы реально переходила на страницу с предыдущими записями?

Спасибо

Сергей, еще актуально, вижу, что у вас вроде все ок сча

Здравствуйте.

После ваших рекомендаций нумерация страниц внизу страницы появилась, но при нажатии -следующая- меняется только название в адресной сроке на /page2.

А записи на странице все те же, то есть не осуществляется реальный переход.

А еще цифры припёрты к левому краю. Хотя делал все по инструкции.

На всякий случай вот код index.php/

Помогите, пожалуйста!!!

<?php

 

/**

* The main template file.

*

* @package WordPress

* @subpackage Pim

*/

 

 

// Get featured posts

$pp_featured_cat = get_option ('pp_featured_cat');

$pp_featured_items = get_option ('pp_featured_items');

if (empty ($pp_featured_items))

{

$pp_featured_items = 5;

}

 

$featured_posts_arr = get_posts ('numberposts='.$pp_featured_items.'&order=DESC&orderby=date&category='.$pp_featured_cat);

 

get_header ();

 

$pp_homepage_style = get_option ('pp_homepage_style');

if (empty ($pp_homepage_style))

{

$pp_homepage_style = 'newspaper';

}

 

include (TEMPLATEPATH . «/templates/template-homepage-».$pp_homepage_style.".php");

?>

 

<div align=”center”>

 

<?php wp_pagenavi ();  ?>

 

</div>

 

<?php get_footer (); ?>

<meta name="google-site-verification" content="Vr-9y9A0mbKLlQMH7ZalEMQGO7mxf97rXgl8nFUER6M" />

Сергей, смотрю на сайт — вроде вам уже удалось устранить проблему?

Оставить комментарий