Добавляем пагинацию на WordPress-сайт

Оглавление (нажмите, чтобы открыть):

Постраничная навигация в WordPress без плагина (альтернатива WP-PageNavi)

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

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

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

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

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

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

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

Плагин постраничной навигации (пагинации) WordPress

В этой статье рассмотрим как сделать постраничную навигацию (пагинацию) для WordPress сайта с помощью плагинов WP-PageNavi и WP Page Numbers.

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

Плагин постраничной навигации WP-PageNavi

Скачать WP-PageNavi. Плагин есть в официальном каталоге плагинов для Вордпресс и доступен для скачивания из консоли.

Сразу после активации можно увидеть работу плагина:

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

У плагина постраничной навигации есть ряд настроек, которые можно найти в разделе «Настройки» — «Список страниц».

Шаблон общего списка страниц позволяет сделать первичное оформление:

В результате получим следующее:

Об элементах оформления писать не буду, как правило, никто их не меняет.

Можно настроить постраничную навигацию так, чтобы она отображалась в виде выпадающего списка:

Вид конечно не совсем привлекательный, но зато все очень компактно.

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

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

Плагин пагинации WP Page Numbers

Скачать Плагин WP Page Numbers. Устанавливаем.

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

Одно из которых оценят те, кто не силен в CSS. А именно — плагин поддерживает 5 стилей оформления панели постраничной навигации WordPress. Так что владелец сайта сможет подобрать необходимое стилистическое оформление, сочетающееся с общими тонами сайта.

Переходим в Настройки – Page numbers.

Выбираем оптимальное оформление:

Делаем перевод основных элементов:

Настраиваем какие элементы постраничной навигации должны быть скрыты и какие будут отображаться на сайте:

Остался последний штрих – добавить код вывода работы плагина.

Как это сделать? Прежде всего, необходимо найти код, который отвечает за вывод стандартной навигации:

Этот код обязательно содержит в себе 2 WordPress функции: previous_post() и next_post().

Вывод панели навигации осуществляется на главной странице, в рубриках, в метках, архивах, поэтому нужно искать этот код в соответствующих файлах:

Настоятельно рекомендую создать резервную копию всех фалов, которые необходимо изменить.

Найденный код необходимо заменить на код, указанный в настройках плагина:

Что делать если такого кода там не оказалось? В некоторых Вордпресс темах эти функции могут быть вынесены в отдельный файл. Для того чтобы их найти, необходимо воспользоваться текстовым редактором, который поддерживает поиск по файлам, например: Notepad++, либо же Dreamweaver, он с этой функцией так же неплохо справляется.

Пагинация на блоге WordPress без плагина

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

Прекрасная возможность избавиться от ещё одного плагина и снизить нагрузку на и без того тяжелый движок WordPress.

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

Стандартные параметры в файле /wp-includes/link-template.php:

$args = array(
‘show_all’ => False, // показаны все страницы участвующие в пагинации
‘end_size’ => 1, // количество страниц на концах
‘mid_size’ => 1, // количество страниц вокруг текущей
‘prev_next’ => True, // выводить ли боковые ссылки «предыдущая/следующая страница».
‘prev_text’ => __(‘« Previous’),
‘next_text’ => __(‘Next »’),
‘add_args’ => False,
‘add_fragment’ => ‘текст’, // Текст который добавиться ко всем ссылкам.
‘screen_reader_text’ => __( ‘Posts navigation’ ),
);

Изменение стандартных параметров с помощью функции :

‘mid_size’ => 2, — количество страниц до и после просматриваемой
‘end_size’ => 2, — количество страниц до и после «точек»
‘prev_text’ => __(‘«’), — анкор ссылки на предыдущую страницу
‘next_text’ => __(‘»’), — анкор ссылки на последующую страницу

Данный код вставляется в место вывода пагинации, в моём случае wp-content/themes/marseo/loop.php

Данная функция выводит в html:

заголовок может быть зарезан через файлы движка wp-includes/link-template.php:

Либо через регулярку:

$nav = get_the_posts_pagination();
$nav = preg_replace(‘

Очень часто авторы блогов закрывают от индексации страницы пагинации и скрывает ссылки с нумерацией атрибутом rel=»nofollow».

Через движок wp-includes/general-template.php:

$pag = get_the_posts_pagination();
$pag = str_replace(‘ echo $pag;

Тем же, кто не закрывает страницы пагинации для индексации и использует их для передачи внутреннего ссылочного веса, функция, которая уникализирует title каждой страницы навигации:

= 2 || $page >= 2 )
echo ‘ | ‘ . sprintf( __( ‘Страница %s’, ‘striped’ ), max( $paged, $page ) );
?>

Данную функцию необходимо добавить в файл header.php перед

Следует ли закрывать страницы пагинации от индексации

В следствие того, что даже Яндекс теперь отображает в вебмастере ссылки с nofollow, смею предложить, что некоторый вес даже по закрытым ссылкам передаётся страницам. Тем самым страницы пагинации имеют хоть небольшую, но всё же значимость, которую могут передать статьям находящимся в разделах с пагинацией. Вес страниц пагинации собирается из количества ссылок, при предложенной мной функции:

  • первая и последняя страница могут иметь довольно большое количество внутренних ссылок (зависит от количества страниц пагинации в разделе)
  • любая другая страница:

2 ссылки при ‘mid_size’ => 2;
4 ссылки при ‘mid_size’ => 3;
и так далее.

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

Алфавитная пагинация поиск по буквам плагин WordPress

Привет ! Сегодня я покажу вам как добавить на свой сайт алфавитную пагинацию. На вашем сайте смогут искать информацию по буквам алфавита. Можно выбрать язык алфавита. Очень простой и полезный плагин !

Установить плагин Alphabetic Pagination вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины — Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Далее, после установки и активации плагина, перейдите на страницу: Настройки — Alphabetic Pagination . Здесь вы сможете настроить плагин.

Implementation, если выбрано Auto, то код пагинации будет встроен на сайт автоматически. Алфавит будет отображаться вверху сайта, под меню.

Display on all lists, показывать пагинацию на всех страницах где есть списки.

Hide/Show pagination if only one post available, показывать или нет пагинацию, если на сайте всего одна запись.

DOM Position, оставьте по умолчанию.

Language selection, здесь можно выбрать язык алфавита.

Обратите внимание ! Если вы хотите вставить пагинацию вручную, в определённое место на вашем сайте, в параметре «Implementation» выберите значение — Custom . После чего вы можете либо выбрать страницу из списка ниже, на которой будет отображаться пагинация, либо скопировать справа шорткод или php код и вставить его в нужное вам место.

Всё готово ! На вашем сайте будет отображаться поиск по буквам алфавита !

Супер плагины WordPress более 500 Смотри Здесь !

Все о WEB программировании

WEB программирование от А до Я

Заказать сайт:

Социальные сети:

Партнеры:

Как настроить пагинацию в WordPress

Доброго времени суток. В одном из разрабатываемых мной проектов понадобилось настроить пагинацию, причем подогнать ее под дизайн сайта. В данной статье я хочу поделиться, как я это реализовал с помощью плагина из репазитория плагинов WordPress. И так, приступим…

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

WP_Query и пагинация на главной странице WordPress

По умолчанию WordPress использует main query для построения и вывода пагинации. Основной объект запроса хранится в
глобальной переменной $wp_query , которая также используется для вывода цикла main query:

При создании своего запроса вы создаете отдельный объект запроса:

И этот запрос выводится через совершенно отдельный цикл:

Но шаблон пагинации, в том числе previous_posts_link() , next_posts_link() , posts_nav_link() , и paginate_links() , основывают свой вывод на запросе main query, $wp_query . Этот основной запрос main query может быть или не быть разбит на страницы. Например, если текущий контекст представляет собой пользовательский шаблон страницы, основной объект $wp_query будет состоять только из одной записи — страницы, ID которой назначен пользовательский шаблон страницы.

Если текущий контекст представляет собой некоторый архивный индекс, запрос $wp_query может состоять из достаточного количества записей, чтобы вызвать разбиение на страницы, что приводит к следующей части проблемы: для основного объекта $wp_query WordPress передает в запрос параметр paged на основе paged URL переменной запроса. При вызове запроса этот параметр paged будет использоваться для определения того, какой набор постраничных постов должен возвращаться. Если нажать на одну из ссылок пагинации и загрузить следующую страницу, пользовательский запрос не сможет узнать, что нумерация страниц изменилась.

Решение

Передача правильного параметра paged в пользовательский запрос

Предполагая, что пользовательский запрос использует массив args:

Нужно будет передать в массив правильный параметр paged . Это можно сделать, вызвав переменную URL-запроса, используемую для определения текущей страницы, с помощью get_query_var() :

Затем можно добавить этот параметр к массиву пользовательских запросов:

Примечание. Если ваша страница является статической главной страницей , обязательно используйте page вместо paged , так как статическая главная страница не работает с paged . Пример кода для статической главной страницы:

Теперь при исполнении пользовательского запроса будет возвращен правильный набор страниц пагинации.

Использование объекта пользовательского запроса для пагинации

Для корректной работы пагинации и правильного вывода ссылок — т.е. ссылки на предыдущую / следующую / страницу относительно пользовательского запроса — необходимо заставить WordPress распознавать пользовательский запрос. Для этого нужен хак: замена основного $wp_query объекта пользовательским объектом запроса $custom_query :

Изменяем основной объект запроса

  1. Бекапим объект основного запроса: $temp_query = $wp_query
  2. Обнуляем объект основного запроса: $wp_query = NULL;
  3. Подменяем пользовательский запрос на объект основного запроса: $wp_query = $custom_query;

Этот «хак» должен быть сделан перед вызовом любых функций пагинации

Сброс объекта основного запроса

После того, как были выведены функции пагинации, сбросим объект основного запроса:

Исправления функции пагинации

Функция previous_posts_link() будет работать в обычном режиме, независимо от пагинации. Она просто определяет текущую страницу, а затем выводит ссылку для page — 1 . Однако для правильного вывода next_posts_link() требуется исправление, потому что next_posts_link() использует параметр max_num_pages :

Как и с другими параметрами запроса, по умолчанию функция будет использовать max_num_pages для основного объекта $wp_query . Для того, чтобы заставить next_posts_link() учитывать объект $custom_query , нам нужно будет передать
функции max_num_pages . Это значение можно получить из объекта $custom_query : $custom_query->max_num_pages :

Собираем все вместе

Ниже приведена базовая конструкция цикла пользовательского запроса с правильно работающими функциями пагинации:

Дополнение: Что насчет query_posts() ?

query_posts() для дополнительных циклов

Если вы используете query_posts() для вывода своего цикла вместо создания экземпляра отдельного объекта для пользовательского запроса через WP_Query() , тогда вы _doing_it_wrong() — делаете это неправильно и столкнетесь с несколькими проблемами (одна из них будет неработающая пагинация). Первым шагом к решению этих проблем будет преобразование неправильного использования query_posts() в надлежащий вызов WP_Query() .

Использование query_posts() для изменения основного цикла

Если вы просто хотите изменить параметры для запроса основного цикла — например, изменить количество записей на странице или исключить категорию — у вас может возникнуть соблазн для использования query_posts() . Но вы все равно не должны это делать. Когда вы используете query_posts() , вы заставляете WordPress заменить основной объект запроса. (WordPress фактически делает второй запрос и перезаписывает $wp_query .) Проблема, однако, заключается в том, что он выполняет эту замену слишком поздно, чтобы обновить пагинацию.

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

Вместо добавления этого кода в файл шаблона категории ( category.php ):

Добавьте следующий код в functions.php :

Вместо добавления этого кода в файл шаблона индекса записей ( home.php ):

Добавьте следующий код в functions.php :

Таким образом, при определении пагинации WordPress будет использовать уже измененный объект $wp_query без необходимости изменения шаблона.

Функции пагинации в WordPress 4.1

Знали ли вы, что частой причиной взлома сайтов на WordPress являются вредоносные темы и плагины? Читайте подробности: Учебное пособие по безопасности WordPress.

Обновление: версия 4.1 вышла 18 декабря.

В WordPress версии 4.1 появятся несколько новых функций для упрощения навигации в темах: the_post_navigation , the_posts_navigation и функция пагинации the_posts_pagination .

Для постраничной навигации многие темы для WordPress внедряют поддержку таких плагинов, как WP-PageNavi, а начиная с темы 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() отображает первую и последнюю страницу, а также по одной странице вокруг текущей. Все остальные заменяются многоточием. Это поведение можно изменить с помощью аргументов:

  • show_all — показывать все страницы
  • end_size — количество страниц в начале и конце списка
  • mid_size — количество страниц слева и справа от текущей страницы

Данный код будет отображать первую, вторую, предпоследнюю и последнюю страницы, независимо от текущей. А вокруг текущей страницы будет по две страницы с каждой стороны. На примере темы Twenty Fifteen это будет выглядеть следующим образом:

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

Заключение

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

Следует отметить, что все три функции выводят результат сразу на экран. Если вы хотите записать результат в переменную, сделать это можно добавив префикс get_ к любой из них, например get_the_posts_pagination() .

Напоминаем, что WordPress версии 4.1 выйдет в декабре 2014 года вместе с новой стандартной темой Twenty Fifteen.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

10 лучших плагинов для постраничной навигации на WordPress

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 файл.

Источник: indexwp.com

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Средний рейтинг: 5 / 5. Количество голосов: 3

Делаем постраничную навигацию для WordPress без плагина и с WP-PageNavi

Продолжаю писать статьи, посвященные навигации сайта на движке WordPress.

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

Материал вышел очень объемный и, пожалуй, самый исчерпывающий в сети.

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

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

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

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

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

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

Делаем без плагина

Сейчас я покажу способ, после которого у вас будет точно такая же постраничная навигация WordPress, как и у меня. Делается все очень просто. Потребуется 2 части кода, которые нужно будет разместить в файлах шаблона, а затем прописать стили, чтобы задать оформление. Приступим!

Вот первая часть кода. Ее необходимо разместить в файле functions.php шаблона оформления.

Я разместил код в самое начало файла после открывающего тега

В данном коде мы можем отрегулировать некоторые параметры:

  • Строка 10 — если изменить значение 0 на 1, то рядом с номерами страниц будет выводиться надпись вида, например «Страница 3 из 45». Можете сделать такой вариант, но я считаю, что в данном случае он не нужен, так как в номерах страниц и так понятно, сколько страниц на сайте. А активная страница выделяется другим цветом;
  • Строки 11 и 12 — слева и справа номера активной страниц должно отображаться определенное количество предыдущих или следующих номеров соответственно. Тут мы выставляем их количество. В данном коде стоит значение 1. Можно поставить 2 или 3. Тут нужно будет немного поэкспериментировать, так как чем больше количество номеров, тем шире будет навигация. Все зависит от ширины шаблона.

Далее необходимо разместить вторую часть кода.

Так как постраничная навигация должна отображаться везде, где выводится список анонсов,то необходиммо данный код разместить во всех файлах, где это происходит:

  • Главная страница — index.php;
  • Страницы рубрик и архивов — category.php и archive.php;
  • Страница поиска — search.php.

Кстати, в некоторых шаблонах вывод страниц рубрик и архивов может осуществляться одним файлом. У меня за это отвечает файл archive.php.

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

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

У каждого данный код может быть разным, но его основная начинка будет одинаковой. Вам нужно будет найти код, который будет содержать код с названиями next_posts_link и previous_posts_link.

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

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

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

Далее нужно прописать стили, чтобы навигация имела должное оформления. Даю вам свои стили. Можете их смело разместить в своем файле style.css.

Также необходимо загрузить картинки стрелок перемещения вперед и назад на хостинг в папку images шаблона оформления. Скачайте их отсюда. Для загрузки можете пользоваться стандартным файловым менеджером хостинг провайдера. Я же использую Filezilla.

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

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

Способ без плагина мы разобрали. Уверен на все 100%, если все сделали, как описал выше, то у вас должно все работать на ура. Был еще второй вариант без плагина, но просмотрев его я понял, что по сути это тот же самый вариант, только немного измененный. Поэтому, я перехожу к способу реализации постраничной навигации с помощью плагина.

Плагин WP-PageNavi

Для начала скачиваете плагин с официальной страницы и устанавливаете его на сайт.

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

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

Теперь плагин будет выполнять свою задачу и номера страниц будут иметь следующее оформление.

С одной стороны оформление не ахти, а с другой очень даже ничего, так как не мозолит глаза. Пользователи любят простоту! Поэтому, можно все так и оставить. Если же хотите чего-то более красочного, то сейчас мы с вами рассмотрим некоторые варианты. А пока мы обсудим такую вещь, как настройка wp pagenavi. Настройки имеются и о них стоит поговорить.

Касаемо первого пункта настроек «Шаблоны списка страниц», то в нем ничего менять не нужно. Нас все устраивает. Мы двигаемся к пункту «Настройки списка страниц».

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

  • Использовать стиль — если поставим значение «No», то стили плагина уберутся и номера страниц не будут оформлены;
  • Стиль списка страниц — кроме обычного списка номеров страниц мы можем выбрать вариант выпадающего списка;
  • Всегда показывать список страниц- настройку не включаем. Нужно, чтобы список отображался только там, где это необходимо;
  • Количество страниц для показа — отвечает за количество выводимых номеров страницы в начале списка. По умолчанию, значение стоит 5 и на скриншотах выше вы можете посмотреть, что именно 5 страниц выводятся;
  • Диапазон страниц для показа — если на вашем сайте очень много страниц, то данная функция будет крайне полезна. Она будет выводить номера страниц после основного списка со значениями 10, 20, 30, 40 и так далее. Интервал между этими значениями определяется следующим параметром;
  • Коэффициент для диапазонов страниц — если выстави значения 5, то диапазон страниц будет иметь вид — 10, 15, 20, 25 и т.д. Если 10, то 10, 20, 30, 40 и так далее. Значения 10 вполне достаточно.

Это все настройки, которые вам нужно выставить в соответствии со своими нуждами. Тут уже каждый по себя отрегулирует.

Идем дальше и рассмотрим варианты, как можно изменить оформление списка номеров страниц в данном плагине.

Самый простой вариант — установка дополнительного плагина, который имеет уже заготовленные стили, а также дает возможность настроить каждый параметр индивидуально. Называется плагин Wp Pagenavi Style .

После его установки в админ-панели WordPress появляется новый пункт.

После перехода в него сразу можем выбрать уже имеющиеся заготовки дизайна.

Если же хотим настроим стили индивидуально, то в первом пункте настроек «Select Stylesheet» выбираем вариант «Custom» и настраиваем параметры всех элементов (границ и их цветов, цветов и размеров шрифтов, цвета ссылок при наведении курсора мышки и так далее).

Переведу вам все параметры.

  • Heading Color — цвет текста «Страница 3 из 45»;
  • Background Color — цвет фона;
  • Active/Current Background color — цвет фона активного номера страницы;
  • Font Size — размер шрифта;
  • Link Color — цвет ссылки;
  • Link Mouse Hover/ Active Hover — цвет ссылки при наведении мышки на номер и при активности номера;
  • Link Border Color — цвет границы;
  • Link Border Mouse Hover/Active Color — цвет границы при наведении курсора мышки и пи активности номера;
  • Align Navigation — расположение навигации (слева, справа, центр).

Значения цветов вы можете искать в интернете или же в программе Photoshop, когда выбираете нужный цвет для заливки.

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

Второй вариант осуществляется с помощью редактирования файла стилей, который расположен в папке с плагином Wp-pagenavi на хостинге — pagenavi-css.css.

Данный файл подключается, когда в настройках плагина активна настройка «Использовать стиль pagenavi-css.css». Поэтому, если мы его отредактируем, то после обновления плагина, все стили заменятся на стандартные. Чтобы каждый раз на заменять данный файл и не прописывать стили заново я рекомендую сделать следующую вещь:

  1. Отредактировать стили в этом файле на свои, придав нужное оформление постраничной навигации;
  2. Отключить настройку «Использовать стиль pagenavi-css.css»;
  3. Разместить эти стили в основном файле стилей шаблона оформления style.css.

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

Итак, друзья. Материал получится очень хорошим, как на меня. Что вы думаете на этот счет? Надеюсь, что вы все сделали. Если что-то не получается, то в комментариях постараюсь помочь. Пишите, не бойтесь! Я также когда-то очень мучился и мне удалось разобраться.

На данной ноте уже хочу поскорей закончить этот пост, так как сил он отнял уйму. Это я и сделаю. Попрощаюсь и пойду отдыхать, а затем уткнусь в написание нового контента.

WP Magazine

Про WordPress на русском языке

Функции пагинации в WordPress 4.1

Обновление: версия 4.1 вышла 18 декабря. Подробное описание в нашей новой статье →

В WordPress версии 4.1 появятся несколько новых функций для упрощения навигации в темах: the_post_navigation , the_posts_navigation и функция пагинации the_posts_pagination .

Для постраничной навигации многие темы для WordPress внедряют поддержку таких плагинов, как WP-PageNavi, а начиная с темы Twenty Fourteen, некоторые авторы последовали примеру стандартной темы и стали выполнять пагинацию с помощью встроенной функции ядра paginate_links .

Использование этой функции часто требует большое количество кода и иногда включает логику для работы с постоянными ссылками модуля WP_Rewrite, данными о запросе WP_Query и прочее. Начиная с WordPress версии 4.1 разработчики ядра обернули эту логику в одну простую функцию.

the_posts_pagination()

Функция the_posts_pagination() вставляет блок пагинации в тему WordPress:

» data-medium-file=»https://wpmag.ru/wp-content/uploads/sites/13/2014/11/twentyfifteen-pagination-wordpress-300×46.png» data-large-file=»https://wpmag.ru/wp-content/uploads/sites/13/2014/11/twentyfifteen-pagination-wordpress.png» src=»https://wpmag-22.cdn.pjtsu.com/wp-content/uploads/sites/13/2014/11/twentyfifteen-pagination-wordpress.png?w=780″ alt=»Пагинация в теме Twenty Fifteen» w />

Пагинация в теме Twenty Fifteen

В качестве единственного параметра функция the_posts_pagination() принимает массив, который передается в функцию paginate_links() . Это значит, что весь функционал который мы ранее выполняли с помощью paginate_links() , также легко реализовать и с помощью новой упрощенной функции the_posts_pagination() .

Например, можно добавить символ № перед каждым номером страницы:

По умолчанию the_posts_pagination() отображает первую и последнюю страницу, а также по одной странице вокруг текущей. Все остальные заменяются многоточием. Это поведение можно изменить с помощью аргументов:

  • show_all — показывать все страницы
  • end_size — количество страниц в начале и конце списка
  • mid_size — количество страниц слева и справа от текущей страницы

Данный код будет отображать первую, вторую, предпоследнюю и последнюю страницы, независимо от текущей. А вокруг текущей страницы будет по две страницы с каждой стороны. На примере темы Twenty Fifteen это будет выглядеть следующим образом:

» data-medium-file=»https://wpmag.ru/wp-content/uploads/sites/13/2014/11/twentyfifteen-pagination-300×50.png» data-large-file=»https://wpmag.ru/wp-content/uploads/sites/13/2014/11/twentyfifteen-pagination.png» src=»https://wpmag-22.cdn.pjtsu.com/wp-content/uploads/sites/13/2014/11/twentyfifteen-pagination.png?w=780″ alt=»Пагинация в теме Twenty Fifteen» w />

Пагинация в теме Twenty Fifteen

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

Заключение

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

Следует отметить, что все три функции выводят результат сразу на экран. Если вы хотите записать результат в переменную, сделать это можно добавив префикс get_ к любой из них, например get_the_posts_pagination() .

Напоминаем, что WordPress версии 4.1 выйдет в декабре 2014 года вместе с новой стандартной темой Twenty Fifteen.

Мастер Йода рекомендует:  Linux Foundation запустила платформу Acumos AI Project
Добавить комментарий