. Редактировать внешний вид кнопок (основной и фоновый цвет, рамки, шрифты и т.д.) можно через CSS-файл данного плагина pagenavi-css.css, их поддержку можно включить в пункте “Настройки списка страниц ”. Однако это не очень удобно. Поэтому для WP Page Navi был создан так называемый плагин-дополнение под названием WP PageNavi Style . После его установки в меню появятся все нужные опции для редактирования внешнего вида кнопок.

Все вопросы можно задавать в комментариях, если кому-то не ясно по тому или другому пункту. Мы всегда ответим на все вопросы.

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

Flector 5

Обновлено:

Это один из самых известных и популярных плагинов для WordPress . Он позволяет легко и просто вывести на сайте постраничную навигацию. Необходимость постраничной навигации не вызывает сомнений – во-первых, пользователям с ней намного удобнее, чем с непонятными ссылками "Раньше" и "Позже", а во-вторых, постраничная навигация помогает в плане SEO – поисковики куда лучше индексируют страницы, если ссылки на них есть на главной странице сайта. Есть несколько подобных плагинов, но считается лучшим из них. Собственно, постраничная навигация в WordPress и плагин PageNavi это сейчас практически неразделимые понятия.

1 Распаковываем архив.

2 Копируем папку в /wp-content/plugins/ .

3 Заходим в админку блога на вкладку "Плагины " и активируем плагин.

Плагин полностью переведен на русский язык. Причем переводчик перестарался, переведя даже название плагина (это противоречит здравому смыслу – кто переводит имена собственные?). Поэтому при активации плагина ищите среди загруженных плагинов не , а Список страниц . С настройками та же история – их вы найдете в "Настройках\Список страниц ".

Первая часть настроек плагина касается самой панельки и ее значений:

Это значения по умолчанию. Они дают примерно такой вид панели:

Если не заполнить какое-либо поле, то в панели оно выведено не будет. Поэтому можно сократить панель до более компактного варианта вроде:

Вторая часть настроек касается самого плагина:

Здесь я должен сделать несколько пояснений. Опция "Использовать стиль pagenavi-css.css " заставляет плагин применять для панели css-стили из файла pagenavi-css.css , который лежит в папке плагина. Если в вашем шаблоне уже прописаны стили для плагина (а это бывает часто, так как очень популярен), то вам необходимо снять галку с этой опции. Ведь, как правило, прописанные в теме стили куда лучше стилей плагина по умолчанию.

Диапазоны советую отключить (по умолчанию они включены), поставив везде значение "0". Потому что лично мне такая навигация не нравится:

Но решать, конечно, вам.

С настройками закончили – как вывести панель плагина в шаблоне? Вам необходимо найти в файлах шаблона код, похожий на:

И заменить его на код:

Именно на этом этапе у многих пользователей возникают проблемы. Потому что в каждом шаблоне этот код может быть разным. Даже файлы, в которых надо искать этот код от шаблона к шаблону очень сильно отличаются. Поэтому, советую скачать редактор Notepad++ (он вам нужен в любом случае, так как файлы необходимо сохранять строго в кодировке UTF8 без БОМ ) и выполнить в нем поиск по файлах функций и .

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

Теперь поговорим о стилях оформления панели. Не нравится вид панели по умолчанию? Хотите такую панельку, как на скриншоте в начале этой статьи? Тогда откройте этот файл и скопируйте его содержимое в файл pagenavi-css.css , который лежит в папке вашего плагина.

Есть еще более простой способ стилизовать вашу панельку. Для это вам необходимо установить плагин , в котором вы можете выбрать встроенные стили вроде таких:

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

Доброго времени суток, дорогие друзья! Сегодня мы поговорим с вами о том, как сделать на 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 находим там строчку и после нее или еще несколько строчек добавляем код

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