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

Как сделать постраничную навигацию без плагинов | n-wp.ru

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

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

Постраничная навигация удобна тем, что дает примерное представление об общем объеме блога, и позволяет быстро перемещаться по страницам, снабжая такое перемещение удобной индикацией. Есть множество плагинов, которые создают постраничную навигацию: 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;}

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

Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

17 Комментарии

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

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

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

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

    
    

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

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

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

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

Ваш электронный адрес не будет опубликован.


*