Постраничная навигация в WordPress. Плагин WP-PageNavi и его настройка

Logo
Постраничная навигация в Wordpress. Плагин WP-PageNavi и его настройка

В этой статье речь пойдет о создании постраничной навигации в WordPress при помощи плагина WP-PageNavi. Будет по порядку рассмотрена установка и настройка плагина WP-PageNavi на сайт WordPress, а также правка CSS стилей для придания привлекательного внешнего вида вашей постраничной навигации. Благодаря этому, она гармонично впишется в дизайн вашего сайта и никто не заметит, что все это сделано при помощи простого плагина.

Как известно в WordPress по умолчанию нет постраничной навигации, что не очень удобно, если у вас имеется большое количество заметок на блоге. Конечно, можно задать количество записей выводимых на главную, но это не выход. При большом количестве заметок на главной, блог станет очень долго грузится, а при малом вы сможете просмотреть только несколько записей, так как остальные не будут доступны. Конечно, кому нужно тот сможет зайти в рубрики и найти остальные заметки вручную, но нам такой способ не подходит. Мы будем использовать другой метод – создание постраничной навигации посредством плагина WP-PageNavi.

Установка плагина WP-PageNavi

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

Вернемся к WP-PageNavi. Первым делом нам нужно скачать плагин и установить его. Найти WP-PageNavi можно на сайте http://wordpress.org или просто воспользовавшись поиском. В любом случае попадете на wordpress.org, так как этот сайт постоянно находится в топе по большинству запросов связанных с плагинами WordPress и является несомненным лидером среди других.

Итак, после того как вы скачали последнюю версию WP-PageNavi, распаковываем архив с плагином в папку \wp-content\plugins. Если сайт находится уже на реальном хостинге, то копируем по FTP папку с файлами плагина в директорию \wp-content\plugins. После этого переходим в «Административную панель WordPress» — «Плагины», находим WP-PageNavi и активируем его. Затем переходим к настройке постраничной навигации.

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

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

  • Шаблон общего списка страниц – здесь можно задать, как будут выводиться страницы в общем списке. Обычно этот параметр оставляют без изменений, но при необходимости вы можете его изменить по своему усмотрению.
  • Элементы «Страница» и «Текущая страница» — можно оставить без изменений. Сам я не изменял эти параметры, так как в этом не было необходимости.
  • Элементы «Первая» и «Последняя» страницы – здесь можно прописать то, что будет отображаться на кнопках перехода на первую и последнюю страницы постраничной навигации. Меняем по своему усмотрению, но обычно этот параметр оставляют таким как он есть по умолчанию.
  • Элементы «Предыдущая» и «Следующая» страницы – сюда можно прописать нужные нам значки либо текст, который будет отображаться на кнопках перехода на соответствующие предыдущую и следующую страницы сайта. Как и в предыдущих случаях изменяем по своему усмотрению либо оставляем все как есть.

  • Использовать стиль pagenavi-css.css – отмечаем этот пункт галочкой, так как мы собираемся использовать собственную таблицу стилей плагина постраничной навигации WP-PageNavi, а не CSS стили нашей темы WordPress.
  • Стиль списка – «Обычный». При желании и в зависимости от дизайна сайта можно выбрать другой, но этот, на мой взгляд, самый подходящий.
  • Всегда показывать список страниц – не отмечаем галочкой.
  • Количество страниц для показа – ставим свое значение. Обычно отображают 5 страниц, но вы можете поставить свое значение, изменив его как в большую сторону, так и в меньшую.
  • Диапазон страниц для показа – ставим «0». Если же у вас на сайте WordPress очень много страниц то, скорее всего, вам придется изменять это значение по своему усмотрению в зависимости от количества записей.
  • Коэффициент для диапазонов страниц – эта опция изменяется при включенной предыдущей. С помощью ее можно создать так называемый «шаг» для списка страниц. В принципе внизу под данной настройкой есть очень понятный пример. Если же вы что-то не поняли, то всегда можно поэкспериментировать на локальной версии сайта, что я вам и рекомендую при установке новых плагинов.

На этом настройка плагина постраничной навигации WP-PageNavi со стороны административной панели заканчивается. Если какие-то пункты были пропущены, то их значения оставляются по умолчанию. Теперь переходим к настройке CSS стилей WP-PageNavi.

Правка CSS WP-PageNavi

Итак, переходим к завершающему этапу установки и настройки плагина постраничной навигации WP-PageNavi. Для того чтобы наша постраничная навигация не слишком выделялась на общем фоне мы немного подкорректируем ее внешний вид. Для этого переходим в папку плагина и открываем на редактирование файл pagenavi-css.css. Здесь всего один класс, поэтому давайте быстро разберемся с его настройкой. Я постараюсь как можно понятней описывать то, что находится в таблице стилей этого плагина.

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

.wp-pagenavi {
clear: both;
font-size: 12px; /*размер шрифта*/
margin-top: 10px; /*отступ сверху так как у меня постраничная навигация «налезала» на заметки.*/
text-align: center; /*выравнивание по центру. Так все смотрится намного симпатичней, чем когда стоит выравнивание по левому краю, которое используется по умолчанию.*/
}

.wp-pagenavi a, .wp-pagenavi span { /*одним словом стиль для ссылок и текста «Страница х из у»*/
text-decoration: none; /*стиль без подчеркивания*/
border: 1px solid #BFBFBF; /*сплошная рамка толщиной в 1 пиксель цвета #BFBFBF*/
padding: 3px 5px; /*внутренний отступ (одним словом внутренние отступы от границы рамки)*/
margin: 2px; /*внешние отступы (внешние отступы от границы рамки)*/
}

.wp-pagenavi a:hover, .wp-pagenavi span.current { /*стиль для ссылки при наведении и текущей позиции*/
border-color: #000; /*цвет рамки «черный»*/
}

.wp-pagenavi span.current { /*стиль для текущей страницы*/
font-weight: bold; /*стиль текста «жирный»*/
}

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

На этом я заканчиваю статью об установке и настройке плагина WP-PageNavi. Если у вас остались какие-то вопросы, вы можете задать их в комментариях. Также вы можете подписаться на новости блога удобным для вас способом на странице «Подписка».

На этом все. Удачи вам. Встретимся на страницах блога dmitriydenisov.com

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

Комментарии 22

  • alpings

    Плагин не ставил, код прописывал вручную. Но описанием стиля для кнопок воспользовался. Спасибо.

  • Владимир

    проблема при настройке плагина прикрепляю скриншот
    как решить?
    _http://narod.ru/disk/7645451001/1.jpg.html

  • Дмитрий

    Попробуйте увеличить нижний отступ. Должно помочь.

  • Владимир

    Подскажите пожалуйста как увеличить отступ?

  • Дмитрий

    Отступы в CSS задаются при помощи свойства margin. Поля (внутренние отступы) при помощи padding. Для более полного понимания рекомендую ознакомиться со статьей Каскадные таблицы стилей (CSS) — Свойства текста, полей, отступов, границ и шрифтов, а также с другими материалами из рубрики HTML, PHP, CSS и MySQL

  • Владимир

    спасибо!

  • Максим

    Устанавливаю плагин, в его настройках из админки все верно, но на сайте ничего не отображается. Подскажите, как мне быть, мой сайт:  mywebconstructor.ru Да, в настройках плагина в админке стоит «отображать»

  • Дмитрий

    Скорее всего вам нужно добавить в шаблон функцию постраничной навигации. Для этого в нужное место шаблона добавьте следующий код:
    < ?php wp_pagenavi(); ?>
    После этого на его месте будет отображаться постраничная навигация.
    Сразу хочу заметить, что это прямой вызов функции и если вы отключите плагин, то у вас на сайте появится ошибка. В связи с этим лучше использовать этот код:
    < ?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
    В этом случае не будет никаких ошибок даже если плагин не активирован.

  • Максим

    Насколько я понимаю, данный код вставлять в index.php моего шаблона?

  • Дмитрий

    Да. Кроме того может потребоваться добавления кода также в файл archive.php, если такой имеется. Данный файл отвечает за вывод списка категории, поэтому в нем тоже должна быть постраничная навигация. Исключением являются темы в которых индексный файл отвечает также и за вывод списка категорий.

  • Максим

    Вообще мой шаблон достаточно странный — в нем (index, comments, footer, function, header, page, и три сайдбарных файла) Видимо — это тот исключительный случай.

  • Дмитрий

    Ничего страшного. Значит вам нужно добавить код только в файл index.php. Я сталкивался с такими шаблонами и на самом деле их достаточно много. Лично я для своих проектов всегда выбираю шаблоны с полным набором файлов. Мне так как-то удобнее работать. Но если у вас меньше файлов, то это не означает, что шаблон плохой. Просто в нем совмещены некоторые файлы. Во всем остальном шаблон такой же как и все.

  • Максим

    После изменения в index () навигация стала отображаться, но при переключении на страницы в шапке — исчезает. Подскажите, почему это происходит?

  • Дмитрий

    Это происходит потому что данный файл не отвечает за вывод статических страниц. За их вывод отвечает файл page.php. Что касается самой постраничной навигации, то на статических страницах ее быть и не должно, поэтому все в порядке.

  • Rus

    В CSS прописываю это
    font: normal 1em/1.4em Arial, Helvetica, sans-seri
    но изменений нет. Подскажите, что не так делаю?

  • Дмитрий

    Возможно прописываете свойство не для того правила CSS. Или же попробуйте добавить в конце свойства «!important». Возможно свойства шрифтов наследуются с какого-то другого правила, поэтому эти не срабатывают.

  • Rus

    Спасибо за ответ.
    А где и что нужно прописать чтобы наследовать css своей темы?

  • Дмитрий

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

  • Всеволод

    Сделал все как вы описали в своих рекомендациях, а плагин не работает. Что ему еще надо добавить? и когда вызываю файлы плагина в настройках, то часть файлов оказывается отключенными при включенном плагине. Где то еще надо менять?

  • Дмитрий

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

  • Екатерина

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

  • Дмитрий

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

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

отменить ответ