Главная » Вебмани » Wordpress постраничная навигация без плагина. WP-PageNavi — плагин пагинации WordPress

Wordpress постраничная навигация без плагина. WP-PageNavi — плагин пагинации WordPress

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

От автора

В добавлении постраничной навигации на сайт любой системы, есть, как плюсы (удобство для посетителя), так и минусы (появляются страницы с повторяющимися заголовками в тегах title). Чтобы добавить постраничную навигацию на сайт WordPress, а вернее, чтобы поменять стандартную навигацию (предыдущая страница – следующая страница) на порядковые кнопки постраничного листания, используем плагин WP-pagenavi.

Стандартная постраничная навигация WordPress

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

Функции, которые выводят стандартную навигацию: next_posts_link и previous_posts_link . Запомним их, они нам пригодятся.

Добавить постраничную навигацию на сайт WordPress поможет плагин WP-pagenavi

Чтобы изменить постраничную навигацию по блогу и добавить кнопки для выборочного листания, используем плагин WP-pagenavi. Страница плагина: https://wordpress.org/plugins/wp-pagenavi/installation/

Можно тремя стандартными способами:

Из , воспользовавшись поиском по имени;
Скачать плагин на его странице WordPress.org (ссылка внизу статьи);
Или скачать плагин на его странице WordPress.org, распаковать архив и «залить» каталог плагина wp-pagenavi в папку /wp-content/plugins/ и активировать плагин из консоли блога.

Как запустить плагин WP-pagenavi

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

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

Задача для активации wp-pagenavi, в следующем. Нужно найти в файлах рабочей темы функции next_posts_link и previous_posts_link и строки с ними заменить на:

Где и как искать функции next_posts_link и previous_posts_link

Как правило, функции next_posts_link и previous_posts_link можно найти в файлах темы: index, archive, functions . Сделать это можно в Редакторе из консоли блога.

Добавить постраничную навигацию на сайт WordPress

Если поиск из консоли не приносит быстрых результатов, а попросту вы не видите эти функции, делаем следующее:

Через FTP соединение, копируем файлы рабочей темы к себе на компьютер.
Открываем все скачанные файлы в текстовом редакторе, например Notepadd++.
Далее, используем поиск редактора «Найти во всех файлах» ищем названия наших функций: next_posts_link и previous_posts_link .

Найдя их, заменяем на:

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

Как изменить внешний вид кнопок WP-pagenavi

По умолчанию, кнопки палагина с номерами страниц белые/серые. Рамки квадратные. Поменять внешний вид кнопок, можно в файле: pagenavi-css.css. Лежит этот файл в каталоге: wp-content/plugins/wp-pagenavi .

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

Еще плагины навигации по страницам

Pagination by BestWebSoft. https://ru.wordpress.org/plugins/pagination/
Simplistic page navi. https://ru.wordpress.org/plugins/simplistic-page-navi/
Alphabetic Pagination. https://ru.wordpress.org/plugins/alphabetic-pagination/
SX No Homepage Pagination. https://ru.wordpress.org/plugins/sx-no-homepage-pagination/
WP-Paginate. https://ru.wordpress.org/plugins/wp-paginate/

Привет всем!

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

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

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

← Older posts", "twentyten")); ?>

→", "twentyten")); ?>

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

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

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

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

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

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

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

Ранее для реализации этой возможности использовались сторонние плагины, либо специальные функции, которые размещались в файле functions.php . Однако с выходом WordPress версии 4.1 функция пагинации была встроена в ядро CMS, и теперь для реализации постраничной навигации достаточно внутренних функций WordPress и нет никакой необходимости добавлять сторонний код или плагины.

Я писал ранее о подобном улучшении со стороны WordPress в отношении тега TITLE — https://aboutwordpress.ru/post/wordpress-title/ .

Что такое пагинация

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

WP-PageNavi — плагин пагинации WordPress

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

Пагинация WordPress - плагин WP-PageNavi

Пагинация wordpress без плагина

Для того чтобы сделать пагинацию на сайте без плагинов мы воспользуемся встроенной WordPress функцией the_posts_pagination(). В нужном нам месте необходимо вставить следующий код (как правило это файлы index.php , category.php и им подобные):

Результатом работы функции the_posts_pagination() будет примерно такой HTML код:

Удаляем заголовок H2 из пагинации

Сразу бросается в глаза H2-заголовок «Навигация по записям». Которому в большинстве случаев не место на сайте. Чтобы от него избавиться добавим следующий код в файл functions.php :

/* Удаляем H2 из пагинации */ add_filter("navigation_markup_template", "my_navigation_template", 10, 2); function my_navigation_template($template, $class){ return "

"; }

Настраиваем страницы пагинации

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

show_all - показывать все страницы
end_size - количество страниц в начале и конце списка
mid_size - количество страниц слева и справа от текущей страницы

Например так:

2, "end_size" => 2,)); ?>

Стили пагинации CSS

В сегодняшней статье речь пойдет о популярном в виду своей исключительной полезности плагине под названием WP-PageNavi . Удобный плагин предоставляет возможность организовать постраничную навигацию блога WordPress более удобно, чем если бы вы пользовались способом, включенным по умолчанию. В принципе, удобство стандартной постраничной навигации – вопрос относительный и вполне можно использовать и так называемые средства по умолчанию, однако WP-PageNavi предлагает нам гораздо более привлекательный вариант. Если по умолчанию в качестве постраничной навигации мы имеем две кнопки «раньше» и «позже», то есть пролистываем страницы последовательно в поисках нужной нам, то после того, как WP-PageNavi окончательно установлен и настроен, мы получаем кнопки с указанием номеров страниц, что позволяет нам без труда перейти на нужную страницу. В зависимости от выбранных настроек панель навигации может выглядеть по — разному, однако это мы рассмотрим несколько позже.

Какие конкретные причины могут быть у начинающего блогера для того, чтобы использовать именно плагин PageNavi для того, чтобы организовать навигацию в блоге? Возможно, на первых порах такой необходимости и не возникает, и двух кнопок вполне достаточно для того, чтобы ориентироваться в пяти страницах блога. Но со временем количество информации, а значит, и страниц, неуклонно растет, и обычная навигация становится неудобной, а читателю проще запомнить, на какой странице он закончил чтение или нашел необходимую статью, чем запоминать, сколько раз кликнуть на кнопку «далее». Вот почему PageNavi – это логичное развитие навигации практически каждого блога; конечно, существуют и другие аналогичные плагины, однако именно WP-PageNavi обрел наибольшую известность и популярность.

Установка WP-PageNavi

Естественно, что перед тем, как работать с данным плагином, мы скачиваем его и устанавливаем. После того, как мы скачали нужный архив с плагином, его необходимо распаковать; в результате мы получаем папку под названием WP-PAGENAVI, которую затем загружаем на сервер вашего хостинга в папку с плагинами Вордпресс, которую мы находим по названию wp-content/plugins/. Для того, чтобы сделать это, необходимо получить доступ к папкам вашего блогом WordPress, используя протокол FTP.

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

После того, как копирование файлов плагина WP-PageNavi завершено, следующим вашим шагом будет вход в администраторскую зону WordPress и выбора пункта «Плагины». После этого перед вами появится окно управления плагинами, где вашим выбором становится ссылка «Неактивные» («Inactive», в английской версии). Это действие позволяет открыть список установленных, но еще не активированных плагинов вашего блога.
В этом списке необходимо отыскать нужный нам плагин WP-PageNavi и кликнуть по ссылку «Активировать» (она находится прямо под названием плагина).

Вставка кода вывода плагина WP-PageNavi в шаблоны темы WordPress

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

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

Как правило, использование постраничной навигации актуально на главной странице (это файл INDEX.PHP в папке с используемой темой оформления), а также еще в двух случаях – на странице архивов (ARHIVE.PHP) и странице результатов поиска по всему блогу (SEARCH.PHP). Поэтому именно в эти три файла нам и потребуется вставить служебный код плагина PageNavi, который и позволит вывести удобную навигационную панель в нужное место нашего блога на WordPress. Для того чтобы вставить служебный код плагина PageNavi в нужные файлы шаблона необходимо подключаемся к блогу по FTP-протоколу и зайти в папку с используемой в настоящий момент темой оформления.

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

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

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

В принципе, код стандартной навигации, расположенный в файле INDEX.PHP, можно и не удалять, чтобы впоследствии при удалении нашего плагина постраничная навигация вашего блога работала адекватно. Для этого вместо стандартного кода для постраничной навигации необходимо будет прописать условие, которое определит, когда должна отображаться стандартная навигация WordPress, а когда – та панель навигации по страницам, которая создается посредством плагина WP-PageNavi.

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

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

Подробная настройка WP-PageNavi

Чтобы приступить к настройкам плагина, необходимо выбрать в левом меню админки WordPress из области «Настройки» пункт «PageNavi» или, в русифицированном варианте – «Список страниц». Это действие открывает окно, содержащее список настроек плагина WP-PageNavi в области шаблонов списка страниц.

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

Следующие поля носят название «Элемент «Текущая страница» , далее — «Элемент «страница» . Содержание данных полей мы не трогаем, поскольку именно здесь задано отображение страниц (как текущей, так и всех остальных) в виде порядкового номера. Что касается панели WP-PageNavi, здесь все будет смотреться достаточно стандартно и естественно. Аналогичную систему постраничной навигации сейчас можно встретить на многих блогах.

Поля текста для первой и последней страницы предназначены для того, чтобы задать в них текст, отображаемый на кнопках перехода к первой и к последней странице. Классическое решение – написать вместо текста для поля первой страницы единицу, а «Text For The Last Page» заполнить строкой %TOTAL_PAGES% — благодаря этому в последней строке будет выводиться общее количество страниц вашего блога.

Следующие поля предназначены для вывода кнопок перехода на предыдущую и последующую страницы блога. Они носят названия «Text For The Previous Post» и «Text For The Next Post » соответственно. Как правило, здесь прописываются привычные стрелочки соответствующего направления.

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

Теперь самое время заняться дальнейшими настройками плагина WP-PageNavi и перейти к настройкам списка страниц. Первое, что мы встречаем в окне «настройки списка страниц» — это пункт «Use pagenavi-css.css» , позволяющий установкой галочки отключать или подключать файл с каскадными таблицами стилей, который идет в комплекте с обсуждаемым сегодня плагином.

Следующее поле, носящее название «Стиль списка страниц» , предлагает нам открыть выпадающий список CSS стилей, который по сути предлагает нам выбрать один стиль из двух предлагаемых. Обычный стиль – это уже упомянутые нами кнопки постраничной навигации, в то время как стиль под названием «Drop-down list» выводит нам навигацию в виде лаконичного выпадающего списка с номерами страниц.

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

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

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

Наконец, поле под названием «Show Larger Page Numbers In Multiples Of» предоставляет возможность задать тот шаг, с которым будут отображены номера далеких страниц вашего блога. К примеру, в первом из этих описанных полей мы поставим тройку, а для второго – двойку. Это приведет к тому, что в результате на панели WP-PageNavi при текущей странице под номером 1 и количестве отображаемых страниц, заданном цифрой 5, после последовательно отображенных страниц с первой по пятую будут видны страницы под номерами 6, 8, 10 – то есть три страницы вашего блога с шагом (интервалом), равным двойке. Впрочем, можно и не использовать данную функцию, для чего достаточно поставить 0 в поле количества отображаемых далеких номеров.

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

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

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

Однако, можно добавлять дополнительные свойства непосредственно в файл CSS текущей темы оформления WordPress (wp-content/themes/текущая тема/style.css ), а не в соответствующий файл плагина, который располагается по адресу: .

Еще один способ изменения внешнего вида нашей панели постраничной навигации, помещаемой на страницы блога при использовании плагина WP-PageNavi, — это изменение файла стилевого оформления непосредственно самого плагина. Данный файл расположен в папке /wp-content/plugins/wp-pagenavi/pagenavi-css.css .

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

Современная, красивая постраничная навигация для блога WordPress организуется с помощью популярного плагина WP-PageNavi . На официальном сайте wordpress.org данный модуль занимает четвертое место по скачиванию. На момент написания этого поста, его скачали уже 4065194 раз. Как устроена удобная навигация по страницам Вы можете посмотреть у меня на блоге. Если готовы к на своем веб-ресурсе, тогда приступим.

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

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

Как установить и настроить плагин WP-PageNavi

Как видно из скриншота, Вы можете заменить текст на свой или оставить всё как есть. Отметьте -Использовать стиль pagenavi-css.css или нет. Если вам нужно настроить CSS стиль WP-PageNavi сделать это можно в файле плагина. Надо для этого перейдите в раздел "Плагины" - "Редактор", выберете в качестве плагина для изменения WP-PageNavi и найдите в открывшемся списке файл wp-pagenavi/pagenavi-css.css. По настройкам все понятно. Следующий шаг такой.

В вашей теме в файлах index.php, archive.php и search.php , необходимо найти призывы к next_posts_link () и previous_posts_link () и заменить их. В теме TwentyTen, это выглядит так:

← Older posts", "twentyten")); ?>

→", "twentyten")); ?>

Может в других темах выглядеть и так:

Ищите, что то похожее и вам надо заменить эти строчки этим:

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

Плагин WP PageNavi Style добавляет больше цветовых вариантов для Wp-PageNavi

Да, Вы не ошиблись, для того, чтобы можно было воспользоваться готовыми стилями для постраничной навигации WP-PageNavi, надо установить дополнительный плагин WP PageNavi Style от этого же разработчика. Установите таким же образом этот модуль, активируйте его и у вас появится пункт WP PageNavi Style в боковой колонке админки. Нажмите её для настроек и выбора стиля для вашей новой навигации:

Настройка плагина WP PageNavi Style

Как видно из скриншота, можно выбирать различные красивые панельки и расположение её. Набор стилей плагина:

Набор стилей плагина Плагин WP PageNavi Style

Какой большой выбор. Если не хотите использовать готовые стили, установите - Custom и настройте стиль по своему:

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

Как установить постраничную навигацию WordPress без плагина

Этот код настолько распространен, что на какой блог ставить ссылку не известно. Поэтому обойдемся без неё.

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

"; if ($total = 1 && $max > 1) $pages = "Страница " . $current . " из " . $max . ""."\r\n"; echo $pages . paginate_links($a); if ($max > 1) echo "

"; }

Затем, меняем стандартный код вывода во всех файлах, где есть навигация - index.php, category.php, archive.php и так далее. Меняем вместо:

Next_posts_link("« Вперед"); previous_posts_link("Назад »");

Navig { padding:15px 0 25px 0; overflow:hidden; font-size:13px; color:#000; clear:both;} .navig a{background: #fff; border: 1px solid #DDDDDD; color: #000000; font-size: 13px; padding:5px; text-decoration: none;} .navig span.pages {padding: 3px 5px; background:#f1f8f9; border: 1px solid #C6D2D4;} .navig a:hover{background: #fff; border: 1px solid red; color:red; font-size: 13px; text-decoration: none;} .navig span.pages {padding: 3px 5px; background:#f1f8f9; border: 1px solid #C6D2D4;} .navig span.current {background: #fff; border: 1px solid #111; font-size: 13px; padding:5px; text-decoration: none;} .navig span.extend {padding: 3px 5px; background:#f1f8f9; border: 1px solid #C6D2D4;} .str{background: #fff; color: #000000; font-size: 13px; padding: 5px; text-decoration: none;}

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

Просмотров