Чтобы добавить постраничную навигацию на сайт 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/

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

1. Из , воспользовавшись поиском по имени;
2. Скачать плагин на его странице WordPress.org (ссылка внизу статьи);
3. Или скачать плагин на его странице 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.

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

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

(3)

WordPress - это очень универсальная платформа для ведения блога, а с помощью плагинов ее можно сделать еще более удобной для пользователя.

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

1. WP-PageNavi

Один из наиболее популярных и часто используемых плагинов. С помощью встроенной функции wp_pagenavi() привычные линки ← Назад | Далее → изменятся на привлекательную нумерацию страниц.

2. WP Smart Pagination

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

3. Simple Pagination

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

4. Alphabetic Pagination

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

5. jPages pagination for WordPress

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

6. Paginate

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

7. Next Post Fly Box For WordPress

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

8. JQuery Paginator Plugin

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

9. Smart Pagination

Отличный плагин, который предлагает 11 разных вариантов пагинации.

Бонус. CSS стили для WP-PageNavi плагина

Отличное собрание CSS-стилей для популярных плагинов для WordPress - WP-PageNavi и WP-Paginate. Включает в себя HTML страницы с демонстрацией стилей, а каждый стиль содержит отдельный CSS файл.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

function wp_corenavi () {

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


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

";
}

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

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

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

";
}

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

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

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

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

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

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

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

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

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

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

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

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

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

if (1 != $pages)
{
echo «

»;
}
}

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

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

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

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

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

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