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

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

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 , который лежит в папке вашего плагина.

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

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

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

Привет всем!

Продолжаю писать статьи, посвященные навигации сайта на движке WordPress.

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

Материал вышел очень объемный и, пожалуй, самый исчерпывающий в сети.

Постраничная навигация (пагинация) - это разбиение информации на страницы. Если взять массу сайтов на Wordpres, то данный феномен ярко выражен в видео списка номеров страниц внизу каждой страницы с анонсами. На моем блоге данная функция имеет следующий вид.

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

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

Как правило, сейчас в современных шаблонах Wodpress постраничная навигация уже встроена. Но имеется вариант, когда ее и нет. Тогда придется реализовать. Вместо нее может быть разбиение анонсов на страницы в виде ссылок на предыдущие и следующие записи. Это ярко выражено в стандартных шаблонах.

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

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

Делаем без плагина

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

Вот первая часть кода. Ее необходимо разместить в файле functions.php шаблона оформления.

function wp_corenavi() { 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"] = 1; //сколько ссылок показывать слева и справа от текущей $a["end_size"] = 1; //сколько ссылок показывать в начале и в конце $a["prev_text"] = ""; //текст ссылки "Предыдущая страница" $a["next_text"] = ""; //текст ссылки "Следующая страница" if ($max > 1) echo "

"; }

function wp_corenavi () { 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" ] = 1 ; //сколько ссылок показывать слева и справа от текущей $a [ "end_size" ] = 1 ; //сколько ссылок показывать в начале и в конце $a [ "prev_text" ] = "" ; //текст ссылки "Предыдущая страница" $a [ "next_text" ] = "" ; //текст ссылки "Следующая страница" if ($max > 1 ) echo " " ;

Я разместил код в самое начало файла после открывающего тега

В данном коде мы можем отрегулировать некоторые параметры:

• Строка 10 - если изменить значение 0 на 1, то рядом с номерами страниц будет выводиться надпись вида, например "Страница 3 из 45". Можете сделать такой вариант, но я считаю, что в данном случае он не нужен, так как в номерах страниц и так понятно, сколько страниц на сайте. А активная страница выделяется другим цветом;
• Строки 11 и 12 - слева и справа номера активной страниц должно отображаться определенное количество предыдущих или следующих номеров соответственно. Тут мы выставляем их количество. В данном коде стоит значение 1. Можно поставить 2 или 3. Тут нужно будет немного поэкспериментировать, так как чем больше количество номеров, тем шире будет навигация. Все зависит от ширины шаблона.

wp_corenavi () ;

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

• Главная страница - index.php;
• Страницы рубрик и архивов - category.php и archive.php;
• Страница поиска - search.php.

Кстати, в некоторых шаблонах вывод страниц рубрик и архивов может осуществляться одним файлом. У меня за это отвечает файл archive.php.

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

Как правило, стандартная навигация в виде предыдущих и след. ссылок выводится с помощью подобного кода.

< div class = "nav-previous" > ← Older posts" , "twentyten" ) ) ; ?> < / div > < div class = "nav-next" > "Newer posts →" , "twentyten" ) ) ; ?> < / div >

У каждого данный код может быть разным, но его основная начинка будет одинаковой. Вам нужно будет найти код, который будет содержать код с названиями next_posts_link и previous_posts_link.

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

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

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

/* NAVIGATION */.navigation { float: left; width: auto; margin-left: 216px; margin-top: -2px; font-size: 16px; } .navigation > a { float: left; width: 32px; font-weight: 700; text-align: center; color: #637b93; text-decoration: none; margin-left: 1px; padding-top: 7px; } .navigation > .current { float: left; font-weight: 700; width: 29px; text-align: center; color: #c4c8cc; margin-left: 5px; padding-top: 7px; } .navigation > .prev { float: left; width: 32px; height: 34px; background: url("images/bow_left.png") no-repeat; margin-left: 0; } .navigation > .next { float: left; width: 34px; height: 34px; background: url("images/bow_right.png") no-repeat; margin-left: 14px; } .navigation > .dots { float: left; font-size: 14px; font-weight: 700; width: 32px; text-align: center; color: #c4c8cc; padding-top: 7px; }

/* NAVIGATION */ Navigation { float : left ; width : auto ; margin-left : 216px ; margin-top : -2px ; font-size : 16px ; Navigation > a { float : left ; width : 32px ; font-weight : 700 ; text-align : center ; color : #637b93 ; text-decoration : none ; margin-left : 1px ; padding-top : 7px ; Navigation > .current { float : left ; font-weight : 700 ; width : 29px ; text-align : center ; color : #c4c8cc ; margin-left : 5px ; padding-top : 7px ; Navigation > .prev { float : left ; width : 32px ; height : 34px ; background : url ("images/bow_left.png" ) no-repeat ; margin-left : 0 ; Navigation > .next { float : left ; width : 34px ; height : 34px ; background : url ("images/bow_right.png" ) no-repeat ; margin-left : 14px ; Navigation > .dots { float : left ; font-size : 14px ; font-weight : 700 ; width : 32px ; text-align : center ; color : #c4c8cc ; padding-top : 7px ;

Также необходимо загрузить картинки стрелок перемещения вперед и назад на хостинг в папку images шаблона оформления. . Для загрузки можете пользоваться стандартным файловым менеджером хостинг провайдера. Я же .

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

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

Плагин WP-PageNavi

Для начала скачиваете плагин с официальной страницы и устанавливаете его на сайт.

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

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

С одной стороны оформление не ахти, а с другой очень даже ничего, так как не мозолит глаза. Пользователи любят простоту! Поэтому, можно все так и оставить. Если же хотите чего-то более красочного, то сейчас мы с вами рассмотрим некоторые варианты. А пока мы обсудим такую вещь, как настройка wp pagenavi. Настройки имеются и о них стоит поговорить.

Касаемо первого пункта настроек "Шаблоны списка страниц", то в нем ничего менять не нужно. Нас все устраивает. Мы двигаемся к пункту "Настройки списка страниц".

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

• Использовать стиль - если поставим значение "No", то стили плагина уберутся и номера страниц не будут оформлены;

• Стиль списка страниц - кроме обычного списка номеров страниц мы можем выбрать вариант выпадающего списка;

• Всегда показывать список страниц- настройку не включаем. Нужно, чтобы список отображался только там, где это необходимо;
• Количество страниц для показа - отвечает за количество выводимых номеров страницы в начале списка. По умолчанию, значение стоит 5 и на скриншотах выше вы можете посмотреть, что именно 5 страниц выводятся;
• Диапазон страниц для показа - если на вашем сайте очень много страниц, то данная функция будет крайне полезна. Она будет выводить номера страниц после основного списка со значениями 10, 20, 30, 40 и так далее. Интервал между этими значениями определяется следующим параметром;
• Коэффициент для диапазонов страниц - если выстави значения 5, то диапазон страниц будет иметь вид - 10, 15, 20, 25 и т.д. Если 10, то 10, 20, 30, 40 и так далее. Значения 10 вполне достаточно.

Это все настройки, которые вам нужно выставить в соответствии со своими нуждами. Тут уже каждый по себя отрегулирует.

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

После его установки в админ-панели WordPress появляется новый пункт.

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

Если же хотим настроим стили индивидуально, то в первом пункте настроек "Select Stylesheet" выбираем вариант "Custom" и настраиваем параметры всех элементов (границ и их цветов, цветов и размеров шрифтов, цвета ссылок при наведении курсора мышки и так далее).

Переведу вам все параметры.

• Heading Color - цвет текста "Страница 3 из 45";
• Background Color - цвет фона;
• Active/Current Background color - цвет фона активного номера страницы;
• Font Size - размер шрифта;
• Link Color - цвет ссылки;
• Link Mouse Hover/ Active Hover - цвет ссылки при наведении мышки на номер и при активности номера;
• Link Border Color - цвет границы;
• Link Border Mouse Hover/Active Color - цвет границы при наведении курсора мышки и пи активности номера;
• Align Navigation - расположение навигации (слева, справа, центр).

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

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

Второй вариант осуществляется с помощью редактирования файла стилей, который расположен в папке с плагином Wp-pagenavi на хостинге - pagenavi-css.css.

Данный файл подключается, когда в настройках плагина активна настройка "Использовать стиль pagenavi-css.css". Поэтому, если мы его отредактируем, то после обновления плагина, все стили заменятся на стандартные. Чтобы каждый раз на заменять данный файл и не прописывать стили заново я рекомендую сделать следующую вещь:

1. Отредактировать стили в этом файле на свои, придав нужное оформление постраничной навигации;
2. Отключить настройку "Использовать стиль pagenavi-css.css";
3. Разместить эти стили в основном файле стилей шаблона оформления style.css.

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

Итак, друзья. Материал получится очень хорошим, как на меня. Что вы думаете на этот счет? Надеюсь, что вы все сделали. Если что-то не получается, то в комментариях постараюсь помочь. Пишите, не бойтесь! Я также когда-то очень мучился и мне удалось разобраться.

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

С уважением, Константин Хмелев!

Здравствуйте, читатели блога сайт! Стандартная постраничная навигация WordPress сводится лишь к возможности переходить на следующую или возвращаться к предыдущей странице с анонсами статей. Никакой нумерации страниц визуально не видно — это неудобно. Исправить ситуацию можно с помощью плагина WP-PageNavi или его аналога WP Page Numbers. Третий плагин, который я сегодня рассмотрю, Number My Post Pages, позволяет представить информацию одной статьи постранично.

Установка и настройка WP-PageNavi и стилей к нему

2. Распакуйте и загрузите на сервер папку с файлами плагина в директорию wp-content/plugins, используя бесплатный .

3. Активируйте его, в списке плагинов он идет под именем «список страниц».

4. Теперь необходимо заменить стандартный код для постраничной навигации в шаблонах index.php, archive.php и search.php на новый:

От темы к теме вид кода может несколько меняться, поэтому ищите конструкцию, содержащую строчки next_posts_link и previous_posts_link.

Как только замените код, плагин WP-PageNavi начнет работать. Все настройки плагина на русском языке и доступно расписаны, поэтому разобраться с ними не составит труда. Располагаются они в разделе «Плагины» — «список страниц».

Чтобы настроить внешний вид, необходимо отредактировать файл со стилями плагина WP-PageNavi — wp-pagenavi/pagenavi-css.css. Для этого перейдите в раздел «Плагины» — «Редактор», выберете в качестве плагина для изменения WP-PageNavi и найдите списке файл с разрешением.css.

Конечно, чтобы настроить стили постраничной навигации вам необходимо знать хотя бы основы CSS. Чтобы не терять время на его изучение (хотя рано или поздно вам придется изучить как минимум html и css) можно воспользоваться плагином WP PageNavi Style , который предоставляет уже готовые стили на любой вкус.

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

Рассмотрим основные настройки, их немного.

Опция Select StyleSheet позволяет переключится между существующими стилями (existing styles ) и возможностью сформировать их самому (custom ).

Выбор стилей очень большой, даже глаза разбегаются. Особенно красиво выглядят стили на CSS3. Думаю, каждый найдет что-то интересное для себя. После выбора визуального оформления постраничной навигации, задайте ее расположение — Align Navigation : left — слева, rigth — справа и center — по центру.

Теперь рассмотрим, какие опции предоставляет нам раздел Custom.

• Heading Color — цвет заголовка, не обязательно знать html код цвета, достаточно кликнуть на поле и визуально его выбрать;
• Background Color — цвет заднего фона;
• Active / Current Background Color — задней фон кнопки текущей страницы (активной);
• Font Size — размер шрифта;
• Link Color — цвет ссылки;
• Link Mouse Hover / Active Color — цвет ссылки при наведении на нее курсора мыши;
• Link Border Color — цвет границы кнопки с номером страницы;
• Link Border Mouse Hover/Active Color — цвет границы, при наведении на кнопку курсора мыши;
• Align Navigation — выравнивание на странице: по центру, по левому или правому краю.

WP-PageNavi не работает

Сталкивался я и с тем, что плагин WP-PageNavi не работает .

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

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

Откройте на редактирование шаблон index.php и найдите код, который отвечает за вывод записей:

…

Замените его на следующий код:

…

Проверьте работоспособность WP-PageNavi.

3. Если и это не помогло, то можно воспользоваться альтернативным плагином — WP Page Numbers .

Плагин WP Page Numbers

Установка плагина WP Page Numbers аналогично рассмотренной выше установки WP-PageNavi, только используется несколько другой код:

Настройки плагина располагаются в разделе «Параметры» — «Page Numbers».

WP Page Numbers предоставляет на выбор 5 стилей оформления постраничной навигации WordPress. Конечно, по сравнению с многообразием стилей WP-PageNavi Style это выглядит скудно, но темы универсальные и прекрасно подойдут для большинства блогов.

Из остальных настроек я только заменил значения «Page» на «Страница», а предлог «of» на «из».

Плагин Number My Post Pages

Последний плагин в моей подборке называется Number My Post Pages и предназначен для создания постраничной навигации внутри одной записи. Он пригодится вам в том случае, если объем материала на странице блога очень велик, и его лучше представить постранично для удобства читателя.

1. Скачайте плагин Number My Post Pages.

2. Распакуйте архив и перекиньте папку с файлами плагина на ftp в директорию wp-content/plugins.

3. Активируйте плагин Number My Post Pages.

4. Добавьте в шаблоны single.php и page.php используемой темы WordPress следующий код:

Чтобы разбить содержание статьи на страницы следует воспользоваться тегом:

Настройки плагина Number My Post Pages проживают по адресу «Параметры» — «Number Post Pages».

• Text for Number of Pages — текст для числа страниц.
• Show the «Text for Number of Pages» — показывать или нет «текст для числа страниц».
• Number of pages after the current page — число страниц после текущей страницы.
• Number of pages before the current page — число страниц до текущей.
• Text for next page — текст кнопки для перехода на следующую страницу.
• Text for previous page — текст кнопки для перехода на предыдущую страницу.
• Use default stylesheet — использовать ли стандартную тему.
• Show Dropdown — так называемый дробдаун, который выводит список всех номеров страниц.
• Always Show Navigation — всегда показывать навигацию, даже если содержание статьи не разбито на страницы.