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 , который лежит в папке вашего плагина.

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

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

Привет всем!

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

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

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

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

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

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

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

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

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

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

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

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

function wp_corenavi() { global $wp_query, $wp_rewrite; $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 = 0; //1 - выводить текст "Страница N из N", 0 - не выводить $a["mid_size"] = 1; //сколько ссылок показывать слева и справа от текущей $a["end_size"] = 1; //сколько ссылок показывать в начале и в конце $a["prev_text"] = ""; //текст ссылки "Предыдущая страница" $a["next_text"] = ""; //текст ссылки "Следующая страница" if ($max > 1) echo "

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

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

• Строка 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.

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

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

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

/* NAVIGATION */.navigation { float: left; width: auto; margin-left: 216px; margin-top: -2px; font-size: 16px; } .navigation > a { float: left; width: 32px; font-weight: 700; text-align: center; color: #637b93; text-decoration: none; margin-left: 1px; padding-top: 7px; } .navigation > .current { float: left; font-weight: 700; width: 29px; text-align: center; color: #c4c8cc; margin-left: 5px; padding-top: 7px; } .navigation > .prev { float: left; width: 32px; height: 34px; background: url("images/bow_left.png") no-repeat; margin-left: 0; } .navigation > .next { float: left; width: 34px; height: 34px; background: url("images/bow_right.png") no-repeat; margin-left: 14px; } .navigation > .dots { float: left; font-size: 14px; font-weight: 700; width: 32px; text-align: center; color: #c4c8cc; padding-top: 7px; }

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

Когда разместили коды в файлах 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 вполне достаточно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

С уважением, Константин Хмелев!

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

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

Что касается настроек, то здесь их не слишком много. Для начала следует указать названия первой и последней, а также следующей и предыдущей страниц. Эти кнопки будут показаны независимо от того, на какой странице вы находитесь в данный момент. Чтобы кнопки от WP Page Navi появились на блоге, необходимо удалить код стандартной навигации в шаблоне, как я уже писал наиболее вероятно, что он будет находится в шаблоне archive.php или content.php. И вместо кода вставить:

Обычно он начинается с такой строчки —

. Редактировать внешний вид кнопок (основной и фоновый цвет, рамки, шрифты и т.д.) можно через CSS-файл данного плагина pagenavi-css.css, их поддержку можно включить в пункте “Настройки списка страниц ”. Однако это не очень удобно. Поэтому для WP Page Navi был создан так называемый плагин-дополнение под названием WP PageNavi Style . После его установки в меню появятся все нужные опции для редактирования внешнего вида кнопок.

Все вопросы можно задавать в комментариях, если кому-то не ясно по тому или другому пункту. Мы всегда ответим на все вопросы.

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

Вот что это за навигация такая? Ладно, если блог был бы еще молодой, и на нем было бы не так много статей, но что если их уже более 200-300? В таком случае такая вот навигация может запросто отпугнуть многих ваших читателей, ведь никому не хочется нажимать на кнопку «предыдущая запись» до потери пульса, чтобы добраться до нужного материала. К тому же данная надпись выглядит столь незаметно, что ее могут просто не увидеть, что в итоге приведет к уменьшению просмотра страниц на посетителя, и времени проведенному на сайте, а это сейчас очень при раскрутке любого сайта, которые нельзя игнорировать. Итак, если вы все же собрались делать постраничную навигацию, то можете воспользоваться любым способом представленным ниже.

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

Способ 1 . Скачиваем плагин WP-PageNavi здесь и закачиваем его на блог, активируем, переходим в адмике блога в «настройки» «список страниц». Тут нам нужно настроить только один параметр это «количество страниц для показа». Я лично указал 10, чтобы моя навигация была очень видна посетителям. Кстати, если вдруг у вас вся постраничная навигация не влезет в шаблон вашей темы, то есть если она будет выглядеть примерно в таком виде:

то можете просто убавить это число или еще лучше — убрать из настроек плагина надпись «страница» и заменить их стрелочками. Ок, после этого нажимаем сохранить, и наблюдаем, как у нас появилась простая постраничная навигация на блоге. Если этого не произошло, то идем во «внешний вид» « редактор» открываем файл основной шаблон (index.php) и ищем примерно вот такой код: или что-то в этом роде и меняем его на: , сохраняем запись.

Ту же самую операцию проделываем и с файлами archive.php и search.php если хотите, чтобы данная навигация была не только на главной странице, но еще и в отдельных рубриках и при поиске. Гуд, хочу вас предупредить на всякий пожарный, что данный плагин не у всех работает, так что если у вас ничего не получилось, то можете установить себе аналогичный плагин WP-Page Numbers . Если будете его устанавливать, то вам также надо будет вставить специальный код в тех же самых файлах.

Красивые стили-оформления для постраничной навигации плагина WP-PageNavi и WP-Page Numbers.

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

Всего в плагине 20 видов стилей со всеми цветами, которые только есть. Также, если вам вдруг ничего из списка не понравится, то вы можете во вкладке Select StyleSheet поменять настройки с «Existing Styles» на «Custom», перед вами появится редактор, где вы сможете указать нужные вам настройки, цвета и т.д. Если что, вот вам их перевод:

Heading Color - цвет заголовка.

Background Color - цвет заднего фона.

Active / Current Background Color - цвет кнопки при наведении на нее курсора мыши.

Font Size - размер шрифта.

Link Mouse Hover / Active Color - цвет ссылки при наведении на нее курсора мыши.

Link Border Color - цвет границы кнопки с номером страницы.

Link Border Mouse Hover/Active Color - цвет границы, при наведении курсора мыши.

Align Navigation - выравнивание на странице: по центру, по левому или правому краю.

Как сделать постраничную навигацию без плагина WP-PageNavi?

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

Способ 2 . Переходим во «внешний вид» « редактор» и открываем файл функции темы (functions.php) и в самом конце перед тегом?>

function wp_corenavi () {

$pages = "";
$max = $wp_query->max_num_pages;


$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 "

";
if ($total == 1 && $max > 1) $pages = ""."\r\n";

if ($max > 1) echo "

";
}

Кстати, в коде есть некоторые пояснения на русском, так что можете поиграться немного с числами, если вам это нужно. Теперь, как и с плагином WP-PageNavi заходим в файлы: functions.php, index.php и archive.php находим там строчку и после нее или еще несколько строчек, добавляем код

Способ 3 . Данный способ аналогичен второму, но все же код немного отличается. В файле функции темы (functions.php) в самом конце перед тегом?> вставляем вот такой код и сохраняем запись.

function navigation () {
global $wp_query, $wp_rewrite;
$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 = 0; //1 — выводить текст «Страница N из N», 0 — не выводить
$a["mid_size"] = 2; //сколько ссылок показывать слева и справа от текущей
$a["end_size"] = 5; //сколько ссылок показывать в начале и в конце
$a["prev_text"] = "« Предыдущая "; //текст ссылки «Предыдущая страница»
$a["next_text"] = "Следующая »"; //текст ссылки «Следующая страница»
if ($max > 1) echo "

";
if ($total = 1 && $max > 1) $pages = "Страница " . $current . " из " . $max . ""."\r\n";
echo $pages . paginate_links ($a);
if ($max > 1) echo "

";
}

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

.navigator {margin:10px 7px;
background:#fff;
border:1px solid #aaa;
padding:15px;
overflow:hidden;
font-size:13px;
color:#000;}

.navigator a{background: #fff;
border: 1px solid #DDDDDD;
color: #000000;
font-size: 13px;
padding: 10px;
text-decoration: none;}

background:#f1f8f9;
border: 1px solid #C6D2D4;}

.navigator a:hover{background: #fff;
border: 1px solid #111;
color: #0000cc;
font-size: 13px;
padding: 10px;
text-decoration: none;}

.navigator span.pages {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}

.navigator span.current {background: #fff;
border: 1px solid #111;
color: #0000cc;
font-size: 15px;
padding: 10px;
text-decoration: none;}

.navigator span.extend {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}

.str{background: #fff;
border: 1px solid #DDDDDD;
color: #000000;
font-size: 13px;
padding: 10px;
text-decoration: none;}

Способ 4 . В файле функции темы (functions.php) в самом конце перед тегом?> вставляем вот такой код и сохраняем запись.

function my_pagenavi ($pages = "", $range = 2)
{
$showitems = ($range * 2)+1;

global $paged;
if (empty ($paged)) $paged = 1;

if ($pages == "")
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if (!$pages)
{
$pages = 1;
}
}

if (1 != $pages)
{
echo «

»;
if ($paged > 2 && $paged > $range+1 && $showitems < $pages) echo ««";
if ($paged > 1 && $showitems < $pages) echo «‹";

for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&(!($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems))
{
echo ($paged == $i)? «».$i."":"".$i."";
}
}
if ($paged < $pages && $showitems < $pages) echo «›";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo «»";
echo «

»;
}
}

В файлах: functions.php, index.php и archive.php находим там строчку и после нее или еще несколько строчек добавляем код . Теперь заходи в файл таблица стилей (style.css) и как в предыдущем примере вставляем этот код и сохраняем запись.

.pagination {
clear: both;
font-size: 12px;
margin-top: 10px;
text-align: center;
}

.pagination span, .pagination a {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}

.pagination a:hover{
border-color: #000;
}
.pagination .current{
font-weight: bold;
}

Способ 5 . Скачиваем этот файл , берем из него код и вставляем в (functions.php) в самом конце перед тегом?> и сохраняем запись. Если что заранее извиняюсь за неудобства, так как код был слишком большим для публикации. Теперь в файлах: functions.php, index.php и archive.php находим там строчку и после нее или еще несколько строчек добавляем код

Если что, все коды были проверены на работоспособность, так что один из примеров у вас должен работать в любом случае. На этом все, удачи.

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