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

Как сделать постраничную навигацию без плагинов | n-wp.ru
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

Если вы посмотрите в этом блоге на главной странице вниз, то увидите там постраничную навигацию — любимый навигационный элемент многих блоггеров.

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

Постраничная навигация удобна тем, что дает примерное представление об общем объеме блога, и позволяет быстро перемещаться по страницам, снабжая такое перемещение удобной индикацией. Есть множество плагинов, которые создают постраничную навигацию: Pagebar, jQuery Paginator, WP Page Number, WP-PageNavi и другие. Если вы решили все же уменьшить количество плагинов, то для организации постраничной навигации можно и вовсе обойтись без них. Давайте создадим постраничную навигацию своими руками.

Как и в случае создания «хлебных крошек» без плагинов, будем работать с отдельным файлом. Создайте пустой текстовый файл, и назовите его pagenavi.php. Вставьте в него такой код:

max_num_pages;
$nump=2; /*Количество отображаемых подряд номеров страниц*/
if($max_page>1){
$paged = intval(get_query_var('paged'));
if(empty($paged) || $paged == 0) $paged = 1;

echo '

‘ ; } ?>

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

 

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

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

.navigation {clear:both; width:500px; height:auto;text-align:center;margin:30px 0 30px 50px;padding-top:15px;}
.navigation .right, .navigation .left {width:230px; font-size:18px;text-align:right;margin:0;}
.navigation .left {text-align:left;}
.navigation a, .navigation a:visited {text-decoration:none;color:#939186;}
.navigation a:hover {color:#5D5643;text-decoration:none;}
.pagenavi {clear:both;display:block;font-size:14px;margin:0;padding:7px 0 7px 0;}
.pagenavi a {clear: both;width:auto;font-size:14px;padding:3px 7px 3px 7px;background-color:#F3EFE6;}
.pagenavi b {clear:both;width:auto;margin:0 6px 0 5px;text-decoration:none;}

Все, постраничная навигация без плагинов готова — можете пользоваться!

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

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

  1. Toshiya

    О! Спасибо, очень полезно.

    Ответить
  2. romtya

    у меня тема oneroom, все делал по инструкции. В итоге кнопки навигации возникают в левом сайдбаре. Может что-то посоветуете?
    http://amatik.ru/

    Ответить
    1. А куда вы вставляете код?

      Ответить
  3. romtya

    Все по инструкции: в index.php, search.php и archive.php + правлю style.css + файл pagenavi.php

    Ответить
    1. А previous_posts_link и next_posts_link заключены в какой-то контейнер?

      Ответить
  4. romtya

    Потом удалите… а что-то много получилось :)

    Ответить
  5. Naiko Michail

    a как сделать, чтобы была не "последняя страница" а её номер?

    Ответить
    1. Заменить

      	if($paged!=$max_page) echo ' Последняя »';
      		else echo '<b> Последняя</b> ';

      на

      	if($paged!=$max_page) echo ''.$max_page.' ';
      		else echo '<b>'.$max_page.'</b> ';
      Ответить
  6. FHD

    Если можно, покажите скрипт и стили этого сайта.

    Ответить
    1. Примерно так, как написано в статье, и сделано.

      Ответить
      1. FHD

        Намек понял. Тогда кусочек кода для стрелок право и влево. Они даже в статье в стилях описаны, а в коде их нет.

        Ответить
        1. FHD

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

          Для вашего варианта в статье:
          1) В стилях можно убрать строки .navigation .right… .navigation .left… и .pagenavi b… Они там ни к чему.
          2) В последнем вашем комменте rel=»nofollow»>’.$i.’ ‘; и else echo ‘‘.$i.’ ‘; Нужно заменить $i на $max_page.

          Ответить
  7. FHD

    Имеется ввиду постраничную навигацию.

    Ответить
  8. Access

    Я не особо разбираюсь в php =) я тупо скопировал код и вставил на сервер. под именем page.php.
    Таким же макаром скопировал код

    <div class="navigation">
        <?php include("/page.php"); ?>
    </div>
    

    И вставил в news.php. такс у меня 7 новостей ) а деления нет ) .. я просто не понимаю по коду через какое количество новостей он заработает. ) и заработает ли вообще ) не в курю сделал ли я правильно. Если сможешь помочь помоги =)

    Ответить
  9. А почему в news.php? У вас есть index.php? Попробуйте вставить в него, а так же в archive.php и search.php.

    Ответить
  10. Access

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

    Ответить
  11. Asaba

    Постраничную навигацию сделал, но никакого оформления стилей нет, просто цифры 123 и все, хотя в файл style.css код оформления добавил. Смотрится как — то убого…
    Можете подсказать, как это исправить ?

    Ответить