Технически функцию можно использовать для создания пагинации где угодно. Параметр 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, знаком с плагином 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, который готов предложить любой вид хостинга, начиная от виртуального, заканчивая арендой готового сервера.
Появятся несколько новых функций для упрощения навигации в темах: the_post_navigation , the_posts_navigation и функция пагинации the_posts_pagination .
Для постраничной навигации многие темы для WordPress внедряют поддержку таких плагинов, как , а начиная с темы Twenty Fourteen, некоторые авторы последовали примеру стандартной темы и стали выполнять пагинацию с помощью встроенной функции ядра paginate_links .
Использование этой функции часто требует и иногда включает логику для работы с постоянными ссылками модуля WP_Rewrite, данными о запросе WP_Query и прочее. Начиная с WordPress версии 4.1 разработчики ядра обернули эту логику в одну простую функцию.
the_posts_pagination()
Функция the_posts_pagination() вставляет блок пагинации в тему WordPress:
В качестве единственного параметра функция the_posts_pagination() принимает массив, который передается в функцию paginate_links() . Это значит, что весь функционал который мы ранее выполняли с помощью paginate_links() , также легко реализовать и с помощью новой упрощенной функции the_posts_pagination() .
Например, можно добавить символ № перед каждым номером страницы:
The_posts_pagination(array("before_page_number" => "№",));
По умолчанию the_posts_pagination() отображает первую и последнюю страницу, а также по одной странице вокруг текущей. Все остальные заменяются многоточием. Это поведение можно изменить с помощью аргументов:
- show_all — показывать все страницы
- end_size — количество страниц в начале и конце списка
- mid_size — количество страниц слева и справа от текущей страницы
Например:
The_posts_pagination(array("end_size" => 2, "mid_size" => 2,));
Данный код будет отображать первую, вторую, предпоследнюю и последнюю страницы, независимо от текущей. А вокруг текущей страницы будет по две страницы с каждой стороны. На примере темы это будет выглядеть следующим образом:
Функция the_posts_pagination() добавляет ряд дополнительных классов к разметке, с помощью которых можно изменять внешний вид каждого элемента пагинации.
the_posts_navigation
Функция the_posts_navigation() является менее привлекательной альтернативой функции the_posts_pagination() . Она выводит лишь ссылки на следующую и предыдущую страницы относительно текущей.
До WordPress 4.1 данные ссылки можно получить с помощью функций get_next_posts_link() и get_previous_posts_link() , которыми на сегодняшний день пользуются большинство авторов тем для WordPress. Начиная с версии 4.1 авторы могут существенно упростить вывод подобных ссылок:
С помощью ключей prev_text и next_text передаваемого массива, можно изменить текст ссылок. По умолчанию используется «Старые записи» и «Новые записи», что подойдет для большинства случаев.
the_post_navigation
Функцию the_post_navigation() можно использовать в шаблоне вывода одной записи. Данная функция отображает ссылки на следующую и предыдущую записи относительно текущей. Она также хорошо подходит для использования в шаблонах прикрепленных файлов.
Аргументами prev_text и next_text можно изменить текст, куда строкой %title можно вставить заголовок следующей или предыдущей статьи:
The_post_navigation(array("next_text" => "Следующая запись: %title", "prev_text" => "Предыдущая запись: %title",));
Заключение
Данные встроенные функции WordPress позволяют существенно уменьшить количество кода в темах, а значения их аргументов по умолчанию подойдут для большинства тем, что позволят их использовать без каких-либо параметров.
Следует отметить, что все три функции выводят результат сразу на экран. Если вы хотите записать результат в переменную, сделать это можно добавив префикс get_ к любой из них, например get_the_posts_pagination() .
Напоминаем, что WordPress версии 4.1 выйдет в декабре 2014 года вместе с новой стандартной темой Twenty Fifteen.
Приветствую вас, уважаемые читатели блога сайт. Сегодня речь пойдет об очень популярном плагине 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, а если это не помогает, то очистите кеш браузера.
В этой статье я расскажу, как добавить пагинацию 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 делает сайт более интерактивным. С ее помощью посетители могут самостоятельно выбирать, на какие страницы переходить. Это одно из тех дополнений, которое может внести любой разработчик. При этом оно существенно улучшает опыт взаимодействия пользователей.
