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

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

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

Конечно, может быть через плагины это сделалось бы легче, но подумайте о нагрузке своего интернет ресурса. Каждый плагин нагружает наш сайт, все больше и больше. Соответственно, чем больше нагрузка на сайт, тем медленнее его быстродействие и отклик (время за которое сайт загружается).

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

Постраничная навигация WordPress. Приступаем к делу.

Всего лишь 3 простых действия на уровне скопировал вставил и у вас на сайте прекрасная навигация.

Итак, для начала открываем сайт через notepad++ и находи в папке с вашей темой файл functions.php. Находится он у всех одинаково. Вот такой путь лежит до него /public_html (или httpdocs)/wp-content/themes/название_вашей_темы/functions.php

Открываем этот файл и в него между php тегами которые выглядят вот так <?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 = 1; //1 — выводить текст «Страница N из N», 0 — не выводить
$a['mid_size'] = 3; //сколько ссылок показывать слева и справа от текущей
$a['end_size'] = 1; //сколько ссылок показывать в начале и в конце
$a['prev_text'] = '&laquo;'; //текст ссылки «Предыдущая страница»
$a['next_text'] = '&raquo;'; //текст ссылки «Следующая страница»

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. Находим его так же через notepad++ в папке с нашей темой - /public_html (или httpdocs)/wp-content/themes/название_вашей_темы/index.php и открываем.

Вставляем вот эту функцию:

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

В место, между функциями <?php endwhile; ?> и <?php endif; ?> как показано у меня на рисунке ниже:

 Ну вот собственно навигация у нас появилась. Теперь осталось преобразить ее. Для того чтобы сделать ее адаптированной под свой стиль сайта надо задать ей определенные стили в файле style.css.

Вот какой код у нас генерируется на сайте при выводе постраничной навигации в wordpress:

<div class="navigation">
<span class="pages">Страница 7 из 27</span>
<a class='prev page-numbers' href='http://wordpress31/page/6/'>&laquo; Предыдущая</a>
<a class='page-numbers' href='http://wordpress31/page/1/'>1</a>
<span class='page-numbers dots'>...</span>
<a class='page-numbers' href='http://wordpress31/page/4/'>4</a>
<a class='page-numbers' href='http://wordpress31/page/5/'>5</a>
<a class='page-numbers' href='http://wordpress31/page/6/'>6</a>
<span class='page-numbers current'>7</span>
<a class='page-numbers' href='http://wordpress31/page/8/'>8</a>
<a class='page-numbers' href='http://wordpress31/page/9/'>9</a>
<a class='page-numbers' href='http://wordpress31/page/10/'>10</a>
<span class='page-numbers dots'>...</span>
<a class='page-numbers' href='http://wordpress31/page/27/'>27</a>
<a class='next page-numbers' href='http://wordpress31/page/8/'>Следующая &raquo;</a>
</div>

Для того чтобы внести преобразования в оформления внешнего вида нашей навигации, заходим в файл style.css который находится вот по этому пути - /public_html (или httpdocs)/wp-content/themes/название_вашей_темы/style.php

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

/* Постраничная навигация */
.navigation {
margin: 5px 10px 15px 15px;
padding: 7px 0 7px 13px;
background: #FFF;
border: 1px solid #8C9A96;
outline: 0px solid #cc0000;
— webkit-box-shadow: #DEDEDE -7px 7px 15px;
— moz-box-shadow: #DEDEDE -7px 7px 15px;
box-shadow: #DEDEDE -7px 7px 15px;
position: relative;
}
.pages {
padding: 3px 5px 3px 5px;
background: #E31E24; /* Цвет фона */
font:normal 14px Arial, Tahoma, sans-serif;
color:#fff;
}

.page-numbers {
margin: 2px;
padding: 3px 5px 3px 5px;
}

.page-numbers {
text-decoration: none;
font:normal 14px Arial, Tahoma, sans-serif;
color:#E31E24;
}

.page-numbers:hover {
padding: 3px 5px 3px 5px;
text-decoration: none;
color:#8BBEDB; /* Цвет ссылки при наведении на нее курсора мыши */
background: #E31E24; /* Цвет фона */
font:normal 14px Arial, Tahoma, sans-serif;
color:#fff;
}

.current {
padding: 3px 5px 3px 5px;
color:#8BBEDB;
background: #E31E24; /* Цвет фона */
font:normal 14px Arial, Tahoma, sans-serif;
color:#fff;
}

Единственное что можно сделать, это заменить красный цвет #E31E24, на тот, который подходит вашей цветовой гамме сайта.

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

До встречи на Sayt-Stroy.com

Метки: ,

Оставь свой первый комментарий и получи книгу в подарок!

Данная книга расскажет о всех секретах правильного и полноценного продвижения интернет проектов.

Именно с нее следует начать изучение SEO.

WordPress

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

ВКонтакте