WP-PageNavi — постраничная навигация для блога на WordPress — установка, настройка и изменение внешнего вида пагинации. Paginate_links() — Выводит ссылки пагинации для страниц архивов

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. Easy Pagination for WordPress

Сделайте длинные записи и страницы более привлекательными с помощью слайдеров: Horizontal Slider, Vertical Slider или Fade. Горизонтальный и вертикальный слайдеры можно комбинировать с 32 jQuery эффектами.

8. Next Post Fly Box For WordPress

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

9. JQuery Paginator Plugin

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

10. Smart Pagination

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

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

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

Практически любой блоггер, который ведет свой блог на движке WordPress, знаком с плагином WP-PageNavi, который выводит постраничную навигацию такого вида:

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

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

Функция, которую я вам предлагаю, совсем небольшая по размеру:

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

"; }

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

Для того, чтобы вывести навигацию в нужном месте, вставляйте в шаблон следующий код:

HTML-код, который получается в результате вывода функции, выглядит следующим образом:

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

Проверял данную функцию на версиях WordPress, начиная с 2.3.3, а также тестировал варианты с включенным и отключенным ЧПУ. Все работает, как и полагается.

Пользуйтесь.

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

24.09.2013 Ромчик

Первое, что нам необходимо сделать - это скачать плагин. Я долго выбирал плагин из множества плагинов позволяющих сделать пагинацию. Но один сильно грузит систему, второй какой-то не адекватный. И мой выбор остановился на плагине для WordPress WP-Paginate, который Вы можете скачать из официального репазитория . Плагин прост в установке. И имеет базовые настройки, которые мы рассмотрим, чуть ниже. Переходим к настройке пагинации.

Второе, что нам необходимо сделать это настроить в самой CMS сколько постов мы хотим выводить на странице. Для этого в админке переходим в «Параметры»->«Чтение» и в поле «На страницах блога отображать не более» указываем необходимое число. Так, у меня стоит 5, т.е. на странице будет отображаться не более пяти постов. И жмем «Сохранить изменения».

Отлично, теперь переходим к третьему шагу. В админке переходим «Плагины»->«Установленные» и находим наш плагин WP-Paginate. Активируем его. Для этого жмем по ссылке под названием плагина «Активировать»

Четвертое – настраиваем плагин. Для этого мы можем тут же нажать «Settings»

Или в админке перейти «Параметры»->«WP-Paginate»

Какой способ выбрать Вам решать. Попадаем в окно настроек плагина пагинации.

Pagination Label – указываем текст, который будет находиться перед списком страниц.
Previous Page – указываем текст ссылки на предыдущую страницу
Next Page – указываем текст ссылки на следующую страницу
Before Markup и After Markup – указываем html-код, который будет находиться перед и после списка страниц.
Markup Display – если мы поставим галочку, то html-код который мы указали выше будет отображаться даже, если список страниц пуст
Page Range – количество страниц отображаемых после текущей страницы
Page Anchors – количество ссылок, которые необходимо показывать в начале и в конце спсика.
Page Gap – минимальное количество страниц перед …

После изменения всех настроек жмем «Save Changes»

Все наш плагин настроен. Теперь плагин пагинации необходимо отобразить на странице.

Пятый шаг. Переходим в наш шаблон. Открываем файл в котором перечисляются посты. В моем случае это index.php, у Вас может быть loop.php или другой. И в то место, где мы хотим вывести пагинацию вставляем следующий код:

Т.е. мы в начале проверяем наличие функции wp_paginate и если она существует, то вызываем ее.

Все на нашем сайте появилась пагинация.

И последний заключительный шестой шаг – приведение пагинации к нашему дизайну. Для этого будем «играться» с CSS.

Наш список страниц будет обрамлен в html-код, который мы указали в полях Before Markup и After Markup. В нашем случае это div c классом navigation. Дальше идет спсиок

:
- С классом title – это текст перед списком страниц
- С классом prev – это ссылка на предыдущую страницу
- C классом page – ссылка на страницу
- С классом page и current – это текущая страница
- С классом next – ссылка на следующую страницу
Вот и все. Меняя CSS свойства этих классов мы приводим вид нашей пагинации к такому, какой необходим в дизайне.

Таким образом всего за шесть шагов мы настроили пагинацию на нашем сайте под управлением CMS WordPress.

Каждый сайт — это по сути целая система навигации и ссылок , по которым перемещаются роботы и посетители. Данная система может обладать разной степенью сложности. Как правило, в ее состав входит главное меню, содержащее в себе ссылки на все основные разделы и статичные страницы, дополнительные меню, (упорядоченный и структурированный список из ссылок на все страницы и разделы). Кроме того, в состав системы навигации интернет-ресурса может входить постраничная навигация .
Она представляет собой набор кнопок со встроенными в них гиперссылками, каждая из которых ведет на определенную страницу. При этом речь идет не о статичных страницах и страницах с постами, а о страницах, на которых размещаются анонсы постов (формат блога).
Что касается настроек, то здесь их не слишком много. Для начала следует указать названия первой и последней, а также следующей и предыдущей страниц. Эти кнопки будут показаны независимо от того, на какой странице вы находитесь в данный момент. Чтобы кнопки от WP Page Navi появились на блоге, необходимо удалить код стандартной навигации в шаблоне, как я уже писал наиболее вероятно, что он будет находится в шаблоне archive.php или content.php. И вместо кода вставить:

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

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

В данной статье я хочу показать вам, как добавить числовую пагинацию в WordPress к вашему блогу без каких-либо плагинов. Числовая пагинация, которую я собираюсь реализовать, используется на данном сайте (если вы перейдете в раздел блога и прокрутите в самый низ, то вы поймете, о чем я веду речь; примечание переводчика – примерно такая же реализация используется и на данном блоге, только через плагин). Я написал этот пост, поскольку я считаю, что людям обычно трудно добавить постраничное разбиение (пагинацию) к существующему сайту. Я регулярно сталкиваюсь с темами на форумах WordPress.org, где пользователи задают похожие вопросы: «Как мне добавить пагинацию к моей странице блога?», «Как мне добавить эти циферки в самом низу страницы, чтобы пользователи могли перемещаться по записям?» или «Как мне разбить мой блог на многочисленные страницы?» Складывается впечатление, что большинство пользователей выбирает для себя именно числовое разбиение на страницы в WordPress вместо навигации с помощью стандартных ссылок «Предыдущая страница» и «Следующая страница», которая в реальности никак не говорит о том, где именно пользователь находится в данный момент.
Базовая пагинация с помощью двух ссылок «Следующая страница» и «Предыдущая страница» достаточно просто реализуется, о чем прекрасно написано в кодексе, однако эта навигация не является самой удобной. Представьте себе, что пользователь пришел на ваш сайт, добрался до 8 страницы с нужной записью и ушел. Затем он вернулся обратно и решил получить тот же пост на 8 странице – для этого ему понадобится пролистать кучу страниц. Представьте себе, насколько это раздражающее действие. Это говорит о плохом юзабилити, и такого подхода желательно избегать, если вы не хотите, чтобы пользователи больше к вам не возвращались.
Базовая настройка: произвольный запрос WP_Query
Первый – и самый важный – шаг создания пагинации заключается в корректной настройке WP_Query. Нужно убедиться в том, что запрос возвращает данные записи. Вот базовый пример выполняемого запроса:
6, "paged" => $paged); $custom_query = new WP_Query($args); while($custom_query->have_posts()) : $custom_query->the_post(); ?>
- " rel="bookmark">
  Written by: /author/"> on #comments ">
  ">
Примечание: код выше используется для примера. Если вы просто скопируете его и вставите в свой файл, то все стили будут нарушены. При необходимости код можно скорректировать, чтобы он отвечал вашим требованиям. Также обратите внимание на переменную, которую мы используем для хранения нашего запроса, $custom_query, поскольку она будет использоваться, чтобы вывести на экран пагинацию для данного конкретного запроса.
В самом начале нашего запроса мы задаем переменную $paged, которая будет использоваться внутри нашего произвольного запроса. Она нужна для того, чтобы указать WordPress, на какой странице пагинации мы в данный момент находимся. Без этих двух переменных числовая пагинация в WordPress будет неправильно работать.
Стили пагинации
Следующие стили помещаются непосредственно в основной файл.CSS вашей темы. Эти стили определяют способ вывода на экран пагинации вашего сайта.
/* Pagination */ .pagination { clear:both; position:relative; font-size:11px; /* Pagination text size */ line-height:13px; float:right; /* Pagination float direction */ } .pagination span, .pagination a { display:block; float:left; margin: 2px 2px 2px 0; padding:6px 9px 5px 9px; text-decoration:none; width:auto; color:#fff; /* Pagination text color */ background: #555; /* Pagination non-active background color */ -webkit-transition: background .15s ease-in-out; -moz-transition: background .15s ease-in-out; -ms-transition: background .15s ease-in-out; -o-transition: background .15s ease-in-out; transition: background .15s ease-in-out; } .pagination a:hover{ color:#fff; background: #6AAC70; /* Pagination background on hover */ } .pagination .current{ padding:6px 9px 5px 9px; background: #6AAC70; /* Current page background */ color:#fff; }
Функция Pagination
Код ниже – это весь код, который требуется нам для того, чтобы пагинация корректно работала. Именно здесь обрабатываются возвращенные данные запроса и формируется наша красивая пагинация. Скопируйте и вставьте этот код в ваш файл functions.php. Никаких изменений совершать не нужно:
max_num_pages; if(!$pages) { $pages = 1; } } if(1 != $pages) { echo "
Page ".$paged." of ".$pages.""; if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "« First"; if($paged > 1 && $showitems < $pages) echo "‹ Previous"; for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&(!($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems)) { echo ($paged == $i)? "".$i."":"".$i.""; } } if ($paged < $pages && $showitems < $pages) echo "Next ›"; if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "Last »"; echo "
\n"; } } ?>
Вывод числовой пагинации в WordPress
Теперь, когда все настроено, мы можем вывести пагинацию на сайте. Добавьте следующий блок кода напрямую в свою тему или шаблон (в зависимости от того, где именно нужно вывести пагинацию).
max_num_pages); } ?>