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

Если у вас записей будет больше чем 10, то пользователь увидит только последние 10 добавленных записей. Чтобы дать возможность пользователю просматривать все записи мы можем добавить навигацию на сайт.

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

Пока постраничная навигация не будет отображаться, так как функцию pagination() мы еще не создавали. Сейчас мы должны создать эту функцию.

Для добавления навигации, добавьте в папку шаблона новую папку с именем functions. В папке functions добавьте новый файл с названием pagination.php.

В файл pagination.php добавьте код:

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

//pagination function
function pagination($pages = '', $range = 4)
{
     $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 "<div class=\"page-pagination clearfix\">";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";
 
         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
             }
         }
 
         if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
         echo "</div>\n";
     }
}
?>

Зайдите в файл functions.php и подключите туда файл с функцией навигации как показано на картинке ниже:

require('functions/pagination.php');

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

Навигация работает но выглядит не очень красиво, для оформления навигации предлагаю добавить стили в конец файла /wp-content/themes/my_theme_tmp/css/style.css

/* pagination */
.page-pagination {
	padding: 10px 20px 10px !important;
	display:block !important;
	clear:both !important;
}
.page-pagination a ,.page-pagination span.pages, .page-pagination span.extend {
		color:#707070 !important;
		background:#FFFFFF !important;
		border-radius:3px !important;	
		-moz-border-radius:3px !important;
		-webkit-border-radius:3px !important;
		border:solid 1px #DCDCDC !important;
		padding:6px 9px 6px 9px !important;
		margin-right:3px !important;
		text-decoration:none !important;
		font-size:12px !important;
}
.page-pagination a:hover {
		border-color:#202020 !important;
		background:#525252 !important;
		color:#fff !important;
		background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252) !important;
		background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)) !important;

}
 .page-pagination span.current{
		padding: 0px 9px 4px 9px !important;
		border:solid 1px #DCDCDC !important;
		border-color:#3390CA !important;
		border-radius:3px !important;	
		-moz-border-radius:3px !important;
		-webkit-border-radius:3px !important;
		color:#fff !important;
		margin-right:3px !important;
		border-color:#202020 !important;
		background:#525252 !important;
		background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252) !important;
		background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)) !important;
}
/* pagination */

После не сложной работы мы имеем отличную навигацию.

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

В следующем уроке мы изучим, как делать навигацию в файле single.php.