Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

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

Добрый день уважаемые читатели блога Progress-project — abrek-ad-abra.ru.

В продолжении темы по созданию блога на движке WordPress, сегодня мы рассмотрим такой момент, как создания постраничной навигации не прибегая к помощи плагина.

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

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

Конечно многие темы WordPress по умолчанию уже имеют свою постраничную навигацию. Но она, как правило имеет вид типа следующая и предыдущая страницы, что я считаю не есть хорошо.
Давайте представим, что вы приступили к прочтению книги и к своему удивлению замечаете, что на её страничках вместо цифр значится «следующая и предыдущая» страницы.
Я думаю вашему удивлению и возмущению не было бы границ.

Так почему же это так часто встречается на различных сайтах.
Безусловно это нужно исправлять да и по статистике на блогах где имеется построничная навигация число переходов посетителей гораздо выше, к тому-же способ о котором я собираюсь вам рассказать не создаст нагрузку на сервер так, как мы не станем прибегать к помощи плагина а сделаем всё с помощью PHP и CSS кодов.

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

Вот первый код который нам нужно вставить в файл 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;
}

Далее так-же в файлах нашей темы выбираем; search.php, archive.php, index.php и открываем в текстовом редакторе Notepad++.
Если вы ещё не успели использовать специальные плагины для создания постраничной навигации типа WP-PageNavi то код у вас должен иметь вот такой вид:

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

В том случае если данный плагин на вашем блоге уже был установлен
код у вас будет выглядеть так:

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

Наша задача изменить эти строчки на:

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

Стили для постраничной навигации WordPress

Стили которые использует плагин 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;
}

Они-же вполне подойдут и для нашей с вами цели.

Вы можете просто скопировать этот вариант стилей и далее вставить их в файл стилей вашего шаблона а именно в файл style.css.

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

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

.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;
}

С уважением, автор блога!
© progress-project
★Обновлено:2016-05-18

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly(4)
Николай(3)
Олег(3)
Иван(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог