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

Просмотров: 3 515

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

Постраничная навигация в WordPress
WP-PageNavi

Современная, красивая постраничная навигация для блога WordPress организуется с помощью популярного плагина WP-PageNavi.

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

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

Плагин WP-PageNavi добавляет более расширенный интерфейс для навигации по страницам на сайте WordPress

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 для ВордПресс

Данный модуль добавляет дополнительные параметры стиля в плагин WordPress Wp-PageNavi:

Постраничная навигация WordPress с плагином и без 1

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

Чтобы использовать этот плагин, у вас должен быть установлен плагин WP Pagenavi в вашем блоге WordPress.

Этот плагин поставляется с возможностью стилизовать навигацию по страницам по вашему усмотрению. В комплект входит более 25 готовых стилей, которые вы можете легко выбрать. И с пользовательской опцией, где вы можете установить свои собственные цвета.

Установите таким же образом этот модуль, активируйте его и у вас появится пункт 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;}

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


4 комментария к “Постраничная навигация WordPress с плагином и без”

  1. Отлично всё описано, предельно ясно и понятно. Все сделал как указано в статье и получилось без проблем.

    Ответить
  2. Скажите, после каждого обновления темы придется лезть в главную тему и добавлять эти коды?

    Ответить

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