
Постраничная навигация в WordPress без плагина
Здравствуйте уважаемые читатели блога history-of-blog.ru. В шестом выпуске Истории блога я порекомендовал установить для поднятия юзабилити блога именно постраничную навигацию в 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 строка: а здесь прописаны стили, которые должны быть, когда мы наводим на ссылку.
Ну вот и все! Теперь у нас уникальная (если Вы сами подобрали картинки!) навигация по блогу, которой нет ни у кого!
Похожие статьи:
-
Михаил | 11.04.2012 в 12:29
Что то я свим методом “тыка” не могу код поправить что бы цифры встали ровно по центру…
Как это сделать?
-
Лариса | 13.04.2012 в 21:45
Я поставила себе WordPress Thread Comment, а там все на английском, и сам редактор плагина длинный (еще и с иероглифами), даже не знаю, где в нем искать фразы для перевода…
-
Лариса | 14.04.2012 в 10:57
Subscribe to Comments у меня тоже стоял, но я его отключила, т.к. после комментов появились две галочки для подиски :). Он же больше никакой пользы не несет?
А в настройках WP Thread Comment нет перевода фразы о подписке, только оповещения. -
Лариса | 15.04.2012 в 0:46
В общем, я скопировала текст редактора в блокнот, нашла эту запись, их там 4 оказалось, и все заменила на русский вариант. Надеюсь, ничего лишнего не отхватила.
-
BG | 27.06.2012 в 15:46
Обалденно простое решение!!! Ну никак не ожидал, что плагин этот, который вроде далеко не самый “легкий” по ресурсам, можно так легко заменить!
Спасибо!
-
BG | 27.06.2012 в 18:04
Что может быть приятнее, чем поковырявшись в коде, почувствовать себя Творцом!
-
Алексей | 25.07.2012 в 7:01
Огромное спасибо! Обязательно применю, когда руки дойдут. Сейчас у меня плагин SEO-pager, но хочу его снести и сделать как у вас рассказывается.
-
Андрей | 19.08.2012 в 21:03
Я все сделал как описано в статье,но ничего не изменилось,как стояла надпись “старые записи” так и стоит вместо постраничной навигации.Подскажи что можно сделать.
-
Андрей | 19.08.2012 в 21:34
Из-за старой навигации не будет дублей страниц?Как убрать эти надписи “старые записи”
-
Андрей | 19.08.2012 в 22:33
Буду пробовать.
-
Vivia | 27.08.2012 в 15:30
Подскажите, пожалуйста, куда добавить код в файлах index.php search.php
Этот участок у меня выглядит так:Благодарю!!!
-
Vivia | 27.08.2012 в 17:05
Все получилось! Спасибо за идею)
-
Василий | 15.11.2012 в 23:13
Спасибо, почти все получилось, но у меня в навигации страниц кружки получились смещены относительно цифр. Подскажите пожалуйста где ошибка.
-
Светлана Ковалева | 17.02.2013 в 21:04
У меня в шаблоне предложенный вами код так и не сработал. Взяла вариант с другого блога, вынесла навигацию в отдельный файл. А, вот вариант со стилями пригодился. Спасибо, Антон, за идею!
-
Nichka | 17.03.2013 в 10:57
К сожалению у меня код не сработал. Я использую стандартный шаблон SpruceUp 1.0. Так хотелось изменить вид навигации на сайте.
-
Valena | 08.11.2013 в 13:46
Спасибо огромное, все получилось!
Вставила постраничную навигацию на основную страницу, в метки, категории и архив. Единственное, в single.php (в каждую запись) поставить так и не получилось – цифры ни в какую не появляются. Думаю, я там что-то лишнее удалила, когда ссылку на гугловский профиль вставляла
-
Valena | 08.11.2013 в 14:40
Почему не должно? Есть же изначально “Предыдущая страница” и “Следующая страница”
-
serg | 08.01.2014 в 1:05
А у меня почему-то сама навигация получилась не по центру, может что подскажете?
-
Яна | 12.07.2014 в 11:33
Все получилось кроме стиля картинки не встают, все сделала как у вас написано, даже не знаю почему!
-
Елена | 02.03.2015 в 9:18
Раньше была двумя руками за постраничную навигацию, а потом задумалась – нужна ли она вообще? Что пользователь чаще делает – идет в “Карту блога”, щелкает по рубрикам-меткам, вводит нужный запрос в поиск или перебирает страницы? Мне все же кажется, что последний вариант – самый редкий. Во всяком случае, я-то уж точно им не пользуюсь. А вы? Если нет, то стоит ли такой навигацией плодить лишние ссылки? Хотелось бы услышать мнение блогеров, установивших себе такую навигацию.
-
Лариса | 13.10.2015 в 13:54
Спасибо, Антон!
Сколько лет прошло, а мне все помогают твои статьи
Как дела у тебя?
-
Лариса | 16.10.2015 в 18:23
Давай-давай, кодов побольше :). А то с плагинами у меня что-то хостинг не очень дружит… У тебя какой, кстати, бегет? Как он?
-
Лариса | 16.10.2015 в 23:00
Я с таймвеба давно ушла, вернее, они меня вынудили, типа перегруз у них вечно от моего сайта
Теперь на спринтхосте, они вежливые, но ддосят их чуть ли не каждую неделю последнее время… А Бегет тебе как? Читала разные отзывы…
-
Елена | 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 добавил в самый низ файла.
-
Сергей | 16.08.2016 в 22:28
Большое спасибо автору статьи. Получилось сделать красивую навигацию страниц
на своём сайте, правда пришлось долго помучится со стилями пока всё настроил.
Спасибо огромное! Сделал буквально за 10 минут хотя совсем не разбираюсь ни в РНР,ни в CSS…
Только немного кривовато получилось, надо что то в коде поправить.
Не знаю- внешние ссылки разрешены у вас? Я сделал на сайте http://www.220vdome.ru/