Пагинация для сайта на WordPress

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

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

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

Пагинация для сайта на WordPress

Это скриншот результата работы кода ниже

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

В файл functions.php, в конце страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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'] = 3; //сколько ссылок показывать слева и справа от текущей 
     $a['end_size'] = 1; //сколько ссылок показывать в начале и в конце 
     $a['prev_text'] = '«'; //текст ссылки "Предыдущая страница" 
     $a['next_text'] = '»'; //текст ссылки "Следующая страница" 
 
     if ($max > 1) echo '<div class="pagination-navigation">'; 
     if ($total == 1 && $max > 1) $pages = '<span class="pagination-item">Страница ' . $current . ' из ' . $max . '</span>'."\r\n"; 
     echo $pages . paginate_links($a); 
     if ($max > 1) echo '</div>'; 
}

В файл стилей, обычно он называется style.css, в конце страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.pagination-navigation {
     text-align:center;
}
.pagination-navigation  a.page-numbers{
     display:inline-block;
     padding:10px 0;
     background:#bed4df;
     font-size:12px;
     width:35px;
     text-align:center;
}
.pagination-navigation  a.page-numbers:hover {
     background:#323e4e;
}
.pagination-navigation .current , .pagination-navigation .dots {
     padding:8px 0;
     display:inline-block;
     font-size:12px;
     width:33px;
     text-align:center;
     border:1px solid #bed4df;
}

В файл index.php, в конце страницы:

1
<?php if (function_exists('wp_corenavi')) wp_corenavi(); ?>

перед вызовом футера, который выглядит так:

1
<?php get_footer(); ?>

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

3 Комментариев

  1. Ирина 04.06.2014 / 13:07

    Постраничную навигацию нужно добавлять не только в index.php, но также во все файлы, которые выводят список постов. Например, в archive.php, category.php. Например, у Вас в блоге сейчас на главной странице цифры для навигации, а если зайдете в рубрику, где больше одной страницы постов, то внизу появляется кнопка «В прошлое».

  2. Olunka 04.06.2014 / 20:10

    Согласна, спасибо за подсказку, этот нюанс от меня ускользнул, так как сама по рубрикам сайты не смотрю.

  3. Denis 21.05.2015 / 22:29

    В четвертой версии WP наконец то встроили нормальную пагинацию на уровне ядра — надобность в хаках и плагинах отпадает .

Комментарии к этой статье отключены.