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

Постраничная навигация блога- это когда блог выстраивается в страницы от самой поздней страницы “x” (зависит от количества постов на странице и на блоге в целом) до самой свежей страницы 1. По умолчанию в wordpress выводится навигация без нумерации- просто: “перейти к предыдущим записям”, “перейти к следующим записям” или просто “раньше”, “позже”. В шаблоне (файлах index.php или home.php) вот эта строчка отвечает за вывод ссылок на более ранние или поздние записи:

1

<?php posts_nav_link(' &#8212; ', __('&laquo; Раньше'), __('Позже &raquo;')); ?>

Мы же будем делать более грамотную, постраничную навигацию с помощью плагина WP-PageNavi.

Скачиваем и устанавливаем плагин:

1. Распакуйте архив и скопируйте папку wp-pagenavi в /wp-content/plugins/.
2. Откройте админку wordpress и выберете вкладку “Плагины“.
3. Активируйте плагин WP-PageNavi.

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

1

<?php posts_nav_link(' &#8212; ', __('&laquo; Раньше'), __('Позже &raquo;')); ?>

на

1

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

Внутри папки плагина есть файл стилей pagenavi-css.css, с помощью которого вы можете редактировать дизайн вывода списка страниц. В админке wordpress в “Настройки/PageNavi” вы можете настроить плагин под себя. Я убрал все лишнее и оставил только страницы, вот список моих настроек:

Text For Number Of Pages	Это поле я оставил пустым
Text For Current Page	%PAGE_NUMBER%
Text For Page	%PAGE_NUMBER%
Text For First Post	1
Text For Last Post	%TOTAL_PAGES%
Text For Next Post	→
Text For Previous Post	←
Text For Next …	…
Text For Previous …	…
Page Navigation Style	Normal
Number Of Pages To Show?	10
Always Show Page Navigation?	No

И таблица стилей:

.wp-pagenavi  {
	font-family: Calibri; /* IE fix */
	float:right;
	margin-right:20px;
	font-size:11px;
}
 
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited {
	padding: 0px 2px; 
	margin: 2px 0px 2px 0px;
	color: #000000;
	background:#ffffff;
	text-decoration:none;
	font-size:11px;
}
.wp-pagenavi a:hover {	
	color: #000000;
	background:#cccccc;
}
 
.wp-pagenavi span.current {
	padding: 0px 2px; 
	margin: 2px 0px 2px 0px;
	color: #000000;
	background:#cccccc;
}
.wp-pagenavi span.extend {
	padding: 0px 2px; 
	margin: 2px 0px 2px 0px;
	color: #000000;
}
.wp-pagenavi span.next-prev {	
	padding: 0px 2px; 
	margin: 2px 0px 2px 0px;
}

Результат: Установив и подредактировав плагин WP-PageNavi мы имеем удобную и грамотную постраничную навигацию на блоге.
———
Строительные технологии смета и проектирование скс. Интересные предложения- лучшие отели в Греции и на Кипре. Блог о том, как нарастить количество ссылок, поднять тИЦ и заработать на всём этом

оптимизация

(Нет голосов)

Просмотров: 1,601