Реализация постраничной навигации

Постраничная навигация создает удобство перемещения и увеличивает глубину просмотра сайта. Во многих темах функция постраничной навигации отсутствует, а вместо неё на странице отображаются ссылки «Следуюшие записи (Newer Posts)» и «Предыдущие записи (Older Posts)». Сегодня мы исправим эту ситуацию, добавив функцию постраничной навигации и настроим для неё стили.

В свое время я перепробовал несколько решений для создания постраничной навигации в WordPress. Некоторые были реализованы при помощи плагинов и работали некорректно. На сегодняшний день я использую, пожалуй, лучшее решение, найденное на сайте http://dimox.name

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

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

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

мы должны наблюдать такой результат:

Все работает. Сразу же продублируйте этот код в шаблоны темы: архива (archive.php), категории (category.php), тега (tag.php), результатов поиска (search-results.php), то есть всех тех шаблонов, которые могут содержать несколько страниц.

Далее приступим к настройке стилей для блока постраничной навигации. Рассмотрим HTML-код созданного блока:

<div class="navigation"><span class="pages">Страница 3 из 10</span>
<a class="prev page-numbers" href="https://zotovsergey.ru/page/2"></a>
<a class='page-numbers' href='https://zotovsergey.ru/page/1'>1</a>
<a class='page-numbers' href='https://zotovsergey.ru/page/2'>2</a>
<span class='page-numbers current'>3</span>
<a class='page-numbers' href='https://zotovsergey.ru/page/4'>4</a>
<a class='page-numbers' href='https://zotovsergey.ru/page/5'>5</a>
<a class='page-numbers' href='https://zotovsergey.ru/page/6'>6</a>
<span class="page-numbers dots">...</span>
<a class='page-numbers' href='https://zotovsergey.ru/page/10'>10</a>
<a class="next page-numbers" href="https://zotovsergey.ru/page/4"></a></div>

Если все это представить наглядно, то видим:

Каждый элемент имеет свой собственный класс. Это облегчает создание индивидуальных стилей для всего блока навигации.

Начнем с того, что пропишем в файле стилей (style.css) все необходимые классы, а потом будем их наполнять свойствами.

Начинающим сразу нужно обратить внимание на то, что все элементы навигации заключены в блок класса «.navigation».
Поэтому записи будут выглядеть так:

/* Page Navigation */
.navigation .pages { }
.navigation .page-numbers { }

остальные классы вида: page-numbers current записываются так:

.navigation .page-numbers.current { }

Все вместе:

/* Page Navigation */
.navigation .pages { }
.navigation .page-numbers.current { }
.navigation .page-numbers { }
.navigation .page-numbers.dots { }
.navigation .next.page-numbers { }
.navigation .prev.page-numbers { }

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

/* Page Navigation */
.navigation .pages {margin:10px 20px 7px 0px; font-weight:bold;}
.navigation .page-numbers.current {border:0px solid #0086b5; padding:5px 9px; background-color:#149e19; color:#fff; font-weight:bold;}
.navigation .page-numbers {border:0px solid #9fc7f5; padding:5px 9px; background-color:#e6e6e6; font-weight:bold;}
.navigation .page-numbers.dots {}
.navigation .next.page-numbers {border:none; background-color:#fff; font-weight:bold;}
.navigation .prev.page-numbers {border:none;background-color:#fff; font-weight:bold;}

В итоге получаем такой вид:

---