Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Wordpress » Postranichnaya-navigaciya-ili-paginaciya-v-wordpress

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

Сегодня вы узнаете как можно сделать постраничную навигацию (пагинацию) в wordpress. Обычно на страничке какой-нибудь рубрики (категории) выводится последние 10 записей (по умолчанию). Это значение вы можете изменить на своё, но это не главное. Представьте себе если у вас в одной из рубрик больше чем 10 записей, например 65? Как быть тогда? Согласитесь если в настройках указать вывод всех записей на одной страничке посетителю сайта будет неудобно каждый раз проматывать страницу до конца.

Поэтому и придумали постраничную навигацию. Раньше она осуществлялась при помощи знакомых уже вам тегов previous_post_link() и next_post_link(), что тоже было не совсем удобно. Так как записей могло быть очень много и пользователь мог запутаться был он на этой или другой страничке.

Позже стали придумывать разные плагины, чтобы уже ориентироваться по страницам записей. Это было уже намного удобнее. Самым известным плагином, который осуществляет пагинацию, на сегодняшний день является wp_pagenavi. Как его ставить и настраивать я рассказывать не буду.
Затем многие разработчики стали отказываться от плагинов и придумывать свои функции заменяющие плагины.

Так один гениальный разработчик (каким я его считаю) сделал вот такую функцию:

/** 
 * Альтернатива wp_pagenavi. Создает ссылки пагинации на страницах архивов.
 * 
 * @param string $before   - текст до навигации
 * @param string $after    - текст после навигации
 * @param bool   $echo     - возвращать или выводить результат
 * @param array  $args     - аргументы функции
 * @param array  $wp_query - объект WP_Query на основе которого строится пагинация. По умолчанию глобальная переменная $wp_query
 *                         
 * Версия: 2.4
 * Автор: Тимур Камаев
 * Ссылка на страницу функции: http://wp-kama.ru/?p=8
 */
function kama_pagenavi( $before = '', $after = '', $echo = true, $args = array(), $wp_query = null ) {
	if( ! $wp_query )
		global $wp_query;
	// параметры по умолчанию
	$default_args = array(
		'text_num_page'   => '', // Текст перед пагинацией. {current} - текущая; {last} - последняя (пр. 'Страница {current} из {last}' получим: "Страница 4 из 60" )
		'num_pages'       => 10, // сколько ссылок показывать
		'step_link'       => 10, // ссылки с шагом (значение - число, размер шага (пр. 1,2,3...10,20,30). Ставим 0, если такие ссылки не нужны.
		'dotright_text'   => '…', // промежуточный текст "до".
		'dotright_text2'  => '…', // промежуточный текст "после".
		'back_text'       => '« назад', // текст "перейти на предыдущую страницу". Ставим 0, если эта ссылка не нужна.
		'next_text'       => 'вперед »', // текст "перейти на следующую страницу". Ставим 0, если эта ссылка не нужна.
		'first_page_text' => '« к началу', // текст "к первой странице". Ставим 0, если вместо текста нужно показать номер страницы.
		'last_page_text'  => 'в конец »', // текст "к последней странице". Ставим 0, если вместо текста нужно показать номер страницы.
	);
	$default_args = apply_filters('kama_pagenavi_args', $default_args ); // чтобы можно было установить свои значения по умолчанию
	$args = array_merge( $default_args, $args );
	extract( $args );
	$posts_per_page = (int) $wp_query->query_vars['posts_per_page'];
	$paged          = (int) $wp_query->query_vars['paged'];
	$max_page       = $wp_query->max_num_pages;
	//проверка на надобность в навигации
	if( $max_page <= 1 )
		return false; 

	if( empty( $paged ) || $paged == 0 ) 
		$paged = 1;
	$pages_to_show = intval( $num_pages );
	$pages_to_show_minus_1 = $pages_to_show-1;

	$half_page_start = floor( $pages_to_show_minus_1/2 ); //сколько ссылок до текущей страницы
	$half_page_end = ceil( $pages_to_show_minus_1/2 ); //сколько ссылок после текущей страницы

	$start_page = $paged - $half_page_start; //первая страница
	$end_page = $paged + $half_page_end; //последняя страница (условно)

	if( $start_page <= 0 ) $start_page = 1; if( ($end_page - $start_page) != $pages_to_show_minus_1 ) $end_page = $start_page + $pages_to_show_minus_1; if( $end_page > $max_page ) {
		$start_page = $max_page - $pages_to_show_minus_1;
		$end_page = (int) $max_page;
	}
	if( $start_page <= 0 ) 
		$start_page = 1;
	//выводим навигацию
	$out = '';
	// создаем базу чтобы вызвать get_pagenum_link один раз
	$link_base = str_replace( 99999999, '___', get_pagenum_link( 99999999 ) );
	$first_url = get_pagenum_link( 1 );
	if( false === strpos( $first_url, '?') )
		$first_url = user_trailingslashit( $first_url );

	$out .= $before . "
//ссылки с шагом
		$dd = 0;
		if ( $step_link && $end_page < $max_page ){
			for( $i = $end_page+1; $i<=$max_page; $i++ ) {
				if( $i % $step_link == 0 && $i !== $num_pages ) {
					if ( ++$dd == 1 ) 
						$out.= ''. $dotright_text2 .' ';
					$out.= ''. $i .' ';
				}
			}
		}
		// в конец
		if ( $end_page < $max_page ) {
			if( $dotright_text && $end_page != ($max_page-1) ) 
				$out.= ''. $dotright_text2 .' ';
			$out.= ''. ( $last_page_text ? $last_page_text : $max_page ) .' ';
		}
		// вперед
		if ( $next_text && $paged != $end_page ) 
			$out.= ' ';
	$out .= "
". $after ."\n";

$out = apply_filters('kama_pagenavi', $out );

if( $echo ) return print $out;

return $out;
}

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

<?php kama_pagenavi();?>

Чтобы не мучатся со стилями просто зайдите по ссылке на первоисточник: http://wp-kama.ru/id_8/alternativa-wp-pagenavi-bez-lishnix-zaprosov-k-bd-ili-keshu.html Почему я отметил этот способ? Да потому что автор проделал огромную работу, сам бы я в жизни не догадался до такого.

Тег the_posts_pagination() в WordPress

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

<?php the_posts_pagination($args);?>

$args это массив. Вообще надо сказать, что тег the_posts_pagination() появился совсем недавно в версии WP 4.1.0. У себя на сайте я использую его после цикла wordpress:

<?php the_posts_pagination(array(
	'show_all'     => False, // показаны все страницы участвующие в пагинации
	'end_size'     => 1,     // количество страниц на концах
	'mid_size'     => 1,     // количество страниц вокруг текущей
	'prev_next'    => True,  // выводить ли боковые ссылки "предыдущая/следующая страница".
	'prev_text'    => '«',
	'next_text'    => '»',
	'add_args'     => False,
	'add_fragment' => '',     // Текст который добавиться ко всем ссылкам.
	'screen_reader_text' => '',
));
?>

И на всякий случай написал код стилей CSS:

nav.pagination{
margin:0 auto;	
width:80%;
display:block;
float:left;	
}
nav.pagination h2.screen-reader-text{
display:none;	
}
div.nav-links{
margin:0 0 2em 0;
text-align:center;	
}
.current, a.page-numbers{
	padding:0.2em 0.5em 0.2em 0.5em;
	text-decoration:none;
	font: 2em Arial, Helvetica, sans-serif;
}
a.page-numbers,a.page-numbers:visited{
	color:#999;	
}
a.page-numbers{
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
transition: all 0.8s ease;
}
a.page-numbers:hover{
	background:#666;
	color:#FFF;
}
span.current{
	color:#000;
	text-shadow:0.05em 0.03em #CEDFDC
}

В результате вот что у меня получилось:
Пагинация

Единственное я убрал заголовок h2 с помощью CSS, со временем я это обязательно исправлю. Это можно сделать с помощью вот такого кода:

// вместо the_posts_pagination(); используйте такой код:
$nav = get_the_posts_pagination();
$nav = preg_replace('~<h2.*?h2>~', '', $nav);
echo $nav;

Опять же спасибо Тимуру Камаеву за этот код. Кому понравилась статья не забываем делиться с друзьями информацией.



наверх