Посторінкова навігація у WordPress без плагіна

Переклад статті з англ. автора Kriesi

ВордПрес має лише посилання “наступна сторінка” та “попередня сторінка” для навігації між різними сторінками блога. Якщо сталось так, що ви маєте блог з великою кількістю постів або просто хочете запропонувати відвідувачам більше зручності я рекомендую видалити згадані посилання і замінити їх посторінковою навігацією (як і більшість людей, включаючи мене, роблять для своїх блогів).

Чому ви повинні використовувати її?
Тому що вона полегшує навігацію і відвідувач точно знає скільки дописів та сторінок доступно. Це просто дуже зручно! 🙂

Функція

Якщо ви бажаєте просто скопіювати/вставити функцію у вашу тему – будь-ласка, ось код, а більш детальне пояснення можна знайти нижче.

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 "
";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "«";
         if($paged > 1 && $showitems < $pages) echo "‹";

         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "".$i."":"".$i."";
             }
         }

         if ($paged < $pages && $showitems < $pages) echo "›";  
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "»";
         echo "
\n";
     }
}

Як використовувати: інструкція крок-за-кроком

Показ посторінкової навігації на стандартній головній сторінці здійснюється з допомогою коду:

kriesi_pagination();

і це все.

Як ви можете побачити, ми маємо 2 опціональні параметри:

function kriesi_pagination($pages = '', $range = 2)

Перший це кількість сторінок. Другий параметр встановлює кількість посилань, що будуть показані. Величина вказує скрипту скільки посилань до і після поточної сторінки повинно бути показано до того, як він покаже лише маленькі стрілочки. Наприклад, із значенням 2 (за замовчуванням), якщо ви зараз перебуваєте на першій сторінці, скрипт показуватиме посилання на 2 сторінки попереду, посилання на наступну сторінку та посилання на останню сторінку. Якщо ж ви перебуваєте, наприклад, на четвертій сторінці, то скрипт показуватиме посилання на 2 сторінки попереду, 2 сторінки позаду, по одному посилання на наступну і на попередню сторінку та по одному посиланню на першу і на останню сторінку.

Далі, нам потрібен доступ до глобальної перемінної $paged. ВордПрес використовує цю перемінну для зберігання інформації про сторінку, що показується зараз. Якщо ця перемінна порожня ми присвоюємо їй значення “1”. Навіщо нам це знати? Тому що сторінка на якій ми зараз знаходимось не повинна показуватись у формі посилання, вона повинна показуватись як “активна”.

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

Тепер ми знаємо, яку сторінку ми зараз переглядаємо, але нам також потрібно знати скільки сторінок ми маємо. Перемінній $pages (не плутати з перемінною $paged) не встановлено значення коли виконується скрипт. Якщо річ у цьому, то знову скористаємось глобальною перемінною щоб отримати значення кількості сторінок:

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

Як ви можете бачити, разом із зовсім трішки логічних і арифметичних операцій нам потрібна лише одна специфічна функція ВордПрес. Вона називається get_pagenum_link() і вона дозволяє нам отримати адресу сторінки двигунця для заданого номера сторінки. Наприклад, get_pagenum_link(2) дасть посилання на сторінку блога під номером 2.

Тепер зроблено перевірку, яка грунтується на кількох параметрах, що визначає який елемент показувати. Хоча я зазвичай пояснюю усе в деталях, але, думаю, це не матиме великого значення зараз.

Стилі

За замовчуванням ми отримаємо наступний HTML код:

 1
 2
 3
 ›
 »

У такому разі, нам потрібні ось такі стилі:

.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;
}

Додатково: власний цикл

Ви можливо захочете використовувати власний цикл (custom loop) будь-де на сторінці, цикл який не зберігає у стандартній глобальній перемінній $wp_query об’єкт, який ми використовуємо для одержання кількості:

 $pages = $wp_query->max_num_pages;

У цьому випадку вам потрібно викликати функцію kriesi_pagination() із встановленим першим параметром.

Отож, припустимо ви використовуєте простий власний цикл:

have_posts()) : $additional_loop->the_post(); ?>
 

Тоді ви повинні викликати функцію посторінкової навігації у такий спосіб:

kriesi_pagination($additional_loop->max_num_pages);

Ви можете використовувати описаний функціонал у своїх персональних або комерційних проектах.