Вопрос читателя: Постраничная навигация на WordPress блоге

Разместил: Юрий | 19.11.2015
30 комментариев

Всем привет, дорогие друзья читатели in4wp.ru. На связи опять Денис Тумилович. Сегодня будет необычный пост. Наверное первый в своём роде. Или второй, не помню уже. Сегодня, в общем — будет статьи-ответ на вопрос одного из читателей.

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

Что такое постраничная навигация на блоге

Что имеется ввиду под страничной навигацией (иногда эту штуку называют еще «Пагинация») — это числовое отображение страниц блога.

Вот как это может выглядеть.

wp-pagenavi пагинация
Принцип действия прост: в админке вы можете установить количество отображаемых статей, которые будут показываться НА ОДНОЙ странице вашего блога.

где настраивать количество страниц
Например поставили вы сюда цифру 10 (там где у меня цифра 6 на скриншоте), а статей у вас 15. Значит 10 статей будет на первой странице и еще 5 на второй странице.

И в блоке пагинации будут красиво показаны цифры «1» и «2». Чтобы сразу было понятно что у вас на блоге две страницы со списком статей.

Как видите, на сегодня у меня аж 22 страницы.

постраничная пагинация
Так вот, в cms wordpress такой возможности как постраничная навигация — нет!

Ну вот нет и всё.

Пагинацию нужно «Достраивать» руками, потому что по-умолчанию, это выглядит вот так:

стандартная пагинация
Как-то не очень, согласитесь.

Так вот, мы здесь сегодня собрались для того, чтобы установить красивую пагинацию (постраничную навигацию) на блоге. Давайте начнём, пожалуй.

Плагины, которые могу помочь вам с пагинацией

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

1. [urlspan]WP-PageNavi [/urlspan]

пагинация от wp-pagenavi
один из самых популярных и мощных плагинов. Кстати, для него есть у меня целый набор готовых стилей, а точнее 20 штук на выбор.

Чтобы получить все 20 стилей оформления — просто покликайте по кнопкам соц сетей и вы откроете для себя закрытую часть контента.


Установить стиль очень просто — скачайте архив понравившегося стиля и распакуйте в папку плагина /wp-content/plugins/wp-pagenavi/.

Читайте также:  Как делать отложенные публикации в WordPress ?

1 [urlspan]Скачать №1[/urlspan]

2 [urlspan]Скачать №2[/urlspan]

3 [urlspan]Скачать №3[/urlspan]

4 [urlspan]Скачать №4[/urlspan]

5 [urlspan]Скачать №5[/urlspan]

6 [urlspan]Скачать №6[/urlspan]

7 [urlspan]Скачать №7[/urlspan]

8 [urlspan]Скачать №8[/urlspan]

9 [urlspan]Скачать №9[/urlspan]

10 [urlspan]Скачать №10[/urlspan]

11 [urlspan]Скачать №11[/urlspan]

12 [urlspan]Скачать №12[/urlspan]

13 [urlspan]Скачать №13[/urlspan]

<

14 [urlspan]Скачать №14[/urlspan]

15 [urlspan]Скачать №15[/urlspan]

16 [urlspan]Скачать №16[/urlspan]

17 [urlspan]Скачать №17[/urlspan]

18 [urlspan]Скачать №18[/urlspan]

19 [urlspan]Скачать №19[/urlspan]

20 [urlspan]Скачать №20[/urlspan]

2. [urlspan]WP Smart Pagination[/urlspan]

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

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

3. [urlspan]Alphabetic Pagination [/urlspan]

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

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

4. [urlspan]Paginate[/urlspan]

paginate пагинатор плагин
Хороший плагин для пагинации. Достоинством в функционале этого плагина является возможность «листать» страницы десятками, а не по одной, как это возможно в обычном функционале того же pagenavi.

5. [urlspan]Smart Pagination[/urlspan]

классный пагинатор
Также отличный плагин, который кроме своих функций предлагает пользователю штук 10 готовых различных вариантов дизайна. А в Pagenavi их можно дополнительно закачивать (помните?).

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

Как я уже писал выше — PageNavi — является самым «ходовым» плагином для решения вопроса с постраничной навигацией на блоге.

Да, он прост и удобен.

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

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

Так вот, установили и заходим на страницу настроек, как показано на скрине.

настройки pagenavi
Как видите, я тут по пунктам сейчас буду всё расписывать. Итак.

1 — Этого пункта у меня нет на блоге. Он есть по умолчанию, когда вы только установили плагин. Так вот, по умолчанию у вас будет этот пункт выглядеть вот так:

navigaciya-plagin
Остальные постарался показать вот этим скриншотом. Тут прекрасно видно, где что как обозначается.

Читайте также:  Шорткоды - что это?

расшифровка пагинатора
Но это ж еще не всё, в настройках этого плагина есть еще пару строк, которые в первый скрин не влезли.

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

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

12 — Здесь нужно выбрать НЕТ, потому что если будет стоять «ДА» — навигация страниц будет стоять даже тогда когда она не нужна (т.е. когда страниц меньше чем на одну страницу). Но зачем? :)

13 — Количество страниц для показа, с учетом текущей страницы (по середине списка).

14 — Диапазон страниц для показа. Если поставите цифру «5» — то будет список : 1,2,3,4,5 и потом перечисление диапазонами 10,20,30 и т.д.

15 — Коэффициент диапазона — через сколько прыгает диапазон (предыдущий пункт)

Вот в пункте 13 — могут быть проблемы у некоторых. Если здесь стоит большое число, скажем «10» — то вы сможете видеть на своём блоге нечто подобное.

неправильная настройка плагина

Как сделать постраничную навигацию БЕЗ плагина

Конечно, без плагина придется работать с кодом. Придется руками лезть в файл функций — functions.php

Я работаю с Notepad — редактором. Даже не знаю, нужно ли его подробное описание? Если нужно — скажите, я напишу!

// Пагинация
function wp_corenavi() {  
  global $wp_query, $wp_rewrite;  
  $pages = '';  
  $max = $wp_query-&gt;max_num_pages;  
  if (!$current = get_query_var('paged')) $current = 1;  
  $a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999));  
  $a['total'] = $max;  
  $a['current'] = $current;  
 
  $total = 1; //1 - выводить текст "Страница N из N", 0 - не выводить  
  $a['mid_size'] = 2; //сколько ссылок показывать слева и справа от текущей  
  $a['end_size'] = 1; //сколько ссылок показывать в начале и в конце  
  $a['prev_text'] = '«'; //текст ссылки "Предыдущая страница"  
  $a['next_text'] = '»'; //текст ссылки "Следующая страница"  
 
  if ($max &gt; 1) echo '
Читайте также:  Terms Descriptions: Как превратить слова в ссылки?
$total = 1; //1 - выводить текст "Страница N из N", 0 - не выводить $a['mid_size'] = 2; //сколько ссылок показывать слева и справа от текущей $a['end_size'] = 1; //сколько ссылок показывать в начале и в конце $a['prev_text'] = '«'; //текст ссылки "Предыдущая страница" $a['next_text'] = '»'; //текст ссылки "Следующая страница" if ($max &gt; 1) echo '

‘; }

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

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

классный пагинация страниц
Но добавить функцию — это еще пол дела.

Теперь нужно вывести нашу пагинацию под списком статей.

Мы уже знаем, как организована структура шаблона wordpress блога. И мы знаем, что список статей в первую очередь выводится файлом index.php — вот в него и идём.

И в нужное место вставляем следующий код:

<!--?php if (function_exists('wp_corenavi')) wp_corenavi(); ?-->

После того как вы вставили этот код и сохранили изменения в файле — на блоге появится постраничная навигация!

Если вы не в курсе куда вставлять какой код — ОБРАЩАЙТЕСЬ! Я помогу! В том числе, если у вас что-то не будет получаться по стилизации или HTML верстке.

Пользуясь случаем, хочу объявить о том, что у меня есть БЕСПЛАТНЫЙ курс по созданию блога с нуля — ПОЛУЧИТЬ КУРС. Помогаю новичкам в развитии.

Надеюсь, я этой статьёй ответил на читательский вопрос. Спасибо за то, что его задали. Задавайте вопросы почаще — чем смогу — обязательно помогу! Ну и [urlspan]подписывайтесь[/urlspan], что ли.

[bye]

<

30 комментариев

  1. Сергей Оксак

    Спасибо, Денис! Очень подробный ответ — заставил меня сильно призадуматься, все прочитал — пошел пробовать, что же все-таки лучше, какой из предложенных вариантов

    Ответить
    1. Денис Тумилович

      Сергей, потом отпишитесь пжлст о результатах.

      Ответить
      1. Сергей Оксак

        Денис, уже час мучаюсь с плагином WP-pagenavi. Пока почему-то не особо получается, не понял, как задействуется стиль (скачал себе №15, все распаковал в указанную папку), версия плагина совпадает с твоей, но почему-то отражается все в принципе по-старому. Посмотри плиз сам на моем сайте, не могу никак понять что делаю неправильно! Завтра с новыми силами, попробую еще через код

        Ответить
  2. Степан

    То, что ты помогает читателям — это очень круто. Но ты не думал составить Семантическое Ядро и печатать статьи, что бы получать приличный трафик с поиска?
    Я вот так и сделал на своих сайтах и теперь у меня 2 сайта тысячника.

    Ответить
    1. Денис Тумилович

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

      Поисковой трафик это конечно круто, но я хочу общаться со своей аудиторией.

      Было бы здорово иметь 1000 друзей блоггеров. Я думаю это во всех смыслах было бы круче чем просто 1000 хостов из поисковика.

      Как считаешь?

      Ответить
      1. Степан

        Я думаю, что 1000 друзей-блоггеров никому нафик не надо. Нужно пару нормальных связей и всё. Тем более, что бы поддерживать связь хотя бы с 2-5 блоггерами, надо не мало времени, а с 1000 — вообще не реально.
        Так что лучше более 1к уников в сутки с поиска, небольшой доход + пара, тройка нормальных связей.

        Ответить
        1. Денис Тумилович

          Мысли шире.

          В любом случае, каждому своё. Не буду спорить.

          Ответить
        2. Александр

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

          Ответить
        3. Сергей Оксак

          Да уж, тут согласен. Времени на все просто не хватает, даже задачи себе ставишь — не забыть зайти на такой-то сайт и посмотреть новости. Если писать про все 1000, то жизнь покажется каторгой :)

          Ответить
      2. Вадим

        Денис, полностью согласен. Ядра — ядрами, но одно дело нагнать трафик из ПС, другое дело, суметь сделать так, чтобы этот трафик стал постоянной аудиторией. А это уже дорогого стоит. :)

        Ответить
        1. Сергей Оксак

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

          Ответить
      3. Александр

        От того сколько получает сайт трафика с поиска ничего не зависит. Человек зашел и вышел толку ноль. А вот когда блог ведется для людей, на нем общаются и многие посетители это твои знакомые и друзья которые помогут и подскажут, а то и просто пообщаются это на много дороже чем просто какой то трафик на 1000 уников.

        Ответить
  3. Вадим

    Когда-то использовал плагин wp-pagenavi, но потом поменял шаблон и решил максимально избавиться от плагинов и перенести в код.

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

    Денис, можно я немножко дополню.

    Просто я с этим сталкивался на стадии внедрения. Помимо, файла index.php есть еще arhive и search.php в которых эту строчку тоже надо вывести, а то в архиве и результатах поиска будет показана только первая страница.

    Ответить
    1. Денис Тумилович

      По дополнению — согласен. Просто я в статье про структуру шаблона не вдавался в такие подробности.

      Поэтому уже не стал описывать эти файлы.

      Ответить
  4. Артем

    Самый простой способ — это использовать встроенный функционал. В ВП начиная с версии 4.1. есть встроенная функция пагинации. Так что, поправь статью

    Ответить
    1. Denis

      опередил меня с ответом ))) вордпресс не спит на месте и развивается потихоньку. Встроенная пагинация на уровне ядра стала не плохим дополнением в новой версии движка.

      Ответить
  5. Александр

    А я уже долгое время ищу самое простое решения для того чтобы создать такую же навигацию по сайту как на блоге у Борисова. Хочу сделать так чтоб посетители могли переходить по страницам или ввести сразу номер необходимой страницы и перейти. Ну я думаю каждый видел какая у него на блоге навигация. Вот только как ее реализовать без плагина пока не нашел. Может кто поделиться кодом?

    Ответить
    1. Denis

      пагинация как у Борисова не так сложна, как кажется. если есть знания по верстке то делается на раз два.

      Ответить
      1. Александр

        Ну вот видите, а если знаний нет, то значит сделать не так то и просто. А вот мастера всякие не хотят делиться кодом, вот и приходится только искать или все таки сесть и сделать самому

        Ответить
  6. Александр

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

    Ответить
  7. Сергей Оксак

    Денис, а как получить твой бесплатный курс по созданию блога с нуля? С удовольствием бы познакомился, может быть что-то бы новое для себя почерпнул! Почему спрашиваю? Когда нажимаю на ссылку, меня перебрасывает в страницу подписки и второй раз подписаться не дает, а между тем новости от тебя мне не приходят, только комментарии и ответы на них. Сам я регулярно захожу на твой сайт, но по своей закладке… Грустно :(

    Ответить
    1. Денис Тумилович

      На какой емейл была регистрация?

      Ответить
      1. Сергей Оксак

        Мой главный — oksakserg@yandex.ru. Или нужно ввести другой, чтобы подписка прошла?

        Ответить
        1. Денис Тумилович

          Да вроде бы и нет. Подписал вас вручную. Ожидайте. Если не придет — напишите в поддержку.

          Ответить
          1. Сергей Оксак

            Тестовое письмо пришло, жду дальше до завтра. Курс как я понял, будет приходить поурочно. Если не получу,тогда уже пишу в техподдержку. Спасибо

          2. Денис Тумилович

            нет, должна прийти ссылка на скачивание всего курса. Жить ему кстати недолго осталось.

  8. Сергей Post author

    Всегда использую WP-PageNavi, ну конечно можно и самому замутить пагинацию, но нужно ли)!?

    Ответить
  9. Олег

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

    Ответить
  10. Надежда

    У меня была навигация такая, красивая, но я взяла и убрала и скорость открытия страницы увеличилась, да еще и значительно. Ну, может быть у меня тема такая, нестандартная.

    Ответить
  11. Ольга

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

    Ответить

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

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