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

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

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

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

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

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

В переводе с английского «pagination» или пагинация — это порядковая нумерация страниц. Постраничная навигация разделяет общий текстовый материал сайта на отдельные страницы с порядковой нумерацией (1-2-3).

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

Использование плагинов

Самый простой выход для создания постраничной навигации — установить плагин.

СТАТЬИ ПО ТЕМЕ:

.Htaccess: настройка, установка файла

Как сделать, изменить wordpress главную страницу

Html выделить текст цветом (фон), рамкой

Самый известный WP-PageNavi. У него много установок, он обновляется, совместим с последней версией wordpress.

Обычно постраничную навигацию организуют на главной странице (INDEX.PHP), на вебстраницах архивных материалов (ARCHIVE.PHP), в результатах поиска (SEARCH.PHP). В эти шаблоны нужно вставить код вызова нужной функции.

Найдите в них код вызова функций next_posts_link и previous_posts_link. Они вызывают стандартную навигацию, о ней я писала в начале статьи.

Замените их функцией

.

Пример.

Сохраните изменения в файле. Сделайте настройки плагина: в разделе Параметры:

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

Другой доступный плагин WP-Paginate.

Без плагина, на php

В интернете есть множество кодов, рабочих, как утверждают авторы блогов, где эти коды опубликованы. Но, похоже, что КАЖДЫЙ КОД работает только с определенным шаблоном. Убедилась в этом, перепробовала массу вариантов. И привожу схему постраничной навигации без плагина (с использованием php), сработавшую на двух блогах с разными шаблонами.

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

СОЗДАТЬ документ в программе Блокнот

ВНЕСТИ в этот файл код

СОХРАНИТЬ файл как pagenavi.php (смотрите пример, как это делать).

неправильно неправильно правильно правильно

ПЕРЕМЕСТИТЬ файл pagenavi.php с помощью программы FILEZILLA в папку с вашим шаблоном PUBLIC_HTML — WP-CONTENT — THEMES (более подробно написано вот здесь).

СКОПИРОВАТЬ файл pagenavi.php в папку с вашей темой Wordpress
ЛИБО СКОПИРОВАТЬ через файловый менеджер из аккаунта на хостинге.

Как результат — файл pagenavi.php должен появиться в редакторе вашей темы.

 ВНЕСИТЕ изменения в тех файлах, где вы хотите видеть нумерацию страниц на сайте: index.php (главная страница), archive.php.

ДОБАВЬТЕ КОД, отвечающий за вывод постраничной навигации

НАЙДИТЕ МЕСТО для вставки кода

На открытой странице сайта наведите курсор на линк Предыдущая страница.

Откройте ПРОСМОТРЕТЬ КОД ЭЛЕМЕНТА, определите, что за этот элемент отвечает class more_posts (у меня, у вас может быть другой).

НАЙДИТЕ class more_posts на странице index.php.

ЗАМЕНИТЕ кусок кода между тегами и  на нужный (приведен выше).

И вот что получится Что-то не очень красиво? Конечно, нужно еще и стили для постраничной навигации прописать в файле style.css.

 ВНЕСИТЕ в файл style.css следующий код.

.navigation {clear:both; width:500px; height:auto;text-align:center;
margin:30px 0 30px 50px;padding-top:15px;!important;}
.navigation .right, .navigation .left {width:230px; font-size:18px;
text-align:right;margin:0;!important;}
.navigation .left {text-align:left;!important;}
.navigation a, .navigation a:visited {text-decoration:none;
color:#939186;!important;}
.navigation a:hover {color:#5D5643;text-decoration:none;!important;}
.pagenavi {clear:both;display:block;font-size:14px;margin:0;
padding:7px 0 7px 0;!important;}
.pagenavi a {clear: both;width:auto;font-size:14px;
padding:3px 7px 3px 7px;background-color:#F3EFE6;!important;}
.pagenavi b {clear:both;width:auto;margin:0 6px 0 5px;
text-decoration:none;!important;}

АДАПТИРУЙТЕ его к дизайну своего блога, попробуйте изменить background-color и другие параметры. У меня, вот что получилось, все ссылочки работают.

Заключение

Теперь понятно, как сделать постраничную навигацию на php без плагина, используя плагин wordpress. Постраничная навигация будет видна, если записей на блоге больше, чем отображается на страницах блога (смотрите в настройках чтения). Пример: вы выводите по 6 записей на странице, а всего их 7. Тогда будут отображаться две странички.