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

Корректируем стандарты

По умолчанию в WordPress на странице самой записи (single.php) присутствуют ссылки Следующая страница и Предыдущая страница, они ведут на записи сортированные по дате и не учитывают разбивку на рубрики и метки. В шаблоне темы они обычно выводятся в блоке следующим образом:

<?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span> Previous', 'twentyeleven' ) ); ?>
<?php next_post_link( '%link', __( 'Next <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>

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

<?php previous_post_link('&laquo; %link','%title',true); ?>
<?php next_post_link('%link &raquo; ','%title',true); ?>

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

Пишем функцию

С навигацией на странице записи разобрались, а у нас же еще есть главная страница, страница архивов и страница категорий! Что с ними делать? На них выводится определенное количество записей (задаем в панели управления — настройки — чтение) и под ними ссылки Вперед и Назад ведущие на предыдущие или следующие записи этой рубрики. Именно с этими ссылками нам предстоит разобраться, а точнее сделать их эффективными, то есть разбить на страницы, пронумеровать их и вывести в нужном месте категории, рубрики или на главной странице (index.php, archive.php, category.php).

Поехали, открываем файл functions.php темы которую Вы используете и в самый конец вставляете следующую функцию (пошаговое объяснение следует далее):

function kriesi_pagination($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)."'>«</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹</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)."'>›</a>";
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>»</a>";
         echo "</div>\n";
     }
}

Для вызова функции в шаблоне нужно пользоваться следующим кодом:

<?php kriesi_pagination(); ?>

Давайте разберем что произошло. Функция kriesi_pagination() содержит два аргумента, причем каждый из них имеет значение по умолчанию:

<?php function kriesi_pagination($pages = '', $range = 2) ?>

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

Второй параметр устанавливает количество ссылок для вывода на экран. Диапазон указывает скрипту, как много ссылок до и после текущей страницы надо выводить перед выводом стрелок (ссылок на следующую страницу и на последнюю страницу).

Делаем навигацию в WordPress без использования плагинаНапример, при использовании диапазона по умолчанию (2), если вы находитесь на первой странице, скрипт выводит ссылки на две страницы 2 и 3 , а если Вы перешли к примеру на 6 страничку то скрипт будет отображать две ссылки назад 4 и 5, две ссылки вперед 7 и 8, одинарные стрелочки (на предыдущую и следующую страницу) и двойные стрелки (на первую страницу и на последнюю).

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

$showitems = ($range * 2)+1;

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

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

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

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

Помимо наших логических и арифметических действий, нам также понадобилась функция WordPress get_pagenum_link(), которая возвращает URL страницы WordPress, соответствующей переданному номеру: get_pagenum_link(2) вернет ссылку на страницу 2 блога.

Далее определяем какие ссылки нужно выводить для нумерации страниц, на основе нескольких условных выражений if и циклов.

HTML & CSS

Функция формирует элементарный HTML код:

<div class="pagination">
	<span class="current">1</span>
	<a href="http://www.kriesi.at/blog/page/2">2</a>
	<a href="http://www.kriesi.at/blog/page/3">3</a>
	<a href="http://www.kriesi.at/blog/page/2">›</a>
	<a href="http://www.kriesi.at/blog/page/12">»</a>
</div>

Придадим ему стилей:

.pagination {
	clear:both;
	padding:20px 0;
	position:relative;
	font-size:11px;
	line-height:13px;
}
.pagination span, .pagination a {
	display:block;
	float:left;
	margin: 2px 2px 2px 0;
	padding:6px 9px 5px 9px;
	text-decoration:none;
	width:auto;
	color:#fff;
	background: #555;
}
.pagination a:hover{
	color:#fff;
	background: #3279BB;
}
.pagination .current{
	padding:6px 9px 5px 9px;
	background: #3279BB;
	color:#fff;
}

Пользовательские циклы

А помните в самом начале когда мы только начали разбирать функцию планировалось рассмотреть ее применение в пользовательских циклах, возможно если Вы их используете для вывода своих записей, то Вам пригодится следующая информация: «Результат пользовательского цикла не сохраняется в глобальной переменной $wp_query, которую мы использовали для получения количества страниц»

$pages = $wp_query->max_num_pages;

Поэтому в таком случае нужно использовать функцию kriesi_pagination() с указанием первого аргумента.

Допустим Вы используете на своем сайте простой пользовательский цикл

<?php $additional_loop = new WP_Query("cat=1,2,3&paged=$paged"); ?>

<?php while ($additional_loop->have_posts()) : $additional_loop->the_post(); ?>
 <!-- Show loop content... -->
<?php endwhile; ?>

и после него Вы можете тут же вызвать нашу функцию используя следующий код:

kriesi_pagination($additional_loop->max_num_pages);

Вот и все, можете посетить сайт автора этой волшебной функции: www.kriesi.at.

Заключение

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

Желаю Вам простого внедрения Вашей новой функции и навыков!

Добавить комментарий:


Комментарии
  1. oriolo

    Ух ты, сколько всего, оказывается, можно без плагинов сделать. Обязательно применю на своем блоге.

  2. Максим

    От души — спасибо! Редко встретишь подробное описание некоторых (очень полезных) функций.

  3. Emin Mehdi

    Добрый день. У меня проблема с этим хаком на своем сайте.

    У Вас на сайте все работает, а у меня не получается. Этот хак от kriesi был у меня на теме. На главной странице выводится так moysite.ru/page/2 — это не работает, должно быть так чтоб работало moysite.ru/film/page/2.

    Что мне делать?

  4. Кирилл

    Согласен с комментарием Максима… Классный урок и очень нужная информация! Всё применил на своём сайте и всё работает безупречно!) Спасибо!)

  5. Alex

    Здравствуйте, спасибо за блог. много интересного) Решил сделать сайт на WP. Столкнулся с проблемой — может быть подскажете как сделать? Нужно сделать пункт меню, при клике на который пользователь попадает на последнее сообщение в определенной категории. Можно ли это сделать используя стандартное меню WP?

  6. Julia

    Ок, Looler и правда работает фишка, как хорошо заглянула сюда! Еще такие же фичи есть в 4.1?