Как сделать постраничную навигацию в WordPress
Вы знаете, что сегодня у нас с вами профессиональный праздник? 4 апреля (4.04) — это всемирный день вебмастеров и интернет-разработчиков. О нескончаемом трафике, высоких позициях и дружелюбии поисковиков молимся святому Исидору Севильскому, покровителю учеников и студентов. В 2003 году он был официально назначен католической церковью также покровителем Интернета как сокровищницы знаний. А 4.04 — это известный код ошибки http 404 Not Found, которая означает, что сервер не смог найти запрашиваемую страницу.
Так что — мои вам поздравления и пожелания удачи в нашем с вами нелегком ремесле.
Отдых оставлю на выходные, а сегодня расскажу, как можно сделать удобную постраничную навигацию на WordPress сайте. По умолчанию в WordPress в конце каждой страницы выводится малопривлекательное «раньше/ позже» или «следующая/предыдущая» (и хорошо, если хотя бы на русском языке), что дает возможность перейти лишь на одну рядом стоящую страницу. Давайте предложим вашим читателям более комфортные условия пребывания и выведем внизу список страниц, как у меня:
Для того, чтобы соорудить такое, существуют разные способы. Мы пойдем наиболее простым и воспользуемся плагином WP-PageNavi.
Скачиваем, устанавливаем как обычно (в меню админки — «Плагины»- «Добавить новый» и загружаем скачанный zip-архив).
Активируем и видим, что ничего не изменилось 🙂 Нужно кое-что добавить в код вашей темы. Идем редактировать файлы темы: «Внешний вид» — «Редактор». Для начала определитесь, на каких именно страницах у вас должен выводиться список страниц. Обычно это главная страница (файл index.php или home.php), страницы рубрик (category.php), архивы (archives.php), страница результатов поиска по сайту (search.php).
Начнем с файла index.php. Открываем его на редактирование и ищем код, отвечающий за навигацию, выглядеть он может примерно так:
<div class="navigation">
<div class="alignleft"><?php echo $next_link; ?></div>
<div class="alignright"><?php echo $prev_link; ?></div>
</div>
Или так:
<div id="nextprevious">
<div class="left"><?php posts_nav_link('','','« previous entries') ?> </div>
<div class="right"><?php posts_nav_link('','next entries »','') ?></div>
</div>
В разных темах может быть по-разному, но везде это что-то, связанное с навигацией — nav, next, previous. Хорошие, добрые разработчики шаблонов даже помечают эти куски специальными комментариями:
перед блоком пишут, например <!-- Prev/Next page navigation -->
, а после — <!--page navi
end
-->
Теперь этот код надо заменить своим. Если боитесь напортачить, прежде чем вносить изменения, сохраните копию файла. Это можно сделать ftp-менеджером (найдите файл, который собираетесь насиловать и скопируйте его себе на компьютер. Если вдруг что-то поломается, вы так же с помощью ftp-менеджера замените испорченный файл на сервере на чистый и непорочный с вашего компьютера).
Так вот. Кусок про навигацию нашли, копию сохранили, перекрестились — и меняем этот кусок на вот такой:
<?php wp_pagenavi(); ?>
На всякий случай: этим действом вы собираетесь удалить навсегда «родную» вордпрессовскую навигацию и заменить ее постраничной навигацией от плагина. Если вы теперь удалите плагин, то навигации у вас не будет. Можно, конечно, заморочиться и прописать в код условие, при котором будет возможность обеих навигаций, но я еще не сталкивалась с ситуацией, когда бы мне это понадобилось. Просто предупреждаю, а то будете меня ругать потом… Сохраняем изменения (надеюсь, ничего не поломалось и восстановление из копии не понадобится) и любуемся результатом.
Напоминаю: мы изменили только файл index.php, поэтому красивая постраничная навигация появилась лишь на главной странице. Если вы перейдете на рубрики или в архивы, там будет та же бяка, что и прежде. Поэтому проворачиваем эту манипуляцию со всеми файлами, в которых есть вывод навигации страниц.
Теперь можно перейти к настройкам самого плагина WP-PageNavi. Они у нас появятся в меню «Параметры» — «Список страниц». Собственно, разжевывать там нечего. Изменяя цифирки на разные лады, вы можете увидеть, как изменяется вид вашей постраничной навигации и выбрать наиболее подходящий.
Май 12th, 2012 at 8:27 дп
Спасибо! Как раз кстати! Все понятно)) Пошла делать)) Если что, загляну)))
[Ответить]
admin Reply:
Май 12th, 2012 at 9:23 дп
Заглядывайте, спрашивайте)
[Ответить]
Май 23rd, 2012 at 1:37 пп
Активировала плагин, стала менять код, вместо сайта выдает ошибку. Поставила обратно родной код, сайт открывается и навигация постраничная. Значит не обязательно было код менять?
[Ответить]
admin Reply:
Май 25th, 2012 at 10:11 дп
Вы поменяли)) У вас стоит код wp-pagenavi.
[Ответить]
Май 28th, 2012 at 2:48 дп
все нашел тут смотрите
меняем
Next Entries на Читать далее…
и
Previous Entries на Предыдущие записи
пример тут applekat.ru
[Ответить]
Декабрь 13th, 2012 at 10:19 пп
А что делать если для главной страницы 2 шаблона? У меня основной шаблон (index.php) и шаблон страницы (page.php). Что-то похожее обнаружила в шаблоне страницы (page.php) » . __( ‘Pages:’, ‘snowsummit’ ), ‘after’ => » ) ); ?> это то, что нужно, или нет?
Заранее спасибо!
[Ответить]
Маргарита Reply:
Декабрь 14th, 2012 at 4:56 дп
Index.php — это основной шаблон страниц, а page.php — это шаблон статичных страниц. Редактируя page.php, вы изменяете только вид статичных страниц.
[Ответить]
Декабрь 13th, 2012 at 10:46 пп
Это все-таки не оно(((( удалила код, ничего не изменилось((((
А если смести такой кусок
» . __( ‘Pages:’, ‘snowsummit’ ), ‘after’ => » ) ); ?>
<?php edit_post_link( __( 'Edit', 'snowsummit' ), '’, » ); ?>
это поможет? Или вообще в том шаблоне ищу?
[Ответить]
Маргарита Reply:
Декабрь 14th, 2012 at 4:57 дп
Не, не то. Ищите в index.php, archive.php, category.php. Я бы помогла, но не вижу ваш сайт.
[Ответить]
Декабрь 14th, 2012 at 12:29 пп
Маргарита, можно я Вам адрес в личку скину? Пока не очень хочется светить недоконца проиндексированный сайт. В файле index.php его точно нет, там вообще строчек 7 всего кода, так что сложно не заметить))Но зато есть строчка и есть отдельный шаблон loop.php, у меня закрадываются подозрения, что именно в этот файл loop и перенаправлены все вопросы, за которые должен у нормальных людей отвечать файл index.php
[Ответить]
Маргарита Reply:
Декабрь 14th, 2012 at 12:39 пп
Да, файл loop в некоторых темах имеется, попробуйте поискать там. Не получится — присылайте на почту адрес, разберемся.
[Ответить]
Декабрь 14th, 2012 at 2:29 пп
Спасибо Вам огромное! Что бы я без Вас делала! Этот сайт — просто библия новичка.
[Ответить]
Июнь 10th, 2013 at 10:18 дп
как сделать постраничную навигацию в одной рубрике?
[Ответить]
Ноябрь 20th, 2013 at 1:05 пп
Здравствуйте!
А не подскажите, как мне найти кусок в этом html коде, чтобы тоже сделать постраничную навигацию, как у Вас. А то я так и не могу разобраться вот мой код
[Ответить]
Маргарита Reply:
Ноябрь 20th, 2013 at 1:12 пп
Не виден код в комментариях, лучше на почту напишите
[Ответить]
Февраль 11th, 2014 at 9:16 пп
Маргарита. Ваш сайт самый лучший. Нигде я еще не встречала информацию доступней чем у Вас. Вот только теперь возникла необходимость в создании страницы с каталогом товаров. Что бы товары делились на категории. Что-то вроде интернет -магазина, но без функции покупки. С небольшим описанием и ценой. Не могли бы Вы написать урок про это. Думаю будет полезна стать не только мне. Заранее спасибо.
[Ответить]
Маргарита Reply:
Февраль 13th, 2014 at 7:33 дп
Если корзина не нужна, для каталогизации товаров можно использовать обычные рубрики и теги, и выводить как любую другую информацию. Но на мой взгляд, проще воспользоваться все-таки плагином интернет-магазина
[Ответить]
Февраль 13th, 2014 at 9:09 пп
Я установила плагин WooCommerce. Возможно воспользоваться Вашими услугами по его настройке?
[Ответить]
Февраль 18th, 2014 at 1:48 пп
Спасибо большое за информацию! Давно хотела установить такую постраничную навигацию. У Вас все понятно и просто. Все получилось! Хотя на одном блоге удалось все сделать очень быстро, а вот на другом было труднее. Перепробовала разные варианты вставки кода, но безуспешно. Потом вставила код из самого плагина, и все получилось! Еще раз спасибо!
[Ответить]
Апрель 9th, 2014 at 6:18 пп
Спасибо за понятное объяснение.Я на своем блоге сменила тему и постраничная навигация пропала, благодаря вашей информации всё восстановила,поискала конечно кусок кода (он значительно отличается от вашего образца), но всё получилось, а то эти newer и older сильно раздражали
[Ответить]
Март 15th, 2015 at 4:45 пп
Делала по вашему уроку. извините. я новичек. не подскажете как исправить ошибку?
Главная отображает нормально.
такого вида: https://file-up.net/big_0b70a962f2f4bfd02720150315145513.jpg
А при переходе к примеру на десятую такая ерунда.
https://file-up.net/big_b4076fafc3f44b451020150315145607.jpg
делала установкой плагина + изменяла код в индексе, рубриках, архивах.
где допустили ошибку или как поправить? спасибо. :huh:
начинается такое с 4-й страницы(.. Первые три нормально.. а потом какое-то съезжание..
[Ответить]
Маргарита Reply:
Март 16th, 2015 at 8:49 дп
Честно говоря, я не знаю. На некоторых страницах дизайн съезжает, но почему- сказать не могу.
[Ответить]