Удобная навигация по сайту – это один из ключевых факторов общего юзабилити сайта. Когда пользователь заходит на сайт, он хочет в кратчайшие сроки найти нужную ему информацию. Навигация сайта включает в себя: удобный поиск, понятные категории, постраничная навигация. В этой статье я расскажу, как создать постраничную навигацию для сайта на wordpress.
Постраничная навигация для блога – это просто необходимая вещь, особенно, если ваш блог имеет архитектуру новостной ленты. Существует два варианта как можно реализовать постраничную навигацию на wordpress без плагина и при помощи плагина. На мой взгляд, для реализации постраничной навигации при помощи плагина удобнее всего использовать WP-PageNavi , он очень популярен, прост в настройке и без проблем устанавливается почти на все темы для wordpress, но все же иногда бывает, что и он не работает. Поэтому я бы советовал как можно больше функций сайта, в том числе постраничную навигацию , реализовывать без использования плагинов.
По умолчанию или можно сказать в своей стандартной комплектации CMS WordPress отображает только записи, и существует только две кнопки перемещения: «предыдущая» и «последующая» страница. Согласитесь, это существенно усложняет поиск. Например, если пользователь захотел вернуться к первой странице, а он находится на седьмой, то ему придётся пролистать семь страниц.
Постраничная навигация при помощи плагина.
Как я уже говорил, самый простой способ создать удобную постраничную навигацию - это плагин WP-PageNavi . Плагин начинает работу сразу после его активации в консоли сайта, вам необязательно что-то дополнительно настраивать в опциях плагина, чтобы он заработал. Нет ничего сложного и в его установке. Хочу отметить, что плагины не всегда устанавливаются через админку wordpress. Плагин также в ручную можно установить руками, просто загрузив плагин прямо на хостинг в папку wpcontet-plagins, после загрузки потребуется активация плагина в админ панели.
Постраничная навигация без плагина.
Для того чтобы реализовать постраничную навигацию без плагина необходимо добавить несколько файлов вашей теме сайта, для начала немного отредактировать файл functions.php и добавить в него код описания работы постраничной навигации .
/*******************************
Навигация
*******************************/
function emm_paginate($args = null) {
$defaults = array(
‘page’ => null, ‘pages’ => null,
‘range’ => 3, ‘gap’ => 3, ‘anchor’ => 1,
‘before’ => ‘’, ‘after’ => ‘’,
‘title’ => __(”),
‘nextpage’ => __(‘»’), ‘previouspage’ => __(‘«’),
‘echo’ => 1
);$r = wp_parse_args($args, $defaults);
extract($r, EXTR_SKIP);
if (!$page && !$pages) {
global $wp_query;
$page = get_query_var(‘paged’);
$page = !empty($page) ? intval($page) : 1;
$posts_per_page = intval(get_query_var(‘posts_per_page’));
$pages = intval(ceil($wp_query->found_posts / $posts_per_page));
}$output = “”;
if ($pages > 1) {
$output .= “$before$title”;
$ellipsis = “…”;
if ($page > 1 && !empty($previouspage)) {
$output .= “$previouspage”;
}$min_links = $range * 2 + 1;
$block_min = min($page – $range, $pages – $min_links);
$block_high = max($page + $range, $min_links);
$left_gap = (($block_min – $anchor – $gap) > 0) ? true: false;
$right_gap = (($block_high + $anchor + $gap) < $pages) ? true: false;
if ($left_gap && !$right_gap) {
$output .= sprintf(”,
$ellipsis,
emm_paginate_loop($block_min, $pages, $page));
}else if ($left_gap && $right_gap) {
$output .= sprintf(”,
emm_paginate_loop(1, $anchor),
$ellipsis,
emm_paginate_loop($block_min, $block_high, $page),
$ellipsis,
}else if ($right_gap && !$left_gap) {
$output .= sprintf(”,
emm_paginate_loop(1, $block_high, $page),
$ellipsis,
emm_paginate_loop(($pages – $anchor + 1), $pages));
}else {
$output .= emm_paginate_loop(1, $pages, $page);
}if ($page < $pages && !empty($nextpage)) {
$output .= “$i”;
}
return $output;
}
Следующим шагом будет вывод навигации, для этого в нужном нам месте, где будет использоваться постраничная навигация, например index.php, serch.php, archive.php
добавим код:
Вот и все, если все сделано правильно, то мы уже имеем на сайте постраничную навигацию. Осталось только отредактировать файл стилей для вашего сайта.
Для этого в конце вашего файла стилей добавляем следующий код
/* Навигация */
Emm-paginate { margin-bottom:60px; clear:both; }
.emm-paginate a { border: 0px solid #ccc; background: #ebebeb; color:#333; margin-right:7px; padding:6px 14px; text-align:center; text-decoration:none;}
.emm-paginate .emm-title {color:#555; margin-right:4px;}
.emm-paginate .emm-gap {color:#999; margin-right:4px;}
.emm-paginate a:hover, .emm-paginate a:active, .emm-paginate .emm-current { color:#fff; background:#5cbfd7; border: 0px solid #63800c; margin-right:7px; padding:6px 14px;}
.emm-paginate .emm-page {}
.emm-paginate .emm-prev, .emm-paginate .emm-next {}
Если вы редактируете чужую тему, а не создаете тему с нуля, то вполне возможно, что в ней уже используется вывод постраничной навигации по умолчанию, и вы можете увидеть следующий код
Его вам надо удалить или закомментировать, чтобы у вас дублировался вывод навигации и не выводились две навигации одновременно.
Чтобы добавить постраничную навигацию на сайт 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/
Приветствую вас, уважаемые читатели блога сайт. Сегодня речь пойдет об очень популярном плагине 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, а если это не помогает, то очистите кеш браузера.
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Easy Social Share Buttons - плагин по добавлению кнопок социальных сетей в WordPress, включая Вконтакте и Одноклассники
Subscribe To Comments для WordPress - подписка на комментарии к статьях в Вордпресс
Хлебные крошки в WordPress средствами плагина Breadcrumb NavXT (усиливаем перелинковку)
Simple Counters и Category and Page Icons - красивые счетчики RSS и Twitter, а так же иконки для категорий и страниц в WordPress
Установка и настройка плагинов для WordPress, решение возможных проблем
All in One SEO Pack и внутренняя поисковая оптимизация блога на WordPress (метатеги Canonical, Description и Title)
Галерея для WordPress на основе плагина NextGEN Gallery - создание и вывод фотогалерей и слайдшоу в статьях
Google XML Sitemaps - создание карты сайта для WordPress
Better Feed для WordPress - как не отдавать в RSS полные тексты постов и защититься от воровства контента через новостной канал
Перелинковка страниц сайта на примере плагина upPrev (выезжающей панели) для Вордпресс
Навигация в темах для WordPress чаще всего реализованя стандартным путём — ссылка на предыдущие записи и ссылка на следующие записи. Этого хватает в большинстве случаев, но иногда необходимо сделать именно постраничную навигацию в WordPress, в чём нам поможет бесплатный плагин WP-PageNavi.
Установка плагина
WP-PageNavi один из самых популярных и простых плагинов для реализации постраничной навигации или «пагинации» в WordPress. Он доступен в директории плагинов на WordPress.org, и его можно установить из панели администрирования WordPress в разделе Плагины → Добавить новый.
После установки и активации плагина вам следует внести некоторые изменения в вашу активную тему WordPress. Она находится в директории wp-content/themes. Найдите в этой директории папку с названием вашей активной темы.
Стоит отметить, что в некоторых темах уже встроена поддержка плагина WP-PageNavi, и после активации она сразу будет отображать постраничную навигацию вместо стандартной, но такие темы встречаются крайне редко. В большинстве случаев, вам придётся в ручную вносить изменения для поддержки постраничной навигации.
В файлах вашей темы следует найти вызов функций next_posts_link и previous_posts_link . Они могут быть в нескольких местах, но чаще всего в файлах index.php, archive.php и functions.php.
Эти функции выводят стандартную навигацию, и для вывода постраничной навигации с помощью WP-PageNavi, их стоит заменить вызовом одной новой функции wp_pagenavi .
Для примера рассмотрим стандартную тему Twenty Twelve. В файле functions.php найдите следующий код:
И вместо вызова функций next_posts_link и previous_posts_link вызывайте функцию wp_pagenavi:
Обратите внимание на третью строку. Здесь мы так же добавили обращение к функции function_exists перед вызовом wp_pagenavi . Это поможет предотвратить вывод ошибки в случае деактивации или отсутствия плагина WP-PageNavi.
После сохранения файла, перейдите на любую страницу с вашими записями, и вы увидите постраничную навигацию в дейтсиви:
Если вы не можете найти функции next_posts_link и previous_posts_link чтобы их заменить в вашей теме, оставьте комментарий с указанием названия вашей темы, и мы обязательно вам поможем.
Для более продвинутых пользователей WordPress стоит отметить, что замена функций и участков темы лучше всего производить с помощью темы-потомка, использая исходную тему как родительску. Это поможет сохранить постраничную навигацию и другие изменения, даже при обновлении темы.
Настройки WP-PageNavi
В разделе Параметры → PageNavi вы сможете изменить ряд настроек для вашей постраничной навигации, в том числе: максимальное количество страниц, отображение в виде выпадающего списка, использование встроенных стилей и т.д.
В настройках вы так же можете изменять текст, который отображается на ссылках, что позволяет легко переводить отображаемые в навигации ссылки.
О постраничной навигации «без плагинов»
Если вы прочитали статью о том, как реализовать постраничную навигацию без плагинов в WordPress — мы крайне не рекомендуем этот метод , и это относится не только к постраничной навигации. Большинство статей и уроков серии «без плагинов» просто копируют код из плагина, и вставляют его в различные участки вашей темы.
Подход к расширению WordPress «без плагинов» не имеет никаких преимуществ, зато имеет немалое количество недостатков:
- Вам приходится всегда копаться в коде
- Если что-то пошло не так, вы не можете с лёгкостью деактивировать плагин
- При смене или обновлении вашей темы, вы теряете все ваши дополнения
- Это небезопасно и может привести к взлому вашего сайта
Плагины созданы именно для расширения функционала WordPress, поэтому не стесняйтесь ими пользоваться.
Альтернативы
Если вам по какой-либо причине не подошёл плагин WP-PageNavi, в качестве альтернативы советуем рассмотреть плагины WP-Paginate и WP Page Numbers , которые реализуют подобный функционал.
Если у вас возникли вопросы о постраничной навигации в WordPress или об упомянутых выше плагинах, вы можете задать их нам используя форму комментирования или написать нам в
На главной странице, а так же на страницах рубрик, архивов и в результатах поисках, как правило нужна постраничная навигация (так же известная как пагинация). Блоги на 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,)); ?>