Делаем постраничную навигацию для WordPress без плагина и с WP-PageNavi

Привет всем!

Продолжаю писать статьи, посвященные навигации сайта на движке WordPress.

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

Материал вышел очень объемный и, пожалуй, самый исчерпывающий в сети.

Постраничная навигация (пагинация) - это разбиение информации на страницы. Если взять массу сайтов на Wordpres, то данный феномен ярко выражен в видео списка номеров страниц внизу каждой страницы с анонсами. На моем блоге данная функция имеет следующий вид.

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

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

Как правило, сейчас в современных шаблонах Wodpress постраничная навигация уже встроена. Но имеется вариант, когда ее и нет. Тогда придется реализовать. Вместо нее может быть разбиение анонсов на страницы в виде ссылок на предыдущие и следующие записи. Это ярко выражено в стандартных шаблонах.

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

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

Делаем без плагина

Сейчас я покажу способ, после которого у вас будет точно такая же постраничная навигация WordPress, как и у меня. Делается все очень просто. Потребуется 2 части кода, которые нужно будет разместить в файлах шаблона, а затем прописать стили, чтобы задать оформление. Приступим!

Вот первая часть кода. Ее необходимо разместить в файле functions.php шаблона оформления.

Я разместил код в самое начало файла после открывающего тега <?php.

В данном коде мы можем отрегулировать некоторые параметры:

  • Строка 10 - если изменить значение 0 на 1, то рядом с номерами страниц будет выводиться надпись вида, например "Страница 3 из 45". Можете сделать такой вариант, но я считаю, что в данном случае он не нужен, так как в номерах страниц и так понятно, сколько страниц на сайте. А активная страница выделяется другим цветом;
  • Строки 11 и 12 - слева и справа номера активной страниц должно отображаться определенное количество предыдущих или следующих номеров соответственно. Тут мы выставляем их количество. В данном коде стоит значение 1. Можно поставить 2 или 3. Тут нужно будет немного поэкспериментировать, так как чем больше количество номеров, тем шире будет навигация. Все зависит от ширины шаблона.

Далее необходимо разместить вторую часть кода.

Так как постраничная навигация должна отображаться везде, где выводится список анонсов,то необходиммо данный код разместить во всех файлах, где это происходит:

  • Главная страница - index.php;
  • Страницы рубрик и архивов - category.php и archive.php;
  • Страница поиска - search.php.

Кстати, в некоторых шаблонах вывод страниц рубрик и архивов может осуществляться одним файлом. У меня за это отвечает файл archive.php.

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

Как правило, стандартная навигация в виде предыдущих и след. ссылок выводится с помощью подобного кода.

У каждого данный код может быть разным, но его основная начинка будет одинаковой. Вам нужно будет найти код, который будет содержать код с названиями next_posts_link и previous_posts_link.

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

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

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

Далее нужно прописать стили, чтобы навигация имела должное оформления. Даю вам свои стили. Можете их смело разместить в своем файле style.css.

Также необходимо загрузить картинки стрелок перемещения вперед и назад на хостинг в папку images шаблона оформления. Скачайте их отсюда. Для загрузки можете пользоваться стандартным файловым менеджером хостинг провайдера. Я же использую Filezilla.

Когда разместили коды в файлах functions.php, во всех файлах, выводящих страницы с анонсами и прописали стили, можем проверить работоспособность навигации. У меня все работает и в стандартном шаблоне она имеет следующий вид.

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

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

Плагин WP-PageNavi

Для начала скачиваете плагин с официальной страницы и устанавливаете его на сайт.

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

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

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

С одной стороны оформление не ахти, а с другой очень даже ничего, так как не мозолит глаза. Пользователи любят простоту! Поэтому, можно все так и оставить. Если же хотите чего-то более красочного, то сейчас мы с вами рассмотрим некоторые варианты. А пока мы обсудим такую вещь, как настройка wp pagenavi. Настройки имеются и о них стоит поговорить.

Касаемо первого пункта настроек "Шаблоны списка страниц", то в нем ничего менять не нужно. Нас все устраивает. Мы двигаемся к пункту "Настройки списка страниц".

Отмечу, что со всеми параметрами в этом пункте нужно экспериментировать, чтобы найти оптимальное значение для себя. Я лишь объясню вкратце, за что отвечает каждый параметр.

  • Использовать стиль - если поставим значение "No", то стили плагина уберутся и номера страниц не будут оформлены;

  • Стиль списка страниц - кроме обычного списка номеров страниц мы можем выбрать вариант выпадающего списка;

  • Всегда показывать список страниц- настройку не включаем. Нужно, чтобы список отображался только там, где это необходимо;
  • Количество страниц для показа - отвечает за количество выводимых номеров страницы в начале списка. По умолчанию, значение стоит 5 и на скриншотах выше вы можете посмотреть, что именно 5 страниц выводятся;
  • Диапазон страниц для показа - если на вашем сайте очень много страниц, то данная функция будет крайне полезна. Она будет выводить  номера страниц после основного списка со значениями 10, 20, 30, 40 и так далее. Интервал между этими значениями определяется следующим параметром;
  • Коэффициент для диапазонов страниц - если выстави значения 5, то диапазон страниц будет иметь вид - 10, 15, 20, 25 и т.д. Если 10, то 10, 20, 30, 40 и так далее. Значения 10 вполне достаточно.

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

Идем дальше и рассмотрим варианты, как можно изменить оформление списка номеров страниц в данном плагине.

Самый простой вариант - установка дополнительного плагина, который имеет уже заготовленные стили, а также дает возможность настроить каждый параметр индивидуально. Называется плагин Wp Pagenavi Style.

После его установки в админ-панели WordPress появляется новый пункт.

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

Если же хотим настроим стили индивидуально, то в первом пункте настроек "Select Stylesheet" выбираем вариант "Custom" и настраиваем параметры всех элементов (границ и их цветов, цветов и размеров шрифтов, цвета ссылок при наведении курсора мышки и так далее).

Переведу вам все параметры.

  • Heading Color - цвет текста "Страница 3 из 45";
  • Background Color - цвет фона;
  • Active/Current Background color - цвет фона активного номера страницы;
  • Font Size - размер шрифта;
  • Link Color - цвет ссылки;
  • Link Mouse Hover/ Active Hover - цвет ссылки при наведении мышки на номер и при активности номера;
  • Link Border Color - цвет границы;
  • Link Border Mouse Hover/Active Color - цвет границы при наведении курсора мышки и пи активности номера;
  • Align Navigation - расположение навигации (слева, справа, центр).

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

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

Второй вариант осуществляется с помощью редактирования файла стилей, который расположен в папке с плагином Wp-pagenavi на хостинге - pagenavi-css.css.

Данный файл подключается, когда в настройках плагина активна настройка "Использовать стиль pagenavi-css.css". Поэтому, если мы его отредактируем, то после обновления плагина, все стили заменятся на стандартные. Чтобы каждый раз на заменять данный файл и не прописывать стили заново я рекомендую сделать следующую вещь:

  1. Отредактировать стили в этом файле на свои, придав нужное оформление постраничной навигации;
  2. Отключить настройку "Использовать стиль pagenavi-css.css";
  3. Разместить эти стили в основном файле стилей шаблона оформления style.css.

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

Итак, друзья. Материал получится очень хорошим, как на меня. Что вы думаете на этот счет? Надеюсь, что вы все сделали. Если что-то не получается, то в комментариях постараюсь помочь. Пишите, не бойтесь! Я также когда-то очень мучился и мне удалось разобраться.

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

Пока!

С уважением, Константин Хмелев!

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 17
  • У меня нет в archive.php записей, содержащих next_posts_link и previous_posts_link. Что делать?

    • Здравствуйте. Чтобы более точно понять суть проблемы, ответьте, пожалуйста, на следующие вопросы.

      1. Имеется ли у вас на сайте вообще навигация "предыдущие и следующие посты" на страницах рубрик и архивов?

      2. В папке с шаблоном кроме файла archive.php имеется ли еще файл category.php?

  • Спасибо за быстрый ответ

    1) Нет, не имеется

    2) Да, есть такой, называется шаблон рубрик (category.php)

    • Если стандартной навигации нет, то и кода за ее вывод также в этих файлах не будет. Нужно разместить код вывода постраничной навигации после кода, выводящего список анонсов (если сами никак не сможете, то скиньте на почту свой шаблон, я попробую помочь). И разместить его нужно на всех страницах, где выводится список анонсов (index.php - главная страницы, category.php - рубрики, archive.php - архивы).

      В вашем случае за вывод страницы рубрик отвечает файл category.php. У меня же его нет и поэтому и рубрики и архивы выводятся через один файл archive.php.

      Останутся вопросы, обращайтесь.

      • Вот шаблон

        • Шаблон в комментариях не отобразится. Скиньте мне на почту info@kostyakhmelev.ru файл вашего шаблона, куда нужно вставить код. Я вам помечу, чтобы вы дальше знали, где у вас заканчивается код вывода анонсов. Лучше, если полностью скинете ваш шаблон, чтобы я смог убедиться, что я правильно подсказал. Также укажите код, который стоит разместить.

  • Здравствуйте. У меня такая же проблема, не нашел в шаблоне код стандартной навигации, что бы его заменить, или просто его нет. Поэтому просто вставил этот код : "" как вы посоветовали в index.php после блока "контент". Далее подключил стили и залил стрелки. Навигация появилась, но в левой верхней части сайта, ближе к шапке, и к ней не подключились стили и стрелки. Вообщем криво отображается. А в низу страницы так и осталась старая навигация " Предыдущие записи" и "Прошлые записи".
    Что делать в таком случае ?

    • Здравствуйте. Если стандартная навигация присутствует, то и ее код в шаблоне непременно есть, т.к. ей не с чего было бы генерироваться. Вопрос только лишь в том, в каком файле находится ее код. Возможно, шаблон имеет на самую простую структуру и код вывода стандартной навигации находится где-то в другом файле. Когда описываете проблему, старайтесь прилагать ссылку на сайт с ошибкой, чтобы я мог взглянуть и ответить на ваш вопрос. В ином же случае мне стоит лишь догадываться, что вы сделали неправильно. А неправильно вы сделали, судя по всему, именно вставку - в неправильное место. Поэтому и постраничная навигация появилась в другом месте. Но стили все же должны были появиться, т.к. от места размещения кода они не должны меняться. Если вам не терпит, вы можете скинуть шаблон мне на почту (info@kostyakhmelev.ru) и я, как только появится свободное время, постараюсь вам помочь.

      • Все, разобрался. Там просто немного по другому было.

        • Окей. Понял вас)

          • Здравствуйте.мне нужна ваша помощь.какая будет стоимость добавления подстраничной навигации мне на сайт??

  • У меня тема Supernova, в ней следующая навигация: 1 2 3 ›»
    Хотел поменять на более удобную, как в WP-pagenavi: Page 10 of 24 «First ...« 8 9 10 11 12 » 20...Last»
    Не найду, где менять коды. Просьба подсказать

    • Такой шаблон я не нашел в интернете, больше искать ничего не буду. Надеюсь, что вы меня поймете. В принципе, все достаточно понятно описано в статье. Вам нужно зайти в файлы, где имеется такая навигация (главная - index.php, архивы - archive.php, категории - category.php) и после кода вывода контента найти строку кода вывода такой навигации. Затем заменить ее на код, который выводит постраничную навигацию с плагином WP-pagenavi. Там уже на глаз смотрите. Более конкретно я что-то сказать не могу, т.к. не вижу код шаблона.

  • Спасибо за такую подробную инструкцию! у меня все получилось и без плагина

  • Здравствуйте Константин
    Я создал собственную тему и сделал все так ,как вы написали
    вставил в category.php после цыкла

    <!--
    -->

    <!--
    -->

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

    • Здравствуйте. Ссылку на сайт оставьте, я гляну.

  • Константин, спасибо. Все сделал за 5 минут. Все просто и понятно. Респект!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *