Для розробки навігації нам необхідно додати не менше 15 тестових записів та перевірити, щоб у панелі адміністратора, в налаштуваннях було вказано 10 записів на сторінці. Налаштування -> Налаштування читання -> На сторінках блогу відображати не більше 10 записів.

Якщо у вас записів буде більше, ніж 10, то користувач побачить лише останні 10 доданих записів. Щоб дати можливість користувачеві переглядати всі записи, ми можемо додати навігацію на сайт.

Для початку необхідно до файлу archive.php після циклу додати функцію pagination().

Поки що посторінкова навігація не відображатиметься, так як функцію pagination() ми ще не створювали. Зараз ми маємо створити цю функцію.

Для додавання навігації, додайте до папки шаблону нову папку з ім'ям functions. У папці функцій додайте новий файл під назвою pagination.php.

До файлу pagination.php додайте код:

<?php
/**
 * @package WordPress
 * @subpackage my_theme_tmp
 */

//pagination function
function pagination($сторінки = '', $діапазон = 4)
{
     $елементи показу = ($Діапазон * 2)+1; 
 
     глобальна $paged;
     if(empty($на сторінках)) $paged = 1;
 
     if($сторінок == '')
     {
         глобальний $wp_запит;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         {
             $сторінки = 1;
         }
     }  
 
     if(1 != $pages)
     {
         луна "<клас div="сторінка-нумерація сторінок clearfix">";
         if($на сторінках > 2 && $на сторінках > $діапазон+1 && $показові елементи < $pages) луна "<a href='".get_pagenum_link(1)."'>&laquo; Перший</a>";
         if($на сторінках > 1 && $показові елементи < $pages) луна "<a href='".get_pagenum_link($на сторінках - 1)."'>&lsaquo; Попередній</a>";
 
         for ($i=1; $i <= $pages; $І++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 луна ($сторінка == $i)? "<клас span="струм">".$я."</проліт>":"<a href='".get_pagenum_link($i)."' клас="Неактивні">".$я."</a>";
             }
         }
 
         if ($на сторінках < $pages && $показові елементи < $pages) луна "<a href="".get_pagenum_link($на сторінках + 1)."\">Наступний &RSAQUO;</a>";
         if ($на сторінках < $сторінок-1 &&  $сторінка+$range-1 < $pages && $показові елементи < $pages) луна "<a href='".get_pagenum_link($pages)."'>Останній &raquo;</a>";
         луна "</див.>\п";
     }
}
?>

Зайдіть у файл functions.php і підключіть туди файл із функцією навігації як показано на малюнку нижче:

вимагати('функції/нумерація сторінок.php');

Тепер, коли функція створена та викликана у файлі archive.php, на сайті ми можемо побачити навігацію.

Навігація працює але виглядає не дуже красиво, для оформлення навігації пропоную додати стилі до кінця файлу /wp-content/themes/my_theme_tmp/css/style.css

/* Нумерація */
.сторінка-нумерація сторінок {
	Заповнення: 10px 20px 10px !important;
	Відображення:блокувати !important;
	ясний:Як !important;
}
.сторінка-нумерація сторінок а ,.проміжок сторінки-нумерації сторінок.pages, .проміжок сторінки-нумерації сторінок.extend {
		колір:#707070 !important;
		тло:#FFFFFF !important;
		межа-радіус:3px !important;	
		-moz-border-radius:3px !important;
		-webkit-border-radius:3px !important;
		border:твердий 1px #DCDCDC !important;
		Заповнення:6px 9px 6px 9px !important;
		Поле праворуч:3px !important;
		текстове оформлення:Ніхто !important;
		розмір шрифту:12px !important;
}
.сторінка-нумерація сторінок а:Наведіть {
		колір межі:#202020 !important;
		тло:#525252 !important;
		колір:#ФФФ !important;
		тло:-moz-лінійно-градієнтний(верх,#9F9F9F 1px,#6C6C6C 1px,#525252) !important;
		тло:-вебкіт-градієнт(Лінійних,0 0,0 100%,Контрольна точка кольору(0.02,#9F9F9F),Контрольна точка кольору(0.02,#6C6C6C),Контрольна точка кольору(1,#525252)) !important;

}
 .сторінка-діапазон нумерації сторінок.current{
		Заповнення: 0px 9px 4px 9px !important;
		border:твердий 1px #DCDCDC !important;
		колір межі:#3390Каліфорнія !important;
		межа-радіус:3px !important;	
		-moz-border-radius:3px !important;
		-webkit-border-radius:3px !important;
		колір:#ФФФ !important;
		Поле праворуч:3px !important;
		колір межі:#202020 !important;
		тло:#525252 !important;
		тло:-moz-лінійно-градієнтний(верх,#9F9F9F 1px,#6C6C6C 1px,#525252) !important;
		тло:-вебкіт-градієнт(Лінійних,0 0,0 100%,Контрольна точка кольору(0.02,#9F9F9F),Контрольна точка кольору(0.02,#6C6C6C),Контрольна точка кольору(1,#525252)) !important;
}
/* Нумерація */

Після нескладної роботи ми маємо чудову навігацію.

Базову функцію для навігації я вам дав та розповів, як її вбудувати, кому буде необхідно, можете доопрацьовувати функцію під свій шаблон. Успіхів у вивченні WordPress, а я як завжди закріплюю для вас файли поточного уроку.

У наступному уроці ми вивчимо, як робити навігацію у файлі single.php.