Практически любой блоггер, который ведет свой блог на движке WordPress, знаком с плагином WP-PageNavi, который выводит постраничную навигацию такого вида:

Но не каждый знает (включая меня до недавнего времени), что WordPress имеет встроенную функцию (начиная аж с версии 2.1), которая реализует практически тот же самый функционал . Т.е. необходимость в использовании плагина отпадает.

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

Функция, которую я вам предлагаю, совсем небольшая по размеру:

function wp_corenavi() { global $wp_query; $pages = ""; $max = $wp_query->max_num_pages; if (!$current = get_query_var("paged")) $current = 1; $a["base"] = str_replace(999999999, "%#%", get_pagenum_link(999999999)); $a["total"] = $max; $a["current"] = $current; $total = 1; //1 - выводить текст "Страница N из N", 0 - не выводить $a["mid_size"] = 3; //сколько ссылок показывать слева и справа от текущей $a["end_size"] = 1; //сколько ссылок показывать в начале и в конце $a["prev_text"] = "«"; //текст ссылки "Предыдущая страница" $a["next_text"] = "»"; //текст ссылки "Следующая страница" if ($max > 1) echo "

"; }

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

Для того, чтобы вывести навигацию в нужном месте, вставляйте в шаблон следующий код:

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

Как видите, присутствуют все необходимые CSS-классы, которые можно использовать для оформления любого элемента навигации (например, текущую страницу, ссылки на предыдущую и следующую страницы).

Проверял данную функцию на версиях WordPress, начиная с 2.3.3, а также тестировал варианты с включенным и отключенным ЧПУ. Все работает, как и полагается.

Пользуйтесь.

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

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

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

Согласитесь, так намного лучше. Причем это только первоначальный вариант. А ведь можно настроить вид постраничной навигации так, чтобы она гармонично вписывалась в вашего сайта. Да и как может быть по другому, если мы говорим про блог вебмастера ?

Как установить и настроить плагин для вывода постраничной навигации PageNavi.

Для начала нужно скачать плагин PageNavi с официального сайта себе на компьютер и распаковать архив. В результате вы получите папку PageNavi с несколькими файлами. Далее настраивает соединение с с помощью ftp-менеджера FileZilla и , в директорию /wp-content/plugins/ .

После чего открываем админ-панель WordPress, заходим во вкладку плагины, находим PageNavi и нажимаем «активировать ».

На этом установка и активация плагина PageNavi завершена. Осталось только прописать в файлах index.php, archive.php и search.php код, который отвечает за вывод постраничной навигации. Для этого откройте файлы с помощью текстового редактора и найдите следующие строки:

< ?php next_posts_link(__("« Предыдущие записи", "kubrick")) ?>

< ?php previous_posts_link(__("Следующие записи »", "kubrick")) ?>

Замените их на:

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

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

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

Теперь переходим непосредственно к настройке внешнего вида постраничной навигации. Для этого придется отредактировать файл стилей плагина PageNavi — pagenavi-css.css . Откойте его с помощью текстового редактора Notepad++ и внесите необходимые изменения в следующий код:

.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:active { padding: 2px 4px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #0066cc; color: #0066cc; background-color: #FFFFFF; } .wp-pagenavi a:hover { border: 1px solid #114477; color: #114477; background-color: #FFFFFF; } .wp-pagenavi span.pages { padding: 2px 4px 2px 4px; margin: 2px 2px 2px 2px; color: #000000; border: 1px solid #000000; background-color: #FFFFFF; } .wp-pagenavi span.current { padding: 2px 4px 2px 4px; margin: 2px; font-weight: bold; border: 1px solid #000000; color: #000000; background-color: #FFFFFF; } .wp-pagenavi span.extend { padding: 2px 4px 2px 4px; margin: 2px; border: 1px solid #000000; color: #000000; background-color: #FFFFFF; }

Можете изменить цвет текста, фона, будет ли изменяться цвет текста после наведения курсора и т. д. После того, как внесете все изменения, сохраните файл и оцените результат. Кстати, значительно облегчит работу плагин FireBug для браузера Firefox.

Доброго времени суток, дорогие друзья! Сегодня мы поговорим с вами о том, как сделать на WordPress такую красивую и удобную вещь как постраничную навигацию с помощью плагина WP-PageNavi или простого кода. Не знаю как вам, а мне лично встроенная навигация в движке WordPressсовсем не нравится.

Вот что это за навигация такая? Ладно, если блог был бы еще молодой, и на нем было бы не так много статей, но что если их уже более 200-300? В таком случае такая вот навигация может запросто отпугнуть многих ваших читателей, ведь никому не хочется нажимать на кнопку «предыдущая запись» до потери пульса, чтобы добраться до нужного материала. К тому же данная надпись выглядит столь незаметно, что ее могут просто не увидеть, что в итоге приведет к уменьшению просмотра страниц на посетителя, и времени проведенному на сайте, а это сейчас очень при раскрутке любого сайта, которые нельзя игнорировать. Итак, если вы все же собрались делать постраничную навигацию, то можете воспользоваться любым способом представленным ниже.

Постраничная навигация для WordPress с помощью плагина WP-PageNavi.

Способ 1 . Скачиваем плагин WP-PageNavi здесь и закачиваем его на блог, активируем, переходим в адмике блога в «настройки» «список страниц». Тут нам нужно настроить только один параметр это «количество страниц для показа». Я лично указал 10, чтобы моя навигация была очень видна посетителям. Кстати, если вдруг у вас вся постраничная навигация не влезет в шаблон вашей темы, то есть если она будет выглядеть примерно в таком виде:

то можете просто убавить это число или еще лучше — убрать из настроек плагина надпись «страница» и заменить их стрелочками. Ок, после этого нажимаем сохранить, и наблюдаем, как у нас появилась простая постраничная навигация на блоге. Если этого не произошло, то идем во «внешний вид» « редактор» открываем файл основной шаблон (index.php) и ищем примерно вот такой код: или что-то в этом роде и меняем его на: , сохраняем запись.

Ту же самую операцию проделываем и с файлами archive.php и search.php если хотите, чтобы данная навигация была не только на главной странице, но еще и в отдельных рубриках и при поиске. Гуд, хочу вас предупредить на всякий пожарный, что данный плагин не у всех работает, так что если у вас ничего не получилось, то можете установить себе аналогичный плагин WP-Page Numbers . Если будете его устанавливать, то вам также надо будет вставить специальный код в тех же самых файлах.

Красивые стили-оформления для постраничной навигации плагина WP-PageNavi и WP-Page Numbers.

Вы наверняка уже заметили, что у меня постраничная навигация выглядит намного лучше и привлекательнее чем у вас. Это связано с тем, что у меня стоит дополнительный плагин WP-Page Numbers style , который работает как для WP-PageNavi так и для WP-Page Numbers. Если вдруг вы в кодах, как и я, так сказать не профи, чтобы самим прописывать оформления в файлах плагина, то можете просто поставить себе данный плагин. После того как установите его, у вас в адмике появится новая вкладка PageNavi Style. В ней вы можете выбрать любой на свой вкус стили-оформления постраничной навигации.

Всего в плагине 20 видов стилей со всеми цветами, которые только есть. Также, если вам вдруг ничего из списка не понравится, то вы можете во вкладке Select StyleSheet поменять настройки с «Existing Styles» на «Custom», перед вами появится редактор, где вы сможете указать нужные вам настройки, цвета и т.д. Если что, вот вам их перевод:

Heading Color - цвет заголовка.

Background Color - цвет заднего фона.

Active / Current Background Color - цвет кнопки при наведении на нее курсора мыши.

Font Size - размер шрифта.

Link Mouse Hover / Active Color - цвет ссылки при наведении на нее курсора мыши.

Link Border Color - цвет границы кнопки с номером страницы.

Link Border Mouse Hover/Active Color - цвет границы, при наведении курсора мыши.

Align Navigation - выравнивание на странице: по центру, по левому или правому краю.

Как сделать постраничную навигацию без плагина WP-PageNavi?

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

Способ 2 . Переходим во «внешний вид» « редактор» и открываем файл функции темы (functions.php) и в самом конце перед тегом?>

function wp_corenavi () {

$pages = "";
$max = $wp_query->max_num_pages;


$a["total"] = $max;
$a["current"] = $current;
$total = 1; //1 — выводить текст «Страница N из N», 0 — не выводить
$a["mid_size"] = 3; //сколько ссылок показывать слева и справа от текущей
$a["end_size"] = 1; //сколько ссылок показывать в начале и в конце
$a["prev_text"] = "«"; //текст ссылки «Предыдущая страница»
$a["next_text"] = "»"; //текст ссылки «Следующая страница»
if ($max > 1) echo "

";
}

Кстати, в коде есть некоторые пояснения на русском, так что можете поиграться немного с числами, если вам это нужно. Теперь, как и с плагином WP-PageNavi заходим в файлы: functions.php, index.php и archive.php находим там строчку и после нее или еще несколько строчек, добавляем код

Способ 3 . Данный способ аналогичен второму, но все же код немного отличается. В файле функции темы (functions.php) в самом конце перед тегом?> вставляем вот такой код и сохраняем запись.

function navigation () {
global $wp_query, $wp_rewrite;
$pages = "";
$max = $wp_query->max_num_pages;
if (!$current = get_query_var ("paged")) $current = 1;
$a["base"] = str_replace (999999999, "%#%", get_pagenum_link (999999999));
$a["total"] = $max;
$a["current"] = $current;
$total = 0; //1 — выводить текст «Страница N из N», 0 — не выводить
$a["mid_size"] = 2; //сколько ссылок показывать слева и справа от текущей
$a["end_size"] = 5; //сколько ссылок показывать в начале и в конце
$a["prev_text"] = "« Предыдущая "; //текст ссылки «Предыдущая страница»
$a["next_text"] = "Следующая »"; //текст ссылки «Следующая страница»
if ($max > 1) echo "

";
}

. Теперь заходим в файл таблица стилей (style.css) и где-нибудь вставляем этот код стилей, где коды файла начинаются с точки, и сохраняем запись.

.navigator {margin:10px 7px;
background:#fff;
border:1px solid #aaa;
padding:15px;
overflow:hidden;
font-size:13px;
color:#000;}

.navigator a{background: #fff;
border: 1px solid #DDDDDD;
color: #000000;
font-size: 13px;
padding: 10px;
text-decoration: none;}

background:#f1f8f9;
border: 1px solid #C6D2D4;}

.navigator a:hover{background: #fff;
border: 1px solid #111;
color: #0000cc;
font-size: 13px;
padding: 10px;
text-decoration: none;}

.navigator span.pages {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}

.navigator span.current {background: #fff;
border: 1px solid #111;
color: #0000cc;
font-size: 15px;
padding: 10px;
text-decoration: none;}

.navigator span.extend {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}

.str{background: #fff;
border: 1px solid #DDDDDD;
color: #000000;
font-size: 13px;
padding: 10px;
text-decoration: none;}

Способ 4 . В файле функции темы (functions.php) в самом конце перед тегом?> вставляем вот такой код и сохраняем запись.

function my_pagenavi ($pages = "", $range = 2)
{
$showitems = ($range * 2)+1;

global $paged;
if (empty ($paged)) $paged = 1;

if ($pages == "")
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if (!$pages)
{
$pages = 1;
}
}

if (1 != $pages)
{
echo «

»;
}
}

В файлах: functions.php, index.php и archive.php находим там строчку и после нее или еще несколько строчек добавляем код . Теперь заходи в файл таблица стилей (style.css) и как в предыдущем примере вставляем этот код и сохраняем запись.

.pagination {
clear: both;
font-size: 12px;
margin-top: 10px;
text-align: center;
}

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

.pagination a:hover{
border-color: #000;
}
.pagination .current{
font-weight: bold;
}

Способ 5 . Скачиваем этот файл , берем из него код и вставляем в (functions.php) в самом конце перед тегом?> и сохраняем запись. Если что заранее извиняюсь за неудобства, так как код был слишком большим для публикации. Теперь в файлах: functions.php, index.php и archive.php находим там строчку и после нее или еще несколько строчек добавляем код

Если что, все коды были проверены на работоспособность, так что один из примеров у вас должен работать в любом случае. На этом все, удачи.

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

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

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

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

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

или же так:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

If(function_exists("wp_pagenavi"))

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

Else {?>

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

{ ?>

}

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

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

Настройки плагина 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» можете задать шаг, с которым будут отображаться номера далеких вебстраниц. Допустим, что в первом поле я поставлю тройку, а во втором двойку:

В результате панель PageNavi будет выглядеть так:

Т.е. выводятся номера всего трех далеких вебстраниц с интервалом (шагом) равным двойке (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; }

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

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

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

Правило CSS:

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

задает цвет для текста и фона контейнера (кнопки) с ссылкой, к которой в данный момент подведен курсор мыши (CSS свойства ссылки при наведении — a: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 ().

Но для изменения внешнего вида панели постраничной навигации можно прописать нужные свойства 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, а если это не помогает, то очистите кеш браузера.

Популярный WP PageNavi прост в настройках, легко встраивается в WordPress и имеет аккуратный внешний вид.

Всем привет! Как обычно, я очень рад, что вы посетили страницы . Сегодня поговорим об улучшении постраничной навигации на блоге . Разработчики WordPress изначально почему-то должным образом не озаботились этим вопросом. Не знаю, может, посчитали, что классический блог должен состоять из двух-трех десятков записей.

Вот как выглядит постраничная навигация в блоге WP без всяких плагинов:

А вот так – если перелистнуть главную страницу:

Согласитесь, не очень удобно. Да и красоты мало в этом. В дефолтных настройках Вордпресс указано, что главная страница показывает только 10 последних постов, предыдущие посты можно посмотреть перелистнув «Вперед» или «Раньше». А если записей в блоге две сотни? И хотелось бы посмотреть, о чем автор писал в начале. Это ж сколько листать пришлось бы! Если бы… если бы добрые люди не придумали плагины постраничной навигации.

WP PageNavi – плагин для удобства читателей

В рунете наиболее распространены два плагина постраничной навигации – WP Page Numbers и WP PageNavi . Они очень похожи, поэтому что ставить на свой блог – решайте сами..ru я поставлю PageNavi. Просто сообщение администрации на официальной странице плагина не вселяет большого оптимизма:

Кто так же, как и я не силен в английском – сообщение примерно следующее: «Плагин не обновлялся уже 2 года, поэтому могут возникнуть проблемы его совместимости с новыми версиями WordPress».

Вообще во многих сборках WordPress уже стоит плагин ПейджНави, только он не настроен, поэтому не работает. Посмотрите у себя в в плагинах строчку с названием «Список страниц»

Как устанавливать (не путать с «активировать») плагины, я писал в статье . Единственный момент: если будете скачивать плагин сначала на свой компьютер (мало ли, может, решите предварительно его на вирусы проверить или еще что), перед установкой на WP не распаковывайте плагин, а оставьте в папке архива.zip. – то многие распакованные плагины через админку не устанавливаются.

Можно, конечно, пойти другим путем. Через файловый менеджер забросить на сервер в соответствующую папку вашего блога распаковаванный архив плагина (папку).

Кстати, FileZilla – прекрасный файловый менеджер, сам пользуюсь и обязательно расскажу о ней в ближайших статьях. Подписывайтесь на обновления моего блога – будете в курсе всех полезностей.

Настройка плагина WP PageNavi: изменение кода

Итак, вы установили плагин (если его не было в начальном пакете) на свой wordpress блог. Теперь его нужно активировать. Делается это одним нажатием кнопочки «Активировать» (путь такой: Админпанель – Плагины – Установленные – «Список страниц» – «Активировать»).

В меню админки «Параметры» появится новая строчка «Список Страниц»

Следующий этап может вызвать затруднения у новичков – будем чуть-чуть менять код в нескольких файлах темы вашего WP-блога. Для этого нам понадобится простой блокнот, а еще лучше ++, потому что в нем очень легко работать с файлами и есть возможность откатить все назад. Еще нужен будет файловый менеджер FileZilla (я говорил о ней чуть выше) – если ваш блог уже на хостинге, а если нет – то хватит Notepad++.

Все загруженные на ваш блог темы находятся в корневом каталоге в папке WP-content/themes/ваша тема. В вашей теме находите файлы index.php и archive.php. У кого-то в теме может быть еще поисковый файл search.php.

Далее перетаскиваем (копируем) эти файлы к себе на компьютер (это если вы уже на хостинге) или просто открываем файлы через блокнот Notepad++. Но в обоих случаях не забудьте сделать резервные копии – так всегда делается для подстраховки.

Итак, открываем редактором файл index.php и ищем там строчки кода, отвечающие за навигацию по страницам.

В каждой теме коды, конечно же, отличаются деталями. Может быть такой:

’)); ?>;

Или такой

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

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

Если не можете найти нужный участок кода или сомневаетесь, что это он, наберите в открытом в Notepad++ файле index.php в поиске (значок бинокля в верхней строке) nav и это сочетание букв высветится в документе.

После того, как вы нашли нужный код, меняем его (не дописываем, а заменяем весь блок) на код плагина WP PageNavi:

Сохраняете файл и забрасываете его обратно в папку с темой. Затем обновите главную страницу своего блога и вуаля:

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

с атрибутом align. Вот так:

Получилось так:

Те же манипуляции вы проделываете с кодом файлов archive.php search.php.

Настройка плагина WP PageNavi: отображение списка страниц

Что теперь? Плагин загрузили, активировали, интегрировали в файлы темы – что-то еще? Да. Теперь нужно настроить внешний вид постраничной навигации. Для этого переходим в настройки плагина WP PageNavi в админке wordpress. Находится нужная нам страница по адресу: Админка/Параметры/Список страниц. Здесь можно настроить структуру отображения страниц. А можно все оставить как есть – дело ваше. Коротко расскажу, что здесь что.

Настройки разделены на две части: «Шаблоны списка страниц» и «Настройки списка страниц».

WP Page Navi – шаблоны списка страниц

Вот первая часть настроек

Элемент №1 (первая строка) – это вид вот этой части списка:

Здесь можно сделать окошко пустым, если считаете, запись «5 страница из 14» портит внешний вид. Можно убрать слово «страница». Я, наверное, вообще уберу эту запись. Мне кажется, она лишняя.

Элемент №2 – «Текущая страница». Этим элементом как-то (рамочкой, цветом) выделяется страница, на которой открыт блог. Если это поле оставить пустым, внешний вид текущей страницы в ряду других ничем не будет выделяться.

Элемент №3 – «Страница». Если оставить это поле пустым, в навигации будет виден только номер текущей страницы – список остальных страниц будет скрыт.

Элемент №4 – «Первая страница». Здесь можно поставить «первая», «в начало» или что-то в этом роде. Когда на вашем блоге будет много страниц (100-200) и вы будете просматривать какую-нибудь 130-ю страницу и захотите вернуться на первую, слева от списка страниц и будет кнопочка со словом «первая», «в начало».

Элемент №5 ­– «Последняя страница». Все то же самое, только для последней страницы.

Элемент №6 – «Предыдущая страница» и «Следующая страница». Стрелочки, перехода на страницу вперед или назад. Я другие знаки пробовал вставить – либо не то, либо они просто не работают.

Элемент №7 – «Предыдущие…» и «Следующие…». Как я понял, это не кнопки, а просто информационный элемент. Сейчас объясню.

Как видно из рисунка, в настройках я поставил в поле «Количество страниц для показа» (об этих настройках я расскажу чуть ниже) значение «3». И у меня отображается ряд только из трех страниц. А белый квадратик (как раз он и есть элемент №7) показывает, что и дальше (или ближе) есть еще страницы, которые сейчас не отображены. Вроде понятно.

Настройки списка страниц

Переходим ко второй части настроек плагина WP Page Navi.

Элемент №8 – «Использовать стиль pagenavi-css.css». Если вы не поставите (или уберете, если она стояла) здесь галочку, то, во-первых, отображение страниц станет таким:

А во-вторых, вы не сможете изменить стиль отображения списка путем редактирования файла стилей плагина. Так что лучше с галочкой.

Элемент №09 – «Стиль списка страниц». Обычный или выпадающий. Мне выпадающий категорически не понравился, поэтому оставил обычный.

Элемент №10 – «Всегда показывать список страниц». Довольно бессмысленная функция.

Элемент №11 – «Количество страниц для показа». Рад страниц, который будет отображаться. Поставите 3 – будет «1,2,3… последующие», поставите 10 – будет «предыдущие… 4,5,6,7,8,9,10,11,12,13…последующие». Понятно, думаю.

Элемент №12 – «Диапазон страниц для показа». Какую вы цифру поставите в это окошко, столько страниц, не вошедших в список непрерывных страниц (элемент №13) и будет отображаться. Например, поставите 5, список будет выглядеть так:

«первая … 4,5,6,7,8 … 21,22,23,24,25 … последняя»

Элемент №13 –« Коэффициент для диапазонов страниц». Это шаг для станиц из элемента №14. Если в окошках №№13, 14 и 15 поставить, например, 5, все будет смотреться так:

«первая … 4,5,6,7,8 … 20,25,30,35,40 … последняя»

Все, наконец-то мы разобрались с настройками плагина постраничной навигации по имени WP PageNavi .

Все да не все. Можно еще кое-что сделать полезное и красивое.

Редактирование pagenavi-css.css

Здесь не буду вдаваться в подробности. Для начинающих самостоятельно копаться здесь – темный и опасный лес.

Но небольшие изменения все же можно попытаться внести. Например, такие:

Я сделал фон для цифириков, добавив в контейнер wp-pagenavi a, .wp-pagenavi span цвет фона background-color: #bbbbbb;

Я увеличил размер цифры текущей страницы, добавив в контейнер wp-pagenavi span.current размер font-size: 150%;

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

На этом заканчиваю, устал уже писать 🙂

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