WP-PageNavi — постраничная навигация для блога на WordPress — установка, настройка и изменение внешнего вида пагинации. Постраничная навигация WordPress: плагин WP-PageNavi

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

Итак, прежде чем перейти к настройкам навигации необходимо настроить удобный режим чтения ваших постов, которые будут отображаться на странице блога. Для этого переходим в Панель Администрирования — Настройки -Чтение:

и устанавливаем количество отображаемых постов, которые будут отображаться на каждой странице:

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

Когда у Вас на блоге количество постов предположим 10-15 и они занимают не более 2-3 страниц то такая навигация вполне удобна, но когда важ блог регулярно наполняется контентом и количество статей близится к 100 или 200 и все эти посты размещены 5 на каждой странице. То Я думаю не сложно будет подсчитать сколько страниц будет размещено на блоге. При этом чтоб посетителю Вашего блога найти какой либо пост не приходилось пролистывать все страницы блога на WordPress, постраничная навигация должна иметь более удобный и функциональный вид для пользователя:

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

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

Технические настройки

Окрываем Панель администрирования- Настройки -Редактор -открываем файл 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 ‘

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

’;
}

или же вот такой вид:

и заменяем выделенный код на следующий:

После этого проверяем настройки на вашем сайте должно отобразится стандартоное отображение настроек навигации:

Панель навигации

*/
.wp-pagenavi {
height: 50px;
clear: both;

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: 8px 9px;
}

Теперь когда мы подключили стили для отображения в 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

Сохраняемся и проверяем наши настройки. Для этого открываем любую из страниц 2, 3-10 и т.д нажимаем Ctrl+U и в кодировке страницы должен отображаться следующий код:

При этом важно в файле robots.txt не должны закрываться Disallow: /page от индексации. На этом настройки завершены надеюсь Вы разобрались во всех этих кодировках. Если остались вопросы пишите в комментариях, обязательно отвечу. До скорых встреч!

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

Пример такой навигации Вы можете видеть на . Внизу страницы Вы найдете пронумерованные страницы, где, нажав, например, на “3”, Вы попадаете на третью страницу.

К сожалению, в WordPress по умолчанию такой функции нет. Изначально Ваша навигация будет выглядеть примерно так (будет видно, когда количество постов превысит 10):
Да, когда статей на блоге не так много, можно конечно переходить постоянно на “предыдущие записи”. Но, когда их количество перевалит хотя бы за 30, попасть на нужную страницу становится проблематично.

Именно поэтому, большинство блоггеров находит решение в плагинах для WordPress или “сами ручками” редактируют код . Так как этот блог, в первую очередь, рассчитан для новичков, не буду заморачивать Вам голову, покажу на примере плагина.

Плагин носит название WP Page Numbers . Этот плагин является аналогом популярного плагина WP Page Navi , но WP Page Numbers по функционалу мне нравится больше.

Так что, этот плагин нужно ставить обязательно. А какой выбрать, решать Вам. Я рассмотрю пример установки и настройки плагина WP Page Numbers .

Если у Вас в тему (шаблон) блога встроена постраничная навигация, Вам не нужно ставить плагин WP Page Numbers.

Установка и настройка плагина WP Page Numbers

P.s. Так как сине-голубой цвет не особо сочетается с цветовой схемой моего блога, я решил поменять цвета . Расскажу как это делается, может тоже кому-то пригодится.

Заходите в папку плагина wp-content/plugins/wp-page-numbers/название_темы (его Вы выбрали в третьем шаге и название можно посмотреть с левой стороны выбора темы для плагина.)

Находите там изображения и редактируете их в любом графическом редакторе (Adobe Photoshop, Paint и т.п.). И обновляете эти файлы. Вот мой результат:

Также я поменял цвет фона, при наведении. Для этого я открыл файл wp-page-numbers.css, который находится в той же папке, где и изображения. Чтобы поменять цвет, в этом файле нужно найти в моем случае 44-ую строку и поменять значение в #wp_page_numbers li a:hover background:. Я выбрал оранжевый цвет, поставил следующий код цвета: #FAD93E.
Если Вы вдруг не поняли каким образом я нашел эту строку, то настоятельно рекомендую Вам прочитать урок о полезном

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

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

Согласитесь, так намного лучше. Причем это только первоначальный вариант. А ведь можно настроить вид постраничной навигации так, чтобы она гармонично вписывалась в вашего сайта. Да и как может быть по другому, если мы говорим про блог вебмастера ?

Как установить и настроить плагин для вывода постраничной навигации PageNavi.

Для начала нужно скачать плагин PageNavi с официального сайта себе на компьютер и распаковать архив. В результате вы получите папку PageNavi с несколькими файлами. Далее настраивает соединение с с помощью ftp-менеджера FileZilla и , в директорию /wp-content/plugins/ .

После чего открываем админ-панель WordPress, заходим во вкладку плагины, находим PageNavi и нажимаем «активировать ».

На этом установка и активация плагина PageNavi завершена. Осталось только прописать в файлах index.php, archive.php и search.php код, который отвечает за вывод постраничной навигации. Для этого откройте файлы с помощью текстового редактора и найдите следующие строки:

Замените их на:

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

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

Теперь переходим непосредственно к настройке внешнего вида постраничной навигации. Для этого придется отредактировать файл стилей плагина PageNavi — pagenavi-css.css . Откойте его с помощью текстового редактора Notepad++ и внесите необходимые изменения в следующий код:

Можете изменить цвет текста, фона, будет ли изменяться цвет текста после наведения курсора и т. д. После того, как внесете все изменения, сохраните файл и оцените результат. Кстати, значительно облегчит работу плагин FireBug для браузера Firefox.

Сегодняшний пост будет о том, как сделать постраничную навигацию WordPress сайта при помощи плагина WP-PageNavi.

Итак, у вас уже набралось достаточное количество постов, которые не помещаются на одной странице блога. WordPress автоматически разбивает блог на страницы при превышении числа опубликованных записей, указанного в настройках (Параметры - Чтение - На страницах блога отображать не более *число* записей). По умолчанию большое количество тем WordPress отображают переключение между страницами в таком виде:

Мне кажется, что это не очень удобно, ведь постраничная навигация WordPress намного функциональнее.

Итак, чтобы сделать постраничную навигацию WordPress-блога, мы установим плагин WP-PageNavi. Скачать его можно с официального сайта, но мы найдем его через поиск.

Заходим в раздел «Плагины - Добавить новый», вводим в поиск название «WP-PageNavi» и жмем «Поиск плагинов».

Нужный нам плагин для постраничной навигации WordPress будет первым в результатах поиска, жмем «Установить», затем «Активировать плагин».

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

Заходим в «Внешний вид - Редактор» и открываем код файла, который отвечает за навигацию между страницами. В большинстве случаев им является файл index.php. Находим в нем участок, отвечающий за вывод навигации. Выглядеть он должен приблизительно так:

Нам нужно удалить эти строчки и вместо них вставить следующий код:

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

Согласитесь, это смотрится лучше, чем две кнопки «Назад» и «Вперед».

Теперь можно зайти в настройки плагина WP-PageNavi и посмотреть, что можно изменить в нем:

• шаблон общего списка страниц (вы можете заменить текст «Страница 1 из 12» на свой, если вам не нравится стандартный);
• элемент «Текущая страница» (не нужно изменять);
• элемент «Страница» (не нужно изменять);
• элемент «Первая страница» (можете заменить на «В начало» или на другую фразу, которая вам нравится);
• элемент «Последняя страница» (аналогично с предыдущим пунктом, например, «В конец»);
• элемент «Предыдущая страница» (можете заменить стандартное « на другой символ, например, на стрелку влево);
• элемент «Следующая страница» (аналогично с предыдущим пунктом можно заменить » на стрелку вправо);
• элемент «Предыдущие» (многоточие возле перехода на предыдущую страницу);
• элемент «Следующие» (многоточие возле перехода на следующую страницу).

• использовать стиль pagenavi-css.css (будет использоваться стандартный css плагина);
• стиль списка страниц (вы можете выбрать обычный список или выпадающий);
• всегда показывать список страниц (включение или отключение постраничной навигации, даже если страницы с записями отсутствуют);
• количество страниц для показа (число отображаемых страниц в списке);
• диапазон страниц для показа (в том случае, если у вас очень много страниц на сайте);
• коэффициент для диапазонов страниц (если он равен 5, то постраничная навигация будет выглядеть так: 5, 10, 15, 20 и т.д.).

Если вы разбираетесь в css, то сможете самостоятельно настроить WP-PageNavi так, как вам захочется.

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