WP-PageNavi — постраничная навигация для блога на WordPress — установка, настройка и изменение внешнего вида пагинации

Приветствую вас, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня речь пойдет об очень популярном плагине WP-PageNavi, который позволяет вывести постраничную навигацию вашего блога под управлением WordPress на новый качественный уровень.

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

Зачем использовать плагин WP-PageNavi

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

А так после установки плагина:

или же так:

это зависит от тех опций, которые вы выберите в окне его настроек.

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

Плагин предварительно нужно будет скачать отсюда. Найдите справа кнопку «Download» и сохраните архив wp-pagenavi.zip у себя на компьютере. Затем распакуйте его и загрузите получившуюся в результате разархивирования папку на сервер хостинга в директорию с плагинами wp-content/plugins/.

Для этого вам понадобится получить доступ к файлам и папкам вашего WP блога по протоколу FTP (тут читайте про то, как этому делу может помочь FileZilla).

При разархивировании бывает, что появляется лишняя внешняя папка, поэтому проверьте это и при необходимости избавьтесь от нее. Надеюсь понятно объяснил? Иначе в противном случае WordPress не увидит установленный вами плагин. Ладно продолжим.

После того, как вы скопируете файлы плагина на сервер хостинга в папку wp-content/plugins/, вам нужно будет зайти в админку Вордпресса (http://vash_sait.ru/wp-admin/) и выбрать из левого меню админки пункт «Плагины». В верху открывшегося окна «Управление» вам нужно нажать на ссылку «Неактивно» (или же, если нет перевода, то «Inactive»).

Откроется окно со всеми установленными, но еще не активированными расширениями. Найдите среди них «WP-PageNavi» и нажмите на ссылку «Активировать», расположенную под его названием.

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

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

Обычно постраничная навигация используется на главной странице блога (файл INDEX.PHP из папки с вашей темой), на вебстраницах архивных материалов (ARCHIVE.PHP) и в результатах поиска (файл SEARCH.PHP). Собственно, в эти файлы (шаблоны) нам и нужно будет вставить код вызова нужной нам функции.

Т.е. нужно будет опять подключиться по FTP и зайти в папку с текущей темой:

wp-content/themes/Название папки с вашей темой оформления

Найдите в ней INDEX.PHP и откройте его на редактирование в удобном для вас редакторе (я использую для этой цели продвинутый Нотепад++ — у меня есть статья по работе с ним). Теперь ваша задача состоит в том, чтобы найти в INDEX.PHP участок кода, отвечающий за переход на предыдущую или последующую страницу. Непростая задачка, не правда ли? Хотя, конечно же, для кого как.

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

 <!-- Prev/Next page navigation -->

и

<!--page navi end --> 

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

<div class="navigation">
	<div class="alignleft"><?php next_posts_link(__('&laquo; Older Entries', 'kubrick')) ?></div>
	<div class="alignright"><?php previous_posts_link(__('Newer Entries &raquo;', 'kubrick')) ?></div>
</div>

или так

 <div class="page-nav">
 <div class="nav-previous">
 <?php previous_posts_link('Предыдущая') ?>
 </div>
 <div class="nav-next">
 <?php next_posts_link('Следующая') ?>
 </div>
 </div>

После того, как идентифицируете нужный фрагмент, вам нужно будет заменить его строкой вызова функции wp_pagenavi:

<?php wp_pagenavi(); ?>

Теперь необходимо сохранить произведенные в INDEX.PHP изменения, зайти на главную страницу своего блога и убедиться, что все работает как надо. Т.е. вместо стандартной пагинации, используемой в WordPress, у вас используется красотища от WP-PageNavi.

Кстати, стандартную пагинацию можно и не удалять из кода INDEX.PHP, для того, чтобы при удалении этого плагина у вас не возникло потом проблем с ней. Для этого вы должны будете прописать в INDEX.PHP вместо стандартного кода навигации условие, определяющее, когда отображать стандартную, а когда панель WP-PageNavi.

Условие будет зависеть от того, установлен плагин WP-PageNavi на вашем блоге или нет. Выглядеть оно может примерно так:

 <div class="pagenavi">
 <?php if(function_exists('wp_pagenavi')) { ?>
 <div class="wp-pagenavi">
 <?php wp_pagenavi(); ?>
 </div>
 <?php }
 else {?>
 <div class="page-nav">
 <div class="nav-previous">
 <?php previous_posts_link('Предыдущая') ?>
 </div>
 <div class="nav-next">
 <?php next_posts_link('Следующая') ?>
 </div>
 </div>
 <? } ?>
 </div>

В этом коде условие:

 if(function_exists('wp_pagenavi'))

проверяет установлен ли плагин, и если он не установлен, то будет работать стандартный скрипт:

 else {?>
 <div class="page-nav">
 <div class="nav-previous">
 <?php previous_posts_link('Предыдущая') ?>
 </div>
 <div class="nav-next">
 <?php next_posts_link('Следующая') ?>
 </div>
 </div>
 <? } 

А если WP-PageNavi установлен, то навигационная панель будет формироваться его силами:

{ ?>
 <div class="wp-pagenavi">
 <?php wp_pagenavi(); ?>
 </div>
 }

Хотя, конечно же, можно не заморачиваться и просто заменить одно на другое, но это дело ваше.

Так, теперь все тоже самое вы должны будете проделать для файлов ARCHIVE.PHP и SEARCH.PHP из папки с вашей темой (wp-content/themes/Название папки с вашей темой оформления).

Будем считать, что с отображением панели WP-PageNavi на нужных вебстраницах мы разобрались. Теперь пора переходить к настройкам самого плагина, которые позволят нам изменять структуру этой панели в Вордпресс.

Настройки плагина WP-PageNavi для блога на WordPress

Для того, чтобы в них попасть, вам нужно будет в админке выбрать из левого меню, в области «Параметры», пункт «Список страниц». Откроется окно с активной вкладкой «Шаблоны списка страниц»:

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

Можно добавить слово «Страница» в это поле, если вам так больше нравится:

Страница %CURRENT_PAGE% из %TOTAL_PAGES%

А при желании можно вообще его очистить. В графах «Элемент 'Текущая страница'» и «Элемент 'Страница'» оставляйте все как есть. Здесь задается отображение надписи для текущей и всех остальных вебстраниц в виде порядкового номера. Получится примерно так:

В полях «Text For First Page» и «Text For Last Page» вы можете задать текст для кнопок перехода к первой и последней:

Вместо текста в графе «Text For First Page» вы можете написать единицу, а поле «Text For Last Page» — %TOTAL_PAGES% (вместо этой надписи будет отображаться число всех вебстраниц):

В полях «Text For Next Post» и «Text For Previous Post» прописываются знаки стрелочек для отображения на кнопках перехода на следующую и предыдущую:

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

Переходим к дальнейшим настройкам под названием «Настройки списка»:

Галочка в «Use pagenavi-css.css» позволяет отключить или подключить файл каскадных таблиц стилей (CSS), идущий в комплекте с плагином. В поле «Стиль списка» можете выбрать из выпадающего списка один из двух CSS стилей.

«Обычный» вы видели на предыдущих скриншотах, а при выборе стиля «Drop-down List» вы получите, примерно, такой вид панели WP-PageNavi в WordPress:

Если вы поставите галочку в поле «Always Show Page Navigation», то даже для вебстраниц, у которых пока не требуется вводить нумерацию (допустим, что на главной еще не достаточно постов, чтобы осуществилось разбиение), все равно будет отображаться навигация примерно в таком виде:

В «Number Of Pages To Show» вы можете задать, сколько страничек будет отображаться в виде непрерывного (последовательного) ряда чисел. Переход на остальные будет возможен с помощью кнопок следующей и предыдущей, а так же кнопок перехода на первую и последнюю. Я поставил там пятерку, в результате чего получил:

В «Number Of Larger Page Numbers To Show» можете задать, сколько далеких номеров вебстраниц (большего, чем текущие отображаемые номера численного значения) будет показано после кнопки перехода на следующую.

А в поле «Show Larger Page Numbers In Multiples Of» можете задать шаг, с которым будут отображаться номера далеких вебстраниц. Допустим, что в первом поле я поставлю тройку, а во втором двойку:

Т.е. выводятся номера всего трех далеких вебстраниц с интервалом (шагом) равным двойке (6, 8, 10). Для того, чтобы не использовать показ далеких номеров, вам достаточно будет поставить ноль в графе «Number Of Larger Page Numbers To Show».

Для применения и отображения заданных вами изменений, в настройках плагина нужно будет нажать на кнопку «Сохранить изменения», расположенную внизу.

Изменение внешнего вида панели постраничной навигации

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

Правда для того, чтобы она приняла вид, показанный на приведенных в этой статье скриншотах, я добавил дополнительные свойства не в файл CSS плагина (/wp-content/plugins/wp-pagenavi/pagenavi-css.css), а в файл используемой мною темы оформления (wp-content/themes/название папки с темой оформления/style.css).

В этом файле свойства CSS, задающие внешний вид панели WP-PageNavi, выглядят так:

#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active {
	padding: 3px 8px 3px 8px;
	margin: 2px;
	text-decoration: none;
	color: #fff;
	border: 0px
	line-height:24px;
	background-color: #2b99ff;
}
#content .wp-pagenavi a:hover {
	color:#fff;
	background-color: #154b7d;
}
#content .wp-pagenavi span.pages {
	padding: 3px 8px 3px 8px;
	margin: 2px 2px 2px 2px;
}
#content .wp-pagenavi span.current {
	padding: 3px 8px 3px 8px;
	margin: 2px;
	line-height:25px;
	font-weight: bold;
	color: #add352;
	background:#26343c;
}

Обращаю ваше внимание, что названия классов и ID (тут читайте про эти селекторы подробнее), которые используются здесь, относятся именно к моему шаблону. Поясню назначение некоторых правил и свойств CSS.

Правило:

#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active {
	padding: 3px 8px 3px 8px;
	margin: 2px;
	text-decoration: none;
	color: #fff;
	border: 0px
	line-height:24px;
	background-color: #2b99ff;
} 

задает внешние и внутренние отступы (margin и padding — тут про них смотрите) для кнопок панели (фактически для ссылок с этих кнопок, т.к. эти свойства будут применены именно к ссылкам задаваемым тегом A и размещенным в контейнере wp-pagenav).

Так же в этом правиле задается цвет текста ссылок (белый цвет задается в свойстве color: #fff; — здесь читайте про Color и background в CSS).

Рамка вокруг ссылок будет отсутствовать (свойство border: 0px), а фоновый цвет для контейнеров с этими ссылками будет определяться свойством background-color: #2b99ff;. Именно этот цвет вы можете видеть на скриншотах расположенных выше для неактивных кнопок панели постраничной навигации.

Правило CSS:

#content .wp-pagenavi a:hover {
	color:#fff;
	background-color: #154b7d;
}

задает цвет для текста и фона контейнера (кнопки) с ссылкой, к которой в данный момент подведен курсор мыши (CSS свойства ссылки при наведении — a:hover — здесь описаны hover и другие селекторы псевдоклассов).

Цвет текста ссылки по прежнему остается белым, а вот цвет фона (фактически цвет кнопки) меняется на более темный (background-color: #154b7d;). Т.е. посетитель, подводя курсор мыши к кнопкам панели навигации, будет видеть изменение цвета этой кнопки, что создает ощущение интерактивности.

Правило CSS:

#content .wp-pagenavi span.current {
	padding: 3px 8px 3px 8px;
	margin: 2px;
	line-height:25px;
	font-weight: bold;
	color: #add352;
	background:#26343c;
}

Задает внешний вид кнопки с номером, открытой в данный момент странички блога (в коде у этой ссылки будет прописан тег SPAN с классом CURRENT). Такая кнопка будет выглядеть так же, как кнопка с цифрой один, на приведенном ниже рисунке:

В этом CSS правиле задается изменение цвета фона этой активной кнопки (свойство background:#26343c), цвета текста ссылки на этой кнопке (свойство color: #add352), а кроме этого шрифт текста ссылки будет жирным в силу этого CSS свойства — font-weight: bold (тут описаны все возможные комбинации Font (Weight, Family, Size, Style) и Line Height).

Но для изменения внешнего вида панели постраничной навигации можно прописать нужные свойства CSS и в файл стилевого оформления самого плагина. Этот файл таблиц каскадных стилей вы сможете открыть на редактирование из папки:

/wp-content/plugins/wp-pagenavi/pagenavi-css.css

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

Вам нужно будет скачать этот архив, распаковать его и скопировать папку IMAGES в папку с плагином WP-PageNavi, которую вы сможете найти по следующему пути:

/wp-content/plugins/wp-pagenavi

В папке IMAGES лежит графический файл fon.gif, который будет формировать фон для панели PageNavi. Теперь вам нужно будет открыть на редактирование файл /wp-content/plugins/wp-pagenavi/pagenavi-css.css и заменить имеющийся там код следующими правилами:

.wp-pagenavi {
	width: 100%;
	overflow:hidden;
	padding: 4px 0px 4px 0px;
	margin-left: 0px;
	border: 1px solid #00598F;
	background: url('images/fon.gif') center left repeat-x;
}
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited {
	padding: 4px 5px 4px 5px;
	margin: 2px 0px 2px 0px;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}

.wp-pagenavi a.last {
	padding: 4px 5px 4px 5px;
}

.wp-pagenavi a.first {
	padding: 4px 5px 4px 5px;
}

.wp-pagenavi a:hover {
	background-color: #00598F;
	color: #FFFFFF;
	font-weight: bold;
}

.wp-pagenavi span.pages {
	padding: 4px 5px 4px 5px;
	margin: 2px 0px 2px 0px;
	color: #FFFFFF;
	background: url('images/fon.gif') center left repeat-x;
	background-color: #4f4f4f;
	font-weight: bold;
}
.wp-pagenavi span.current {
	padding: 4px 7px 4px 7px;
	margin: 2px 0px 2px 0px;
	font-weight: bold;
	border-top: 1px solid #00598F;
	border-bottom: 1px solid #00598F;
	color: #FFFFFF;
	background-color: #00598F;
	font-weight: bold;
}
.wp-pagenavi span.extend {
	padding: 4px 0px 4px 0px;
	margin: 2px 0px 2px 0px;
	margin-right: 0px;
	margin-left: 0px;
	border-top: 1px solid #00598F;
	border-bottom: 1px solid #00598F;
	color: #FFFFFF;
	background: url('images/fon.gif') center left repeat-x;
	font-weight: bold;
}
.wp-pagenavi span.next-prev {
	font-family: Arial; /* IE fix */
}

Сохраните произведенные в файле pagenavi-css.css изменения и зайдите на свой блог, чтобы проверить, изменился ли внешний вид навигации. Если не изменился, то попробуйте обновить содержимое окна в браузере, удерживая кнопку SHIFT, а если это не помогает, то очистите кеш браузера.