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

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

В этой статье я хочу поделиться технологией создания постраничной навигации для сайта WordPress без использования плагина. Данный метод имеет ряд преимуществ перед плагинами (Постраничная навигация в WordPress. Плагин WP-PageNavi и его настройка), одним из которых есть меньшая нагрузка на сервер, а также отсутствие кучи дополнительных файлов. Для его реализации вам не потребуется много навыков и знаний. В этой статье я пошагово буду объяснять, где и что нужно править и какие строки кода и куда нужно добавлять. Ну а теперь сразу переходим к делу!

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

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

Подготавливаем нужные файлы. Для этого скачиваем с сервера таблицу стилей темы (style.css), файл functions.php и файлы, отвечающие за вывод списка заметок. В нашем случае это index.php и archive.php. Если у вас какая-то необычная тема и в ней используются другие файлы для вывода заметок на главной странице и на странице категорий и т.д и т.п, то вам придется изменять их. В данном случае мы рассмотрим пример создания постраничной навигации для главной страницы и для страницы категорий (архивов и т.д).

  1. Добавляем код в конец файла functions.php до закрывающего тега «?>».
  2. Добавляем код в файлы index.php и archive.php.
  3. Добавляем правила в таблицу стилей темы style.css
  4. Закачиваем файлы style.css, functions.php, index.php и archive.php на сервер заменяя при этом старые.
  5. При необходимости правим правила CSS для постраничной навигации, если в этом есть необходимость.
  6. Пользуемся готовой постраничной навигацией для сайта на WordPress без использования плагина.

По завершении всех пунктов навигация примет примерно следующий вид.

Естественно внешний вид будет зависеть от того, как вы настроите его в таблице стилей. По желанию вы можете создать их в виде кнопок или чего-то в этом роде. В данном же примере будет рассмотрена технология создания постраничной навигации такой же, как и при помощи плагина WP-PageNavi. Также хочу заметить, что в коде, приведенном в этой статье, навигация сделана таким образом, что по возможности выводится по 2 значения с каждой стороны от текущей страницы. Например, если у вас много страниц, и вы перейдете на пятую, то слева от нее будут значения 4, 3 и две стрелочки для перехода в начало и на предыдущую страницу, а справа будут значения 6 и 7, ну и кончено стрелочки перехода в конец и на одну страницу вперед. Ну, думаю, смысл понятен.

Теперь приступаем к делу. Первым делом открываем файл functions.php. Находим внизу закрывающий тег «?>» и прямо перед ним добавляем следующий код:


function my_pagenavi($pages = '', $range = 2)
{
  $showitems = ($range * 2)+1;

  global $paged;
  if(empty($paged)) $paged = 1;

  if($pages == '')
  {
    global $wp_query;
    $pages = $wp_query->max_num_pages;
    if(!$pages)
    {
      $pages = 1;
    }
  }

  if(1 != $pages)
  {
    echo "<div class='pagination'>";
    if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
    if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a>";

    for ($i=1; $i <= $pages; $i++)
    {
      if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
      {
        echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
      }
    }

    if ($paged < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a>";
    if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
    echo "</div>";
  }
}

После этого сохраняем данный файл и переходим к следующему. Открываем на редактирование файл index.php и добавляем в него код:

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

Код нужно добавлять в конец страницы, а точнее после строки:

<?php the_content('Читать далее...'); ?><div class="clear"></div>

Но до строки:

<?php else : ?>

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

<!-- Plugin Navigation -->
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
<!-- End -->

И заменяем его на:

<!-- Plugin Navigation -->
<?php if(function_exists('my_pagenavi')) { my_pagenavi(); } ?>
<!-- End -->

После этого проделываем те же действия с файлом archive.php.

Проделав все это, приступаем к созданию внешнего вида нашей постраничной навигации для сайта на WordPress. Для этого открываем таблицу стилей темы и где-то в конце добавляем следующие правила CSS.

.pagination {
clear: both;
font-size: 12px;
margin-top: 10px;
text-align: center;
}

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

.pagination a:hover{
border-color: #000;
}

.pagination .current{
font-weight: bold;
}

После этого как обычно сохраняем файл и приступаем к завершающей части создания постраничной навигации – обновлению файлов на сервере. Для этого открываем FTP-клиент и закачиваем файлы style.css, functions.php, index.php и archive.php на сервер, подтверждая замену файлов. При этом не забываем после обновления зайти в административную панель и очистить кэш, если вы используете кэширование на своем сайте на WordPress.

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

На этом все. Удачи вам и до скорых встреч на страницах блога.

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

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

  • UralSOFT

    Спасибо!Сделал.всё работает.

  • Сергей

    Как понять: после строки: view sourceprint? 1 , но до строки: view sourceprint? 1 — это одинаковые строки, до и после одной и той же строки?

  • Дмитрий

    Перепроверил и исправил ошибки.
    Опечатка скорее всего произошла из-за смены расширения для подсветки кода, так как все изменения проводились вручную… Сейчас ошибка устранена.

  • Сергей

    Оперативно. Спасибо.

  • SashaOskol

    А как сделать так чтобы перед выводом навигации Выводилось общее количество страниц например «Страница 1 из 100»

  • Дмитрий

    Для этого нужно переписывать код постраничной навигации или же использовать плагин WP-PageNavi. Сам я код не переписывал, так как в этом не было необходимости, поэтому предоставить готовый пример не могу.

  • Алексей

    А в functions.php на 33 строке (echo «n»;) зачем нужен символ «n»?

  • Дмитрий

    \n — это перенос строки.
    Скорее всего это просто опечатка в коде.

  • NeSezon

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

  • Дмитрий

    Наиболее правильным было бы удалить лишнее:)
    Эта опечатка появилась после того, как я переделывал все статьи. Точнее заменял подсветку кода, поэтому пришлось править каждую статью по отдельности. Сейчас исправлю ошибку.

  • Egogoshka

    Дима спасибо большое за такое подробное описание. Много перепробовал методов, даваемых в других источниках, но всё было как-то криво… Твой метод встал красиво.

  • Дмитрий

    Рад, что вам помогло данное руководство. Скоро планирую написать статью про создание произвольных меню в WordPress, поэтому подписывайтесь на обновления. Думаю, вам будет интересна данная статья, как и многие другие.

  • Всеволод

    У меня тоже есть проблема с постраничной нумерацией . Я перечитал кучу сайтов . в том числе и сайт Вордпресса .Везде рукомендуют установки плагина Page Nami , т еще какой то — не пойму . Я его установил , плагин не работает . Чиатю дальше , а там оказывается надо делать такие переделки в файле плагина, что мне явно не по силам . Что Вы написали переделать в плагине — это понятно . Меняется одна буква . А вот после слов : » Проделав все это, приступаем к созданию внешнего вида нашей постраничной навигации для сайта на Вордпресс» это относится к переделке плагина или к переделке на Ворд пресс ?
    Я почему спрашиваю , потому что в плагине есть функции оформления внешнего вида постраничной навигации

  • Дмитрий

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

  • Всеволод

    К сожалению . не нашел я в плагине Page Navi указанных Вами файлов .Так , что придется на верное идти на сайт плагина

  • Дмитрий

    Причем здесь плагин? Вам нужно редактировать файлы шаблона, а не плагина. Найти свою тему оформления вы можете по адресу /wp-content/themes/ваша тема оформления. Вот в этой папочке и нужно искать все файлы.
    Что касается Page Navi, то у меня на этот счет есть отдельная статья. Если вам интересно, то можете найти ее в соответствующей рубрике на блоге.

  • Всеволод

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

  • Дмитрий

    Хорошо. Если будут еще вопросы — пишите. Буду рад помочь.

  • Uspeshnyj

    Всё сделал, прямо на хостинге в файлах, просто добавил как Вы рекомендуете, думал циферки будут как на картинке, синие, а они прям под мой дизайн встали, розовые.
    А не удобною навигацию которая была, удалять не стал, а просто закомментировал её тегами: <!— —>.
    Так что классно, я доволен. Спасибо!

  • Дмитрий

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

  • Евгения

    Дмитрий, большое спасибо за такое хорошее объяснение. Все сделала, но не могу понять почему — у меня остались и строчки "предыдущие записи" и появились циферки. Вы не подскажете, как убрать слова??? Просто не понимаю, где их можно отыскать, в каком файле надо что-то удалить?

  • Евгения

    И еще что-то не так, у меня ускакали все надписи на полях (виджеты) вниз? что я еще не так сделала?

  • Дмитрий

    Евгения, в каждом шаблоне по-разному прописаны функции вывода предыдущих и следующих записей. Не имея опыта, будет проблематично удалить ненужный код. Что касается виджетов, то возможен конфликт стилей или же Вы просто где-то не там добавили код. Для правки шаблона используйте следующую статью — dmitriydenisov.com/wordpress/wp-theme/ustanovka-i-redaktirovanie-temy-shablona-wordpress.html В ней Вы найдете описание файлов темы и функций, которые они выполняют.

  • Илона

    Сделала все по описанию, но почему-то 2 и 3 номера страниц фиолетового цвета, а 4 и 5 — синего, как исправить?

  • Дмитрий

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

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

отменить ответ