Плагин WP-PageNavi — удобная навигация по сайту

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". Потому что лично мне такая навигация не нравится:

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

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

<div <div next_posts_link(‘« Раньше’) ?></div> <div previous_posts_link(‘Позже »’) ?></div> </div>

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

Именно на этом этапе у многих пользователей возникают проблемы. Потому что в каждом шаблоне этот код может быть разным. Даже файлы, в которых надо искать этот код от шаблона к шаблону очень сильно отличаются. Поэтому, советую скачать редактор 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.94.0 от 25.05.2021
Совместимость с версией WordPress: 3.2 и выше
Активных установок плагина: 700 000+
Скачать плагин версии 2.94.0 (всего скачено 11 326 693 раза)

WP-PageNavi постраничная навигация WordPress

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

Современная, красивая постраничная навигация для блога WordPress организуется с помощью популярного плагина WP-PageNavi. На официальном сайте wordpress.org данный модуль занимает четвертое место по скачиванию. На момент написания этого поста, его скачали уже 4065194 раз. Как устроена удобная навигация по страницам Вы можете посмотреть у меня на блоге. Если готовы к переменам на своем веб-ресурсе, тогда приступим.

Постраничная навигация WordPress с помощью плагина WP-PageNavi

Как установить и настроить плагин WP-PageNavi

Установить данный модуль можно стандартным путём, через раздел «Плагины» — «Добавить новый», в поле для поиска плагинов вводим его название и нажимаем кнопку искать. Затем, после успешной установки незабываем активировать плагин. В разделе «Параметры» у вас появится пункт Список страниц вот и по ней кликаем. Откроется страница «Настройки плагина», где вам надо всего лишь внести кое какие изменения — ваш текст написания и так далее. Плагин поддерживает русский язык, поэтому в настройках сложностей нет (есть подсказки):

Как видно из скриншота, Вы можете заменить текст на свой или оставить всё как есть. Отметьте -Использовать стиль pagenavi-css.css или нет. Если вам нужно настроить CSS стиль WP-PageNavi сделать это можно в файле плагина. Надо для этого перейдите в раздел «Плагины» — «Редактор», выберете в качестве плагина для изменения WP-PageNavi и найдите в открывшемся списке файл wp-pagenavi/pagenavi-css.css. По настройкам все понятно. Следующий шаг такой.

В вашей теме в файлах index.php, archive.php и search.php , необходимо найти призывы к next_posts_link () и previous_posts_link () и заменить их. В теме TwentyTen, это выглядит так:

Может в других темах выглядеть и так:

Ищите, что то похожее и вам надо заменить эти строчки этим:

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

Плагин WP PageNavi Style добавляет больше цветовых вариантов для Wp-PageNavi

Да, Вы не ошиблись, для того, чтобы можно было воспользоваться готовыми стилями для постраничной навигации WP-PageNavi, надо установить дополнительный плагин WP PageNavi Style от этого же разработчика. Установите таким же образом этот модуль, активируйте его и у вас появится пункт WP PageNavi Style в боковой колонке админки. Нажмите её для настроек и выбора стиля для вашей новой навигации:

Как видно из скриншота, можно выбирать различные красивые панельки и расположение её. Набор стилей плагина:

Какой большой выбор. Если не хотите использовать готовые стили, установите — Custom и настройте стиль по своему:

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

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

Этот код настолько распространен, что на какой блог ставить ссылку не известно. Поэтому обойдемся без неё.

Откройте файл «Функции темы» (functions.php), прокрутите страницу вниз и перед закрывающим тегом ?> вставьте такой код (не забудьте на всякий случай сделать резервную копию, если пойдет, что не так:

Затем, меняем стандартный код вывода во всех файлах, где есть навигация — index.php, category.php, archive.php и так далее. Меняем вместо:

Далее, надо добавить стиль css. Откройте файл вашего шаблона «Таблица стилей» (style.css) и в самый низ вставьте етот код:

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

Плагин WP-PageNavi — удобная навигация по сайту

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

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

WP-PageNavi — удобная постраничная навигация

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

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

Для установки плагина WP-PageNavi войдите в «Админ-панель WordPress» => «Плагины» => «Добавить новый». В поле «Поиск» введите название плагина — «WP-PageNavi», а затем нажмите на кнопку «Поиск плагинов».

В окне «Установить плагины» найдите плагин WP-PageNavi в списке похожих плагинов, а потом нажмите на ссылку «Установить». В следующем окне, после подтверждения разрешения на установку плагина WP-PageNavi, нажмите на ссылку «Активировать плагин».

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

Если постраничная навигация не отображается в вашей теме, то вам будет нужно вставить код в файл «Подвал (footer.php)».

Настройка WP-PageNavi

Для отображения вновь установленной навигации на вашем сайте вам нужно будет войти в «Админ-панель WordPress» => «Внешний вид» => «Редактор». После этого вам нужно открыть файл «Подвал (footer.php)». Копируете или набираете в блокноте этот код:

В файле «Подвал (footer.php)» следует вставить в самом начале файла скопированный код, а затем нажать на кнопку «Обновить файл».

После вставки скопированного кода, файл «Подвал (footer.php)» будет иметь такой вид.

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

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

Для того, чтобы настроить плагин WP-PageNavi нужно войти в «Админ-панель WordPress» => «Параметры» => «Список страниц».

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

Выводы статьи

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

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

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

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

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

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

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

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

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

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

• index.php;
• archive.php;
• search.php;
• category.php.

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

Помимо этих файлов, может быть задействован так же файл style.css , если Вы планируете прописывать собственные стили.

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

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

Главная задача и определенная сложность её выполнения заключается в поиске кода, который нужно заменить. Нам нужно найти вызов

в большинстве современных тем или

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

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

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

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

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

Далее нужно заменить прежний код на следующий:

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

В общем неплохо. Если такой вариант Вас устраивает, можно его оставить и использовать.

А я хочу предложить немного видоизменить эту конструкцию. Для этого откроем файл стилей нашей темы ( style.css ) и вставим собственные стили для навигации:

Если Вы решили применить эти стили, то в настройках плагина отключите штатные стили:

После внесения корректив картинка изменится:

Мне, к примеру, такой вариант нравится больше.

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

Код вставки изображения обычный:

После этого навигация примет следующий окончательный внешний вид:

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

Перейдите в Панель администратора → Настройки → WP-PageNavi .

1. В первой строке Шаблон общего списка страниц формируется начальная часть конструкции, а именно запись, например, « Страница 3 из 5»:

Здесь можно сократить слово « Страница» до « Стр» ., заменить на другое слово или вовсе удалить. Если, к примеру, удалить участок « из %TOTAL_PAGES%» (общее количество страниц), то запись будет иметь вид — « Страница 3» . Но, мне кажется, что самый оптимальный вариант — оставить здесь все по умолчанию.

2. Вторая и третья строки формируют номера страниц. Здесь ничего не нужно менять:

3. Две последующие строки:

выводят надписи ( Начало и Последняя ) в навигационной конструкции, но только в случае, когда количество страниц для показа будет превышать заданное в настройках:

В данном случае я выставил в строке Количество страниц для показа значение 3:

4. В строках Элемент Предыдущая страница и Следующая страница нужно вставить изображение, указывающее направление перехода. По умолчанию — это кавычки. В моем варианте — коды вставки изображений стрелочек:

5. В строках Элемент «Предыдущие» и «Следующие»

проставьте соответствующие символы в зависимости от широты вашей фантазии.

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

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

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

PS. Под занавес хочется задать следующий вопрос:
— А как же быть с отдельными записями? Распространяется ли на них влияние плагина?
— Нет, не распространяется!
Файл типа single.php остается без изменений, хотя в нем тоже есть идентичный код. В конце каждой записи (в зависимости от используемой темы) выводится своеобразная, неплохая навигация, например, такая:

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