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

Привет, Друзья! Продолжаем изучение плагинов для WordPress и сегодня разберем плагин WP Pagenavi . Данный плагин создает постраничную навигацию на блоге WordPress. Постраничная навигация будет удобна как автору блога, так и читателям, при перемещение по страницам Вашего сайта.

постраничная навигация в WordPress

Я заметил на некоторых сайтах отсутствует постраничная навигация, а есть просто возможность перемещаться на страницу “назад” или “вперед” только на один шаг, что довольно неудобно в наше-то время))), да и для автора блога это также не айс… Ладно, давайте будем разбираться как это дело исправить!

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

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

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

постраничная навигация в WordPress

Для того, чтобы перейти к предыдущим записям необходимо переходить по ссылки “более старые посты и т.д.” А представьте, что таких страниц очень много (и Вы знаете, что нужный материал находится на 14 странице…) – тогда это занятие становится достаточно обременительным!

А когда на блоге вы видите вот такую навигацию:

постраничная навигация в WordPress

Я думаю тут без комментариевУлыбкаВаще крутяк!!! Это и смотрится лаконичнее и навигация становится на порядок удобнее!!! И к тому же это еще один плюсик к юзабилити и поведенческим факторам нашего WordPress блога!!!

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

Плагин WP Pagenavi – удобная постраничная навигация

Итак, как скачать и установить плагин на WordPress объяснять, думаю не стоит? Для тех, кто только начинает заниматься созданием блога и не знает как и где скачивать и устанавливать плагины на WordPress блог – читаем здесь(подробная статья о том, где можно найти плагины WordPress, как скачать, и несколько способов как установить плагины на WP блог).

Значит установили и активировали плагин WP Pagenavi, переходим на главную страницу блога и смотрим, появилась ли у нас постраничная навигация или нет.

Вот тут может быть два варианта:

  • либо навигация появляется сразу и ничего в файлах шаблона добавлять не нужно
  • либо нужно добавить в файлы вашей WordPress темы строчку кода от плагина WP Pagenavi.

[yandexd]

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

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

Теперь от теории переходим к практики.

Давайте начнем со сложного – если после активации плагина WP Pagenavi навигация на блоге не изменилась.

Добавляем код от плагина WP Pagenavi в файлы шаблона WordPress

Обычно постраничная навигация нужна на главной странице блога, на странице с архивами ваших записей, и на странице с результатами поиска по блогу. Чтобы вывести постраничную навигацию на этих страницах, нужно, как я писал выше, добавить функцию вызова плагина WP Pagenavi в файлы шаблона, отвечающие за вывод этих страниц (ознакомьтесь со статьей где я рассказывал о структуре шаблонов WordPress для того, чтобы понимать какой файл за что отвечает)

[yandexd]

Итак, для того, чтобы вывести постраничную навигацию на главной странице вашего WP блога, открываем блокнотом notepad++ файл INDEX.PHP и ищем код, где хоть как-то упоминается о навигации

[php]<div class="navigation navigation-index">
<div class="nav-prev"><?php next_posts_link ( __ (‘&laquo; Older Entries’, ‘blank’)) ?></div>
<div class="nav-next"><?php previous_posts_link ( __ (‘Newer Entries &raquo;’, ‘blank’)) ?></div>
</div>[/php]

и меняем весь код на код от плагина WP Pagenavi

[php]<?php wp_pagenavi (); ?>[/php]

сохраняем изменения в файле и смотрим что получилось. Для этого просто обновляем главную страницу своего WP блога. Если постраничная навигация появилась, переходим к следующим файлам шаблона: аналогичным образом меняем код в файлах SEARCH.PHP и ARCHIVE.PHP

Как говорил выше, навигация во многих шаблонах может появиться и без редактирования файлов. В шаблоне уже заложена функция под плагин WP Pagenavi, т.е. после активации плагина – навигация меняется со стандартной на навигацию WP Pagenavi. Здесь даже и объяснять ничего не надо, активировали плагин и все!

Теперь давайте посмотрим:

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

Чтобы попасть в настройки идем в: “Админку блога – Параметры – Список страниц

настройки WP Pagenavi

1. Шаблон общего списка страниц. На сайте это выглядит так:

настройки WP Pagenavi

(страница 2 из 6)

2 и 3. Элемент «Текущая страница» и Элемент «Страница» На сайте имеет вид:

настройки WP Pagenavi

[sc:adsens728post ]

То есть в пункте 2 задается текущая стр., а в пунке 3 все страницы. Таким образом менять ничего в этих пунктах не стоит.

4 и 5. Элемент «Первая запись» и Элемент «Последняя запись»

настройки плагина WP Pagenavi   настройки плагина WP Pagenavi

Если в пункты 4 и/или 5 пропишите вот это %TOTAL_PAGES%, то “Первая” и/или “Последняя” будет отображаться в виде цифр.

Дальше идут еще несколько настроек, с которыми Вы и без моей помощи сможете разобраться:

настройки плагина WP Pagenavi

Элементы на сайте выглядят вот таким образом:

настройки WP Pagenavi

Стиль списка можно поставить выпадающий, но это, по-моему лишнее. Страниц показывать можете тоже сколько угодно.

Все, не забывайте сохранить изменения и обновить страницу Вашего WP блога.

Теперь, кого не устраивает внешний вид постраничной навигации, нужно открыть стили css плагина и настраивать как душе угодно! Стили находятся в папке с плагином по этому пути: /wp-content/plugins/wp-pagenavi/pagenavi-css.css

В этом уроке я не буду объяснять как настраивать css стили, просто потому, что это огромная тема, и чтобы ее раскрыть потребуется не один урок! Может быть позже открою рубрику по css стилям для новичков, а пока Вам в помощь хороший сайт которым я постоянно пользуюсь — http://htmlbook.ru/. И вот еще бесплатные видео уроки по css, обязательно изучите!

Ну а на этом сегодня закончим! Вот мы разобрали еще один полезный плагин для WordPress, и благодаря этом плагину мы немного улучшили поведенческие факторы у нас на блоге! В чём суть поведенческих факторов вы можете узнать тут

Для тех, кто сейчас работает на локальном компьютере (денвере) хочу сказать следующее: Еще разберем несколько плагинов и будем выбирать и покупать домен и хостинг, так что готовьтесь!

Если кому-то, что-то осталось не понятно, не стесняйтесь, спрашивайте в комментариях, я постараюсь ответить на все Ваши вопросы.

Также я начал предоставлять услуги по установке и настройке плагинов WordPress, так что кто не хочет заморачиваться, пишите на почту — aimblogru@gmail.com

Удачи Вам!

Пока-пока!!!

✌️ Хочешь продолжить разговор после статьи?

В Telegram я делюсь всем, чего нет на блоге: быстрые мысли, мемы, хаос и ностальгия.

Подписаться на Telegram
Комментарии: 23
  1. maxamuz

    Несомненно очень полезный плагин. Видел такую фишку на многих блогах, но как то руки не доходили осуществить у себя. 
    В связи с этим у меня возник ещё один вопрос. Как сделать так что бы страницы отображались в виде блога? Например, на моём сайте есть страница «О блоге»  и я хочу добавлять туда статьи, что бы они отображались как на главной. Как это осуществить? На Joomla достаточно просто создать горизонтальное меню. А как это сделать на Вордпресс?

    1. Voroni (автор)

      А наверно никак, хотя я точно не скажу… по крайней мере нигде такого не встречал, да и не думал об этом никогда.

    2. Геннадий

      Есть способ: сделать нужную страницу основной(родительской), а остальные ниже по списку. Если Вы это имели ввиду.

  2. Алексей

    Валера,у меня ничего не поменялось после установки этого плагина :( а в коды лезть не хочу…Может что-то в настройках доделать нужно? И ещё есть несколько похожих плагинов наряду с этим…В поиске вылазят…

  3. Константин

    Валера, спасибо за очень простое объяснение как установить плагин. *THUMBS UP*
    У меня «упрямый» шаблон для постраничных плагинов, но сейчас всё в порядке *YAHOO* .
    Сайт поставил в закладки и немного позже сделаю ссылку на Ваш сайт у себя.
    Ещё раз «Спасибо!» за Ваше время и приглашаю на смотрины на мой сайт.
    Успеха! 

    1. Voroni (автор)

      Спасибо, Константин! Шаблон у Вас прикольный)))

  4. Владимир

    Валера! Спасибо тебе за за эту статью. Всё понятно и доступно. Но уменя проблемка.Я установил плагин Wp PageNavi появились кнопки, все нормально.Но работают они только в архиве, а в катигориях когда нажимаеш кнопку на следующую страницу выбивает NouFond. Если тебе нетрудно подскажи где искать причину.

    1. Voroni (автор)

      Владимир, а без плагина постраничной навигации не было? И почему у Вас на гл одна статья только?

  5. Андрей

    Хороший плагин, сам им пользуюсь.

  6. Андрей

    Подскажите пожалуйста, попал в затруднительное положение. Разбил записи на несколько рубрик и они выводятся на разных страницах (каждая на своей). На Index’е все работает нормально, на помогает. Возможно ли это настроить ? Заранее спасибо

    1. Voroni (автор)

      Андрей, Скажите адрес сайта

      1. Андрей

        bespredely.16mb.com. На главной все работает, а вот например в разделе новости — нет

      2. Андрей

        Очень жду вашего ответа на почте. Заранее спасибо =)

        1. Voroni (автор)

          Андрей, вам просто нужно в файл page.php в нужное место вставить код вызова плагина [php]<?php wp_pagenavi ();  ?>[/php]

          1. Андрей

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

  7. Инна

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

    1. Voroni (автор)

      Инна, Попробуйте просто активировать плагин, а затем в файл index.php в конец вставить код [php]<?php wp_pagenavi ();  ?>[/php]

  8. Дима

    Очень интересная статья сделал все работает.

  9. Дима

    Привет!Никак не удается настроить данный плагин!Он устанавливается,активируется-но в параметрах никаких настроек нет!!!В чем может быть дело!WP 3.5

  10. Сергей

    Валерий все получилось только после вставки кода. Правда в админ панели его так и нет Кстати, как дополнение к PageNavi есть плагин WP PageNavi Style (удобно для тех кто в стили лезть не хочет, или не умеет) имеет множество настроек Спасибо за помощь в настройке!

  11. Руслан

    хорошая статья.Хороший плагин, сам им
    пользуюсь.

  12. Простой

    К сожалению на странице меток навигация не работает. Отображает только первую страницу, а при переходе на вторую и так далее выдаёт 404. И с плагином и с кодом не в какую.
    Не подскажите как это исправить?

  13. Вика

    Помогите пожалуйста!!!!!!!
    Уже неделю мучаюсь((((((((((((((
    Навигация есть только на главной странице,
    а на остальных дочерних и родительских вообще отсутствует(((((((
    Например на этой http://jean-sell.ru/shop/zhenshhinam-2/kofty/

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности (подробнее).