Wp-pagenavi

Для того чтобы вашим читателям было удобно смотреть ваши статьи или просто «гулять» по-вашему, блогу вы должны своевременно, позаботится о навигации.
Сегодня мы будем учиться ставить на блог вот такую навигацию:

А так же я научу вас оформлять такую навигацию, чтобы она вписывалась в дизайн вашего блога.

По умолчанию навигация в WordPress выглядит примерно следующим образом:

Такая навигация очень неудобна, так как:
- читатель не сможет узнать количество страниц на вашем блоге;
- правило 3-х кликов;

Что за правило 3-х кликов? – спросите вы.
Правило 3-х кликов, это такое правило, согласно которому до любой страницы вашего блога можно было бы добраться при помощи всего трёх кликов.
Обратите внимание, что начинать наш путь нужно с главной страницы.
Если вы не сможете добраться до какой-либо статьи при помощи трёх кликов то вам срочно нужно, что-то менять.

И, как правило, менять нужно именно навигацию, вот этим то мы и займёмся!

Первым делом мы установим соответствующий плагин, под названием:

После того как вы установите этот плагин и активируете его, вам нужно будет добавить в «Основной шаблон» (index.php) вашей WordPress-темы вот этот код:
>

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

Как правило, код вставляется после:
>

Или вместо:
>

<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>

Но бывают и случаи когда код нужно вставить в другое место, поэкспериментировав пару минут, вы обязательно найдёте идеальное место для вашей навигации.

Если вы ещё не определились с шаблоном, то советую почитать статью моего знакомого блогера:
Блог манимейкера — выбираем тему WordPress.
Ведь всё-таки дизайн блога это очень важная вещь и подходить к ней нужно ответственно.
Но вернёмся к теме.

После того как навигация начнёт функционировать, вам нужно оформить её, для того чтобы она удачно вписывалась в дизайн вашего блога.

Первым делом мы перейдём на страницу управления плагином и заполним необходимые поля.
Рекомендую вам заполнить поля, так как это сделал я:

После того как мы отредактировали плагин, мы будем придавать нашей навигации более красивый вид.

Для того, чтобы изменить дизайн вашей навигации вам нужно перейти в css-файл вашей WordPress-темы и вставить в самый конец вот этот код:
>

.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; }

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

Так как в CSS разбираются не все, разберём каждый отрезок.

>

.wp-pagenavi { font-family: Sans-Serif; /* IE fix */ }

Данный код трогать не надо