Постраничная навигация сайта с плагином WP-PageNavi

Постраничная навигация улучшает юзабилити сайта. Она намного приятнее стандартной навигации «Предыдущие записи – Следующие записи».

Я рекомендую воспользоваться плагином WP-PageNavi. Он прост и удобен. Как установить плагин wp pagenavi?

    Содержание

  1. Настройки плагина WP-PageNavi
  2. Как вставить постраничную навигацию в шаблон?

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

Установите и активируйте плагин как обычно.

Откройте «Параметры» -> «Список страниц».

В поле «Шаблон общего списка страниц» можно вообще убрать общее количество страниц или сократить слово -«Страница». Можно указать так:

Стр. %CURRENT_PAGE%

Тогда получится такая форма:

как сделать постраничную навигацию на сайте

Вторая и третья строчка предназначены для вывода номера страниц. Эти строчки лучше не трогать.

В четвертой и пятой строчке можно заменить слова «Первая» и «Последняя» на «В конец» и «В начало».

плагин для постраничной навигации на сайте

Можно еще добавить номер страницы.

Пропишите:

В конец на %TOTAL_PAGES% стр»

Вот так:

плагин WordPress WP-PageNavi

Тогда получится так:

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

И так:

как создать нумерацию страниц на сайте

как сделать нумерацию страниц на сайте вордпресс

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

В поле «Стиль списка страниц» лучше выбрать «Обычный». Если вы установите «Выпадающий список», то навигация станет вертикальной.

как организовать постраничную навигацию

В строке «Всегда показывать список страниц» галочку не ставьте.

В строчке — «Количество страниц для показа» укажите, сколько страниц будет включено в навигацию. Если вы укажите 3, то форма будет из трех страниц.

как вывести список страниц на сайте

В строчке — «Диапазон страниц для показа» стоит изменить значение, если на сайте очень много статей.

Укажите 5 — в конце формы появится нумерация 15, 20, 25… Укажите 10 — диапазон изменится на 20, 30, 40…

Укажите 2 — получите такую картину:

158

Понадобиться эта функция тогда, когда на сайте количество публикаций будет зашкаливать за 100.

Когда вы будете находиться на какой-нибудь странице из середины списка, панелька навигации станет шире из-за слов «Первая» и прочих. Учитывайте это при настройке плагина.

Сохраните изменения.

Как вставить постраничную навигацию в шаблон?

Как удалить стандартные надписи «Предыдущие записи – Следующие записи»? Как установить вместо них код вызова плагина?

В шаблоне Twenty Eleven нужно открыть на редактирование файл functions.php (Функции темы).

Найдите строки:

<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyeleven' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></div>

как вставить в шаблон постраничную навигацию

Вместо них пропишите:

<?php wp_pagenavi(); ?>

где разместить код постраничной навигации

В некоторых шаблонах нужно отредактировать 3 файла: archive.php, search.php и index.php (если у вас не статичная главная страница).

Ищете  строчки вроде:

<div class="navigation">
<div class="navleft"><?php next_posts_link('« Предыдущие записи') ?></div>
<div class="navright"><?php previous_posts_link('Следующие записи »') ?></div>

И вставляйте вместо них:

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

Не забудьте отредактировать все 3 файла.

Теперь на вашем сайте есть удобная и аккуратная постраничная навигация. Вот только плагин wp pagenavi не может придать навигации привлекательный вид.

Самое время добавить навигации ярких красок. В этом вам поможет статья «Готовые стили для панельки постраничной навигации».

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

Кстати, а вы уже убрали лишние заголовки из шаблона сайта? Бытует мнение, что заголовки должны использоваться только в тексте статьи, а h2 и h3 в элементах дизайна ухудшают оптимизацию сайта.

Добавить комментарий