Шаг №59.Создание постраничной навигации на wordpress.

Приветствую всех на сайте WPcreate.ru. Сегодня мы с Вами создадим на сайте постраничную навигацию на wordpress (по умному эта штука еще называется пагинация).

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

Недавно в комментариях проскочил вопрос от Глеба:

Как сделать вот такие переходы страниц Страница <1 из 14  1 2 3 4 5 6 7  … 14 >

А вот так это выглядит у меня на сайте:

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

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

Создаем постраничную навигацию на wordpress при помощи плагина WP Page Numbers.

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

1)Итак, первым делом скачиваем плагин WP Page Numbers .

2)Устанавливаем скачанный плагин на wordpress.

3) Переходим в админку, а потом Параметры->Page Numbers.

Доступно несколько цветовых схем для постраничной навигации:

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

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

Для того что бы все аккуратно выглядело, и надписи были на русском языке, я предлагаю установить такие же значения плагина как и у меня:

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

Так, на этом все главные настройки в админке закончены, и теперь осталось добавить код в шаблон сайта.

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

<?php previous_post(); ?> <?php next_post(); ?>

Вот код который необходимо вставить вместо того который указан выше:

<?php if(function_exists('wp_page_numbers')) { wp_page_numbers(); } ?>

Сохраните файл, и перейдите на главную страницу сайта.

Если Вам необходимо добавить постраничную навигацию в рубрики или категории тогда смело открывайте файл archive.php и по аналогии вставляйте новый код вместо старого.

Создаем постраничную навигацию на wordpress без помощи плагинов.

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

Итак вот код который необходимо добавить в файл functions.php Вашего шаблона:

// Постраничная навигация
function wp_corenavi() {
  global $wp_query, $wp_rewrite;
  $pages = '';
  $max = $wp_query->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'] = 3; //сколько ссылок показывать слева и справа от текущей
  $a['end_size'] = 1; //сколько ссылок показывать в начале и в конце
  $a['prev_text'] = '«'; //текст ссылки "Предыдущая страница"
  $a['next_text'] = '»'; //текст ссылки "Следующая страница"
 
  if ($max > 1) echo '
';
}
// Постраничная навигация

А вот который необходимо вставить в файл index.php по аналогии как из примера выше:

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

Получилось ли у Вас создать постраничную навигацию на Вашем сайте?

  • ильдар

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

  • http://salaty-i-zakuski.ru Юля

    Поставила плагин WP Page Numbers. Все вроде получилось. Только одно но. На главной странице у меня получилось 4 странички. Так вот на первой страничке выводятся все записи, а на остальных по 6 как установила в настройках вордпресс. Не могу понять как сделать, чтобы на первой странице тоже было 6 записей как и везде. Я уже не знаю где лазить. Что сделать нужно?

  • http://ok-nogotok.ru Екатерина

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

  • http://ok-nogotok.ru Екатерина

    Обратила внимание, что статья эта была написана в рамках ответа на вопрос. Может вы и на мой вопрос ответите. Я неоднократно вижу на сайтах такое плавающее окно, даже не знаю как это называется. Посмотрите вот пример на этой странице (http://www.aromajournal.com/efir/efir.htm), когда опускаешься вниз статьи, то появляется окошко с напоминанием или записью. Как это сделать? Может подскажете. Или скажите хотя бы как это называется правильно.

    • http://wpcreate.ru Артем Петрусенко

      Такая штука делается при помощи CSS может в ближайшее время действительно напишу урок на эту тему.

  • http://omnycknik.com Анна

    Здравствуйте, Артем! С помощью кода удалось установить постраничную навигацию, но у меня висят надписи Older posts и Newer posts. Не подскажете, как от них избавиться? (Тема Adventure Journal)

    • http://wpcreate.ru Артем Петрусенко

      Здравствуйте Анна, Вам необходимо найти в каком файле находится вывод этих слов. http://wpcreate.ru/step/karta-sayta-chto-eto-takoe-i-zachem-ona-nuzhna.html#comment-4110 вот тут я уже объяснял как это сделать. Найдите в каком файле выводятся, после чего удалите вывод.Это и есть решение проблемы.

  • Iana

    Здравствуйте!
    У меня такой вопрос. Можно ли использовать плагин wordpress на обычном сайте, не написанном на wordpress?

    • http://wpcreate.ru Артем Петрусенко

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

  • http://personalteach.ru Юрий

    Артем у меня index.php совсем короткий и там нет похожего кода 🙁
    —-
    <?php
    /**
    * Front to the WordPress application. This file doesn't do anything, but loads
    * wp-blog-header.php which does and tells WordPress to load the theme.
    *
    * @package WordPress
    */

    /**
    * Tells WordPress to load the WordPress theme and output it.
    *
    * @var bool
    */
    define('WP_USE_THEMES', true);

    /** Loads the WordPress Environment and Template */
    require('./wp-blog-header.php');

  • http://nigmaweb.ru Илья

    Познавательно! Я сделал сам без помощи плагина. Немного не так как у Вас в примере, но работает тоже не плохо… 😉

  • http://sozvezdieledi.ru Инна

    Спасибо огромное! Долго и упорно искала как это сделать, а оказалось все так просто.

  • https://knightbulletin.wordpress.com/ Serg

    Здравствуите.
    Подскажите пожалуиста, меню в wordpress лучше создавать из страиц или из рубрик?

    • http://info-disc.hol.es/ Владимир

      Все зависит от вкуса и поставленной задачи.

  • http://4idroid.com Егор

    Наконец то у меня все получилось!

  • http://live-pretty.ru Temo4kin

    Да, проблема в том, что не смог найти «previous_post() and next_post()». В итоге поставил код методом проб и ошибок. Но теперь не могу найти надписи «Предыдущие записи»…

    • http://info-disc.hol.es/ Владимир

      В разных темах, код может быть в разных файлах. Например если в одной теме код находиться в index.php файле, то в другой это loop.php файл. Рекомендации на будущее всем если нужно найти какую-то строку, скопируйте все файлы темы из корня на ПК. Выполните поиск = результат 1 или несколько файлов. Переходите на сервер зная названия файла смело ищите его и меняйте.

  • http://healthbeauty-ok.ru Татьяна

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

  • http://ncuxolog.astrakraft.ru/ Светлана

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

  • http://a-beautifullife.ru Ольга

    Добрый вечер! Я попробовала установить коды на сайт и теперь у меня вместо сайта белый экран, не подскажите что делать?

    • Евгений

      +
      таже фигня…
      Если прописываю перед if(have_posts()) такой код , то статьи выводятся, но постраничная навигация не работает.

      Если прописываю перед if(have_posts()) этот код , то вообще белый лист (хотя, насколько мне известно, для того, чтобы «постраничка» работала нужно именно через $query_string писать).

      Не подскажите, в чем может быть дело? Или возможно код запроса не так составлен?

      • Евгений

        Хм, что-то код пхп исчез. Ладно, дублирую по-другому:
        Если прописываю перед if(have_posts()) такой код — query_posts(‘category_name=news&showposts=2′); , то статьи выводятся, но постраничная навигация не работает.

        Если прописываю перед if(have_posts()) этот код — query_posts($query_string.’cat=1&posts_per_page=2’); , то вообще белый лист (хотя, насколько мне известно, для того, чтобы «постраничка» работала нужно именно через $query_string писать).

  • http://info-disc.hol.es/ Владимир

    Спасибо большое! Перепробовал несколько плагинов и РНР-кодов, но заработал только Ваш.

  • http://yarovaya-travel.ru/ Ирина

    Здравствуйте!

    Можете мне подсказать в таком вопросе: я опубликовала 41 пост, в настройках установила по 19 постов на каждую страницу. То есть получается уже 3 страницы должно быть, а у меня 2 страницы и отсылает на первую (на свежие посты). То есть несколько постов не отображаются, но в рубриках они есть. Где мне в настройках нужно изменить и что?
    Спасибо за ответ заранее!!!

  • http://draber.pp.ua Владислав

    Здравия желаю и Благодарю за статью. Я искал в интернете как сделать постраничную навигацию в вордпресс. И нашёл. Использовал первый описанный плагин WP Page Numbers. Установил из репозитория за 5 секунд и настроил, играясь настройками, за 5 минут. Можете посмотреть как получилось на моей персональной странице http://draber.pp.ua 😉

    • http://wpcreate.ru Артем Петрусенко

      Поздравляю, отлично получилось!

  • http://karetnikoff.com/%D0%B0%D0%B4%D0%BC%D0%B8%D0%BD%D1%80%D0%B0%D0%B9%D1%82%D1%81-adminrights/ts/ Sergej

    Мне не удалось.
    Разместил длинный текст на сайте, но постранично он не разбился, чего хтелось бы добиться 🙁

  • http://blgschool1.edu22.info/ Дима

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

    Пробовал полностью весь код менять, пробовал две строки кода php next и php previous менять, но результат один. Подскажите в чем причина? Что я не так делаю?

    • http://wpcreate.ru Артем Петрусенко

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

      • http://blgschool1.edu22.info/ Дима

        Шаблон называется «Desk »
        Там дело в том что код который нужно заменить разбит на 2 части.

        • http://wpcreate.ru Артем Петрусенко

          Скиньте ссылку, откуда его скачивали.

          • http://blgschool1.edu22.info/ Дима

            Скинул ссылочку ниже.

  • http://blgschool1.edu22.info/ Дима
    • http://wpcreate.ru Артем Петрусенко

      Верхний блок, делаем так:

      <div class="entry">
      <?php the_post_thumbnail(array(120,120), array('class' => 'alignright')); ?>
      <?php the_content('Читать полностью &raquo;'); ?></div>
      <div class="clear"></div>
      </div>

      Нижний блок:

      <div class="pnavigation">
      <?php if(function_exists('wp_page_numbers')) { wp_page_numbers(); } ?>
      </div>

      Пробуй! 😉

      • http://blgschool1.edu22.info/ Дима

        Не выходит, Артём. Проверил раз на 10, всё поставил точно так, как нужно, но когда обновляю страницу ничего не происходит. Вы можете сами посмотреть мой файл index.php? Если потребуется оплата за работы, то давайте договоримся.
        Просто вещь очень нужная на сайте, а реализовать ее не получается 🙁

        • http://wpcreate.ru Артем Петрусенко

          Возможно нужно очистить кеш в браузере, если ничего не получится, то сбрось мне параметры для подключения к ftp на ящик admin@wpcreate.ru я подключусь и посмотрю.

          • http://blgschool1.edu22.info/ Дима

            Артём, спасибо большое за помощь!!! Всё получилось 😉
            Просто дело было в моих, немного неверных настройках блога по поводу вывода записей на страницы.

          • http://wpcreate.ru Артем Петрусенко

            Отлично, ну спрашивай еще если будут в чем то вопросы. ➡

  • http://zdravstvyite.ru/ Алексей

    Здравствуйте Артем. Спасибо за статью. Плагин установил, но не совсем понятно куда вставлять код в index.php у меня вроде ничего подходящего нет. Помогите если можете. Если что — то нужно вышлю на почту.

  • http://Life-price.ru zee

    ПОЧЕМУ У МЕНЯ ТАКАЯ НЕКРАСИВАЯ ПОСТРАНИЧНАЯ НАВИГАЦИЯ ПОЛУЧИЛАСЬ?

  • Кирилл

    Здравствуйте Артём.
    У меня вопрос : пагинация работает на страницах index.php и archive.php, но на страницах категорий она не выводится. Пробовал и wp_corenavi и wp_kamanavi, игрался с ф-ми вывода get_posts и query_posts , на страницах category.php, category-$slug.php никак не хочет работать.
    Может сталкивались с такой пролемой?

  • http://newsvam.ru Светлана

    А сталкивался кто-нибудь с такой проблемой?
    Поставила начисто вордпресс 3.7.1 и в нём не работает навигация ни в консоли, ни на сайте.
    Например в консоли записей 300, а показывает первые 50 и страниц нет, остальные 250 не видны.
    То же самое на сайте, в рубрике допустим 20 страниц, а выводятся первые 10 и всё.
    Темы меняла, без разницы.
    Гуглила, но ничего не нашла.
    Может кто что подскажет, спецы?! 😳

  • http://vse-v-sonnike.ru Валентина

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

  • Роман

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

  • http://ir-kirilowa.ru/ Ирина

    Плагин установила, а вот изменить настройки не получается. В index.php вот такие коды, и ничего похожего на то, очем выговорили. Помогите!!!

    <div class="single" id="post-«>

    <a href="» rel=»bookmark» title=»ссылка поста: «>
    Автор Опубликовано:

    Не найдено
    К сожалению, по Вашему запросу ничего не найдено.

  • http://sekret-yspeha.ru/ Марина

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

  • ыеыкеыев

    😡 🙁

  • FUNNY PICTURES

    Добрый день.

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

  • Мих

    а как сделать на отдельной странице?
    Просто вставив после endif;
    if(function_exists(‘wp_page_numbers’)) : wp_page_numbers(); endif; ?>
    не выводит

  • Наталья

    спасибо ,понятно объяснили все. А МОЖЕТЕ ОБЪЯСНИТЬ КАК В САЙТ БАРЕ В РУБРИКАХ И ПРОСТО В РУБРИКАХ ПОСТАВИТЬ МИНИАТЮРНЫЕ КАРТИНКИ?У МЕНЯ ТЕМА responsive