Нумерованная (постраничная) навигация записей блога WordPress (PHP + CSS)

По-умолчанию, в ленте последних записей блога WordPress предусмотрена простейшая навигация, основанная на двух ссылках: «Предыдущие записи» и «Следующие записи». В данном уроке я расскажу как без применения плагинов изменить данный тип навигации на список страниц — нумерованную или постраничную навигацию.

Решение без плагинов — немного PHP и CSS

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

   // Выводим ссылку на следующую страницу записей
	function custom_get_next_posts_link ( $label = null, $max_page = 0 ) {
	global $paged, $wp_query;

	if ( !$max_page )
		$max_page = $wp_query->max_num_pages;

	if ( !$paged )
		$paged = 1;

	$nextpage = intval($paged) + 1;

	if ( null === $label )
		$label = __( 'Next Page »' );

	if ( !is_single() && ( $nextpage <= $max_page ) ) {
		$attr = apply_filters( 'next_posts_link_attributes', '' );
		return '<a class="textlink" href="' . next_posts( $max_page, false ) . "\" $attr>" . preg_replace('/&([^#])(?![a-z]{1,8};)/i', '&#038;$1', $label) . '</a>';
	}
}

// Выводим ссылку на предыдущую страницу записей
function custom_get_previous_posts_link( $label = null ) {
	global $paged;

	if ( null === $label )
		$label = __( '&laquo; Previous Page' );

	if ( !is_single() && $paged > 1 ) {
		$attr = apply_filters( 'previous_posts_link_attributes', '' );
		return '<a class="textlink" href="' . previous_posts( false ) . "\" $attr>". preg_replace( '/&([^#])(?![a-z]{1,8};)/i', '&#038;$1', $label ) .'</a>';
	}
}

// Функция нумерованной навигации
function numeric_posts_nav() {

	if( is_singular() )
		return;

	global $wp_query;

	/** Не показывать навигацию, если присутствует только одна страница */
	if( $wp_query->max_num_pages <= 1 )
		return;

	$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
	$max   = intval( $wp_query->max_num_pages );

	/*	Добавить текущую страницу в массив */
	if ( $paged >= 1 )
		$links[] = $paged;

	/*	Добавляем в массив соседние страницы */
	if ( $paged >= 3 ) {
		$links[] = $paged - 1;
		$links[] = $paged - 2;
	}

	if ( ( $paged + 2 ) <= $max ) {
		$links[] = $paged + 2;
		$links[] = $paged + 1;
	}

	/* Ссылка "Предыдущие записи" */
	if ( custom_get_previous_posts_link() )
		printf( '%s' . "\n", custom_get_previous_posts_link() );

	/**	Ссылка на первую страницу, плюс многоточие, если страниц много */
	if ( ! in_array( 1, $links ) ) {
		$class = 1 == $paged ? 'active' : '';

		printf( '<a class="textlink %s" href="%s">%s</a>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );

		if ( ! in_array( 2, $links ) )
			echo '…';
	}

	/**	Ссылка на активную страницу, плюс соседние страницы */
	sort( $links );
	foreach ( (array) $links as $link ) {
		$class = $paged == $link ? 'active' : '';
		printf( '<a class="textlink %s" href="%s">%s</a>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
	}

	/**	Ссылка на последнюю страницу, плюс многоточие, если страниц много */
	if ( ! in_array( $max, $links ) ) {
		if ( ! in_array( $max - 1, $links ) )
			echo '…' . "\n";

		$class = $paged == $max ? 'active' : '';
		printf( '<a class="textlink %s" href="%s">%s</a>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
	}

	/**	Ссылка "Следующие записи" */
	if ( custom_get_next_posts_link() )
		printf( '%s' . "\n", custom_get_next_posts_link() );

}

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

<?php numeric_posts_nav() ?>

Для того, чтобы такая навигация стала привлекательней, добавим немного CSS-стилей:

a.textlink {
	border: 1px solid #d6d9dd;
	background: #f1f1f1; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#fafafa); /* for IE */
	-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#fafafa)"; /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #ffffff,  #fafafa); /* for firefox 3.6+ */
	font-size: 11px;
	margin: -3px 0 0 0;
	font-weight: bold;
	padding: 3px 8px;
	color: #313639;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	text-decoration: none
}

a.textlink:hover {
	background: #313639;
	filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#313639333,endColorStr=#313639333); /* for IE */
	-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#313639333,endColorStr=#313639333)"; /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#313639333), to(#313639333)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #313639333,  #313639333); /* for firefox 3.6+ */
	color: #fff;
	border: 1px solid #313639;
	text-decoration: none
}

Класс .active отвечает за активную страницу. Можете изменить его отображение, как хотите. Оставляем это на Ваше усмотрение.
Вот и все. Вот, как выглядит такая навигация после выполнения всех вышеуказанных действий:

Wordpress нумерованная навигация

Понравилась запись? Ставь лайк!
Loading more content...