В этой статье я расскажу, как добавить пагинацию WordPress . Хотя движок и выводит пользователю ссылки на следующий и предыдущий пост, но пагинация улучшает просмотр страниц сайта.
Использование темы
С простой способ добавить пагинацию в WordPress — это использование тем. Некоторые темы уже содержат эту функцию и инструменты для настройки ссылок пагинации. Например, изменения цвета и внешнего вида ссылок.
Чтобы узнать, поддерживает ли тема эту функцию, перейдите в раздел «Внешний вид » панели администрирования WordPress .
Нажмите кнопку «Настроить ». В зависимости от темы, которую вы используете, здесь может отображаться раздел пагинации. Он также может быть включен в другие разделы настройки темы.
Если не нашли параметры настройки пагинации WordPress без плагина , нажмите «X », чтобы вернуться в панель администрирования. Вам нужно будет использовать один из способов, чтобы добавить пагинацию на сайт.
Установка темы с поддержкой пагинации
Функции, которые поддерживаются одной темой, не всегда доступны в другой. Сложность заключается в том, чтобы найти ту тему, которая содержит необходимые вам функции, а затем настроить ее с помощью плагинов или редактирование кода.
Чтобы добавить тему, поддерживающую пагинацию:
В поле поиска введите «pagination ». WordPress автоматически фильтрует темы и находит те, в описании, которых присутствует данный термин.
Найдите тему, которая вам нравится, установите и активируйте ее. Если не уверены, подходит ли она, нажмите на кнопку «Предварительный просмотр ».
Примечание . Предварительный просмотр представляет собой простую систему и не учитывает многие элементы, такие как изображение заголовка, виджеты и общий макет сайта.
Использование плагинов пагинации
В этой статье я расскажу о плагине Pagination by BestWebSoft . С его помощью можно добавить пагинацию для различных разделов WordPress-сайта .
Чтобы установить плагин Pagination by BestWebSoft сделайте следующее:
- В панели администрирования WordPress перейдите в раздел «Плагины » и нажмите на кнопку добавления нового плагина.
- Найдите плагин «Pagination by BestWebSoft ». Установите и активируйте его.
- В меню панели администрирования будет добавлена новая функция. Нажмите на новый пункт меню, чтобы открыть панель BWS . Все инструменты BestWebSoft содержатся в этом разделе. Если у вас установлены другие инструменты, нажмите ссылку Pagination .
В настройках плагина пагинации WordPress можно настроить пагинацию для различных частей сайта: для главной страницы, для страниц архива, блога и так далее.
Перейдите на вкладку «Внешний вид ». В этом разделе можно изменить способ отображения пагинации на сайте. А также изменить цвет фона и текста, границы и другие параметры. После того, как внесли изменения, нажмите на кнопку «Сохранить » в нижней части страницы.
Перейдите на вкладку «Пользовательский код ». Здесь можно задать собственные CSS-стили, чтобы настроить отображение пагинации. После того как завершите редактирование кода, нажмите на кнопку «Сохранить изменения », расположенную в левом нижнем углу.
После этого все остальное плагин сделает автоматически. После вывода пагинации WordPress вам останется только добавить контент.
Другие плагины
Для WordPress доступно много плагинов, которые предоставляют различные параметры настройки пагинации.
WP-PageNavi
Плагин дает возможность изменять текст раздела пагинации, а также количество ссылок на записи, которые будут отображаться. Одной из причин, почему так много людей используют плагин, является то, что он имеет собственный файл CSS . Это позволяет разработчикам задавать уникальное отображение пагинации.
WP-Paginate
Плагин предоставляет возможность гибкой настройки. Он также поддерживает возможность добавления пользовательского кода CSS . Этот плагин содержит несколько базовых параметров, в том числе отображение ссылок и использование синих или серых кнопок.
Pagination by HocWP
Простой плагин пагинации записей WordPress , который не содержит большого количества параметров настройки. Тем не менее, он позволяет эффективно добавить ссылки пагинации в нижней части записей.
Использование пагинации для записей WordPress
Если у вас есть редактор CSS-кода , то можно внести изменения в темы и плагины. Например, плагин PageNavi предоставляет доступ к собственному файлу CSS .
Можно добавить пользовательский код для других областей страницы через файл style.css темы. А также изменить цвет фона, отображение элементов при наведении курсора мыши и многое другое.
Как сделать ваш сайт более интерактивным
Пагинация страниц WordPress делает сайт более интерактивным. С ее помощью посетители могут самостоятельно выбирать, на какие страницы переходить. Это одно из тех дополнений, которое может внести любой разработчик. При этом оно существенно улучшает опыт взаимодействия пользователей.
В данной статье я хочу показать вам, как добавить числовую пагинацию в 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 "
Вывод числовой пагинации в WordPress
Теперь, когда все настроено, мы можем вывести пагинацию на сайте. Добавьте следующий блок кода напрямую в свою тему или шаблон (в зависимости от того, где именно нужно вывести пагинацию).
max_num_pages); } ?>
Технически функцию можно использовать для создания пагинации где угодно. Параметр base используется как ссылка на УРЛ, которая будет использована для создания ссылки пагинации. Параметр format будет заменен на номер пагинации. Эта функция является ядром для всех функций пагинации в WordPress.
Параметр type контролирует в каком формате будет возвращен результат:
- plain - просто ссылки разделенные переносом строки (По умолчанию).
- array - в виде массива данных для дальнейшей обработки в PHP
- list -
- список.
Числовой параметр total должен получить общее количество страниц пагинации, а параметр current номер текущей страницы пагинации. Пример параметра base - http://example.com/all_posts.php%_% , где %_% - обязательная часть, которая будет заменена тем что указано в параметре format . Пример format - ?page=%#% , здесь %#% , также обязательная часть, которая будет заменена числом текущей страницы пагинации. Вообще, в base можно сразу указать например так: http://example.com/all_posts.php?page=%#% , а в формат пусто ("").
Чтобы добавить ссылки на предыдущую/следующую страницу, нужно включить логический параметр prev_next (указать ему true), а затем можно установить текст ссылок указав параметры prev_text/next_text (предыдущая ссылка/следующая ссылка).
Если включить параметр show_all , то будут выведены абсолютно все ссылки пагинации, вместо нескольких ссылок вокруг текущей и нескольких конечных ссылок. По умолчанию, этот параметр выключен, а сколько ссылок показывать вокруг текущей страницы и на концах контролируется параметрами: end_size и mid_size .
Параметры before_page_number и after_page_number позволяют обернуть само число пагинации, например в для стилизации. А вообще, эти параметры были созданы для того, чтобы указать текст для роботов, чтобы при просмотре кода, было понятно для чего предназначены ссылки.
В результате вы получите нечто подобное: « предыдущая 1 … 3 4 5 6 7 … 9 следующая »
Хуки из функции
Возвращает
Использование
Шаблон использования
$args = array("base" => "%_%", "format" => "?page=%#%", "total" => 1, "current" => 0, "show_all" => False, "end_size" => 1, "mid_size" => 2, "prev_next" => True, "prev_text" => __("« Previous"), "next_text" => __("Next »"), "type" => "plain", "add_args" => False, "add_fragment" => "", "before_page_number" => "", "after_page_number" => ""); echo paginate_links($args); $args(строка/массив) Аргументы для построения пагинации.По умолчанию: предустановки
Аргументы параметра $args
base(строка) База для замены по формату. В конструкции: http://example.com/all_posts.php%_% %_% будет заменено значением аргумента format (см. ниже).По умолчанию: "%_%" format(строка) Формат замены.
По умолчанию: "?page=%#%" total(число) Общее количество страниц, которые участвуют в пагинации.
По умолчанию: 1 current(число) Номер текущей страницы пагинации. show_all(логический) Если выставить в true, то в списке ссылок будут показаны все страницы участвующие в пагинации. По умолчанию показывается только несколько ссылок спереди и сзади номера текущей страницы, количество ссылок регулируется аргументами: end_size и mid_size .
По умолчанию: false end_size(число) Сколько номеров показывать сначала и конца ("предыдущая 12 ... 4 ... 89 следующая").
По умолчанию: 1 mid_size(число) Сколько номеров показывать до и после текущего номера (... 123 5 678 ...).
По умолчанию: 2 prev_next(логический) Выводить боковые ссылки "предыдущая/следующая страница". По умолчанию выводятся, если ненужно выводить эти ссылки пишем false.
По умолчанию: ture prev_text(строка) Текст ссылки "предыдущая страница".
По умолчанию: __("« Previous") next_text(строка) Текст ссылки "следующая страница".
По умолчанию: __("Next »") type(строка)
Формат возвращаемых данных.
- list - html список
- .
По умолчанию: "plain"
plain - строка ссылок разделенная пробелами. По умолчанию;
array - массив данных (для дальнейшей обработки);
По умолчанию: false add_fragment(строка) Текст который добавиться ко всем ссылкам.
По умолчанию: "" aria_current(строка) Значение атрибута aria-current . Возможные значения: "page", "step", "location", "date", "time", "true", "false". С версии 4.9.
По умолчанию: "page" .
Примеры
#1 Пагинация, аналог wp_pagenavi
Чтобы добавить пагинацию на страницу результатов поиска или страницу архивов, используйте такой код:
Function my_pagenavi() { global $wp_query; $big = 999999999; // уникальное число для замены $args = array("base" => str_replace($big, "%#%", get_pagenum_link($big)), "format" => "", "current" => max(1, get_query_var("paged")), "total" => $wp_query->max_num_pages,); $result = paginate_links($args); // удаляем добавку к пагинации для первой страницы $result = preg_replace("~/page/1/?([\""])~", "\1", $result); echo $result; } // Теперь, где нужно вывести пагинацию используем // my_pagenavi();
#2 Пример с произвольным запросом WP_Query
Когда записи получаются и выводятся отдельным запросом с помощью new WP_Query установите в параметр total свойство $max_num_pages . На примере:
Наш произвольный запрос и пагинация для него:
Это лишь демонстрационный пример, потому что он не учитывает основной запрос, в котором может получаться 404 страница и до этого кода дело вообще не дойдет.
5, "category_name" => "gallery", "paged" => $paged,)); // цикл вывода полученных записей while($the_query->have_posts()){ $the_query->the_post(); ?> str_replace($big, "%#%", esc_url(get_pagenum_link($big))), "format" => "?paged=%#%", "current" => max(1, get_query_var("paged")), "total" => $the_query->max_num_pages)); ?>
Код paginate links : wp-includes/general-template.php VER 5.1.1
max_num_pages) ? $wp_query->max_num_pages: 1; $current = get_query_var("paged") ? intval(get_query_var("paged")) : 1; // Append the format placeholder to the base URL. $pagenum_link = trailingslashit($url_parts) . "%_%"; // URL base depends on permalink settings. $format = $wp_rewrite->using_index_permalinks() && ! strpos($pagenum_link, "index.php") ? "index.php/" : ""; $format .= $wp_rewrite->using_permalinks() ? user_trailingslashit($wp_rewrite->pagination_base . "/%#%", "paged") : "?paged=%#%"; $defaults = array("base" => $pagenum_link, // http://example.com/all_posts.php%_% : %_% is replaced by format (below) "format" => $format, // ?page=%#% : %#% is replaced by the page number "total" => $total, "current" => $current, "aria_current" => "page", "show_all" => false, "prev_next" => true, "prev_text" => __("« Previous"), "next_text" => __("Next »"), "end_size" => 1, "mid_size" => 2, "type" => "plain", "add_args" => array(), // array of query args to add "add_fragment" => "", "before_page_number" => "", "after_page_number" => "",); $args = wp_parse_args($args, $defaults); if (! is_array($args["add_args"])) { $args["add_args"] = array(); } // Merge additional query vars found in the original URL into "add_args" array. if (isset($url_parts)) { // Find the format argument. $format = explode("?", str_replace("%_%", $args["format"], $args["base"])); $format_query = isset($format) ? $format : ""; wp_parse_str($format_query, $format_args); // Find the query args of the requested URL. wp_parse_str($url_parts, $url_query_args); // Remove the format argument from the array of query arguments, to avoid overwriting custom format. foreach ($format_args as $format_arg => $format_arg_value) { unset($url_query_args[ $format_arg ]); } $args["add_args"] = array_merge($args["add_args"], urlencode_deep($url_query_args)); } // Who knows what else people pass in $args $total = (int) $args["total"]; if ($total < 2) { return; } $current = (int) $args["current"]; $end_size = (int) $args["end_size"]; // Out of bounds? Make it the default. if ($end_size < 1) { $end_size = 1; } $mid_size = (int) $args["mid_size"]; if ($mid_size < 0) { $mid_size = 2; } $add_args = $args["add_args"]; $r = ""; $page_links = array(); $dots = false; if ($args["prev_next"] && $current && 1 < $current) : $link = str_replace("%_%", 2 == $current ? "" : $args["format"], $args["base"]); $link = str_replace("%#%", $current - 1, $link); if ($add_args) { $link = add_query_arg($add_args, $link); } $link .= $args["add_fragment"]; /** * Filters the paginated links for the given archive pages. * * @since 3.0.0 * * @param string $link The paginated link URL. */ $page_links = "" . $args["prev_text"] . ""; endif; for ($n = 1; $n <= $total; $n++) : if ($n == $current) : $page_links = ""; $dots = true; else: if ($args["show_all"] || ($n <= $end_size || ($current && $n >= $current - $mid_size && $n <= $current + $mid_size) || $n > $total - $end_size)) : $link = str_replace("%_%", 1 == $n ? "" : $args["format"], $args["base"]); $link = str_replace("%#%", $n, $link); if ($add_args) { $link = add_query_arg($add_args, $link); } $link .= $args["add_fragment"]; /** This filter is documented in wp-includes/general-template.php */ $page_links = "" . $args["before_page_number"] . number_format_i18n($n) . $args["after_page_number"] . ""; $dots = true; elseif ($dots && ! $args["show_all"]) : $page_links = "" . __("…") . ""; $dots = false; endif; endif; endfor; if ($args["prev_next"] && $current && $current < $total) : $link = str_replace("%_%", $args["format"], $args["base"]); $link = str_replace("%#%", $current + 1, $link); if ($add_args) { $link = add_query_arg($add_args, $link); } $link .= $args["add_fragment"]; /** This filter is documented in wp-includes/general-template.php */ $page_links = "" . $args["next_text"] . ""; endif; switch ($args["type"]) { case "array": return $page_links; case "list": $r .= "- \n\t
- "; $r .= join(" \n\t
- ", $page_links); $r .= " \n
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 файл.
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. Дальше идет спсиок
- с классом wp-paginate. Дальше идут
- :
- С классом title – это текст перед списком страниц
- С классом prev – это ссылка на предыдущую страницу
- C классом page – ссылка на страницу
- С классом page и current – это текущая страница
- С классом next – ссылка на следующую страницу
Вот и все. Меняя CSS свойства этих классов мы приводим вид нашей пагинации к такому, какой необходим в дизайне.
Таким образом всего за шесть шагов мы настроили пагинацию на нашем сайте под управлением CMS WordPress.
