» » » Постраничная навигация без плагина на WordPress
logotip

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

Всем привет! Немного раньше я обещал, что на SEO-Mayak.com я расскажу, как делается постраничная навигация на WordPress без плагина. Сегодня как раз наступил тот день.

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

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

Представьте, что Вы читаете книгу, а в вместо номеров страниц в ней указано «Следующая страница» и «Предыдущая страница». По-моему Вы кого-нибудь точно захотели бы уволить из редакции за служебное несоответствие.
navigaciya wordpress
Так почему же на блогах сплошь и рядом встречается такое «служебное несоответствие». Дорогие товарищи, давайте ударим знаниями по невежеству и сделаем на своем блоге самую красивую постраничную навигацию без помощи всяких там плагинчиков.

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

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

Постраничная навигация для WordPress на основе PHP без плагина

В свое время я перепробовал множество решений постраничной навигации без плагинов, но не все «самопальные» коды корректно работали и идеальный вариант я нашел на блоге wp-kama.ru, за что Тимуру моя огромная благодарность.

Вот сам код, который надо вставить в файл functions.php в конец кода перед  ?>:

Открыть

Теперь открываем файлы index.php, search.php и archive.php. Советую использовать для редактирования файлов текстовый редактор Notepad++.

Если Вы еще не устанавливали плагины постраничной навигации ,то строчки, которые нам надо заменить должны выглядеть примерно так:

<div class="navigation">
    <div class="navleft"><?php next_posts_link('&laquo; Предыдущие записи') ?></div>
    <div class="navright"><?php previous_posts_link('Следующие записи &raquo;') ?></div>
</div>


Ели у вас уже был установлен плагин WP-PageNavi, то ищем такой код:

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

И заменяем вышеуказанные строчки на:

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

Если возникли сложности со поиском нужных строчек, пишите в комментариях — постараюсь помочь!

Прописываем стили для постраничной навигации

Стили для плагина WP-PageNavi выглядят так:


.wp-pagenavi {
 clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
 text-decoration: none;
 border: 1px solid #BFBFBF;
 padding: 3px 5px;
 margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
 border-color: #000;
}

.wp-pagenavi span.current {
 font-weight: normal;
}

Эти стили вполне подходят и для данного PHP решения. Просто скопируйте стили и вставьте в конец файла style.css, который находится в папке с вашей темой.

Для соединения с сервером лучше всего использовать FTP клиент. Если Вы еще не знаете как пользоваться этой программой, то советую почитать статью «FTP клиент Filezilla»

Можно немного приукрасить нашу навигацию, изменить цвет фона или немного скруглить края, настроить отступы и т.д, но для этого необходимо иметь хотя бы базовые знания в языках HTML и CSS.

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

Ну а на десерт я приготовил для вас готовые стили, которые я сам составлял для постраничной навигации моего блога


.wp-pagenavi {
 clear: both;
 margin: 5px;
}

.wp-pagenavi a, .wp-pagenavi span {
 text-decoration: none;
 border: 1px solid #BFBFBF;
 padding: 3px 12px;
 margin: 2px;
 background-clip:padding-box;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 box-shadow:3px 3px 3px #666666;
 -webkit-box-shadow 5px 5px 15px #666666;
 -moz-box-shadow: 5px 5px 15px #666666;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
 border-color: #BFBFBF;
}

.wp-pagenavi span.current {
 font-weight: bold;
}

На сегодня у меня все. Как Вам статья?

С уважением, Виталий Кириллов

Все любят цирк, но таких представлений я в детстве не видел!

Комментарии: 79

  1. Наталья:

    Очень симпатичная навигация на первой странице блога. Моя проще, но сделана благодаря данному коду. Нажимать по кнопочкам таким сплошное удовольствие. Интересно а круглые тоже можно сделать или это фантастика?

    Ответить
    • Виталий Кириллов:

      Наталья, стили с скругленными краями найдете в самом конце статьи.

      Ответить
  2. Фуакария:

    Эх слишком поздно. Буквально месяц назад искала такую информацию Признаюсь, еле нашла, которая мне была полезна.

    Ответить
  3. Анна:

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

    Ответить
    • Виталий Кириллов:

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

      Ответить
  4. Ольга:

    Чувак из цирка круче сделал, чем в Минуте славы показывали. Когда на вертикальную палку поставил, тут вообще круто.
    А эта навигация — это вместо карты сайта что ли?

    Ответить
  5. Елена:

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

    Ответить
    • Виталий Кириллов:

      Пожалуйста Елена, Рад видеть Вас на блоге!

      Ответить
  6. Елена:

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

    Ответить
    • Виталий Кириллов:

      Елена, стили надо изменять под свой шаблон.

      Ответить
  7. Елена:

    Я не очень в этом разбираюсь, может Вы мне подскажете что и где мне нужно изменять?

    Ответить
    • Виталий Кириллов:

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

      Ответить
    • Виталий Кириллов:

      Елена, а Вы что именно хотели подправить в постраничной навигации?

      Ответить
  8. Елена:

    Я сделала, можете посмотреть

    Ответить
    • Виталий Кириллов:

      Я посмотрел, что Вы конкретно хотите изменить?

      Ответить
  9. Елена:

    Хочу, чтобы постраничная навигация была красивая, такая как у Вас. Я пробовала ставить первые стили, и те что Ваши, все остается одинаково ((

    Ответить
    • Виталий Кириллов:

      Все получиться, попробуйте поискать ощибки

      Ответить
  10. Елена:

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

    Ответить
    • Виталий Кириллов:

      Спасибо Елена!

      Ответить
  11. Sab:

    Отлично! На одном из проектов ну никак не хотел фурычить плагин WP-PageNavi (видимо, из-за каких-то особенностей темы), а данная безплагинная альтернатива встала и заработала сразу и на ура. В общем, сбросил ещё один геммор со своих плеч))) Спасибо, старина!

    Ответить
    • Виталий Кириллов:

      Пожалуйста!

      Ответить
  12. Екатерина:

    Здравствуйте, Виталий!

    Спасибо Вам огромное за представленную статью. Хорошая, четкая, пошаговая подача информации помогла мне, наконец, правильно настроить постраничную навигацию без плагина.

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

    Хочу поделиться информацией о том, что мне пришлось сделать немного не так , как описано Вами ( моя тема создана в программе artisteer).Возможно, кому-то пригодится.

    1.Сам код в файле function.php я вставила не в конце, а в самом начале кода после <?php. Хорошо, что сделала копию файла, потому как, когда вставила в конец файла, как описано у Вас в статье, блог стал полностью недоступен. Пришлось через с-panel хостинга восстанавливать сохраненный файл.
    2.Код вставила в файлы index.php, search.php и archive.php после кода вместо строчек

    Отдельное спасибо за стили!!! 🙂

    С уважением.

    Ответить
  13. Анастасия:

    Супер! Спасибо!

    Ответить
  14. Анна:

    Виталий попробовала сделать по вашему совету и вот что у меня получилось — просто перечень цифр, как это исправить, и зачем что то делать через FTR — это нужно обязательно, я не поняла.И еще в файле archive.php. таких строчек нет в моем шаблоне.

    Ответить
    • Виталий Кириллов:

      Анна, надо стили добавить и все будет нормально.

      Ответить
  15. Анна:

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

    Ответить
    • Виталий Кириллов:

      Анна а Вы ту строчку скопировали?
      Надо вот эту строчку:
      [php]<?php if (function_exists(‘kama_pagenavi’)) kama_pagenavi(); ?>[/php]
      Вставить вместо:
      [php]<div class="navigation">
      <div class="navleft"><?php next_posts_link(‘&laquo; Предыдущие записи’) ?></div>
      <div class="navright"><?php previous_posts_link(‘Следующие записи &raquo;’) ?></div>
      </div>
      [/php]

      Ответить
  16. Анна:

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

    Ответить
    • Виталий Кириллов:

      А код в файл functions.php вставляли?

      Ответить
  17. Анна:

    Да, конечно вставляла.

    Ответить
    • Виталий Кириллов:

      Странно…у всех работает.

      Ответить
  18. Анна:

    Ура, кнопки стали как у вас — красивые и я для этого ничего не делала, странно. Сегодня только обнаружила, теперь вставлю и на другой сайт тоже. Спасибо.

    Ответить
    • Виталий Кириллов:

      Анна надо было кеш браузера сбросить и все бы сразу было нормально.

      Ответить
  19. Вадим:

    у меня вопрос как модифицировать до вашей?чтоб показывало Страница 1 из 7 к примеру

    Ответить
    • Виталий Кириллов:

      Вадим, обращаю Ваше внимание на этот участок кода:
      [php] /* ================ Настройки ================ */
      $text_num_page = »; // текст для количества страниц. {current} заменится текущей, а {last} последней. Пример: ‘Страница {current} из {last}’ = Страница 4 из 60
      $num_pages = 10; // сколько ссылок показывать
      $stepLink = 10; // после навигации ссылки с определенным шагом (значение = число (какой шаг) или », если не нужно показывать). Пример: 1,2,3…10,20,30
      $dotright_text = ‘…’; // промежуточный текст "до".
      $dotright_text2 = ‘…’; // промежуточный текст "после".
      $backtext = ‘«’; // текст "перейти на предыдущую страницу". Ставим », если эта ссылка не нужна.
      $nexttext = ‘»’; // текст "перейти на следующую страницу". Ставим », если эта ссылка не нужна.
      $first_page_text = »; // текст "к первой странице" или ставим », если вместо текста нужно показать номер страницы.
      $last_page_text = »; // текст "к последней странице" или пишем », если вместо текста нужно показать номер страницы.
      /* ================ Конец Настроек ================ */[/php]
      Все настройки производятся здесь!

      Ответить
  20. Айна:

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

    Ответить
    • Виталий Кириллов:

      Спасибо Айна!

      Ответить
  21. Ярослав:

    Спасибо, Виталий, за хорошее объяснение и хорошую работу кода! С Вашей помощью надеюсь отказаться от пары-тройки плагинов

    Ответить
    • Виталий Кириллов:

      Пожалуйста Ярослав, рад видеть Вас на блоге!

      Ответить
  22. Дмитрий:

    Спасибо за хорошую статью, всё очень понятно и доходчиво.
    Но или я такой или новый шаблон сильно отличается от старого. Теперь некоторые вещи найти в нём просто не могу. В роди и шаблон лучше, да и в настройках, более гибкий, а установить навигацию не получается. Не в одном из трёх файлов не могу найти даже близко похожие строки, которые заменить надо, или они очень отличаются от описанных. Да и файл у меня вот такой есть «navigation.php» в нём я так понял родная форма.
    И вот в итоги, прошу помочь разобраться, а то вообще не как.

    Ответить
    • Виталий Кириллов:

      Дмитрий, шаблоны меняются и в новых действительно с первого взгляда много непонятных вещей. В них за частую файлы разделены на несколько частей. Например, к файлу index.php подключен 1, 2 или 3 дополнительных файла. Подключение выглядит примерно так:
      [php]<?php get_template_part(‘/includes/post’); ?>[/php]
      Где ‘/includes/post’ путь к подключенному файлу, относительно корня шаблона. Названия у подключаемых файлов конечно могут быть другими.
      Проследуйте по указанным путям и найдете место куда надо вставить код вызова постраничной навигации.
      Теперь по поводу файла navigation.php. Многие шаблоны, особенно премиумные, имеют, так сказать, не законченный вид. Т.е. просто заплатите и вам подключать дополнительные функции. Конечно мало кто платит. Я например самостоятельно могу найти «ключики» к этим спящим функциям, ну а Вам советую пока этим не заморачиваться, так как дело мудреное.
      Ваша задача на данном этапе разобраться со структурой шаблона.

      Ответить
      • Дмитрий:

        Спасибо, попробую разобраться.

        Ответить
  23. Дмитрий:

    Разобрался!!! Навигация получилась просто КЛАСС, только вот стили использовал свои. Спасибо Вам за хороший, а главное полезный блог.

    Ответить
  24. Андрей:

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

    Ответить
    • Виталий Кириллов:

      Андрей, что особенного в моих комментах?

      Ответить
      • Андрей:

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

        Ответить
  25. Ольга:

    Здравствуйте, Виталий. Огромное Вам спасибо за стили к постраничной навигации! Я конечно их подправила для себя, но маленькая загвоздка — как сделать навигацию по центру страницы, а не справа?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Ольга!
      Надо добавить к классу .wp-pagemavi следующее:

      text-align: center;

      Можно просто заключить код вызова функции в теги center:

      <center><?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?></center>
      
      Ответить
      • Ольга:

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

        Ответить
      • Pavel:

        Здрасти!
        Исправьте ошибку:
        не правильно: text-aligin: center;
        правильно: text-align: center;

        Ответить
        • Виталий Кириллов:

          Спасибо Павел, уже исправил.

          Ответить
  26. Анна:

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

    Ответить
    • Виталий Кириллов:

      Пожалуйста Анна, рад видеть Вас на блоге!

      Ответить
  27. Алексей:

    Получилось все с первого раза, спасибо. Убрал еще один плагин. Только код вставлял не в файлы index.php, search.php и archive.php. У меня в шаблоне есть файл navigation.php. В него и вставил, все работает. Еще раз спасибо, Виталий.

    Ответить
  28. Павел:

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

    Ответить
    • Виталий Кириллов:

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

      Ответить
  29. Павел:

    Сделал все, как Вы ответили мне. Ничего не помогло, вроде кодировка правильная. Что делать???

    Ответить
    • Виталий Кириллов:

      Так вроде или правильная? Какая у Вас стоит кодировка?

      Ответить
  30. Серг:

    Спасибо, который раз выручаешь. держи +

    Ответить
  31. Андрей:

    Спасибо за интересную и полезную статью!

    Ответить
  32. Сергей:

    Спасибо! Установил код, посмотрим как он себя покажет в будущем. А его нужно закрывать от индексации wp-pagenavi я вроде бы закрывал?

    Ответить
  33. Наталья:

    Виталий, спасибо большое за подробный урок! Наконец-то получилось избавиться от плагина pagenavi, и навигация на блоге смотрится очень симпатично. Здорово!

    Ответить
  34. Эдакс:

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

    Ответить
    • Виталий Кириллов:

      Эдакс, нет еще не занимался, все руки не дойдут.

      Ответить
  35. Антон:

    Здравствуйте Виталий! Хорошая статья, спасибо! А не подскажите есть ли у Вас на блоге как сделать внизу страницы как у Вас : (предыдущая статья), (следующая статья) и с названием статей?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Антон! Читайте здесь.

      Ответить
      • Антон:

        Спасибо огромное Виталий! Всё доходчиво и грамотно написано!

        Ответить
  36. Евгений:

    Здравствуйте, Виталий!
    С осени держу Ваш блог в закладках, так как знания которыми Вы делитесь на его страницах, действительно уникальны и самое главное, актуальны. Уже применил несколько приёмов для своего ресурса благодаря Вам, за что хочу сказать спасибо.
    Но на данный момент, у меня возникла проблема с постраничной навигацией, которую пока не удаётся решить даже с помощью плагинов WP-PageNavi и аналогичных. Дело в том, что тема которую я использую, то ли написана каким-то другим языком, то ли корявая, то ли наоборот слишком мудрёная, но в ней у меня не получается найти строки, которые Вы рекомендуете заменить, их просто нет. Возможно было бы проще просто поменять шаблон, но этот мне очень нравится (он для меня идеальный), поэтому очень хочу разобраться с ним…
    Буду Вам признателен, если поможете разобраться в каком направлении «копать».
    Заранее, благодарю!

    Ответить
    • Виталий Кириллов:

      Здравствуйте Евгений, напишите мне через форму обратной связи, пообщаемся.

      Ответить
    • Виталий Кириллов:

      Евгений, в Вашем шаблоне за вывод навигации отвечает строчка:

      <?php sampression_content_nav(); ?>
      

      Вот ее и надо заменять на:

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

      Остальное все по инструкции.

      Ответить
      • Евгений:

        Благодарю Вас, Виталий.
        Теперь всё получилось. Остаётся только со стилями повозиться, чтобы довести до идеала.

        Ответить
  37. Игорь:

    Здравствуйте! Подскажите, пожалуйста. Перепробовал уже несколько плагинов. Везде нужно как и у вас в файлах php заменять строчки с div на примерно такой же код. Навигация в теме у меня никакущая — вместо цифр малюсенькая стрелочка. Хочу поменять. При замене кода пропадает навигация, но новая ни от плагинов, ни от вашего кода не появляется. Всё делаю по инструкции!

    Ответить
  38. Егор:

    Здравствуйте, Виталий. У меня вопрос немного не по теме. Задумал на странице вывода анонсов и на страницах с категориями и метками сделать загрузку на Ajax, без перезагрузки страницы и постраничной навигации. Говорят, что это не очень хорошо влияет на индексацию. Не пойму, если у меня итак стоит rel=»canonical» и страницы типа /blog/page/2/ не индексируются? Чем не хорошо то, в моем случае?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Егор! Надо взять и провести эксперимент, думаю ничего ужасного не случится.

      Ответить
  39. Алексей Щукин:

    Добрый вечер!
    Возникла проблема.
    После вставки кода, когда нажимаешь на кнопки перейти на предыдущую страницу или перейти на следующую страницу, то все работает. А вот если нажать на кнопку с номером страницы, открывается пустая страница.
    Может это что-то в самой теме, не могу понять. Но вот что накопал. Кнопки с номером страницы ведут по адресу мойсайт.ру/page/7, а кнопки сл. или предыдущая страницы по адресу мойсайт.ру/page/7/. То есть, отличие только в «/». Где и как это исправить пока не нашел. Может у вас будут какие-то соображения?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Алексей.
      Если дело в слешах, попробуйте установить редирект в .htaccess, который будет перенаправлять на урл со слешем.

      RewriteCond %{REQUEST_URI} !\?
      RewriteCond %{REQUEST_URI} !\&
      RewriteCond %{REQUEST_URI} !\=
      RewriteCond %{REQUEST_URI} !\.
      RewriteCond %{REQUEST_URI} !\/$
      RewriteRule ^(.*[^\/])$ /$1/ [R=301,L]
      Ответить
  40. Helgy:

    Хотя уже и неактуально, но некоторую справедливость хотела восстановить, раз уж Вы по-благородному относитесь к ссылкам на авторство. Понятно, что ссылку оставили на тот ресурс, где нашли, но … Передрал Ваш «Алаич» у Камы скрипт и даже не соизволил поменять название функции, а Вы вслед по неосведомленности и еще и ссылку. Блог Kama найдете без труда и убедитесь сами: wp-kama.ru/id_8/alternativa-wp-pagenavi-bez-lishnix-zaprosov-k-bd-ili-keshu.html
    Если б не ссылка на коммерческий сайт, то и промолчала бы — все мы тащим по-немногу у кого-нибудь и как-нибудь, но за полезность Тимура (Кама) обидно. Это не претензия, а мнение.

    Ответить
    • Виталий Кириллов:

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

      Ответить
  41. Дмитрий:

    Я сейчас как раз ищу скрипты, которыми можно заменить плагины на моем контентнике. Заменить Page Navi на скрипт тоже здорово. Спасибо)

    Ответить

Оставить комментарий

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS