(Последнее обновление: 01.07.2016)

WP-PageNavi-postranichnaja-navigacija-wordpressВсем привет! Если читатель вашего блога может переходить по страницам только следующим путем: Назад - Вперед или по таким ссылкам Предыдущее - Новые сообщения, тогда у вас стоит стандартная, не удобная навигация. Если у вас сообщений за сотню или больше , то это представляет для посетителя большие неудобства. Вам её надо поменять на более удобную постраничную навигацию, чтобы пользователю было удобно двигаться произвольно, то есть, он смог попасть даже на последние страницы вашего сайта.

Современная, красивая постраничная навигация для блога WordPress организуется с помощью популярного плагина WP-PageNavi. На официальном сайте wordpress.org данный модуль занимает четвертое место по скачиванию. На момент написания этого поста, его скачали уже 4065194 раз. Как устроена удобная навигация по страницам Вы можете посмотреть у меня на блоге. Если готовы к переменам на своем веб-ресурсе, тогда приступим.

Постраничная навигация WordPress с помощью плагина WP-PageNavi

wp-pagenavi

Постраничная навигация WordPress блога

Как установить и настроить плагин WP-PageNavi

Установить данный модуль можно стандартным путём, через раздел "Плагины" - "Добавить новый", в поле для поиска плагинов вводим его название и нажимаем кнопку искать. Затем, после успешной установки незабываем активировать плагин. В разделе "Параметры" у вас появится пункт Список страниц вот и по ней кликаем. Откроется страница "Настройки плагина", где вам надо всего лишь внести кое какие изменения - ваш текст написания и так далее. Плагин поддерживает русский язык, поэтому в настройках сложностей нет (есть подсказки):

plagin-wordpress-WP-PageNavi

Настройки плагина WP-PageNavi

Продолжение:

WordPress-Plugins-WP-PageNavi

Настройки плагина WP-PageNavi

Как видно из скриншота, Вы можете заменить текст на свой или оставить всё как есть. Отметьте -Использовать стиль pagenavi-css.css или нет. Если вам нужно настроить CSS стиль WP-PageNavi сделать это можно в файле плагина. Надо для этого перейдите в раздел "Плагины" - "Редактор", выберете в качестве плагина для изменения WP-PageNavi и найдите в открывшемся списке файл wp-pagenavi/pagenavi-css.css. По настройкам все понятно. Следующий шаг такой.

В вашей теме в файлах index.php, archive.php и search.php , необходимо найти призывы к next_posts_link () и previous_posts_link () и заменить их. В теме TwentyTen, это выглядит так:

<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>

Может в других темах выглядеть и так:

<?php next_posts_link('&laquo; Вперед') ?> 
<?php previous_posts_link('Назад &raquo;') ?>

Ищите, что то похожее и вам надо заменить эти строчки этим:

<?php wp_pagenavi(); ?>

Все. Готово. Теперь будет плагин работать. Если вам стиль навигации не подходит под дизайн вашего блога и Вы хотите придать особенный вид для неё, тогда вам надо читать статью далее.

Плагин WP PageNavi Style добавляет больше цветовых вариантов для Wp-PageNavi

wp_page_navi_style

Плагин WP PageNavi Style

Да, Вы не ошиблись, для того, чтобы можно было воспользоваться готовыми стилями для постраничной навигации WP-PageNavi, надо установить дополнительный плагин WP PageNavi Style от этого же разработчика. Установите таким же образом этот модуль, активируйте его и у вас появится пункт WP PageNavi Style в боковой колонке админки. Нажмите её для настроек и выбора стиля для вашей новой навигации:

WP-PageNavi-Style

Настройка плагина WP PageNavi Style

Как видно из скриншота, можно выбирать различные красивые панельки и расположение её. Набор стилей плагина:

pagenavi_style

Набор стилей плагина Плагин WP PageNavi Style

Какой большой выбор. Если не хотите использовать готовые стили, установите - Custom и настройте стиль по своему:

WP-PageNavi-Style-nastrojka

Custom и настройте стиль по своему

Все. Еще один момент. Если Вы готовы установить постраничную навигацию в ручную, то есть без плагина, тогда читаем далее.

Как установить постраничную навигацию WordPress без плагина

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

Откройте файл "Функции темы" (functions.php), прокрутите страницу вниз и перед закрывающим тегом ?> вставьте такой код (не забудьте на всякий случай сделать резервную копию, если пойдет, что не так:

function navigation() {
global $wp_query, $wp_rewrite;
$pages = '';
$max = $wp_query->max_num_pages;
if (!$current = get_query_var('paged')) $current = 1;
$a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999));
$a['total'] = $max;
$a['current'] = $current;
$total = 0; //1 - выводить текст "Страница N из N", 0 - не выводить
$a['mid_size'] = 3; //сколько ссылок показывать слева и справа от текущей
$a['end_size'] = 5; //сколько ссылок показывать в начале и в конце
$a['prev_text'] = '&laquo; Предыдущая '; //текст ссылки "Предыдущая страница"
$a['next_text'] = 'Следующая &raquo;'; //текст ссылки "Следующая страница"
if ($max > 1) echo '<div>';
if ($total = 1 && $max > 1) $pages = '<span>Страница ' . $current . ' из ' . $max . '</span>'."\r\n";
echo $pages . paginate_links($a);
if ($max > 1) echo '</div>';
}

Затем, меняем стандартный код вывода во всех файлах, где есть навигация - index.php, category.php, archive.php и так далее. Меняем вместо:

next_posts_link('« Вперед');
previous_posts_link('Назад »');

Этим:

<div class="navig"><?php navigation(); ?></div>

Далее, надо добавить стиль css. Откройте файл вашего шаблона "Таблица стилей" (style.css) и в самый низ вставьте етот код:

.navig {
padding:15px 0 25px 0;
overflow:hidden;
font-size:13px;
color:#000;
clear:both;}

.navig a{background: #fff;
border: 1px solid #DDDDDD;
color: #000000;
font-size: 13px;
padding:5px;
text-decoration: none;}

.navig span.pages {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}

.navig a:hover{background: #fff;
border: 1px solid red;
color:red;
font-size: 13px;
text-decoration: none;}

.navig span.pages {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}

.navig span.current {background: #fff;
border: 1px solid #111;
font-size: 13px;
padding:5px;
text-decoration: none;}

.navig span.extend {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}

.str{background: #fff;
color: #000000;
font-size: 13px;
padding: 5px;
text-decoration: none;}

Готово. Если вам не очень понятно, как сделать навигацию в ручную, лучше воспользуйтесь плагином. А у меня на этом все. До встречи.