Зарабатывай со мной
Profit Partner – Есть хороший сайт, тогда добавляй его сюда быстрей
Nolix – Рекламная строчка, которая может приносить хороший доход
Ротабан – Размещай баннеры у себя на сайте и зарабатывай
Продвигайся со мной

Форумок – лучший сервис по покупке лайков, твитов, google+

GoGetlinks– покупка качественных ссылок с ТИЦ от 10

Ротапост – качественные вечные ссылки для ваших сайтов

Постраничная навигация – Очень удобно правда ведь?

Всем привет друзья мои!

Постраничная навигация – тема сегодняшнего поста. Уже столько времени виду блог, а поста этого до сих пор нет, странно прямо.

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

Смею предположить, что у вас постраничная навигация есть, но реализована она с помощью плагина.

Сегодня же мы будем реализовывать её без плагина. В общем то мы продолжаем освобождать блог от лишней нагрузки. В недавних статьях я уже вам рассказывал, об избавлении от двух плагинов.

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

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

К стати вы случайно не удивлены тому что я вчера написал статью, сегодня вот опять…так я же сказал, что пришла осень, времени свободного стало больше и посты будут выходить чаще. Да я ещё и на соцсети решил подзабить, а то столько времени уходит коту под хвост, что просто пипец. Сегодня решил начать небольшой эксперимент, неделя без ВК – Старт дан (только не смейтесь). Хотите узнать смогу ли я, тогда подписывайтесь на обновления блога.

Теперь давайте вернёмся к нашей теме, сори что отвлёкся.

Постраничная навигация – Что это и Зачем?

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

Бывает захожу я на блог в поисках одной статейки и понимаю что она находится примерно на 5-ой ситранице, спускаюсь вниз и вижу, что постраничной навигации нет, а есть только две ссылки «Следующая и Предыдущая», а это значит, что для попадания на 5-ую страницу мне нужно будет щёлкнуть 4 раза мышкой (с промежутками во времени) вместо 1-го и это очень неудобно.

Возможно это и хорошо для накрутки показов, но для удобства посетителей это вообще не айс.

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

И так, сначала я вам покажу как она выглядит у меня, а потом если вам понравится, а я думаю вам понравится, вы тоже установите.

пример постраничной навигации

Ну как вам, понравилось да ведь…давайте скорее ставить.

Перед изменением файлов, не забудьте сделать резервные копии, а то вдруг что то пойдёт что то не так.

Первый код выполняющий саму функцию, переходы по страницам. Открываем файл functions.php и вставляем нижеприведённый код практически в самом верху, сразу после тега <?php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function wp_corenavi() {
global $wp_query, $wp_rewrite;
$pages = '';
$max = $wp_query-&gt;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'] = '&laquo;'; //текст ссылки "Предыдущая страница"
$a['next_text'] = '&raquo;'; //текст ссылки "Следующая страница"
 
if ($max &gt; 1) echo '<div>';
if ($total == 1 &amp;&amp; $max &gt; 1) $pages = '<span>Страница ' . $current . ' из ' . $max . '</span>'."\r\n";
echo $pages . paginate_links($a);
if ($max &gt; 1) echo '</div>';
}

Теперь мы вставим стили, для отображения красивого внешнего вида. Перед тем как вставлять код мы сначала закинем изображения. Я тут с утричка посидел в фотошопе и приготовил для вас изображения.

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

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

    

Ещё один момент, каждое изображение имеет окончание, например «activ_nav_or.png» так вот окончание нужно убрать, чтобы получилось «activ_nav.png».

Теперь скачайте второе изображение, оно будет отображаться на неактивных страницах.

Оба изображения у нас готовы activ_nav.png и passiv_nav.png и закачиваем их в папку img а если быть точнее, то вот путь:

public_html/wp-content/themes/ваша тема/img

Картинки закачали, далее открываем файл style.css и вставляем туда следующие стили.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.navigation {
text-align:center; margin:30px 0;
}
 
a.page-numbers {
background:url(img/passiv_nav.png) no-repeat; width:25px; height:25px; display: inline-block; padding:5px 0 0 0; font-weight:bold;
}
 
a:hover.page-numbers{
background:url(img/activ_nav.png) no-repeat; color:#fff; text-decoration:none;
}
 
span.page-numbers.current {
background:url(img/activ_nav.png) no-repeat; color:#fff; width:25px; height:25px; display: inline-block; padding:5px 0 0 0; font-weight:bold;
}

И так, у нас почти всё готово, осталось только вывести нашу постраничную навигацию с помощью специального кода. Открываем файл index.php который опять же находится в папке с нашей темой и вставляем в нужное место код.

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

Последний штрих, идём и перезаливаем изменённые файлы, а то работать то ничего не будет ведь.

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

На связи с вами был, Олег Вьяльцов.

Понравился пост? Так подписывайся, чего ты ждёшь?!

Блоггер ,





  1. 06 Сен 2012 из 20:34 | #1

    Привет Олег) спасибо за альтернативу, я тоже сторонник наименьшего количества плагинов. Но у меня че-то не стал. Ошибка в файле функций.

    Пробовал вставлять вначале — не вышло. Пробовал в друое место — тоже. Так что похоже все-таки это не универсальный вариант.

    • Олег
      13 Сен 2012 из 3:45 | #2

      На вордпресс должно работать без проблем! Попробуйте ещё раз сделать всё по инструкции. Первый кусок кода нужно вставить сразу после открывающего php тега.

  2. 07 Сен 2012 из 11:38 | #3

    как всегда познавательно и интересно. Надо взять себе на будущее, так как очень хочу поменять тему, поэтому нет пока смысла ставить. Спасибо, Олег!

    • Олег
      13 Сен 2012 из 3:52 | #4

      Да я думаю можно и сейчас поставить, т.к обычно смена дизайна затягивается на долго.

  3. 07 Сен 2012 из 15:15 | #5

    Олеж, ты снова шапку блога переделал!! =-O =)
    Круто насчет постраничной навигации, я думала, что только плагином можно ее сделать. Удобная вещь, факт. =) Только я почему-то не могу ее найти у тебя, эту навигацию… %) . Где смотреть??
    …Насчет предыдущих статей — их оказалось легко в табах, в сайдбаре видеть =) , у тебя же там есть «Новье» =) .

    • Олег
      13 Сен 2012 из 4:01 | #6

      Да наверно ещё немного подправлю и успакоюсь!
      Посмотреть можно на главной странице внизу, после последнего поста на этой же странице.

  4. 08 Сен 2012 из 22:17 | #7

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

    • Олег
      13 Сен 2012 из 4:21 | #8

      Конечно, давно уже пора. У меня тоже до недавнего времени плагин был, но пора бы и честь ему знать :) .

  5. 13 Сен 2012 из 15:00 | #9

    Подскажите плагин для авто разбиения на страницы.

  6. 18 Сен 2012 из 13:24 | #10

    Классный пост, но у тебя плагин который выводит php код в статье. Исковеркал код который нужно вставить в functions.php, 8) можешь его обновить или скинуть мне на Email,просто тоже хочу поставить себе такую постраничную навигацию.

    • Олег
      21 Сен 2012 из 6:01 | #11

      Спасибо, Влад. Скину сегодня код на мыло, но этот вроде тоже должен корректно работать.

  7. Poly
    11 Май 2013 из 14:14 | #12

    Код не работает. Много ошибок. И при копировании с вашего сайта он сливается в одну строку.

  8. 07 Ноя 2013 из 21:20 | #14

    Что-то не получается у меня…

  1. Трекбеков пока нет.