Постраничная навигация WordPress — три полезных плагина.

Здравствуйте, читатели блога сайт! Стандартная постраничная навигация 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 — всегда показывать навигацию, даже если содержание статьи не разбито на страницы.

Flector 5

Обновлено:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

< ?php next_posts_link(__("« Предыдущие записи", "kubrick")) ?>

< ?php previous_posts_link(__("Следующие записи »", "kubrick")) ?>

Замените их на:

< ?php if(function_exists("wp_pagenavi")) { wp_pagenavi(); } ?>

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

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

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

.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:active { padding: 2px 4px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #0066cc; color: #0066cc; background-color: #FFFFFF; } .wp-pagenavi a:hover { border: 1px solid #114477; color: #114477; background-color: #FFFFFF; } .wp-pagenavi span.pages { padding: 2px 4px 2px 4px; margin: 2px 2px 2px 2px; color: #000000; border: 1px solid #000000; background-color: #FFFFFF; } .wp-pagenavi span.current { padding: 2px 4px 2px 4px; margin: 2px; font-weight: bold; border: 1px solid #000000; color: #000000; background-color: #FFFFFF; } .wp-pagenavi span.extend { padding: 2px 4px 2px 4px; margin: 2px; border: 1px solid #000000; color: #000000; background-color: #FFFFFF; }

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

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

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

1 – WP Page Navi

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.

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

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

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

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

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

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

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

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

function wp_corenavi() { global $wp_query; $pages = ""; $max = $wp_query->max_num_pages; if (!$current = get_query_var("paged")) $current = 1; $a["base"] = str_replace(999999999, "%#%", get_pagenum_link(999999999)); $a["total"] = $max; $a["current"] = $current; $total = 1; //1 - выводить текст "Страница N из N", 0 - не выводить $a["mid_size"] = 3; //сколько ссылок показывать слева и справа от текущей $a["end_size"] = 1; //сколько ссылок показывать в начале и в конце $a["prev_text"] = "«"; //текст ссылки "Предыдущая страница" $a["next_text"] = "»"; //текст ссылки "Следующая страница" if ($max > 1) echo "

"; }

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

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

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

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

Проверял данную функцию на версиях WordPress, начиная с 2.3.3, а также тестировал варианты с включенным и отключенным ЧПУ. Все работает, как и полагается.

Пользуйтесь.

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