Получайте секретные материалы проекта на свой E-Mail:

Делаем блог удобнее! Постраничная навигация WordPress

Добрый день, глубокоуважаемые читатели блога SeoKos! В данной статье мне хотелось бы поговорить о том что такое постраничная навигация wordpress блога, для чего она нужна и нужна ли вообще. На написание данной статьи меня подвигло то, что многие начинающие (да и не только) блоггеры не пользуются постраничной навигацией, а это есть грубейшая ошибка! Почему? Читайте далее!Постраничная навигация WordPress

В предыдущей статье (ее можете прочитать здесь) я делал очередной обзор очередного блога, и что я там увидел? Ну думаю Вы поняли, на том блоге не была реализована такая навигация... После чего я решил побродить еще по нескольким сайтам, и увидел примерно следующую картину: из 10 блогов, только у 8 она есть.

Если Вы до сих пор не поняли что это такое, то давайте я расскажу немного подробней. Заранее хочется предупредить, что данная статья будет полезна только тем, у кого блог именно на движке WordPress, а не на каком-то другом. Так вот...

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

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

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

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

Нравится? Самое главное что это очень удобно, как Вам так и Вашему посетителю! Поэтому делать такую интересную и полезную «штуку» обязательно! В данной статье мы разберем два способа реализации постраничной навигации: с помощью плагина WP-PageNavi и без плагина вообще!

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

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

1. Скачиваем плагин WP-PageNavi отсюда.

2. Устанавливаем и активируем его.

3. Переходим в Панель Администратора --> Параметры --> Список страниц

4. И выполняем настройки плагина. Я советую не трогать пункт «Шаблоны списка страниц», а лишь выполнить несколько настроек из пункта «Настройки списка страниц», а именно:

  • Количество страниц для показа: сделать от 5 до 10, больше не рекомендую.
  • Диапазон страниц для показа: сделать от 3 до 6, этого вполне хватит.
  • Коэффициент для диапазонов страниц: сделать от 5 до 10.

WP-PageNavi

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

<?php get_template_part( ‘pagenav’ ); // Page Navigation (pagenav.php) ?>

6. Скачиваем дополнительный плагин WP-PageNavi Style отсюда, который изменит стиль нашей навигации.

7. Устанавливаем и активируем его.

8. Переходим в Панель Администратора --> PageNavi Style

9. И выбираем понравившейся стиль навигации, их тут более 20 вариантов.

WP PageNavi Style

10. После того как выбрали стиль нажмите на кнопку «Save Settings».

11. Если нет стиля, который по душе, можете создать сами. Для этого в строке Select StyleSheet выберите Custom и экспериментируйте.

12. Вот и все, постраничная навигация wordpress готова!

Тяжело? Думаю что нет, Вы справились! На самом деле тут нет ничего сложного, все делается довольно таки легко и просто. А теперь давайте перейдем ко второму способу, постраничная навигация wordpress без плагина.

Постраничная навигация 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>):

<div><?php navigation(); ?></div>

То есть, если у Вас было:

<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>

То следует это все заменить на:

<div><?php navigation(); ?></div>

Искать данный код нужно примерно в следующих файлах: index.php, search.php, archive.php, category.php и др, которые отображают анонсы записей.

После того, как эти файлы распознаны и изменены, нужно красиво оформить навигацию. Для этого следует перейти в файл, который отвечает за стили блога, обычно это 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;}

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

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

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

Всем большое спасибо за внимание! Удачи и до скорого!

И напоследок предлагаю немного отдохнуть и посмеяться:

С уважением, Томский школьник!

Белан Константин Сергеевич

С уважением, Константин Белан.

Рабочая 634570 Россия, Томская обл., г. Томск, +7 952 160 36 17
Сделайте мне приятно - нажмите на любую из кнопок:
Подпишитесь на рассылку блога и получайте новые статьи на свою почту
Количество комментариев к данной статье: 36
  1. Я недавно запилил таки постраничную навигацию без плагина, вроде работает. Я так понял это ты старые статьи переделываешь?

    • Нет, это я новую статью написал, я ранее еще не писал про постраничную навигацию... А так редко пишу, потому что очень занят домашними делами 🙁

      • Ясно, а у меня в последнее время такое чувство что у меня запал постепенно догорает. 🙁

        • Возможно, не правильно выбрал тему в начале 🙂

  2. Ответить

    Без постраничной навигации неудобно. Я не сразу поставил её на блог, а потом нашёл хороший плагинчик. Не помню как называется. Главное — работает!)

  3. C навигацией блог выглядит намного лучше и логичнее!

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

  4. Достаточно удобно и практично. 😉

  5. Ответить

    Спасибо, за статью, Костя. Я давно думала сделать на блоге постраничную навигацию, но плагин ставить не хотела, а код найти не могла. А здесь такой подарок! Теперь искать не нужно, бери и пользуйся. 😛 Ещё раз спасибо, теперь установлю код, и обойдусь без плагинов! Удачи тебе в заготовительных работах! Побыстрее справляйся с ними, и возвращайся к нам! 😛

  6. Спасибо за отличные советы! Обязательно ими воспользуюсь!

  7. Главное, правильно использовать предлагаемые опции!

  8. Ответить

    вот интересно от индексации нужно закрывать постраничную навигацию? а то в индекс попадают ссылки вида домен.ру/страница№

    • Так же интересует этот вопрос, но не видел, чтобы закрывали.

  9. Я считаю, что все-таки лучшей постраничной навигацией будет Paginator) Хотя совсем непопулярен, не знаю почему, кстати 🙂 Даже был признан самым оригинальным, в каком то иностранном источнике 🙂

  10. Ответить

    Я как поставила постраничную навигацию — сама не нарадуюсь, быстро до нужного места, нужной статьи добираюсь.

    А читателям, думаю, ещё удобнее.

  11. Я использую метод без плагина, так намного удобнее и сделать можно стили хоть как и за считанные секунды, очень нравиться мне этот метод.

    • я бы тоже хотел бы без плагина да жаль не выйдет у меня такое…

  12. Ответить

    А ведь как без постраничной навигации было неудобно — попробуй-ка добраться до самой начальной страницы? Сколько раз нужно отматывать страницы назад!

    А как поставила плагин постраничной навигации — удобства — налицо! В один клик попадаешь на любую страницу!

    • а у вас что карты сайта не было?

  13. Очень удобно спасибо.

  14. Константин, спасибо за статью. Всё понятно и доступно написано, теперь мой блог выглядит более привлекательней. Спасибо!

  15. Поставил плагин WP-PageNavi, шаблон EcoBlog 1.2, не нашол куда вставить код — в index.php , пробовал вставлять по порядку не помогло, страницы не отображаются. Что делать?

    • Ответить

      не увидел у вас постраничной навигации.

      • В том то и дело, плагин активный, а навигация не отображается

        • Ответить

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

          • Спасибо, что помог мне тут все разрулить 🙂 а то я сам в больнице нахожусь, не было времени!

            P.S. В статье есть код, который нужно прописывать.

  16. Ответить

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

    У меня в МаксСайте вообще ничего не отображается, если не активировать плагин Pagenation, что, как я считаю, гораздо хуже одиночной ссылки на предыдущие записи.

    P. S. Кто как считает: какой Диапазон количества ссылок является оптимальным?

    «Диапазон количества ссылок — это количество отображаемых ссылок на страницы».

    Заранее спасибо за ответ.

    • мне кажется четыре ну можно и шесть…

  17. у меня она стоит самого начала думаю людям действительно удобней так передвигаться по блогу...

  18. Костя, я установил постраничную навигацию с плагином!) Очень красиво смотрится и очень удобно!))

    Спасибо за рекомендацию))

    • Вот, теперь лучше! :))

  19. Здравствуйте.

    Плагин у меня на сайте, почему-то не отображает постраничную навигацию.

    Я нашла вашу статью-установка постраничной навигации без плагина, но по вашей записи я тоже не смогла установить постр. навигацию.

    Вы даёте коды, которые нужно поместить в шаблоны, а вот в какое место, в этих шаблонах нужно поместить код, вы не указываете. Поэтому у меня и не получилось.

    Если есть возможность, как-то подскажите мне.

    Наталья

  20. Ответить

    Спасибо за интересную и полезную статью!

  21. Как сделать как у вас наверху: «Главная страница » Настройка сайта » Делаем блог удобнее! Постраничная навигация WordPress» ?

  22. Ответить

    Константин спасибо за статью сделал без плагина всё получилось. СПАСИБО.

  23. Ответить

    Спасибо большое! . Очень доходчиво и понятно объяснили, только стили менять не обязательно наверное, если через плагин делать, лишний загруз сайта