Профессиональное обучение
блоггингу от А до Я

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

Постраничная навигация wordpress
Всем привет. В этой крутой статье я расскажу вам о том, как настроить на своем блоге постраничную навигацию с плагином и без плагина. Так же расскажу вам очень крутую штуку. Как правильно закрыть от индексации страницы «page», которые создают дублированный контент и ухудшают раскрутку блога!

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

На вашем блоге уже 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

index.php

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

строчки кода

или

похожая строка

или

Еще похожая строчка

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

1
<div style="text-align:center"><?php wp_pagenavi(); ?></div>

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

1
<?php wp_pagenavi(); ?>

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

навигация по сайту

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

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

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

одинаковые номера

как сделать навигацию на сайте

как сделать навигацию на блоге

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

wp-pagenavi

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

настройка полей

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

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

плагин wp-pagenavi

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

pagenavi-css.css

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

цвет рамки вокруг нумерации

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

нумерация

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

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

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

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

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

навигации без плагина

Шаг 1

Заходим в раздел Внешний вид — Редактор. Открываем файл functions.php и в самом начале сразу после

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// подключаем навигацию 
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'] = '&laquo;'; //Левая типографская кавычка «
$a['next_text'] = '&raquo;'; //Правая типографская кавычка »
 
if ($max > 1) echo '<div>';
if ($total == 1 && $max > 1) $pages = '<span>Страница ' . $current . ' из ' . $max . '</span>'."\r\n";
echo $pages . paginate_links($a);
if ($max > 1) echo '</div>';
}

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

Шаг 2

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

строчки кода

или

похожая строка

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

функция плагина

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

1
<div class="wp-pagenavi"><?php if (function_exists('wp_corenavi')) wp_corenavi(); ?></div>

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

навигация появилась

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

Шаг 3

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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;
}

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

что получилось

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*постраничная навигация*/
.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 в самое начало, после

1
2
3
4
5
6
7
8
/*** ДОБАВЛЯЕМ meta robots noindex,nofollow ДЛЯ СТРАНИЦ ***/
	function my_meta_noindex () {
		if (
			is_paged() // Все и любые страницы пагинации
		) {echo "".'<meta name="robots" content="noindex,nofollow" />'."\n";}
	}
 
add_action('wp_head', 'my_meta_noindex', 3); // добавляем свой noindex,nofollow в head

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

1
<meta name="robots" content="noindex,nofollow" />

noindex

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

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

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


Как заработать продавая баннеры

5 000 000 за 2 года в интернете...

150 000 рублей в месяц с БЛОГа
Этот блог читают уже более 6000 человек
- читай и ТЫ!
комментариев 13
  1. Александр

    Минус один плагин, но если вместо типографических кавычек написать слово далее и назад уже не красиво 🙁

    в 17:53 | Ответить
    • Никита

      Да, есть такое!

      в 16:01 | Ответить
  2. Alexander

    Классная статья. Применил настройки у себя на блоге

    в 14:39 | Ответить
  3. Xstroy

    Спасибо. Сегодня пригодилось [:-))]

    Решил обновить темку на стойблоге, а родной pagenavi кривовато стал. Твой вариант ручками с css идеально подошёл и даже цвета нужные подобраны.

    в 16:54 | Ответить
  4. Александр

    Отличная, понятная и нужная информация! Спасибо! [good]

    в 16:53 | Ответить
  5. Виктор

    Как рас то что я искал [good] Сейчас сделаю себе навигацию

    в 00:54 | Ответить
  6. Елена

    В индексе не могу найти ни одного из трёх кодов? Что делать?

    в 14:52 | Ответить
    • Наталья

      Тоже не могла найти. Потом посмотрела — в моей теме плагин сразу встал как нужно, и без этих настроек.

      в 19:11 | Ответить
  7. AnSummer

    Получилось поставить без плагина, спасибо за видео. Помогло. Хоть и не с первого раза))

    в 05:07 | Ответить
  8. Игорь

    В файл functions.php в самое начало, после

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

    и тут написано после ))) хз

    в 10:59 | Ответить
  9. Александр

    А нужен ли вообще код для закрытия страниц пагинации от индексации? вроде сео плагины неплохо с этим справляются?

    в 00:48 | Ответить
  10. Богдан

    Спасибо!

    Хочу заметить, можно убрать проверку на активность функции удалением куска:

    if (function_exists ('wp_corenavi'))

    Небольшая экономия серверного времени) ;-)

    в 14:03 | Ответить
  11. Юлия Шерина

    В кодах пока не очень разбираюсь. Пожалуй сделаю пока постраничную навигацию плагином. [good]

    в 13:46 | Ответить
Оставить комментарий: (ПРОЧТИ ЭТО!!!)
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]