Постраничная навигация в wordpress с плагином WP-PageNavi и без плагина с помощью кода! Легко!

На вашем блоге уже 5, 10, 20 статей. И с каждым днем их становиться все больше и больше. И все они выводятся анонсами на главной. Читатель заходит на ваш блог просматривает и читает новые заметки, а главная страница становиться все длиннее и длиннее.

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

И для удобства наших читателей существует постраничная навигация. В этой статье вы узнаете:

1. О постраничной навигации wordpress и для чего она необходима.
2. О важности постраничной навигации для блога.
3. Рассмотрим вариант постраничной навигации, установив плагин.
4. Разберем вариант постраничной навигации без плагина.
5. Как закрыть от индексации страницы page wordpress.

Что такое навигация и зачем она нужна на блоге.

Для начала решила узнать историю слова НАВИГАЦИЯ. Слово произошло от латинского navigo, что в переводе значит хождение по морю. И исторически слово навигация связано с мореплаванием. Синонимами являются в основном «морские слова»(мореплавание, мореходство, судовождение, судоходство, кораблевождение).

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

По другому слово НАВИГАЦИЯ это путь, маршрут, перемещение. Постраничная навигация wordpress это путь от одной страницы до другой. Конечно же уже из вступления понятно, что удобно просматривать страницы с небольшим количеством анонсов, максимум 10.

Настроить количество записей на странице можно в Панели администратора в разделе Настройки — в пункте Чтение

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

И внизу страницы мы увидим ссылку на предыдущую страницу со следующими пятью анонсами.

если перейдем по ссылке, то увидим следующее

Может встретиться и такой вариант

Это и есть постраничная навигация wordpress, т. е. ссылки на следующие или предыдущие 5 постов. И выводиться постраничная навигация внизу под анонсами.

Почему постраничная навигация важна для блога?

Но такая навигация неудобна. Читателю необходимо каждый раз нажимать Раньше или Следующая страница, чтобы просмотреть все ваши страницы. А захочет он вернуться на какую-нибудь (именно на какую-нибудь, ведь нет нумерации страниц) «заблудиться» и уйдет с сайта.

А если у вас уже 100, 200, 300 статей, то сколько у вас выходит страниц. Как читатель узнает сколько на вашем блоге таких страниц. Повторюсь читатели ленивые и нетерпеливые, не найдут правильный путь, зато быстро найдут ВЫХОД.

Ответ простой — на блоге все должно быть прекрасно: и контент, и внешний вид(по одежке встречают), и главное УДОБСТВО для посетителя. И все это улучшает поведенческие факторы. Для настройки постраничной навигации рассмотрим два варианта: с применением плагина и вставка кода в файлы шаблона.

Вариант постраничной навигации с плагином.

ВАЖНО!!!! Перед тем как устанавливать плагин или изменять коды обязательно сделайте бэкап сайта.

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

Заходим в Панель администратора — раздел Плагины — Добавить новый.

В окно поиска вводим название плагина WP-PageNavi и нажимаем Поиск.

В результатах поиска находим наш плагин (он первый в списке) и нажимаем Установить.

На следующей страницы нажимаем Активировать плагин.

Все плагин установлен и активирован и в разделе Настройки появился пункт Список страниц

Но не торопитесь с настройками. Прежде нужно вставить необходимый код плагина в файлы шаблона.

Шаг 2 Установка функции

Заходим в раздел Внешний вид — Редактор

Открываем index.php

И ищем такие строчки

или

или

т. е. ищем слова «вперед», «назад», «следующая», «предыдущая» и вместо этого кода вставляем такой код:

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

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

А теперь нужно повторить эту операцию несколько раз в файлах Архивы(archive.php), Результаты поиска (search.php), Шаблон рубрик (category.php), если такие файлы есть в вашей теме. Проверьте страницы вывода рубрик, архива, поиска. На них также должна появиться постраничная навигация.

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

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

Дальнейшие настройки можно оставить без изменения.

Я в настройках поля 1,4,5 оставлю пустыми и в итоге остается так:(лично мне так больше нравиться)

Шаг 4 Меняем стили.

Если вы знаете немного CSS, то можно сделать стили под ваш дизайн. Я покажу как это сделать. Зайдите в раздел Плагины — Редактор в окне выберите плагин wp-pagenavi

и в списке файлов находим и открываем документ pagenavi-css.css кода в нем немного.

Мы поменяем только цвет рамки вокруг нумерации.

и в итоге получим так:

В стилях можно и более глубже изменить оформление: добавить фон(background), рамку с закругленными углами(border-radius) и т.д. Если вы не поняли как сделать постраничную навигацию при помощи плагина, то посмотрите это видео:

Вариант постраничной навигации без плагина.

Чтобы сделать навигацию без плагина необходимо вставить код в файл functions.php и небольшой код в файлы: index.php, archive.php, search.php, category.php, и стили в файл style.css.

!!! Перед тем как изменять файлы темы обязательно сделайте бэкап сайта.

!!! Если установлен плагин WP-PageNavi, то его нужно деактивировать.

Шаг 1

Заходим в раздел Внешний вид — Редактор. Открываем файл 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 '

'; }

Сохраняем изменения.

Шаг 2

Открываем файл index.php и ищем строки:

или

или строчку функции от плагина

и вместо них вставляем такой код:

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

Эту операцию нужно повторить в файлах archive.php, search.php, category.php, также найти строчки где выводиться навигация и поменять на вышестоящий код. Проверьте страницы рубрик, поиска.

Шаг 3

Открываем файл style.css и вставляем в самый конец код стилей(взят из плагина wp-pagenavi):

.wp-pagenavi {
clear: both;
}
.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #000;
}
.wp-pagenavi span.current {
font-weight: bold;
}

В итоге получаем так:

Для примера предлагаю свой вариант стилей:

/*постраничная навигация*/
.wp-pagenavi {
height: 50px;
clear: both;
font: bold 14px Verdana,sans-serif;
color:#BB7B00;
}
.wp-pagenavi span.pages{
color: #BB7B00;
}
.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
padding: 6px 9px;
margin: 2px;
background:#ffffff;
font: bold 14px Verdana,sans-serif;
color: #85B6C5;
border-radius:5px ;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #BB7B00;
background:#85B6C5;
color:#ffffff;
}
.wp-pagenavi span.current {
color: #f5f5f5;
background:#85B6C5;
padding: 6px 9px;
}

и получается так:

Как закрыть от индексации страницы «page» wordpress.

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

В файл functions.php в самое начало, после /*** ДОБАВЛЯЕМ meta robots noindex,nofollow ДЛЯ СТРАНИЦ ***/ function my_meta_noindex () { if ( is_paged () // Все и любые страницы пагинации ) {echo «„.''.“\n»;} } add_action ('wp_head', 'my_meta_noindex', 3); // добавляем свой noindex,nofollow в head

Сохраняем, обновляем. Для проверки зайдите на любую свою страницу через навигацию, нажмите Ctrl+U и посмотрите на код. На этих страницах должен быть тег

Опять же если вы ни чего не поняли, то предлагаю посмотреть видео:

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

Автор статьи: [urlspan]Юлия Логинова[/urlspan]