Блог Андрея Юрченко

Авторский блог с полезными статьями по темам: создание сайта, заработок на сайте, заработок в интернете, работа на дому, работа в интернете, инфобизнес

Постраничная навигация WordPress

Привет друзья! В этой статье хочу поговорить о постраничной навигации или пагинации, для чего она нужна на сайте и нужна ли вообще. Многие начинающие блоггеры порой не используют данную функцию, а это не правильно. Давайте же разберемся что это такое и нужно ли использовать навигацию на своем ресурсе.
постраничная навигация, пагинация
Вначале дадим общее определение данной функции:
Постраничная навигация или Пагинация (от лат. pagina — страница) — порядковая нумерация страниц, обозначаемая колонцифрами, располагаемыми внизу, вверху или сбоку страницы.
В Интернете под пагинацией понимают показ ограниченной части информации на одной веб-странице (например, 10 результатов поиска или 20 форумных трэдов). Она повсеместно используется в веб-приложениях для разбиения большого массива данных на страницы и включает в себя навигационный блок для перехода на другие страницы.
Автоматическая пагинация текста с иллюстрациями использует достаточно сложные правила и алгоритмы для определения, где именно может располагаться разрыв страницы (в частности, контроль висячих строк). Семантически общие части контента не должны располагаться на разных страницах.
Когда на вашем блоге есть статьи и на главной странице должны отображаться их анонсы, но представьте себе что этих статей много. Большое количество анонсов приведет к тому, что ваша главная страница будет очень длинной, что довольно не удобно для пользователя и не каждый будет скролить до конца. Вот потому нам и нужна удобная постраничная навигация и все эти анонсы нужно разбить на страницы по несколько штук.
В WordPress уже есть навигация, которая создает страницы, но ее отображение не совсем удобно и не красиво: кнопки «Назад-Вперед» или что-то подобное. Мы же сделаем совершенно другую навигацию, где будут отображаться номера страниц, к примеру как на моем блоге.
Такая функция будет очень удобна вам и вашим посетителям. Так вот мы можем сделать все это двумя способами: при помощи плагина и используя специальный код. Я опишу Вам эти способы, а какой будете использовать выбирайте сами.

Постраничная навигация WordPress с помощью плагина WP-PageNavi

Применение плагина довольно простой и легкий способ реализации пагинации. Но, большое количество плагинов уменьшает скорость загрузки сайта. Для новичков установить плагин — это оптимальный вариант, так как не нужно возиться с кодом.
Для использования плагина необходимо его скачать и установить. Если у Вас возникнут затруднения в этом вопросе, то можете почитать в моей статье «как установить плагин на wordpress», в которой подробно описан весь процесс.
Ну что установили? Теперь необходимо произвести некоторые настройки. «Шаблоны списка страниц» не трогаете, а лишь выполните настройки из пункта «Настройки списка страниц», а именно:
постраничная навигация, пагинация
  • Количество страниц для показа: от 5 до 10, больше не рекомендую.
  • Диапазон страниц для показа: вполне хватит. от 3 до 6
  • Коэффициент для диапазонов страниц: достаточно от 5 до 10.
Далее идем на главную страницу и проверяем работоспособность плагина. Если все нормально идем дальше, если не работает, то нужно вставить код туда где должна отображаться навигация:
<?php get_template_part( ‘pagenav’ ); // Page Navigation (pagenav.php) ?>
Теперь можно придать стиль нашей панели навигации. Для этого установите и активируйте плагин WP-PageNavi Style. Перейдите в настройки плагина и выбирите нужный вам стиль:
постраничная навигация, пагинация
Не забудьте сохранить все изменения. Вот и все, постраничная навигация готова. Все довольно просто, а теперь давайте перейдем ко второму способу.

Постраничная навигация wordpress без плагина

Данный способ тоже довольно прост, но единственное что нужно покопаться в коде и сделать все правильно. Делайте все по порядку и Вас получится. Единственное что нужно сделать, так это перед тем как менять файлы, обязательно сделайте резервные копии. Если у вас пойдет что-то не так, то вы сможете вернуть все на место.
Приступаем к делу. В редакторе откройте файл functions.php и в самом конце перед закрывающимся тегом ?> нужно вставить следующий код:
function navigation() {
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'] = 2; //сколько ссылок показывать слева и справа от текущей
$a['end_size'] = 5; //сколько ссылок показывать в начале и в конце
$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>’;
}
Все команды снабжены комментариями и вы можете изменить значения по своему вкусу. Если что-то будет непонятно- пишите в комментариях к данной статье и я помогу.
Далее идем в файл, который будет отображать нашу навигацию или уже отображает стандартную – обычно это основной шаблон и ищем в нем следующие теги:
next_posts_link(‘Previous’)
previous_posts_link(‘Next’)
Нашли? Весь код будет выглядеть примерно так:
<div>
<?php if(!function_exists(‘wp_pagenavi’)) : ?>
<div><?php next_posts_link(‘Previous’) ?></div>
<div><?php previous_posts_link(‘Next’) ?></div>
<?php else : wp_pagenavi(); endif; ?>
</div>
Искать данный код нужно примерно в следующих файлах: index.php, search.php, archive.php, category.php и др, которые отображают анонсы записей. Так вот все это нужно заменить на:
<div><?php navigation(); ?></div>
Осталось красиво оформить навигацию. Открываем в редакторе файл стилей style.css и вставляем в него, в самый конец, следующий код:
.navigator {margin:10px 7px;
background:#fff;
border:1px solid #aaa;
padding:15px;
overflow:hidden;
font-size:13px;
color:#000;}
.navigator a{background: #fff;
border: 1px solid #DDDDDD;
color: #000000;
font-size: 13px;
padding: 10px;
text-decoration: none;}
.navigator span.pages {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}
.navigator a:hover{background: #fff;
border: 1px solid #111;
color: #0000cc;
font-size: 13px;
padding: 10px;
text-decoration: none;}
.navigator span.pages {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}
.navigator span.current {background: #fff;
border: 1px solid #111;
color: #0000cc;
font-size: 15px;
padding: 10px;
text-decoration: none;}
.navigator span.extend {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}
.str{background: #fff;
border: 1px solid #DDDDDD;
color: #000000;
font-size: 13px;
padding: 10px;
text-decoration: none;}
Все. Сохраняем все изменения и идем на главную страницу любоваться постраничной навигацией. На этом все. Теперь на вашем ресурсе есть удобная и красивая постраничная навигация.
Как Вам статья? Надеюсь была полезна. Если так, то не забудьте поделиться ею с друзьями, понажимав на социальные кнопочки в конце. Ну а если возникнут вопросы, то пишите в комментариях, да просто оставьте свое мнение по теме данной статьи.
С уважением, Андрей Юрченко

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ