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

Что значит "постраничная навигация"? Постраничная навигация позволяет перемещаться по блогу не с помощью неудобных надписей "Раньше","Позже", а выводит номера страниц вот в таком виде:

Сделать это можно двумя способами: с помощью плагина или своего кода.

Постраничная навигация: плагин WP-PageNavi

Итак, для того, чтоб сделать постраничную навигацию в WordPress установите плагин WP-PageNavi, затем можете зайти в админку Options-PageNavi (Опции-PageNavi) и при желании отредактировать настройки.

Дальше нужно вставить код вывода навигации страниц в нижней части блога, для этого в админке wordpress перейдите  "Внешний вид-Редактор" (Presentation-Theme Editor) и отредактируйте файл index.php и archive.php. Найдите кусок кода в котором будут встречаться слова "Раньше", "Позже" или "Older Posts", "Newer Posts" или "posts_nav_link", "navigatoin" (в разных темах код может отличаться) и вместо него вставляем этот код:

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

Осталось только подобрать цвета навигационого блока страниц под дизайн Вашего блога,  для этого отредактируйте файл /wp-content/plugins/wp-pagenavi/pagenavi-css.css

А в помощь для побора цветов советую софтинку bColor.

Обзор других интересных и полезных плагинов читайте по тегу WordPress Plugin.

Постраничная навигация своим кодом

Добавляем в файл functions.php вот этот код:

// Numbered Pagination
function wplift_pagination() {
	global $wp_query;
		$big = 999999999; // need an unlikely integer
			echo paginate_links( array(
			'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
			'format' => '?paged=%#%',
			'current' => max( 1, get_query_var('paged') ),
			'total' => $wp_query->max_num_pages
		) );
}

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

<?php wplift_pagination(); ?>

Теперь осталось добавить добавить стиль отображения постраничной навигации, добавляем в файл style.css вот такой код:

/* Pagination */
.page_nav .page-numbers{
        background:#BCBCBC;
	color:#fff;
	display:block;
	width:auto;
	float:left;
	margin: 4px 4px 4px 0;
	padding:15px 18px 14px 18px;
	text-decoration:none;
}

.page_nav .page-numbers:hover{
	background: #24221D;
	color:#fff;
	text-decoration: none;
}
.page_nav .current{
        background: #24221D;
	color:#fff;
        padding:15px 18px 14px 18px;
}