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

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

Здравствуйте уважаемые читатели блога history-of-blog.ru. В шестом выпуске Истории блога я порекомендовал установить для поднятия юзабилити блога именно постраничную навигацию в WordPress, причем без плагина. Сейчас я предлагаю рассмотреть:

  • Что такое постраничная навигация, зачем и где она применяется?
  • Как ее установить на блог.

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

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

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

  • Меню – как правило расположено под или над шапкой сайта, а так же может быть замечено около футера (а может и там и там). Верхнее меню навигации считаю обязательным – пользователь стразу его замечает и понимает о чем этот блог, и конечно же может чем-то заинтересоваться.
  • Навигация в сайдбаре – в отличие от меню эта навигация по блогу более развернута. Как правило здесь выводятся все рубрики (У меня пока такой навигации нет по одной просто причине – пока всего две рубрики. Будет больше – обязательно сделаю).
  • Постраничная навигация. Этот вид навигации выведен под статьями на главной странице, в рубриках, архивах и на странице поиска. Выглядит она примерно так:
постраничная навигация
Или вот так:навигация

В принципе от внешнего вида суть такой навигации не меняется, работает она по одинаковому принципу.

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

Раньше я использовал плагин WP Page Navi – в принципе не плохой вариант установки постраничной навигации. Писать о том как установить и настроить этот плагин я не буду, так как предлагаю рассмотреть вариант поинтересней:

На то, как реализовать постраничную навигацию в WordPress без плагина меня натолкнул блог Dimox’a, который опубликовал скрипт ее вывода. Этот скрипт универсален и подойдет любому блогу, для полноты картины останется лишь настроить внешний вид.

Приступим к установке.

Перед тем как начать, сохраните те файлы которые будем редактировать, а еще лучше сделайте резервную копию сайта (бэкап)

Во-первых, если у Вас уже установлена какая-нибудь постраничная навигация, то ее нужно удалить чтобы не возникало конфликтов (и не было стразу две постраничных навигации :))

Затем открываем на редактирование файл 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'] = 3; //сколько ссылок показывать слева и справа от текущей
$a['end_size'] = 1; //сколько ссылок показывать в начале и в конце
$a['prev_text'] = '«'; //текст ссылки "Предыдущая страница"
$a['next_text'] = '»'; //текст ссылки "Следующая страница"

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>';
}

После можно поиграться с 10-14 строками – и подправить отображение навигации как Вы хотите, но для начала нужно настроить отображение.

Итак, функция готова, теперь ее нужно вывести в нужном месте. Код, отвечающий за вывод навигации имеет следующий вид:

<?php if (function_exists('wp_corenavi')) wp_corenavi(); ?>

Вставить его нужно в несколько файлов (там где постраничная навигация будет целесообразна):

  • На главной странице:

В зависимости от темы цикл вывода статей может находится в файлах loop.php (или theloop.php), если таких файлов нет, то в index.php. Находим там строки окончания цикла:


<?php endwhile; ?>
<?php endif; ?>

И вставляем после них выше приведенный код отображения.

  • В архивах и рубриках (archive.php):

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

<?php include (TEMPLATEPATH . '/loop.php'); ?>

Если такой строчки нет, то так же вставляем код после окончания цикла. Если есть, то ничего делать не нужно, так как мы уже задали постраничную навигацию в файле loop.php.

  • На странице результатов поиска (search.php):

Аналогично прошлому пункту.

Ох, перечитываю и становиться страшно за новичков: сколько кодов и сложных вещей! Но на самом деле здесь нет ничего сложного, нужно всего лишь попробовать и все получиться. Если что задавайте вопросы в комментариях или пишите на почту (через страницу контакты).

Внешний вид постраничной навигации на WordPress.

Теперь постраничная навигация установлена и работает, но внешний вид…навигация выглядит не очень

В общем не очень привлекателен, поэтому нам следует это исправить. На сей раз нам потребуется всего один файл: style.css, в конце которого нужно добавить стили для навигации.

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

Активная и наведенная страница

Не активная страница

Подыщите что-нибудь свое, то что подойдет под Ваш дизайн. Сохраните в формате png! Назовите первую картинку krug-act.png, а вторую krug-pass.png  (даже если у Вас квадратные картинки :))

После того как вы нашли картинки загрузите их в папку с картинками Вашей темы, у меня путь до нее выглядит следующим образом:

/history-of-blog.ru/public_html/wp-content/themes/styler/images

Затем открываем style.css и дописываем в самом низу следующее:


.navigation {
 text-align:center; margin:30px 0;
 }
 a.page-numbers {
 background:url(images/krug-pass.png) no-repeat; width:25px; height:25px; display: inline-block; padding:5px 0 0 0; font-weight:bold;
 }
 a:hover.page-numbers{
 background:url(images/krug-act.png) no-repeat; color:#fff; text-decoration:none;
 }
 span.page-numbers.current {
 background:url(images/krug-act.png) no-repeat; color:#fff; width:25px; height:25px; display: inline-block; padding:5px 0 0 0; font-weight:bold;
 }

2 строка: мы выровняли навигацию по центру и добавили отступ сверху и снизу по 30 пикселей.

4 строка: задали стили для ссылок на страницы, а именно: Поставили кружок на задний фон (белый), задали ширину и высоту, сделади текст жирным и добавили внутренний отступ сверху на 5 пикселей.

7 строка: все по аналогии с четвертой, только для выбранной страницы.

11 строка: а здесь прописаны стили, которые должны быть, когда мы наводим на ссылку.

Ну вот и все! Теперь у нас уникальная (если Вы сами подобрали картинки!) навигация по блогу, которой нет ни у кого!

Комментировать через ВКонтакте:
Отзывов к посту "Постраничная навигация в WordPress без плагина" уже 49:
  • Михаил | 11.04.2012 в 7:02

    Спасибо огромное! Сделал буквально за 10 минут хотя совсем не разбираюсь ни в РНР,ни в CSS…

    Только немного кривовато получилось, надо что то в коде поправить.

    Не знаю- внешние ссылки разрешены у вас? Я сделал на сайте http://www.220vdome.ru/

  • Михаил | 11.04.2012 в 12:29

    Что то я свим методом “тыка” не могу код поправить что бы цифры встали ровно по центру…

    Как это сделать?

    • admin | 11.04.2012 в 13:58

      В файле css мы в двух местах прописали padding:5px 0 0 0; почледний 0 это отступ слева – попробуйте заменить на 5px или 7px (число это количество пикселей) и посмотрите на результат

  • Михаил | 11.04.2012 в 14:29

    Спасибо Антон!Все получилось замечательно и ровненько!

    • admin | 11.04.2012 в 14:42

      Не за что, рад что пригодилось

  • Лариса | 13.04.2012 в 21:31

    Антон, а древовидные комментарии можно сделать без плагина?

    • admin | 13.04.2012 в 23:59

      Я вообще не знаю как сделать древовидные комментарии. Такие комментарии как здесь я сделал через код путем проб и ошибок, в общем-то наугад :x – вставлял все подряд пока не добился нужного результата. Так что увы, даже не знаю что подсказать

  • Лариса | 13.04.2012 в 21:45

    Я поставила себе WordPress Thread Comment, а там все на английском, и сам редактор плагина длинный (еще и с иероглифами), даже не знаю, где в нем искать фразы для перевода…

    • admin | 14.04.2012 в 0:07

      Если файлов в плагине много, то это может занять много времени. Знаете как я перевожу нужные фразы в плагине – открываю файл плагина через админку, нажимаю ctrl+f и вставляю английскую фразу (в Вашем случае например Notify me of follow-up comments via e-mail – для подписки на комментарии, хотя у меня такой же плагин – я его через админку перевел, посмотрите Настройки -> Subscribe to Comments Options. вот специально скрин сделал http://history-of-blog.ru/img/Subscribe.jpg)
      Иероглифы – это проблема с кодировкой – должна быть везде utf-8, хотя сам недавно столкнулся с подобной проблемой. Везде все правильно, но… В общем пришлось дополнительную директиву в файл .htaccess добавлять чтобы кодировка в некоторых местах поменялась :oops:

      • Лариса | 14.04.2012 в 10:57

        Subscribe to Comments у меня тоже стоял, но я его отключила, т.к. после комментов появились две галочки для подиски :). Он же больше никакой пользы не несет?
        А в настройках WP Thread Comment нет перевода фразы о подписке, только оповещения.

        • Лариса | 15.04.2012 в 0:46

          В общем, я скопировала текст редактора в блокнот, нашла эту запись, их там 4 оказалось, и все заменила на русский вариант. Надеюсь, ничего лишнего не отхватила.

          • admin | 15.04.2012 в 1:09

            Если что всегда можно все вернуть, если сделать резервную копию

  • BG | 27.06.2012 в 15:46

    Обалденно простое решение!!! Ну никак не ожидал, что плагин этот, который вроде далеко не самый “легкий” по ресурсам, можно так легко заменить!
    Спасибо!

    • admin | 27.06.2012 в 17:16

      Согласен, в плане ресурсоемкости намного лучше плагина, но придется потратить время на код.

      • BG | 27.06.2012 в 18:04

        Что может быть приятнее, чем поковырявшись в коде, почувствовать себя Творцом! ;-)

  • Алексей | 25.07.2012 в 7:01

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

  • Андрей | 19.08.2012 в 21:03

    Я все сделал как описано в статье,но ничего не изменилось,как стояла надпись “старые записи” так и стоит вместо постраничной навигации.Подскажи что можно сделать.

    • admin | 19.08.2012 в 21:21

      Ссылки на старые и новые записи являются совершенно другими кодами, их можно как удалить, так и оставить – это никак не повлияет на этот вид постраничной навигации.
      Если вставить все коды на место, то постраничная навигация должна отражаться.
      Чтобы разобраться, советую получить мой бесплатный видеокурс по ссылке http://history-of-blog.ru/kurs/bbp/pp/blog-bez-plaginov.html – там как раз в одном из видео и рассмотрен данный вид пагинации на примере

  • Андрей | 19.08.2012 в 21:34

    Из-за старой навигации не будет дублей страниц?Как убрать эти надписи “старые записи”

    • admin | 19.08.2012 в 22:20

      Нет, дублей страниц не будет. При переходе по ссылке “старые записи” открывается та же страница, что и при клике на последующую цифру в навигации (например на цифру 2 на главной странице или на цифру 3 на второй странице).
      Прежде чем редактировать шаблон сохраните резервные копии. Затем найдите строчку отвечающую за вывод такой навигации – это php функция, после которой Вы поставили новую навигацию, и удалите ее.
      Если что, всегда можно можно заменить файл из резерва. Практикуйтесь!

  • Андрей | 19.08.2012 в 22:33

    Буду пробовать. :razz:

  • Vivia | 27.08.2012 в 15:30

    Подскажите, пожалуйста, куда добавить код в файлах index.php search.php
    Этот участок у меня выглядит так:

    Благодарю!!!

    • Vivia | 27.08.2012 в 17:05

      Все получилось! Спасибо за идею)

      • admin | 27.08.2012 в 17:23

        Пожалуйста! пользуйтесь на здоровье :|

  • Василий | 15.11.2012 в 23:13

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

    • admin | 16.11.2012 в 11:38

      Подберите необходимые отступы (padding) в стилях

  • Светлана Ковалева | 17.02.2013 в 21:04

    У меня в шаблоне предложенный вами код так и не сработал. Взяла вариант с другого блога, вынесла навигацию в отдельный файл. А, вот вариант со стилями пригодился. Спасибо, Антон, за идею!

    • admin | 17.02.2013 в 22:34

      ммм :) ну довольно сложно поставить такую навигацию – вижу успешно справились!!!

  • Nichka | 17.03.2013 в 10:57

    К сожалению у меня код не сработал. Я использую стандартный шаблон SpruceUp 1.0. Так хотелось изменить вид навигации на сайте.

  • Valena | 08.11.2013 в 13:46

    Спасибо огромное, все получилось! :|
    Вставила постраничную навигацию на основную страницу, в метки, категории и архив. Единственное, в single.php (в каждую запись) поставить так и не получилось – цифры ни в какую не появляются. Думаю, я там что-то лишнее удалила, когда ссылку на гугловский профиль вставляла :grin:

    • admin | 08.11.2013 в 14:24

      Там пагинации и не должно быть

      • Valena | 08.11.2013 в 14:40

        Почему не должно? Есть же изначально “Предыдущая страница” и “Следующая страница”

        • admin | 08.11.2013 в 15:40

          Это не пагинация. Это просто навигация внутри статей, что совсем совсем другое. Считаю что предыдущая, следующая запись – бесполезная штука. Лучше список похожих статей сделать

  • serg | 08.01.2014 в 1:05

    А у меня почему-то сама навигация получилась не по центру, может что подскажете?

  • Яна | 12.07.2014 в 11:33

    Все получилось кроме стиля картинки не встают, все сделала как у вас написано, даже не знаю почему! :lol:

  • Елена | 02.03.2015 в 9:18

    Раньше была двумя руками за постраничную навигацию, а потом задумалась – нужна ли она вообще? Что пользователь чаще делает – идет в “Карту блога”, щелкает по рубрикам-меткам, вводит нужный запрос в поиск или перебирает страницы? Мне все же кажется, что последний вариант – самый редкий. Во всяком случае, я-то уж точно им не пользуюсь. А вы? Если нет, то стоит ли такой навигацией плодить лишние ссылки? Хотелось бы услышать мнение блогеров, установивших себе такую навигацию.

  • Лариса | 13.10.2015 в 13:54

    Спасибо, Антон!
    Сколько лет прошло, а мне все помогают твои статьи :smile:
    Как дела у тебя?

    • admin | 16.10.2015 в 18:15

      Ох, привет! Да мне и самому порой помогают – это как блокнот. Записал, а потом есть где посмотреть.

      Кстати, натолкнуло на мысль, надо те вещи, которые сейчас использую для верстки например, или для фотошопа – может быть сюда как заметочками делать, для себя.. (ну вроде плавная прокрутка до якоря http://history-of-blog.ru/wordpress/yakor-na-sajte-chto-eto-takoe-zachem-nuzhno-i-kak-sdelat/) а то все копирую из файлика.

      Вот сегодня впервые за два месяца планирую написать небольшую статейку :| А то уж совсем отвык.

      • Лариса | 16.10.2015 в 18:23

        Давай-давай, кодов побольше :). А то с плагинами у меня что-то хостинг не очень дружит… У тебя какой, кстати, бегет? Как он?

        • admin | 16.10.2015 в 20:40

          TimeWeb и Beget. Этот сайт на Таймвебе

          • Лариса | 16.10.2015 в 23:00

            Я с таймвеба давно ушла, вернее, они меня вынудили, типа перегруз у них вечно от моего сайта :twisted: Теперь на спринтхосте, они вежливые, но ддосят их чуть ли не каждую неделю последнее время… А Бегет тебе как? Читала разные отзывы…

          • admin | 17.10.2015 в 1:12

            Как по мне – так особой разницы в хостингах не вижу. Была такая проблема – перегруз. Ддосили – вручную банил запросы через htccess – вроде отбился

  • Елена | 10.12.2015 в 23:25

    Спасибо большое! Все получилось! Пришлось редактировать цифры.
    Хорошо будет если вы сразу в статье замените данные на padding:9px 0px 0px 15px; в двух местах. Встало просто отлично. Сделала в фотошопе себе квадратики, как надо.

  • Сергей | 09.08.2016 в 15:02

    У меня почемуто не работает ваш код style.css не выравниваются номера страниц по центру пробовал менять данные padding. И не видно картинок загрузил в папку
    /public_html/wp-content/themes/twentyten/images. Тема twentyten. Жаль потраченного времени. Может подскажете в чём может быть причина?
    Код style.css добавил в самый низ файла.

    • admin | 11.08.2016 в 16:46

      Стили ваши может быть перебивают. Чтобы что-то решить надо видеть проблему, а не гадать

      • Сергей | 16.08.2016 в 22:28

        Большое спасибо автору статьи. Получилось сделать красивую навигацию страниц
        на своём сайте, правда пришлось долго помучится со стилями пока всё настроил.

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