Постраничная навигация без плагина для 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}

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

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

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

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

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

45 комментариев

Ваш комментарий

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