Хостинг от Макхост

Постраничная навигация на сайте

Автор: Евгений Несмелов
Постраничная навигация wordpress

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

к оглавлению ↑

Что такое навигация по страницам

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

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

Постраничная навигация на сайте

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

Я покажу пример, который быстро и без проблем можно установить на свой сайт. С добавлением немного css стилей, получится привлекательная картинка. Для установки на wordpress особыми знаниями владеть не нужно, все должно получиться с первого раза. На всякий случай перед установкой рекомендую сделать резервную копию базы данных.

к оглавлению ↑

Добавляем на Wordpress

Чтоб добавить такую навигацию на wordpress, как я уже говорил ранее, особых знаний иметь не нужно. Для этого достаточно вставить небольшой код в файл function.php и вывести все это дело в нужном месте. При желании так же можно красиво оформить с помощью верстки css. В интернете можно найти большое количество готовы примеров по оформлению, так же и я покажу пример, который сам использую на своем блоге.

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

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

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

к оглавлению ↑

Установка без плагина

Перед тем, как начинать, сделайте резервную копию базы данных, на всякий случай ( если что то пойдет не так, всегда можно вернуть вернуть все назад ). Если у вас не стоит рука заходить на хостинг и делать резервную копию, можно просто через FTP клиент сохранить копию файла function.php к себе на компьютер.

Заходим в админку wordpress, «Внешний вид — Редактор», находим и открываем файл function.php и копируем в самый низ вот этот код, который показан ниже. Не забываем после этого все сохранить. Ошибки выкинуть не должно, код проверен и полностью рабочий.

к оглавлению ↑

Добавляем код PHP

После этого переходим в файл index.php, в котором нужно вывести нашу функцию. Переходим почти в самый низ файла, на место, где заканчиваются ваши записи. На каждом шаблоне все по разному, попробуйте сами уже сориентироваться где у вас заканчиваются записи и начинается подвал сайта ( footer ). Перед началом подвала сайта ( <?php get_footer ();?> ) копируем вот этот код, который отвечает за вывод постраничной навигации на wordpress.

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

Далее переходим в админке wordpress в «Настройки — Чтение». Выбираем количество записей, которое будет отображаться на одной странице. У меня установлено отображать семь записей на одной странице, вы можете указать больше или меньше. В зависимости от общего количества записей на блоге и количества записей на одной странице, будет зависеть обьем количества кнопок в навигации.

Количество записей на странице

к оглавлению ↑

Добавляем стили CSS

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

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

  1. Делаем резервную копию базы данных.
  2. Добавляем код PHP.
  3. Выводим на главную.
  4. Наводим красоту стилями CSS.

к оглавлению ↑

Плагины

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

  • WP-PageNavi;
  • WP Smart Pagination;
  • Alphabetic Pagination;
  • Simple Pagination;
  • jPages pagination for WordPress;
  • Easy Pagination for WordPress;
  • Paginate;
  • Easy Pagination for WordPress.

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

к оглавлению ↑

WP-PageNavi

Один из самых известных плагинов для wordpress. Заходи в админку, «Плагины — Добавить новый» и пишем его название в поиске. Устанавливаем и активируем. WP-PageNavi уже переведен на русский язык и называется «Список страниц». Настройки очень просты, если ничего не менять, будет смотреться примерно так, как показано на рисунке.

Плагин WP-PageNavi

После установки плагина, сам по себе он не появится на главной странице. Как я уже уточнял немного выше, в любом случае нужно ковыряться в коде. Как и с предыдущим примером, нужно открыть файл index.php, который лежит в папке вашей темы wordpress. Если у вас ранее уже была установлена такая навигация, ее нужно удалить. Находим нужное место для вставки, обычно перед началом подвала сайта и вставляем вот этот код.

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

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

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

Подпишись на обновления блога!Будь в курсе первым
4 комментария

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

Такой e-mail уже зарегистрирован. Воспользуйтесь . формой входа или введите другой .

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

4 комментария

по хронологии
по рейтингу сначала новые по хронологии

да постраничная навигация рабоает, получилось добавить. спасибо

Автор

Не за что

Здравствуй! Перехожу по постраничной навигации на сайте и показывается архив страниц. Правильно ли это?

Автор

Добрый вечер. При переходе по страницам навигации должен показываться адрес
nesmelov.ru/page/2 и все предыдущие записи, которые были ранее опубликованы.
Что показывает в вашем случае?