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


Содержание материала:

WP-PageNavi

WP-PageNavi это один из самых известных и популярных плагинов для WordPress. Он позволяет легко и просто вывести на сайте постраничную навигацию. Необходимость постраничной навигации не вызывает сомнений – во-первых, пользователям с ней намного удобнее, чем с непонятными ссылками «Раньше» и «Позже», а во-вторых, постраничная навигация помогает в плане SEO – поисковики куда лучше индексируют страницы, если ссылки на них есть на главной странице сайта. Есть несколько подобных плагинов, но WP-PageNavi считается лучшим из них. Собственно, постраничная навигация в WordPress и плагин PageNavi это сейчас практически неразделимые понятия.

Скачиваем плагин по ссылке в конце страницы и устанавливаем его:

1 Распаковываем архив.

2 Копируем папку wp-pagenavi в /wp-content/plugins/.

3 Заходим в админку блога на вкладку «Плагины» и активируем плагин.

Плагин полностью переведен на русский язык. Причем переводчик перестарался, переведя даже название плагина (это противоречит здравому смыслу – кто переводит имена собственные?). Поэтому при активации плагина ищите среди загруженных плагинов не WP-PageNavi, а Список страниц. С настройками та же история – их вы найдете в «Настройках\Список страниц«.

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

Это значения по умолчанию. Они дают примерно такой вид панели:

Если не заполнить какое-либо поле, то в панели оно выведено не будет. Поэтому можно сократить панель до более компактного варианта вроде:

Вторая часть настроек касается самого плагина:

Здесь я должен сделать несколько пояснений. Опция «Использовать стиль pagenavi-css.css» заставляет плагин применять для панели css-стили из файла pagenavi-css.css, который лежит в папке плагина. Если в вашем шаблоне уже прописаны стили для плагина (а это бывает часто, так как WP-PageNavi очень популярен), то вам необходимо снять галку с этой опции. Ведь, как правило, прописанные в теме стили куда лучше стилей плагина по умолчанию.

Диапазоны советую отключить (по умолчанию они включены), поставив везде значение «0». Потому что лично мне такая навигация не нравится:

Но решать, конечно, вам.

С настройками закончили – как вывести панель плагина в шаблоне? Вам необходимо найти в файлах шаблона код, похожий на:

И заменить его на код:

Именно на этом этапе у многих пользователей возникают проблемы. Потому что в каждом шаблоне этот код может быть разным. Даже файлы, в которых надо искать этот код от шаблона к шаблону очень сильно отличаются. Поэтому, советую скачать редактор Notepad++ (он вам нужен в любом случае, так как файлы необходимо сохранять строго в кодировке UTF8 без БОМ) и выполнить в нем поиск по файлах функций next_posts_link и previous_posts_link.

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

Теперь поговорим о стилях оформления панели. Не нравится вид панели по умолчанию? Хотите такую панельку, как на скриншоте в начале этой статьи? Тогда откройте этот файл pagenavi-css.css и скопируйте его содержимое в файл pagenavi-css.css, который лежит в папке вашего плагина.

Есть еще более простой способ стилизовать вашу панельку. Для это вам необходимо установить плагин WP PageNavi Style, в котором вы можете выбрать встроенные стили вроде таких:

Не хотите устанавливать дополнительный плагин? Хорошо, в таком случае вы можете воспользоваться моими подборками стилей для WP-PageNavi:

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

WP-PageNavi
Автор плагина: Lester ‘GaMerZ’ Chan
Рассматриваемая версия: 2.86 от 05.09.2014
Текущая версия: 2.93.1 от 23.10.2020
Совместимость с версией WordPress: 3.2 и выше
Активных установок плагина: 800 000+
Скачать плагин версии 2.93.1 (всего скачено 9 668 355 раз)

Сайт с нуля

Создание сайта. Продвижение сайта. Заработок на сайте.

Настройка WP Pagenavi для новигации в WordPress

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

Как работает плагин wp pagenavi

Многие скажут что вордрпесс обладает стандартными инструментами организации пагинации, зачем же тогда необходимо использовать для этих целей ещё и специальный плагин, которым является wp pagenavi?

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

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

Установка и активация плагина wp-pagenavi

Чтобы воспользоваться плагином wp pagenavi вам первоначально необходимо его скачать. Сделать это всегда можно на сайте wordpress.org. Необходимо зайти на страницу плагина, которая находится по адресу wordpress.org/plugins/wp-pagenavi/, после чего кликнуть по кнопке Download. После этого нужно выбрать место для сохранения архива с плагином на вашем компьютере.

После того как вы скачаете плагин к себе на компьютер его необходимо выгрузить их архива в раздел сайта на хостинге wp-content/plugins/. Сделать это можно получив доступ к нужному вам сайту по ФТП, для этого можно использовать какой-либо ФТП-менеджер.

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

Настройки плагина wp-pagenavi

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

Чтобы попасть в настройки wp pagenavi необходимо зайти в админку сайта, после чего выбрать категорию параметры, а уже в самих параметрах выбрать пункт список страниц. После выполнения этих действий перед вами должно открыться окно Шаблоны списка страниц, в котором и можно выполнить все основные настройки этого плагина.

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

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

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

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

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

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

Это далеко не все настройки, так как имеется ещё лист настроек Настройки списка страниц, который выглядит следующим образом:

Самая первая строка на этой странице настроек Использовать стиль pagenavi-css.css, позволяет включить или же отключить встроенные css стили. В том случае если вы не планируете менять внешний вид плагина при помощи css, тогда вам лучше всего оставить эту галочку на месте.

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

Строка количество страниц для показа отвечает за то количество страниц, которые будут показаны в форме навигации.

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

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

Вот собственно из всё, таким вот образом при помощи плагина wp-pagenavi можно организовать удобную и красивую пагинацию на вашем сайте.

Как настроить пагинацию в WordPress: с плагином и без плагина?

В статье рассмотрим, как добавляется и настраивается пагинация WordPress для удобного поиска информации посетителями.

Постраничная навигация: что это, зачем нужна

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

Бывает двух видов: алфавитная и числовая. Первая – для удобного представления словаря или раздела F.A.Q. Числовая помогает пользователю ориентироваться и находить нужный контент.

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

Делаем алфавитную пагинацию

Вывести информацию по буквам алфавита просто: с помощью Alphabetic Pagination .

1. Перейдите Плагины -> Добавить новый, введите “Alphabetic Pagination” в форму поиска и нажмите клавишу [Enter].
2. Установите и активируйте.
3. Перейдите Настройки – Alphabetic Pagination.

Основные настройки

Implementation – автоматический или ручной вывод алфавита. Если выбрано первое, то разбивка встроится автоматически. Она будет показана под основным меню. Для ручного режима выведется шорткод.

Display on all lists? – выбор мест и разделов вывода алфавитной пагинации.

Hide/Show pagination if only one post available? – показать/скрыть разбивку, если на сайте один пост.

DOM Position? – место вывода. Оставьте по умолчанию.

Language selection? – язык. Выберите “русский”.

Styles – стиль алфавитного блока (горизонтальный, вертикальный, строчные или прописные буквы).

Disable Empty Alphabets? – показать/скрыть разбивку, если нет постов.

4. Установите нужные опции и нажмите кнопку Save Changes.

Если выбрана автоматическая вставка, то главная будет иметь вид:

В другом случае – вывод набора шорткодов для вставки.

5. Добавьте шорткоды в файлы шаблонов.

Вывод числовой пагинации WordPress

Постраничная разбивка есть почти во всех темах WP. Одни используют стандартную, а другие – с технологией AJAX.

Но иногда нужно изменить или создать свой функционал навигации. Есть 2 способа: плагин, кастомная функция.

Плагин

Есть несколько хороших дополнений для решения задачи. Рассмотрим на примере бесплатного WP-PageNavi .

1. Установите и активируйте.
2. В админке перейдите в раздел Настройки -> WP-PageNavi.
3. Сделайте основные настройки (шаблон, количество и диапазон страниц для показа) и нажмите кнопку Сохранить изменения.
4. В шаблонах темы добавьте код:

Если нужно заменить/добавить постраничную навигацию для блога, используйте шаблоны index.php, archive.php, search.php.

Кастомная функция

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

Откройте файл functions.php активной темы и вставьте код:

Измените код под свои нужды (отмечено в комментариях).

Чтобы разбивка отображалась, пропишите PHP-строку в шаблон темы:

Отдельно о пагинации постов

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

Для нового редактора Gutenberg есть блок Разрыв страницы.

С точки зрения SEO, к подстраницам нужно добавлять атрибут каноникал. Тут приходит на помощь All in One SEO Pack . Просто перейдите All in One SEO -> Общие настройки и включите опцию Использовать nofollow для страниц/записей с пагинацией.

Если не работает переход

Обычно в итоге выводится ошибка 404.

Ошибка 404

Это значит, что запрошенная страница сайта не существует. Способы решения:


  • перейдите в админке в раздел Настройки -> Постоянные ссылки и нажмите кнопку Сохранить изменения;
  • очистите кэш на сайте и в браузере;
  • проверьте корректность работы всех активных плагинов;
  • пересмотрите добавленный вручную код на предмет ошибок.

Постраничная навигация для WordPress с помощью плагина WP-PageNavi. WP-PageNavi — постраничная навигация для блога на 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. 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 файл.

Топ-пост этого месяца:  Редактирование изображений в css смешанные техники

Здравствуйте, читатели блога сайт! Стандартная постраничная навигация WordPress сводится лишь к возможности переходить на следующую или возвращаться к предыдущей странице с анонсами статей. Никакой нумерации страниц визуально не видно — это неудобно. Исправить ситуацию можно с помощью плагина WP-PageNavi или его аналога WP Page Numbers. Третий плагин, который я сегодня рассмотрю, Number My Post Pages, позволяет представить информацию одной статьи постранично.

Установка и настройка WP-PageNavi и стилей к нему

2. Распакуйте и загрузите на сервер папку с файлами плагина в директорию wp-content/plugins, используя бесплатный .

3. Активируйте его, в списке плагинов он идет под именем «список страниц».

4. Теперь необходимо заменить стандартный код для постраничной навигации в шаблонах index.php, archive.php и search.php на новый:

От темы к теме вид кода может несколько меняться, поэтому ищите конструкцию, содержащую строчки next_posts_link и previous_posts_link.

Как только замените код, плагин WP-PageNavi начнет работать. Все настройки плагина на русском языке и доступно расписаны, поэтому разобраться с ними не составит труда. Располагаются они в разделе «Плагины» — «список страниц».

Чтобы настроить внешний вид, необходимо отредактировать файл со стилями плагина WP-PageNavi — wp-pagenavi/pagenavi-css.css. Для этого перейдите в раздел «Плагины» — «Редактор», выберете в качестве плагина для изменения WP-PageNavi и найдите списке файл с разрешением.css.

Конечно, чтобы настроить стили постраничной навигации вам необходимо знать хотя бы основы CSS. Чтобы не терять время на его изучение (хотя рано или поздно вам придется изучить как минимум html и css) можно воспользоваться плагином WP PageNavi Style , который предоставляет уже готовые стили на любой вкус.

WP PageNavi Style стандартно, ничего прописывать в теме для него не нужно. Только скачайте последнюю версию с WordPress.org . После активации создается новый одноименный раздел в панели администратора WordPress.

Рассмотрим основные настройки, их немного.

Опция Select StyleSheet позволяет переключится между существующими стилями (existing styles ) и возможностью сформировать их самому (custom ).

Выбор стилей очень большой, даже глаза разбегаются. Особенно красиво выглядят стили на CSS3. Думаю, каждый найдет что-то интересное для себя. После выбора визуального оформления постраничной навигации, задайте ее расположение — Align Navigation : left — слева, rigth — справа и center — по центру.

Теперь рассмотрим, какие опции предоставляет нам раздел Custom.

  • Heading Color — цвет заголовка, не обязательно знать html код цвета, достаточно кликнуть на поле и визуально его выбрать;
  • Background Color — цвет заднего фона;
  • Active / Current Background Color — задней фон кнопки текущей страницы (активной);
  • Font Size — размер шрифта;
  • Link Color — цвет ссылки;
  • Link Mouse Hover / Active Color — цвет ссылки при наведении на нее курсора мыши;
  • Link Border Color — цвет границы кнопки с номером страницы;
  • Link Border Mouse Hover/Active Color — цвет границы, при наведении на кнопку курсора мыши;
  • Align Navigation — выравнивание на странице: по центру, по левому или правому краю.

WP-PageNavi не работает

Сталкивался я и с тем, что плагин WP-PageNavi не работает .

1. Плагин WP-PageNavi не активируется . Скорее всего вы используете особо продвинутую тему, в которой уже используется нумерованная постраничная навигация. Добавьте на блог несколько статей, чтобы увидеть используемую по умолчанию навигацию на блоге. Скорее всего она выполнена в стили используемой темы и менять в ней ничего не надо. Если не понравилась — почистите шаблоны темы от кода постраничной навигации, тогда плагин WP-PageNavi должен активироваться.

2. WP-PageNavi на главной странице работает некорректно — не переключаются страницы, выдаются ошибки или содержание страниц не изменяется. Это опять же связано с используемой темой WordPress.

Откройте на редактирование шаблон index.php и найдите код, который отвечает за вывод записей:

Замените его на следующий код:

Проверьте работоспособность WP-PageNavi.

3. Если и это не помогло, то можно воспользоваться альтернативным плагином — WP Page Numbers .

Плагин WP Page Numbers

Установка плагина WP Page Numbers аналогично рассмотренной выше установки WP-PageNavi, только используется несколько другой код:

Настройки плагина располагаются в разделе «Параметры» — «Page Numbers».

WP Page Numbers предоставляет на выбор 5 стилей оформления постраничной навигации WordPress. Конечно, по сравнению с многообразием стилей WP-PageNavi Style это выглядит скудно, но темы универсальные и прекрасно подойдут для большинства блогов.

Из остальных настроек я только заменил значения «Page» на «Страница», а предлог «of» на «из».

Плагин Number My Post Pages

Последний плагин в моей подборке называется Number My Post Pages и предназначен для создания постраничной навигации внутри одной записи. Он пригодится вам в том случае, если объем материала на странице блога очень велик, и его лучше представить постранично для удобства читателя.

1. Скачайте плагин Number My Post Pages.

2. Распакуйте архив и перекиньте папку с файлами плагина на ftp в директорию wp-content/plugins.

3. Активируйте плагин Number My Post Pages.

4. Добавьте в шаблоны single.php и page.php используемой темы WordPress следующий код:

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

Настройки плагина Number My Post Pages проживают по адресу «Параметры» — «Number Post Pages».

  • Text for Number of Pages — текст для числа страниц.
  • Show the «Text for Number of Pages» — показывать или нет «текст для числа страниц».
  • Number of pages after the current page — число страниц после текущей страницы.
  • Number of pages before the current page — число страниц до текущей.
  • Text for next page — текст кнопки для перехода на следующую страницу.
  • Text for previous page — текст кнопки для перехода на предыдущую страницу.
  • Use default stylesheet — использовать ли стандартную тему.
  • Show Dropdown — так называемый дробдаун, который выводит список всех номеров страниц.
  • Always Show Navigation — всегда показывать навигацию, даже если содержание статьи не разбито на страницы.

Сегодняшний пост будет о том, как сделать постраничную навигацию WordPress сайта при помощи плагина WP-PageNavi.

Итак, у вас уже набралось достаточное количество постов, которые не помещаются на одной странице блога. WordPress автоматически разбивает блог на страницы при превышении числа опубликованных записей, указанного в настройках (Параметры — Чтение — На страницах блога отображать не более *число* записей). По умолчанию большое количество тем WordPress отображают переключение между страницами в таком виде:

Мне кажется, что это не очень удобно, ведь постраничная навигация WordPress намного функциональнее.

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

Заходим в раздел «Плагины — Добавить новый», вводим в поиск название «WP-PageNavi» и жмем «Поиск плагинов».

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

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

Заходим в «Внешний вид — Редактор» и открываем код файла, который отвечает за навигацию между страницами. В большинстве случаев им является файл index.php. Находим в нем участок, отвечающий за вывод навигации. Выглядеть он должен приблизительно так:

Нам нужно удалить эти строчки и вместо них вставить следующий код:

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

Согласитесь, это смотрится лучше, чем две кнопки «Назад» и «Вперед».

Теперь можно зайти в настройки плагина WP-PageNavi и посмотреть, что можно изменить в нем:

  • шаблон общего списка страниц (вы можете заменить текст «Страница 1 из 12» на свой, если вам не нравится стандартный);
  • элемент «Текущая страница» (не нужно изменять);
  • элемент «Страница» (не нужно изменять);
  • элемент «Первая страница» (можете заменить на «В начало» или на другую фразу, которая вам нравится);
  • элемент «Последняя страница» (аналогично с предыдущим пунктом, например, «В конец»);
  • элемент «Предыдущая страница» (можете заменить стандартное « на другой символ, например, на стрелку влево);
  • элемент «Следующая страница» (аналогично с предыдущим пунктом можно заменить » на стрелку вправо);
  • элемент «Предыдущие» (многоточие возле перехода на предыдущую страницу);
  • элемент «Следующие» (многоточие возле перехода на следующую страницу).
  • использовать стиль pagenavi-css.css (будет использоваться стандартный css плагина);
  • стиль списка страниц (вы можете выбрать обычный список или выпадающий);
  • всегда показывать список страниц (включение или отключение постраничной навигации, даже если страницы с записями отсутствуют);
  • количество страниц для показа (число отображаемых страниц в списке);
  • диапазон страниц для показа (в том случае, если у вас очень много страниц на сайте);
  • коэффициент для диапазонов страниц (если он равен 5, то постраничная навигация будет выглядеть так: 5, 10, 15, 20 и т.д.).

Если вы разбираетесь в css, то сможете самостоятельно настроить WP-PageNavi так, как вам захочется.

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

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

После установки этого полезного плагина постраничная навигация будет иметь вид:


Согласитесь, так намного лучше. Причем это только первоначальный вариант. А ведь можно настроить вид постраничной навигации так, чтобы она гармонично вписывалась в вашего сайта. Да и как может быть по другому, если мы говорим про блог вебмастера ?

Как установить и настроить плагин для вывода постраничной навигации PageNavi.

Для начала нужно скачать плагин PageNavi с официального сайта себе на компьютер и распаковать архив. В результате вы получите папку PageNavi с несколькими файлами. Далее настраивает соединение с с помощью ftp-менеджера FileZilla и , в директорию /wp-content/plugins/ .

После чего открываем админ-панель WordPress, заходим во вкладку плагины, находим PageNavi и нажимаем «активировать ».

На этом установка и активация плагина PageNavi завершена. Осталось только прописать в файлах index.php, archive.php и search.php код, который отвечает за вывод постраничной навигации. Для этого откройте файлы с помощью текстового редактора и найдите следующие строки:

После этого постраничная навигация будет выводиться на этих страницах. Но зачастую ее оформление не вписывается в дизайн блога, поэтому ее нужно настроить. Для этого открываем в админке блога «Настройки» и выбираем пункт «Список страниц». Откроется такое окно:

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

Теперь переходим непосредственно к настройке внешнего вида постраничной навигации. Для этого придется отредактировать файл стилей плагина PageNavi — pagenavi-css.css . Откойте его с помощью текстового редактора Notepad++ и внесите необходимые изменения в следующий код:

Можете изменить цвет текста, фона, будет ли изменяться цвет текста после наведения курсора и т. д. После того, как внесете все изменения, сохраните файл и оцените результат. Кстати, значительно облегчит работу плагин FireBug для браузера Firefox.

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

Используя постраничную навигацию, пользователь может сразу переходить на страницу 6 или 8, не переходя последовательно со страницы на страницу. Такая навигация также полезна для SEO, поисковики предпочитают такую навигацию, она позволяет ботам легко переходить по записям на страницах сайта. С помощью бесплатных плагинов WordPress, приведённых в этой статье, вы можете установить постраничную навигацию на ваш веб-сайт.

WP Page Navi – популярный плагин, который позволит посетителям вашего сайта с лёгкостью переходить со страницы на страницу. Он заменит опцию «Старые записи»/«Новые записи» на навигацию с пронумерованными страницами. Плагин не требует больших ресурсов и не влияет на скорость загрузки страниц.

Этот плагин совместим с большинством существующих тем.

  • Требует мало ресурсов.
  • Дружественный к SEO.
  • Очень популярный.

2 – WP Paginate

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

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

Основные моменты и особенности:

  • Использует простую навигацию по страницам.
  • Дружественный к SEO.
  • Удобный для пользователей.

3 – Simple Pagination
Simple Pagination – это плагин, который позволит вам иметь навигацию как по вашим записям, так и по комментариям. Как подсказывает название, этот плагин очень прост в использовании. Вы можете даже подобрать стиль навигации, соответствующий теме вашего блога, с использованием таблиц стилей.

Имеется 6 таблиц стилей для соответствия вашему сайту, а также поддержка двух языков.

Основные моменты и особенности:

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

4 – Page Links Plus

Page Links Plus – плагин, который выполняет функцию добавления навигации в запись. Бывают случаи, когда ваша запись становится такой большой, что вам надо разделить её на части. В таких случаях вам поможет плагин Page Links Plus, который разобьёт вашу запись на страницы, показывая связь между ними, позволяющую посмотреть всю запись целиком.

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

Основные моменты и особенности:

  • Позволяет нумеровать записи и страницы.
  • Имеется опция для просмотра всей записи.
  • Имеется множество настроек.
  • Имеется доступная Pro версия.

5 – Alphabetic Pagination

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

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

Основные моменты и особенности:

  • Имеется навигация по алфавиту.
  • Имеется поддержка торговли.
  • Может быть размещён в любом месте с помощью шорткода.
  • Может показать список пользователей в алфавитном порядке.

6 – Gallery Pagination for WordPress

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

Поддержка CDN поможет вам сделать галереи изображений дружественными для SEO. Имеется также кэширование для того, чтобы увеличить скорость загрузки страницы, а также Ajax, чтобы делать изменения без необходимости перезагрузки страницу.

Основные моменты и особенности:

  • Имеется навигация по галереям изображений.
  • Имеется поддержка CDN.
  • Дружественный к SEO.
  • Имеется кэширование.

7 – Advanced Post Pagination
Плагин Advanced Post Pagination будет осуществлять навигацию по вашим записям. Если ваша запись слишком большая, вы можете с помощью этого плагина разбить её на несколько страниц. Чтобы не запутаться в привычных цифровых кнопках, с помощью этого плагина вы можете поместить на кнопки текст и картинки. Вы можете использовать шорткод для того, чтобы разбивать запись на страницы так, как вам нравится.

Ajax поможет вам перейти к разделу без необходимости перезагрузки всей страницы.

Основные моменты и особенности:

  • Разбиение отдельной записи.
  • Использование текста и картинок на кнопках.
  • Использование шорткодов.
  • Использование Ajax.

8 – WP Smart Pagination
WP Smart Pagination – это удобный способ отображения записей с разделением на страницы, вместе с полем, в которое вы можете ввести номер страницы, что позволит вам моментально оказаться на нужной странице. Это очень полезно, если у вас на сайте много записей, что затрудняет пользователям переход к странице, которая находится очень далеко. В том случае, если у вас в наличии 4000 страниц записей, а пользователь хочет посмотреть 2555 страницу, этот плагин может оказать вам неоценимую услугу.

Основные моменты и особенности:

  • Использует простую навигацию по страницам.
  • Имеется поле для прямого перехода к нужной странице.
  • Соответствие темам.
  • Имеется модификация стилей.

9 – jPages Pagination For WordPress
Это jQuery плагин, вдохновлённый jPages, с помощью которого вы без труда сможете разбить на страницы ваши галереи изображений и комментарии. Это в полной мере отзывчивый плагин, который будет осуществлять навигацию по контенту для всех видов устройств с различными размерами экрана. jPages Pagination For WordPress – небольшой плагин, который позволит легко интегрировать навигацию с jQuery.

Топ-пост этого месяца:  Решение задач на собеседование по React 2

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

Основные моменты и особенности:

  • Используется jQuery.
  • Отзывчивый плагин.
  • Имеется поддержка основными браузерами.
  • Простая интеграция.

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

WordPress.org

Русский

WP-PageNavi

Описание

Want to replace the old ← Older posts | Newer posts → links with some page links?

This plugin provides the wp_pagenavi() template tag which generates fancy pagination links.

Применение

In your theme, you need to find calls to next_posts_link() and previous_posts_link() and replace them.

In the Twentyten theme, it looks like this:

You would replace those two lines with this:

For multipart pages, you would look for code like this:

and replace it with this:

Go to WP-Admin -> Settings -> PageNavi for configuration.

Changing the CSS

If you need to configure the CSS style of WP-PageNavi, you can copy the pagenavi-css.css file from the plugin directory to your theme’s directory and make your modifications there. This way, you won’t lose your changes when you update the plugin.

Alternatively, you can uncheck the «Use pagenavi.css?» option from the settings page and add the styles to your theme’s style.css file directly.

Changing Class Names

There are filters that can be used to change the default class names that are assigned to page navigation elements.

Filters

  • wp_pagenavi_class_pages
  • wp_pagenavi_class_first
  • wp_pagenavi_class_previouspostslink
  • wp_pagenavi_class_extend
  • wp_pagenavi_class_smaller
  • wp_pagenavi_class_page
  • wp_pagenavi_class_current
  • wp_pagenavi_class_larger
  • wp_pagenavi_class_nextpostslink
  • wp_pagenavi_class_last

Пример использования фильтров

Статус создания

Разработка

Благодарности

  • Plugin icon by SimpleIcon from Flaticon

Donations

I spent most of my free time creating, updating, maintaining and supporting these plugins, if you really love my plugins and could spare me a couple of bucks, I will really appreciate it. If not feel free to use it without any obligations.

Скриншоты


  • With Custom Styling
  • Admin — Options Page

Часто задаваемые вопросы

Make sure your host is running PHP 5. The only foolproof way to do this is to add this line to wp-config.php (after the opening tag):

When I go to page 2, I see the same posts as on page 1!

Does PageNavi work with secondary WP_Query instances?

How do I ignore the options page?

If you are running a multi-language plugin, you will probably want to ignore the strings in the options page.

Альтернатива плагину WP-pagenavi (пагинация для WordPress)

C версии 4.1 в WordPress появилась родная аналогичная функция: the_posts_pagination()

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

Если другие плагины сложно представить без возможности их настройки в админ-панели, то wp-pagenavi мне представляется легко. Достаточно один раз настроить навигацию и забыть про нее. И наверное есть те, кто думает так же? Поэтому я решил отказаться от wp-pagenavi и заменить его на свою функцию. Функцию я написал, предварительно изучив код wp-pagenavi, частично код был взят от туда. Все CSS классы wp-pagenavi сохранены и, как следствие, заменить wp-pagenavi на мой вариант совсем не составит труда.

Для замены нужно скопировать нижеследующую функцию в файл шаблона functions.php. Также, нужно скопировать CSS стили wp-pagenavi в ваш файл стилей (обычно это style.css). Перенос стилей носит и полезный характер, потому что больше не будет необходимости подключать файл стилей, а это минус один http запрос.

Настройки описаны прямо в коде и они идентичны настройкам wp-pagenavi, с той лишь разницей, что вместо текста «к последней странице» можно вывести номер последней страницы.

После того, как функция установлена и css стили перенесены, меняем в шаблоне код wp_pagenavi на этот:

Если у вас в коде что-то вроде этого, то нужно поменять все wp_pagenavi на kama_pagenavi :

CSS стили для кода

Выше я уже сказал. что классы CSS совпадают с wp-pagenavi. Для удобства выкладываю тут все CSS правила:

В моем коде присутствуют 4 новых класса: first (в начало), last (в конец), prev (назад), next (вперед).

Неплохую подборку стилей можно взять здесь.

Если навигация выводится 2 раза

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

Обновления

17 декабря 2013
Версия 2.0. Подправил код, убрал лишние, ненужные вызовы функции get_pagenum_link(), за счет чего код стал работать гораздо быстрее, без потери качества.

11 мая 2010
Перенес ссылки назад/вперед, теперь так:
«назад « ** к началу . 11 12 13 14 15 16 17 18 . в конец ** » вперед»

Последний вариант функции наверху.

2 мая 2010

Добавлены ссылки назад/вперед, пример:
« ** к началу «назад . 11 12 13 14 15 16 17 18 . вперед» в конец ** »
Их можно отключить (см. настройки).

  • Убран баг такого типа:
    1 . 2 3 4 5 6 7 8 . 50 или 1 . 21 22 23 24 25 26 27 28 . 29
    То есть, где не нужно убраны тексты «до» и «после» навигации (в данном примере это троеточие).
  • Реверсивная пагинация для WordPress

    Идея реверсивной (обратной) пагинации принадлежит sholo, который высказал её на известном нам форуме — mywordpress.ru. Мне стало интересно посмотреть, как это будет выглядеть и я немного переделал код.

    Этот код основан на старой версии основного кода.

    Делаем постраничную навигацию для 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.

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

    Топ-пост этого месяца:  Как создать структуру сайта с помощью CSS Grid без элементов «div»

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

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

    Постраничная навигация в WordPress с плагином Simple Pagination

    Замечательный плагин Simple Pagination позволяет установить расширенную нумерацию страниц для постов и комментариев на вашем WordPress.

    Это прекрасная альтернатива многим способам для вывода элементов навигации.

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

    Установка плагина

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

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

    Чтобы плагин включился в работу нужно сделать замены участков кода в файлах:

    Примечание : в некоторых темах могут наблюдаться небольшие отличия в плане присутствия именно этих перечисленных мною файлов. Например, в темах, которые я тестировал (Cardio и Inventor), есть файл category.php, а в остальных — нет. В итоге, Вам нужно выбрать файлы, отвечающие за вывод категорий , меток , архивов и страниц поиска .

    Эти файлы расположены в папке вашей активной темы по адресу:
    ваш сайт/wp-content/themes/название активной темы/

    Для внесения изменений лучше использовать текстовой редактор, например, Notepad++.

    Главная задача и определенная сложность её выполнения заключается в поиске кода, который нужно заменить. Нам нужно найти вызов xxxxx_pagination() в большинстве современных тем или next_posts_link() и previous_posts_link() в некоторых более ранних темах и заменить его другим кодом, который предлагается в настройках плагина.

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

    Штатный код вывода навигации может иметь примерно такой вид:

    А в большинстве тем WordPress бывает такой:

    В более ранних темах коды могут выглядеть так:

    Далее нужно заменить прежний код в каждом файле на другой, предлагаемый плагином. Взять его нужно в настройках плагина ( Настройки → Simple Pagination ) :

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

    После загрузки измененных файлов на сервер сайта, на страницах рубрик, меток и архивов появится результат:

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

    Настройки плагина

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

    Help (Помощь)

    Этот раздел мы уже рассмотрели и взяли код.

    Texts for navigation links (Тексты для навигационных ссылок)

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

    В первой строке под названием Pagination Label формируется авангард конструкции. Здесь можно оперировать словом Страницы , сокращать его, удалять, добавлять слова и цифры. Давайте, для примера, вместо слова Страницы (по умолчанию), используя подсказки внизу, вставим в первую строку следующее: Страница %CURRENT_PAGE% из %TOTAL_PAGES% Картинка изменится и станет такой:

    Вторая и третья строки выводят текст либо символ перехода на следующую (предыдущую) страницы:

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

    Очередные две строки формируют ссылки перехода на фланговые страницы В начало и В конец :

    Здесь так же можно заменять символы либо вписывать текст.

    HTML/CSS Advanced Settings (Дополнительные настройки HTML и CSS)

    В первой строке Choose a CSS Style (Выберите стиль CSS) в выпадающем меню представлено шесть вариантов стилей, меняющих облик навигации. Таким образом Вы сможете подобрать стиль, наиболее близкий к цветовой гамме вашего сайта. Но, из шести заявленных у меня почему-то работают только лишь три. Это — Default, Digg и Flickr. Я выбрал стили Flickr и картинка стала такой:

    При необходимости внесения корректив в стили откройте Плагины → Редактор , выберите плагин для изменения (Simple Pagination), найдите соответствующий файл стилей и вносите изменения.

    Вторая строка Simple Pagination CSS file (Файл CSS Simple Pagination). В чекбоксе должна стоять галочка, если Вы не намерены использовать сторонние файлы CSS.

    Очередные две строки оставляем по умолчанию. Код навигации обрамлен тегами div с классом pagination и менять здесь ничего не стоит:

    В этих двух строках все оставляем по умолчанию, то есть — пустое место:

    Posts Advanced Settings (Дополнительные параметры сообщений)

    Always Show Page Navigation (Всегда показывать навигацию на страницах). Здесь галочку ставить не следует ( Показывать навигацию даже если есть только одна страница ), так как при критически малом количестве записей, отражающихся на страницах рубрик, архивов или меток, навигация будет выглядеть некрасиво: Лучше, если элементы навигации будут отсутствовать до того момента, пока количество страниц не увеличится.

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

    Page Range (Диапазон страниц). По умолчанию — 3. Это значение определяет количество ссылок на страницы, которые показываются до и после текущей страницы.

    Page Anchors (Якорные страницы). По умолчанию стоит 0. Если выставить какое-либо значение, например, 2, то две фланговые страницы (в начале и в конце) всегда будут показаны.

    Number Of Larger Page Numbers To Show (Указывается количество страниц, которые будут показаны подряд, а затем с определенным интервалом). Например, 1, 2, 3, 4, 5, 10, 20, 30. Интервал определяет следующий параметр.

    Show Larger Page Numbers In Multiples Of (Интервал показа страниц). Например, если выставить кратность 5, страницы будут показаны в таком порядке: 5, 10, 15.

    Comments Advanced Settings (Дополнительные параметры для навигации в комментариях)

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

    Единственное отличие — в настройках по умолчанию здесь стоит галка в пункте Always Show Page Navigation (Всегда показывать навигацию на страницах).

    После проведения всех настроек не забудьте сохранить изменения.

    На этом позвольте закончить. Материал получился обширный. Спасибо за внимание и терпение.
    До встречи! Пока. Ваш Л.М.

    Как добавить постраничную навигацию на сайт WordPress

    Чтобы добавить постраничную навигацию на сайт WordPress, а вернее, чтобы поменять стандартную навигацию на порядковые кнопки постраничного перемещения, используем плагин WP-pagenavi и еще 5 других плагинов тестированных на 4.9.5.

    От автора

    В добавлении постраничной навигации на сайт любой системы, есть, как плюсы (удобство для посетителя), так и минусы (появляются страницы с повторяющимися заголовками в тегах title). Чтобы добавить постраничную навигацию на сайт WordPress, а вернее, чтобы поменять стандартную навигацию (предыдущая страница – следующая страница) на порядковые кнопки постраничного листания, используем плагин WP-pagenavi.

    Стандартная постраничная навигация WordPress

    Для начала замечу, что вызов функций WP, которые отвечают за показ навигации по сайту, лежат в файлах рабочего шаблона. Поэтому, если вы установили рабочую тему, отличную от стандартной, то вполне может быть, что автор темы уже включил постраничную навигацию в файлы темы и вас она уже есть. Если нет, то стандартно навигация по сайту, это надписи типа: «Предыдущая страница» и «Следующая страница», внизу страницы.

    Функции, которые выводят стандартную навигацию: next_posts_link и previous_posts_link . Запомним их, они нам пригодятся.

    Добавить постраничную навигацию на сайт WordPress поможет плагин WP-pagenavi

    Чтобы изменить постраничную навигацию по блогу и добавить кнопки для выборочного листания, используем плагин WP-pagenavi. Страница плагина: https://wordpress.org/plugins/wp-pagenavi/installation/

    Установить плагин можно тремя стандартными способами:

    1. Из консоли WP, воспользовавшись поиском по имени;
    2. Скачать плагин на его странице WordPress.org (ссылка внизу статьи);
    3. Или скачать плагин на его странице WordPress.org, распаковать архив и «залить» каталог плагина wp-pagenavi в папку /wp-content/plugins/ и активировать плагин из консоли блога.

    Как запустить плагин WP-pagenavi

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

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

    Задача для активации wp-pagenavi, в следующем. Нужно найти в файлах рабочей темы функции next_posts_link и previous_posts_link и строки с ними заменить на:

    Где и как искать функции next_posts_link и previous_posts_link

    Как правило, функции next_posts_link и previous_posts_link можно найти в файлах темы: index, archive, functions . Сделать это можно в Редакторе из консоли блога.

    добавить постраничную навигацию на сайт WordPress

    Если поиск из консоли не приносит быстрых результатов, а попросту вы не видите эти функции, делаем следующее:

    • Через FTP соединение, копируем файлы рабочей темы к себе на компьютер.
    • Открываем все скачанные файлы в текстовом редакторе, например Notepadd++.
    • Далее, используем поиск редактора «Найти во всех файлах» ищем названия наших функций: next_posts_link и previous_posts_link .
    • Найдя их, заменяем на:

    После замены, отредактированный файл заливаем обратно в каталог сайта и проверяем появление кнопок постраничной навигации на сайте.

    Как изменить внешний вид кнопок WP-pagenavi

    • По умолчанию, кнопки палагина с номерами страниц белые/серые. Рамки квадратные. Поменять внешний вид кнопок, можно в файле: pagenavi-css.css. Лежит этот файл в каталоге: wp-content/plugins/wp-pagenavi .

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

    Урок 26 Плагин WP-PageNavi, постраничная навигация, установка и настройка WP-PageNavi

    Всем привет на Prosmo3.ru . Отличное настроение, на улице просто чудесно, я готов зарабатывать миллионы, а вы? Я больше чем уверен, что этот вид заработка создан для меня, я уже чувствую запах денег, и запах этот становится все ближе и ближе. Сейчас вот подумал, когда я буду делать по 500к в месяц, интересно будет почитать эти посты самому, за рюмочкой коньяка, ну а пока надо постоянно работать, постоянно работать над своими сайтами и над собой, не расслабляться ни на минуту, как говорится, расслабляться будем потом!

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

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

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

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

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

    Как видите моя постраничная навигация осуществлена с помощью php кода в самом шаблоне, и выглядит без плагина WP-PageNavi вот так:

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

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

    Чтобы скачать плагин WP-PageNavi, воспользуемся ссылкой установить WP-PageNavi. Как вы помните установка плагина не носит в себе ничего сверхъестественного, если вы забыли то прошу сюда : плагины на WordPress, установка и настройка.

    Отлично, как здорово, что мы работаем с хостингом Beget и там встроенный ftp, нам вообще не надо заморачиваться с установкой различных плагинов, да с самой панели WordPress мы можем легко установить такие плагины, как WP-PageNavi.

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

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

    Элемент «текущая страница» и «страница» плагина WP-PageNavi, оставляйте как есть, там вроде нечего придумывать. В полях «элемент первая страница» и «элемент последняя страница» задается название кнопок, при нажатии которых, вы будете перенесены в начало или конец всех записей.

    В «последнюю страницу» вы можете вставить код вызова всех страниц %TOTAL_PAGES%, в результате вы получите вместо надписи кнопку с общим количеством страниц. Смотрите сами если вам это удобно можете сделать так.

    Ну или можете пофантазировать с различными словами и терминами» и придумать что то нестандартное в постраничной навигации, средствами плагина WP-PageNavi. (Офтоп: не успеваете вовремя, читайте эту статью.)

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

    Переходим к настройке списка страниц плагина WP-PageNavi, галочка использовать стиль pagenavi-css.css , позволит вам задать внешность кнопок, предусмотренную разработчиками плагина.

    Если у вас есть желание изменить оформление на свой вкус, то достаточно зайти в файловый менеджер хостинга Beget и найти файл pagenavi-css.css, в папке с вашей темой, (можете воспользоваться поиском и найти папку WP-PageNavi) и дальше просто поменяйте его на свой вкус, все просто и понятно.

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

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

    Остальное там все понятно, можете оставить как есть, ну а если хотите то поэкспериментируйте и найдите для себя максимально удобный и качественный вариант. Не забудьте сохранить произведенные настройки в плагине WP-PageNavi.

    Команда вывода постраничной навигации плагина WP-PageNavi

    Для того чтобы плагин WP-PageNavi начал правильно работать, вам необходимо вставить код для вывода постраничной навигации. Вставить его надо будет в index.php, а также в Arhive.php и Search.php, для этого в этих файлах вы должны найти код отвечающий за вывод постраничной навигации. Приблизительно он будет находится между таких комментариев:

    Вам необходимо будет скопировать ниже приведенный код и заменить код находящийся в комментариях

    Этот код примечателен тем, что даже если вы удалите плагин постраничной навигации WP-PageNavi, вы сохраните старый вариант вывода постраничной навигации. А вообще вы можете вставить и вот такой короткий код вызова постраничной навигации

    , но при удалении плагина WP-PageNavi вам придется или копировать старый код и вставлять вместо этого кода, или обходиться без постраничной навигации совсем. Надеюсь я достаточно подробно рассказал про постраничную навигацию посредством плагина WP-PageNavi. Хорошего дня и отличного настроения!

    Добавить комментарий