Постраничная навигация в 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 строка: а здесь прописаны стили, которые должны быть, когда мы наводим на ссылку.
Ну вот и все! Теперь у нас уникальная (если Вы сами подобрали картинки!) навигация по блогу, которой нет ни у кого!
