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

Приветствую!

Сегодня мы сделаем удобную и красивую постраничную навигацию. Постраничная навигация необходима на каждом WordPress блоге. Да, что там WordPress? На каждом интернет ресурсе, где есть страницы, она нужна!

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

ЧТО ТАКОЕ ПОСТРАНИЧНАЯ НАВИГАЦИЯ

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

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

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

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

Есть такие шаблоны, в которых по умолчанию ставят постраничную навигацию, но в них нельзя перемещаться с одной страницы на другую, то есть, их там просто нет – нет кнопок. А просто поставлены ссылки «Предыдущая» «Следующая». Это неудобно и мы исправим сегодня и такую проблему. Вместо ссылок поставим кнопки, а если этих ссылок нет, то все равно поставим кнопки постраничной навигации.

Кнопки постраничной навигации

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

ЗАЧЕМ НУЖНА ПОСТРАНИЧНАЯ НАВИГАЦИЯ

Я уже писал: «Это удобно», но не только. Постраничная навигация поднимет поведенческие факторы, которые положительно отразятся на продвижении WordPress блога. Кроме того, это красиво и придает дизайну сайта еще больше изящности. Что мы получим?

  1. Красоту. Блог станет привлекательней для вас и для посетителей
  2. Удобства. Мгновенное перемещение внутри блога
  3. Улучшим поведенческие факторы. Поднимите позиции своего web-ресурса в поисковой выдаче поисковых систем

Вот такие три роскоши мы можем сегодня создать. Вы со мной? Тогда поехали дальше…

Установка постраничной навигации

УСТАНОВКА ПОСТРАНИЧНОЙ НАВИГАЦИИ НА WORDPRESS БЛОГ

Этот пост мне нужно было написать раньше, но так как я вообще забыл о постраничной навигации — забыл написать эту статью. Почему? Раньше у меня был не такой дизайн – другой шаблон. В него постраничная навигация была уже встроена. Кстати была нормальная на мой вкус, и менять ее не хотел. Как думаете, хорошая была?

Ладно, думаю, хватит мне «». Сейчас расскажу куда нужно зайти, что открыть и куда вставить коды, которые дам ниже. Опять-таки не пугайтесь! Ничего сложного! Все просто! Для спокойствия почитайте статью «Забыть рас и навсегда». После нее обязательно возвращайтесь обратно и сделайте для своего WordPress блога постраничную навигацию.

ПОДГОТОВКА ДЛЯ СОЗДАНИЯ ИЛИ ЗАМЕНЫ ПОСТРАНИЧНОЙ НАВИГАЦИИ

Для начала надо зайти в корень блога. присоединимся к FTP. Если такой способ сложен, то можете зайти с админ-панели – разницы не будет не какой. В общем, делайте так, как привыкли.

Привык к постраничной навигации

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

Я представлю, что вы уже зашли в корень — следуйте по такому адресу:

Wp-content/themes/шаблон

Теперь нам нужно три файла для встраивания классной постраничной навигации. Открывайте:

  • functions.php
  • index.php
  • style.css

Как и обещал, даю коды. Начнем с самого главного — functions.php. Этот файл отвечает за все функции нашего шаблона/ темы. Берите код ниже и вставляйте его в самый конец перед закрывающим тегом ?>:

/* Постраничная www.advdk.com навигация*/
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'] = '« Предыдущая '; //текст ссылки "Предыдущая страница"
$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>';
}

Дальше открывайте файл index.php. Он отвечает за содержание главной страницы сайта, то есть за все, что видите на главной – поддерживает данный файл. Если у вас уже была установлена постраничная навигация или стоит та, которую хотите поменять, то в этом файле найдите такие строки:

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

Эту строку замените на нижнюю:

<div class="navigator "><?php navigation(); ?></div>

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

< ?php get_footer(); ?>

Перед ней вставьте код:

<div class="navigator "><?php navigation(); ?></div>
Последний шаг для встраивания постраничной навигации

Мы проделали хорошую и качественную работу — постраничная навигация уже встроилась в блог, но она не красивая. Для ее преобразования мы добавим классные стили CSS. Откройте файл 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 #DDD;color:#000;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:#00c;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:#00c;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 #DDD;color:#000;font-size:13px;padding:10px;text-decoration:none}

Кому не очень подходят стили, те могут с ними поиграть. Изменяя под свои нужды. Но вы же не будете ковырять свой родной блог? Советую сделать для себя тестовый блог, на котором будете проводить все эксперименты. О том, как его создать, написано здесь: «Как создать тестовый блог для опытов».

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

А вы сделали постраничную навигацию без плагина или с ним, она уже была встроена в шаблон?

Не пропускайте свежак с блога! Подписывайтесь на обновления, через [urlspan]RSS [/urlspan] или социальные сети: вк, facebook . twitter, google+, одноклассники. До встречи!

С уважением, Алексей Кобзарев



Интересный и полезный контент

45 thoughts on “Постраничная навигация без плагина для WordPress блога

  1. Сергей

    Алексей! Огромная просьба! У меня на выходных полетел винт, я потерял массу всего. Если у Вас сохранился архив Камтазии 7 — вышлите, пожалуйста, а то в сети такое фуфло!

  2. Андрей Косолапов

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

  3. Надежда Давыдова

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

    Можно пару пожеланий? Я как человек с плоховатым зрением, вынуждена напрягать глаза из-за мелковатого шрифта. И огромные, прыгающие картинки меня сильно отвлекают от чтения.

    Вот такой шрифт, как при наборе сообщения, самое оно!

  4. Михалыч

    Алексей, блог обновился, да и тот шаблон не корявый был, все отлично.

    Замечание, что бросилось в Глаза: форма комментов не радует. Текст над «Имя» — ???
    Второе — мне кажется, что рациональнее и красивее при такой ширине контента, поля заполнения комментов сделать в одну строчку. ИМХО.

  5. Михалыч

    Кстати тег b не сработал. Выделил слово «выше», но не вижу изменений.

    1. Алексей Кобзарев - admin Автор записи

      Тег b, это старая модель. Сейчас отлично работают теги strong.

  6. Юрий

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

    1. Алексей Кобзарев - admin Автор записи

      В этом шаблоне два варианта. Первый — отображать текст анонса, там есть ссылка читать далее. Второй — отображать миниатюру с анонсом, там ее нет. Анонс без изображения мне не нравиться. Твоя статья может быть мне к стати. И еще, можно перейти на статью нажав на картинку.

    2. Алексей Кобзарев - admin Автор записи

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

  7. Михалыч

    Я по мелочам обращаюсь к Ирине Соколовской. В свободное время от заказов выполнят мои просьбы. Все довольны, все смеются.
    Об изменении Формы комментариев у нее статья

    Если интересно — взгляни.

    1. Алексей Кобзарев - admin Автор записи

      Спасибо конечно, но разве у меня плохая форма?

      1. Михалыч

        Все отлично. Я тебе сказал, что и старая тема была нормальной.

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

        1. Алексей Кобзарев - admin Автор записи

          Понятно.

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

  8. Татьяна Кузьменко

    Алексей, пытаюсь вставить постраничную навигацию на свой блог и столкнулась с такой трудностью: не могу найти в своем файле functions.php тот завершающий тег, о котором Вы пишете. Файл такой длинный (там порядка 500 строк) и я не нашла, куда вставить предложенный Вами код.
    Можно Вас попросить посмотреть мой файл (я его отправлю сейчас на мейл) и указать, куда именно вставить код?
    Заранее благодарю!

    1. Алексей Кобзарев Автор записи

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

      1. Татьяна Кузьменко

        Спасибо, Алексей! Все сделала, используя исправленный Вами файл.
        Только получилось как-то не очень красиво. Вы не могли бы посмотреть?
        На первой странице кнопки есть только вверху справа (а внизу нет), а на последующих — и вверху справа, и внизу.
        То есть внешний вид кнопок устраивает, а вот их расположение — не очень.
        Такое ощущение, что проблема с файлом index.php.

        1. Алексей Кобзарев Автор записи

          Да, вы правы, код навигации не туда вставлен. Вместо класса nav-previous и тем, что было внутри, вставьте код данный в статье, смотрите на скрин:

          Навигационная смена

          Чтобы все это выглядело красиво, используйте стили из статьи.

        2. Татьяна Кузьменко

          Ура!!! Получилось наконец-то!
          Конечно, пришлось применить, как шутили в моем университете, «метод научного тыка» 🙂 . Просто подобрала нужное место для указанного Вами кода путем перебора вариантов. С седьмой попытки кнопки встали правильно…
          Теперь радуюсь результату. Смотрятся неплохо.
          Спасибо большое, Алексей, за науку и за поддержку!

        3. Алексей Кобзарев Автор записи

          Пожалуйста Татьяна. Главное, что вы делали то что хотели, вот оно и получилось. Поздравляю!

  9. Татьяна Кузьменко

    Сегодня обратила внимание, что у меня на главной странице навигация есть (устанавливала по Вашим рекомендациям, если помните), а на страницах рубрик — нет. Просто раньше у меня в рубриках было мало статей и навигация была не нужна. А теперь вот понадобилась.
    Я открыла файл «шаблон рубрик» и вставила туда тот же код, что мы вставляли в «основной шаблон». Обновила — и вуаля! Навигация в нужном месте добавилась!
    Спасибо, Алексей, за преподанную науку!

  10. Владимир

    Алексей здравствуйте, судя по последнему комменту, вы давно не отвечали никому или это только на данной статье. Но все равно задам вопрос. У меня почему то на созданной странице front-page не работает навигация, ни Ваша ни плагин, не пойму в чем дело. Если можете, помогите. Заранее благодарю.

    1. Алексей Кобзарев Автор записи

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

      Насчет постраничной навигации: на странице front-page у вас лента с анонсами статей?

  11. Владимир

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

    1. Алексей Кобзарев Автор записи

      Здравствуйте Владимир!

      Скорей всего эта функция не работает, потому что предназначена для стандартных страниц, таких как главная или отведенная «Блог», но тоже специальная. Понимаете, функция кода из статьи соединяется с уже прописанной функцией WordPress, если эта функция изменена, то естественно навигации не будет.

      Может просто не там ставите код, хотя если плагины не работают, которые тоже прописаны по похожему принципу кода, то проблема описана мной выше.

  12. Владимир

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

  13. Владимир

    Здравствуйте Алексей, помогите если можете. Создал два блоки, один видимый с иконками и стрелочкой, которая перемещается при нажатии на иконки, второй выпадающий с рубриками и так же со стрелочкой указывающей на верхнюю. Все работало, блоки выпадали как надо до тех пор пока не стал оформлять стрелки, стал задавать им функции и все перестало работать, функции создавались только стрелкам но почему то перестали работать и выпадающие окна, хотя фанцибокс я не трогал. В общем я совсем запутался с ними, если разбираетесь помогите пожалуйста, код функций прилагаю.
    $(«.mc_item_wrap ul»).each(function() {
    $(this).after(«»);
    });
    $(«.mc_toggle»).click(function() {
    if($(this).parent().parent().children(«ul»).is(«:visible»)) {
    $(this).parent().parent().children(«ul»).slideUp();
    $(this).parent().parent().children(«.mc_item_wrap_af»).hide();
    } else {
    $(«body .mc_wrap .mc_item_wrap > ul, .mc_item_wrap_af»).hide();
    $(«.mc_item_wrap»).removeClass(«active»);
    $(this).parent().parent().addClass(«active»);
    $(this).parent().parent().children(«ul»).slideDown();
    $(this).parent().parent().children(«.mc_item_wrap_af»).show();
    });

  14. Евгений Коваленко

    Алексей здравствуйте! Мне очень нравится Ваш блог, все доступно написано для начинающих сайтостроителей. У меня вопрос: Как сделать постраничную навигацию на одной странице?

    1. Алексей Кобзарев Автор записи

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

      1. Евгений Коваленко

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

        1. Алексей Кобзарев Автор записи

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *