Постраничная навигация PHP для WopdPress без плагина

Главная » Создание блога » Обходимся без плагинов » Постраничная навигация без плагина на WordPress

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

2013-02-28 автор: Виталий Кириллов

Всем привет! Немного раньше я обещал, что на SEO-Mayak.com я расскажу, как делается постраничная навигация на WordPress без плагина. Сегодня как раз наступил тот день.

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

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

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

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

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

Постраничная навигация для WordPress на основе PHP без плагина

В свое время я перепробовал множество решений постраничной навигации без плагинов, но не все «самопальные» коды корректно работали и идеальный вариант я нашел на блоге wp-kama.ru, за что Тимуру моя огромная благодарность.

Вот сам код, который надо вставить в файл functions.php в конец кода перед ?>:

function kama_pagenavi($before='', $after='', $echo=true) {

	/* ================ Настройки ================ */
	$text_num_page = ''; // текст для количества страниц. {current} заменится текущей, а {last} последней. Пример: 'Страница {current} из {last}' = Страница 4 из 60
	$num_pages = 10; // сколько ссылок показывать
	$stepLink = 10; // после навигации ссылки с определенным шагом (значение = число (какой шаг) или '', если не нужно показывать). Пример: 1,2,3...10,20,30
	$dotright_text = '…'; // промежуточный текст "до".
	$dotright_text2 = '…'; // промежуточный текст "после".
	$backtext = '«'; // текст "перейти на предыдущую страницу". Ставим '', если эта ссылка не нужна.
	$nexttext = '»'; // текст "перейти на следующую страницу". Ставим '', если эта ссылка не нужна.
	$first_page_text = ''; // текст "к первой странице" или ставим '', если вместо текста нужно показать номер страницы.
	$last_page_text = ''; // текст "к последней странице" или пишем '', если вместо текста нужно показать номер страницы.
	/* ================ Конец Настроек ================ */

	global $wp_query;
	$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=''; //выводим навигацию
		$out.= $before."<div class='wp-pagenavi'>\n";
				if ($text_num_page){
					$text_num_page = preg_replace ('!{current}|{last}!','%s',$text_num_page);
					$out.= sprintf ("<span class='pages'>$text_num_page</span>",$paged,$max_page);
				}

				if ($start_page >= 2 && $pages_to_show < $max_page) {
					$out.= '<a href="'.rtrim(get_pagenum_link(), '/').'">'. ($first_page_text?$first_page_text:1) .'</a>';
					if($dotright_text && $start_page!=2) $out.= '<span class="extend">'.$dotright_text.'</span>';
				}

				if ($backtext && $paged!=1) $out.= '<a href="'.rtrim(get_pagenum_link(($paged-1)), '/').'">'.$backtext.'</a>';

				for($i = $start_page; $i <= $end_page; $i++) {
					if($i == $paged) {
						$out.= '<span class="current">'.$i.'</span>';
					} else {
						$out.= '<a href="'.rtrim(get_pagenum_link($i), '/').'">'.$i.'</a>';
					}
				}

				if ($nexttext && $paged!=$end_page) $out.= '<a href="'.get_pagenum_link(($paged+1)).'">'.$nexttext.'</a>';

				//ссылки с шагом
				if ($stepLink && $end_page < $max_page){
					for($i=$end_page+1; $i<=$max_page; $i++) {
						if($i % $stepLink == 0 && $i!==$num_pages) {
							if (++$dd == 1) $out.= '<span class="extend">'.$dotright_text2.'</span>';
							$out.= '<a href="'.get_pagenum_link($i).'">'.$i.'</a>';
						}
					}
				}

				if ($end_page < $max_page) {
					if($dotright_text && $end_page!=($max_page-1)) $out.= '<span class="extend">'.$dotright_text2.'</span>';
					$out.= '<a href="'.get_pagenum_link($max_page).'">'. ($last_page_text?$last_page_text:$max_page) .'</a>';
				}

		$out.= "</div>".$after."\n";
	if ($echo) echo $out;
	else return $out;
}

Теперь открываем файлы index.php, search.php и archive.php. Советую использовать для редактирования файлов текстовый редактор Notepad++.

Если Вы еще не устанавливали плагины постраничной навигации ,то строчки, которые нам надо заменить должны выглядеть примерно так:

<div class="navigation">
    <div class="navleft"><?php next_posts_link('&laquo; Предыдущие записи') ?></div>
    <div class="navright"><?php previous_posts_link('Следующие записи &raquo;') ?></div>
</div>

Ели у вас уже был установлен плагин WP-PageNavi, то ищем такой код:

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

И заменяем вышеуказанные строчки на:

<?php if (function_exists('kama_pagenavi')) kama_pagenavi(); ?>

Если возникли сложности со поиском нужных строчек, пишите в комментариях — постараюсь помочь!

Прописываем стили для постраничной навигации

Стили для плагина WP-PageNavi выглядят так:


.wp-pagenavi {
 clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
 text-decoration: none;
 border: 1px solid #BFBFBF;
 padding: 3px 5px;
 margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
 border-color: #000;
}

.wp-pagenavi span.current {
 font-weight: normal;
}

Эти стили вполне подходят и для данного PHP решения. Просто скопируйте стили и вставьте в конец файла style.css, который находится в папке с вашей темой.

Для соединения с сервером лучше всего использовать FTP клиент. Если Вы еще не знаете как пользоваться этой программой, то советую почитать статью «FTP клиент Filezilla»

Можно немного приукрасить нашу навигацию, изменить цвет фона или немного скруглить края, настроить отступы и т.д, но для этого необходимо иметь хотя бы базовые знания в языках HTML и CSS.

В дальнейшем я планирую сделать отдельную рубрику, где я буду по полочкам разбирать основные значения и принципы строения HTML и CSS, так что советую подписаться на обновления блога.

Ну а на десерт я приготовил для вас готовые стили, которые я сам составлял для постраничной навигации моего блога


.wp-pagenavi {
 clear: both;
 margin: 5px;
}

.wp-pagenavi a, .wp-pagenavi span {
 text-decoration: none;
 border: 1px solid #BFBFBF;
 padding: 3px 12px;
 margin: 2px;
 background-clip:padding-box;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 box-shadow:3px 3px 3px #666666;
 -webkit-box-shadow 5px 5px 15px #666666;
 -moz-box-shadow: 5px 5px 15px #666666;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
 border-color: #BFBFBF;
}

.wp-pagenavi span.current {
 font-weight: bold;
}

На сегодня у меня все. Как Вам статья?

С уважением, Виталий Кириллов

Все любят цирк, но таких представлений я в детстве не видел!