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

Доброго времени суток!

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

В одной из первых своих статей я показывала как при помощи плагина WP-PageNavi настроить постраничную навигацию, посмотреть можно тут. Если Вам лень возиться с кодом, то можете установить данный плагин. А я приступлю к объяснению вывода постраничной навигации с помощью кода.

Вариант установки постраничной навигации без плагина

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

Первое что нужно сделать - вставить в файл functions.php код функции, чтобы не запутаться и не совершить ошибок, вставляйте код сразу после тега <?php

function wp_corenavi() {
  global $wp_query, $wp_rewrite;
  $pages = '';
  $max = $wp_query->max_num_pages;
  if (!$current = get_query_var('paged')) $current = 1;
  $a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999));
  $a['total'] = $max;
  $a['current'] = $current;

  $total = 1; //1 - выводить текст "Страница N из N", 0 - не выводить
  $a['mid_size'] = 5; //сколько ссылок показывать слева и справа от текущей
  $a['end_size'] = 1; //сколько ссылок показывать в начале и в конце
  $a['prev_text'] = '«'; //текст ссылки "Предыдущая страница"
  $a['next_text'] = '»'; //текст ссылки "Следующая страница"

  if ($max > 1) echo '

';
}

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

<!--?php if (function_exists('wp_corenavi')) wp_corenavi(); ?-->

На картинке ниже, Вы можете посмотреть куда нужно вставлять код в файле:

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

Сохраните себе в двух подходящих цветах. Одна кнопка будет для активной страницы, а другая для всех остальных.

В файл style.css нужно добавить следующий код:

.navigation {
text-align:center; margin:30px 0;
}
a.page-numbers {
background:url(images/act_nav.png) no-repeat; width:25px; height:25px; display: inline-block; padding:5px 0 0 0; font-weight:bold;
}
a:hover.page-numbers{
background:url(images/activ_nav.png) no-repeat; color:#fff; text-decoration:none;
}
span.page-numbers.current {
background:url(images/activ_nav.png) no-repeat; color:#fff; width:25px; height:25px; display: inline-block; padding:5px 0 0 0; font-weight:bold;
}

Важно правильно указать путь до картинок постраничной навигации на хостинге! Картинки нужно загружать в папку с темой, которая находится по такому адресу public_html/wp-content/themes/тема/images
Также, не ошибитесь с указанием названия картинки.

Вот собственно и все. Надеюсь у Вас не возникнет проблем с настройкой.

С уважением, Виктория – блог inetsovety.ru