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

Изначально практически в любой теме при разбивке комментариев на страницы выводится навигация виде ссылочного указателя (следующая/предыдущая). В этом есть свои недостатки, главный, неудобство, которое относится к юзабилити сайта. Для того чтобы изменить ее и сделать похожей на страничную навигацию не нужно устанавливать плагин. Необходимо лишь использовать стандартную функцию paginate_comments_links и внести малые изменения в файл comments.php.

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

Не только неудобно, но и внешний вид совсем не радует. Наша задача — исправить недостаток и привести в порядок оформление (стилизовать). В конечном результате получим следующее:

Устанавливаем пагинацию

И так, откройте файл comments.php он находится внутри вашей установленной темы. Нужно найти стандартные строки навигации выглядят примерно так:

<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>

И заменить на эти:

<div class="comm-nav">
<?php paginate_comments_links( array('prev_text' => '&lsaquo; Предыдущая', 'next_text' => 'Следующая &rsaquo;'));
?>
</div>

Осталось добавить только стили в файл style.css

.comm-nav{
margin: 15px 0 20px;
padding: 5px 10;
text-align: center;
}
.comm-nav a {
  background: none repeat scroll 0 0 #2ea2cc;
  border: 1px solid #0478a6;
  box-shadow: 0 1px 0 rgba(120, 200, 230, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15);
  color: #fff;
  margin: 3px;
  padding: 5px 10px;
  text-decoration: none;
}
.comm-nav a:hover {
 background: #1e8cbe;
 border-color: #0074a2;
 box-shadow: 0 1px 0 rgba(120, 200, 230, 0.6) inset;
}
.comm-nav .current {
  background: -moz-linear-gradient(center top , #38362e, #2e2d26);
    border: 1px solid #222;
    color: #fff;
    font-weight: bold;
    margin: 3px;
    padding: 5px 10px;
    text-shadow: 0 1px 0 #000;
}

Сохраняем изменение, перезаписываем файлы на сервере и смотрим результат.