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

Приветствую все посетителей блога WebMasterMaksim.ru, сегодня продолжаю серию статей «без плагинов» и расскажу я про постраничную навигацию WordPress.

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

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

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

Провожу бесплатное обучение на Форекс
Я ВебМастерМаксим провожу консультирование по заработку на Форекс! Вы с легкостью повторите мой путь! Интересует?
Форекс обучение

Вот все статьи серии «Без плагинов»:

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

Начинающему вебмастеру может быть трудновато реализовать постраничную навигацию WordPress без плагинов, поэтому вот плагин который поможет вам это сделать WP-PageNavi, а потом уже когда наберетесь опыта, сделать все это без плагинов.

Вот смотрите видео Евгения Попова про работу с этим плагином:


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

Все создаем постраничную навигацию в WordPress без плагинов, для этого создаем в блокноте файл и называем его pagenavi.php и вставляем в него следующий код:

[php]
<!—?php global $wp_query; $max_page = $wp_query—>max_num_pages;
$nump=6; /*Количество отображаемых подряд номеров страниц*/

if($max_page>1){
$paged = intval(get_query_var(‘paged’));
if(empty($paged) || $paged == 0) $paged = Первая;

echo ‘</pre>
<div class="wp-pagenavi">’;
/* echo ‘Страница ‘.$paged.’ из ‘.$max_page.’      ‘;*/
if($paged!=1) echo ‘<a href="’.get_pagenum_link(1).’">« Первая</a> ‘;
else echo ‘<span style="text-decoration: underline;">1</span>’;

if($paged-$nump>1) $start=$paged-$nump; else $start=2;
if($paged+$nump<$max_page) $end=$paged+$nump; else $end=$max_page-1; if($start>2) echo "<b>…</b>";

for ($i=$start;$i<=$end;$i++)
{
if($paged!=$i) echo ‘<a href="’.get_pagenum_link($i).’">’.$i.'</a> ‘;
else echo ‘<span style="text-decoration: underline;">’.$i.'</span>’;
}

if($end<$max_page-1) echo "<b>…</b>";

if($paged!=$max_page) echo ‘<a href="’.get_pagenum_link($max_page).’"> Последняя »</a>’;
else echo ‘<b> Последняя</b> ‘;
echo ‘</div>
<pre>
‘ ;
}
?>
[/php]

Теперь сохраняем этот файл и заливаем его в вашу тему, идите к себе на хостинг, wp-content > themes > название вашей темы, и уже сюда закачиваем наш только что созданный файл pagenavi.php.

Далее вы этот файл можете даже редактировать через админку WordPress где находятся основные файлы вашей темы, футер-подвал, хедер -шапка и так далее.

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

Для этого нам нужно вставить через админку WordPress, код-функцию вызова постраничной навигации, в файлы index.php, search.php и archive.php, конкретное место я вам указать не могу у каждого свои темы, ну я думаю вы с этим справитесь!

Вот этот код вызова постраничной навигации:

[php]</pre>
<div class="pagenavi"></div>
<pre>
[/php]

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

Посмотрите на код файла pagenavi.php, в него я включил контейнер div class=»pagenavi», а это значит что мы уже можем в файл стилей вашей темы добавлять правила для вашей навигации.

Теперь через админку заходим в редактор вашей темы в файл (style.css) и вставляем туда следующие стили оформления навигации по страницам в WordPress:

[php].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;}[/php]

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

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

Понравилась статья?! Жми на кнопку!
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(5 голосов, в среднем: 3.4 из 5)
загрузка...
  • Алексей

    Максим! Я установил плагин Рage Navi но постраничная навигация не открылась.С помощью Page Number тоже.Не подскажите что делать?

  • admin

    Активируете плагин в админке. И вставляете строчку < ?php if(function_exists('wp_page_numbers')) { wp_page_numbers(); } ? > в нужный шаблон в то место, где должен отображаться пейджер навигации. Между < ? и ? > уберите пробелы

  • Наталья

    search.php и archive.php — у меня вот этих 2-х нет :(

  • Наталья

    search.php и archive.php — у меня вот этих 2-х нет :(
    и куда вот в стили (то что в конце) вставлять правильно? в какое место?
    Я вставила в самый конец -как есть — пошла смотреть, но ничего не изменилось — не появились циферки с номерами страниц :(
    Хоть сайт живой

  • Antonina

    Здравствуйте, Максим!
    Никак не нахожу в коде файла pagenavi.php контейнера div class=”pagenavi”. Что Вы хотели этим сказать. Выделите его как-нибудь, что ли?

  • admin

    Код вызова постраничной навигации, окружен дивом!

  • admin

    Наталья у вас может быть эти файлы называются по другому, нужно вставить в те файлы где нужно выводить постраничную навигацию, это «Результаты поиска» — «Архивы (то есть категории-рубрики)», ну и главная.

  • Наталья

    Вот такие у меня в шаблоне названия
    comments.php
    footer.php
    functions.php
    header.php
    index.php
    page.php
    pagenavi.php
    sidebar.php
    single.php
    template.php
    и что отвечает за архив и категории/рубрики мне сложно понять
    Сегодня проверила созданный файл пагенави и там вместо некоторых (кодов) слов были символы ромбик с вопросительным знаком, влезла уже с админки и заменила снова код — может еще в этом причина. но надо найти какие из выше перечисленных файлов отвечают за архив и категории.

  • Наталья

    экспериментами только весь сайт себе изуродовала! Сейчас кое как нашла где чего вставляла и удалила, а одну не могу найти. Шапка сайта имеет большой отрыв от всего содержимого — уродство! Как же мне найти ошибки?!

  • admin

    у вас файл постраничной навигации уже есть, вот он pagenavi.php

  • admin

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

  • Наталья

    Плагинов у меня уже ставить некуда- очень много. просто уже вторую неделю пытаюсь поставить себе постраничную навигацию. Файл есть, но вы же пишете что еще в 3-х файлах надо код дописать. В любом случае после добавления файла нового пагенави ничего не добавилось, после добавления на главную ничего кроме поднятой шапки не изменилось, потом еще в 2-х файлах вроде как за архивы и поиск отвечающие попробовала код добавить и сразу тоже ничего не изменилось, а через время на страничку свою глянула и обалдела — постраничной навигации так и не добавилось, зато в сайдбаре все поехало + шапка сильно поднялась или же вся страница вниз упала. Вот так получилось. А фрилансера я не могу нанять у меня ни копейки нет. Сейчас за интернет надо платить — снова с родителй потяну. Потому пытаюсь собственными силами делать. Коды я ж не сама придумываю — вот у вас нашла, а что не так, пока не знаю. Кстати у вас места под написания сайта нет, как вы знаете какой сайт мой?

  • Наталья

    Максим, а у Вас шапка сайта тоже вроде как сильно поднята — расстояние между шапкой и всем остальным непропорционально велико — это тоже может влияние кода?

  • admin

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

  • Наталья

    Пока пробую все убрать. назад вернуть. Если тему сменю ( а мне никакая другая не подходит увы) то там могут быть другие названия файлов. Нельзя ли по имеющимся подсказать какой за архив отвечает, какой за рубрики?
    comments.php
    footer.php
    functions.php
    header.php
    index.php
    page.php
    sidebar.php
    single.php
    template.php

    Вот эти вроде: главная и архивы…
    index.php
    page.php
    и есть сомнения что у вас все скобки на месте — может где то пробел в виде вставки строки например должен быть? и точное место вставки — я например в самый конец вставляла перед или после определенных тегов типа ДИВ
    ?>

  • admin

    Я имел ввиду поставить другую тему для тренировки (на время), а старую можно просто восстановить из бекапа, секундное дело.

  • Наталья

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

  • admin

    Если что резервные копии делает хостинг автоматически, вам нужно только восстановить и все, чего там страшного. Скайпа нет. comments.php
    footer.php это подвад
    functions.php это функции темы
    header.php это шапка сайта
    index.php Основной шаблон
    page.php Шаблон страницы
    sidebar.php сайтбар
    single.php это одиночная запись
    template.php

  • Наталья

    Максим, большое спасибо за обозначение моих файлов! а все таки выходит что нет у меня в теме 2-х нужных файлов, отвечающих за архивы и рубрики.

  • admin

    посмотрите файл template.php, не знаю за что он у вас отвечает, может он рубрики и выводит.

  • Наталья

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

  • Юлия

    Спасибо вам за код, отлично работает. Добавила в закладки, использую на след сайте. Еще раз спасибо!

  • Наталья

    Добрый день Максим.Подскажите пожалуйста как сделать постраничную навигацию в рубриках.Поставила плагин pagenavi 2.83 все отлично работает , но в рубриках постраничная навигация не работает(((( Стандартные настройки типа «предэдущие записи» Может быть нужно код слегка подправить?

  • admin

    Наталья вам нужно в файл archive.php вставить код вызова плагина, который вы вставили на главную (index.php). А код выводящий “ предыдущие записи” если нужно можно удалить.

  • Наталья

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

  • Рич

    Приветствую. Вопросик такой. Поставил Ваш код без плагина. Все работает. Спасибо. Но есть слово «Последняя» А нету «Первая». Как можно реализовать эту не менее важную кнопку?

  • admin

    Привет Рич, вот пример кода if($max_page>1){
    $paged = intval(get_query_var(‘paged’));
    if(empty($paged) || $paged == 0) $paged = Первая;

    echo »;
    /* echo ‘Страница ‘.$paged.’ из ‘.$max_page.’      ‘;*/
    if($paged!=1) echo ‘« Первая ‘;
    else echo ‘1’

  • Рич

    Этот кусок кода отказывается мне подчиняться) Пытался вписать его в исходный код, все безтолку. синтаксис из комментов поправил. Команда вывода слова «первая» глушит выполнение остальных команд. И как следствие — слетает вся верстка страницы))) Вы не могли бы на примере указанного в посте кода показать готовый вариант содержимого файла pagenavi.php?

  • admin

    Рич, я обновил код в статье! Попробуй его, обязательно напиши о работоспособности, у меня на этом блоге работает!

  • Рич

    Обновил код. Работает как часы))) Отличный код) Вот только бы еще «Первая» была бы без ссылки, когда на первой странице находишься. Но это уже мелочи) Спасибо большое)

  • Светлана Ковалева

    Спасибо, все получилось, все работает. Стили свои прописала, красота!

  • Alisa

    К комментарию Натальи: файл template.php надо убрать вообще. Она дает информацию о версии шаблона: халява для хакеров.
    Я права, Максим?

  • Alisa

    Кстати, вопрос: почему у Вас на шапке, с правой стороны список со скрепкой наезжает на поиск.? Вернее последняя ее часть где указывается количество друзей. Она у меня прямо на строке поиска. Неудобно писать.
    И еще: Ваш блог не показывает robot.txt. В теме об этом файле Вы предлагаете посмотреть как он выглядит на примерах других сайтов. Посмотрела Ваш: выдает 404 ошибку.

  • admin

    Нет! я не знаю содержимое ее файла template, поэтому он может быть и нужный.

  • admin

    Alisa, с какого вы браузера смотрели и какое у вас расширение экрана? У меня все в порядке, там от скрепки до поиска еще очень много места! А роботс теперь у меня защищен!

  • Alisa

    Пользуюсь firefox. Нетбук 11″. Пробовала уменьшать/увеличивать: все одно — [количество друзей] на строке поиска.
    А для чего защищать то robots ? Его кто-то может изменить кроме Вас?

  • admin

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

  • Alisa

    Сегодня заглянула к Вам. Полный порядок с шапкой сайта: ничего не наезжает; все на своем месте. Даже и не знаю, что это за глюк был с нетбуком. 11 в общем-то терпимо: только тяжелую артиллерию в виде фотошопа тяжело тащит. Поэтому пользуюсь онлайновыми сервисами; ну и теми вроде Notepad. Короче. что попроще.
    А у меня к Вам вопрос: в скрипте скролинга , который скачала с интернета, есть такая строчка:
    setTimeout(«window.onresize=regenerate»,450)
    Что означает это?
    И, если есть возможность. как поставить вертикальный скроллинг для вывода рейтинга.
    И, еще, такую форму коментариев (думаю, она тоже без плагинов) не помешало бы. Просто везде предлагается формы вконтакте или фейсбука. А мне бы простую, без наворотов.
    Спасибо за ответы. Кажется я у Вас прописалась: каждый день заглядываю. За 3 года знакомства с интернетом такое постоянство первый раз. Вы лучше всех.

  • admin

    Alisa, спасибо! всегда рад постоянным читателям! К сожалению про скролинг со стороны подсказать ничего не могу!А почему вас не устраивает стандартное комментирование?

  • Alisa

    Я и хочу как у Вас, простой. У Вас и есть стандартный? А где его взять? Разве что у Вас подсмотреть. Больше возни. Если не трудно, скиньте мне на мыло. Срочно надо на сайт поставить.
    Плиз.

  • admin

    Alisa, так у меня и так стандартная навигация! не понял, что вас интересует?

  • Alisa

    В моей теме WordPres не такая форма как ваша. А как ее сделать не знаю.

  • admin

    Alisa, форму оформлял при помощи css 3.

  • nurlybekLFC

    Здравствуйте, admin.
    У меня вопрос, вот у меня под разные категории разные шаблоны, ваш код вставляю, а он не работает, выходит «вперед,назад» но когда нажимаю на той же странице остаюсь(страниуа обновляется) ссылка тоже меняется, но контент тот же(те же записи).
    Можете помочь, буду благодарен, если надо вышли все файлы вам(на почту?).

  • admin

    Здравствуйте! нет не знаю, чем вам помочь!

  • Анна

    Максим, у меня эта пагинация выглядит пустыми квадратиками (ни цифр, ни слов) внизу страницы. По нажатию на них — да, переходишь на другую страницу с анонсами статей.

    Все копировала и вставляла, как сказали.
    В чем может быть причина?

  • admin

    Анна, тут подсказать мне нечего, я со стороны не вижу!

  • Михаил

    Здравствуте! поставил плагин пэйж нави, навигация появилась только на главной странице, в архивах нет. Не подскажите в чём проблема?

  • Александр

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

  • https://blog.yosyfovych.te.ua Юрий Йосифович

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

  • https://blog.yosyfovych.te.ua Юрий Йосифович

    Анна, мне кажется, что у вас просто проблема из стилями — попробуйте просто написать новые классы для этих «квадратиков» (естественно присвоить их в коде вывода) и указать им отображение в том виде, который считаете нужным, например добавить размер, цвет шрифта, отступы и так далее. Если квадратик был пустой — то возможно цвет шрифта получил свойство цвета фона (и слился с фоном).

  • Salander

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

↑ Получай комментарии на E-MAIL