
Совсем недавно вы самостоятельно создали свой блог при помощи программы 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
И ищем такие строчки
или
или
т. е. ищем слова «вперед», «назад», «следующая», «предыдущая» и вместо этого кода вставляем такой код:
Пояснения к коду: функция помещена в блок 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]
Минус один плагин, но если вместо типографических кавычек написать слово далее и назад уже не красиво 🙁
Да, есть такое!
Классная статья. Применил настройки у себя на блоге
Спасибо. Сегодня пригодилось [:-))]
Решил обновить темку на стойблоге, а родной pagenavi кривовато стал. Твой вариант ручками с css идеально подошёл и даже цвета нужные подобраны.
Отличная, понятная и нужная информация! Спасибо! [good]
Как рас то что я искал [good] Сейчас сделаю себе навигацию
В индексе не могу найти ни одного из трёх кодов? Что делать?
Тоже не могла найти. Потом посмотрела — в моей теме плагин сразу встал как нужно, и без этих настроек.
Получилось поставить без плагина, спасибо за видео. Помогло. Хоть и не с первого раза))
В файл functions.php в самое начало, после
и после чего вставлять то ? )) короче не пашет что то у меня закрыть от индексации, куда не вставляю не работает
и тут написано после ))) хз
А нужен ли вообще код для закрытия страниц пагинации от индексации? вроде сео плагины неплохо с этим справляются?
Спасибо!
Хочу заметить, можно убрать проверку на активность функции удалением куска:
if (function_exists ('wp_corenavi'))
Небольшая экономия серверного времени) 😉
В кодах пока не очень разбираюсь. Пожалуй сделаю пока постраничную навигацию плагином. [good]
Как изменить цвет — цифр-буков ?