Постраничная навигация по статьям и комментариям

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

Постраничная навигация

Постраничная навигация по статьям

Если вы только что установили WordPress и активировали один из прилагавшихся шаблонов (themes), то скорее всего навигация по страницам ваших записей выглядит в виде ссылок «Позже» и «Раньше» или им аналогичных, которые отсылают на страницы с анонсами предшествующих и последующих записей по дате их публикации.

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

<div>
<div><?php next_posts_link('&laquo; Раньше') ?></div>
<div><?php previous_posts_link('Позже &raquo;') ?></div>
</div>

меняем на следующий:

ID); ?>
ID); ?>

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

Для начала разберем плагин, который поможет быстро и просто реализовать постраничную навигацию по статьям сайта. Он называется WP-PageNavi. Скачиваем, устанавливаем, активируем. В настройках плагина (Параметры > Список страниц) можно задать диапазон страниц, количество и вариант для отображения, а также использовать или нет прилагающийся к нему файл стилей. Кстати, он лежит в папке плагина и в нем можно настроить внешний вид панели.

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

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

Теперь сделаем все нашими собственными кривыми ручонками! Открываем файл функций functions.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 - показывать текст "Страница № из №", 0 - не показывать
  $a['mid_size'] = 5;  //Сколько ссылок показывать справа и слева от основной страницы
  $a['end_size'] = 1; //Сколько ссылок показывать вначале и вконце
  $a['prev_text'] = '« Предыдущая'; //текст ссылки на предыдущую страницу
  $a['next_text'] = 'Следующая »'; //текст ссылки на следующую страницу
 
  if ($max > 1) echo '';
}

Теперь в индексной странице (index.php), а также ей подобный — категорий, архива, тэгов и т.д. — вставляем после цикла вывода новостей код:


Теперь у Вас внизу главной страницы с новостями будет панель постраничной навигации. Давайте вернемся к ее внешнему виду. Как я говорил, можно настроить все в файле стилей «wp-content/plugins/wp-pagenavi/pagenavi-css.css». А если Вы не мастер в CSS, можно сделать проще — установить добавочный плагин WP PageNavi Style, и настроить в нем все цвета, которые вы хотите задать для данного блока.

Стили панели постраничной навигации

Постраничная навигация по комментариям

Теперь разберемся с комментариями. Будем использовать плагин WP-CommentNavi. После его установки и активации в необходимое место шаблона — обычно или в single.php или в comments.php, после функции вывода комментариев вставляем код:

Для придания навигационной панели своего оформления, отредактируйте файл стилей, который находится по адресу
«wp-content/plugins/wp-commentnavi/commentnavi-css.css».

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

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

function wp_comments_corenavi() {
   $pages = '';
   $max = get_comment_pages_count();
   $page = get_query_var('cpage');
   if (!$page) $page = 1;
   $a['current'] = $page;
   $a['echo'] = false;
 
   $total = 0; //1 - показывать текст "Страница № из №", 0 - не показывать
   $a['mid_size'] = 3; //Сколько ссылок показывать справа и слева от основной страницы
   $a['end_size'] = 1; //Сколько ссылок показывать вначале и вконце
   $a['prev_text'] = '« Предыдущая'; //текст ссылки на предыдущую страницу
   $a['next_text'] = 'Следующая »'; //текст ссылки на следующую страницу
 
   if ($max > 1) echo '
'; if ($total == 1 && $max > 1) $pages = ' Страница ' . $page . ' из ' . $max . ''."\r\n"; echo $pages . paginate_comments_links($a); if ($max > 1) echo '
'; }

И теперь в нужное место темы оформление добавьте код:


постраничная навигация по комментариям

Вот так просто и без напряга постраничная навигация добавляется на сайт — все то же самое, что дают нам плагины.

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

Один комментарий

  • Постраничная навигация по статьям у меня стоит. А вот за навигацию по комментариям спасибо. Пока их не так много, но скоро, думаю, она мне понадобится 🙂

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