Уникальная постраничная навигация WordPress для вашего блога

neformat / Сен.14.2015. / Нет комментариев

navi2

Удобная навигация по сайту – это один из ключевых факторов общего юзабилити сайта. Когда пользователь заходит на сайт, он хочет в кратчайшие сроки найти нужную ему информацию. Навигация сайта включает в себя: удобный поиск, понятные категории, постраничная навигация. В этой статье я расскажу, как создать постраничную навигацию для сайта на wordpress.

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

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

Постраничная навигация при помощи плагина.

Как я уже говорил, самый простой способ создать удобную постраничную навигацию — это плагин WP-PageNavi. Плагин начинает работу сразу после его активации в консоли сайта, вам необязательно что-то дополнительно настраивать в опциях плагина, чтобы он заработал. Нет ничего сложного и в его установке. Хочу отметить, что плагины не всегда устанавливаются через админку wordpress. Плагин также в ручную можно установить руками, просто загрузив плагин прямо на хостинг в папку wpcontet-plagins, после загрузки потребуется активация плагина в админ панели.

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

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

/*******************************

Навигация

*******************************/

function emm_paginate($args = null) {
$defaults = array(
‘page’ => null, ‘pages’ => null,
‘range’ => 3, ‘gap’ => 3, ‘anchor’ => 1,
‘before’ => ‘<div class=”emm-paginate”>’, ‘after’ => ‘</div>’,
‘title’ => __(”),
‘nextpage’ => __(‘&raquo;’), ‘previouspage’ => __(‘&laquo’),
‘echo’ => 1
);

$r = wp_parse_args($args, $defaults);
extract($r, EXTR_SKIP);
if (!$page && !$pages) {
global $wp_query;
$page = get_query_var(‘paged’);
$page = !empty($page) ? intval($page) : 1;
$posts_per_page = intval(get_query_var(‘posts_per_page’));
$pages = intval(ceil($wp_query->found_posts / $posts_per_page));
}

$output = “”;
if ($pages > 1) {
$output .= “$before<span class=’emm-title’>$title</span>”;
$ellipsis = “<span class=’emm-gap’>…</span>”;
if ($page > 1 && !empty($previouspage)) {
$output .= “<a href='” . get_pagenum_link($page – 1) . “‘ class=’emm-prev’>$previouspage</a>”;
}

$min_links = $range * 2 + 1;
$block_min = min($page – $range, $pages – $min_links);
$block_high = max($page + $range, $min_links);
$left_gap = (($block_min – $anchor – $gap) > 0) ? true : false;
$right_gap = (($block_high + $anchor + $gap) < $pages) ? true : false;
if ($left_gap && !$right_gap) {
$output .= sprintf(”,
emm_paginate_loop(1, $anchor),
$ellipsis,
emm_paginate_loop($block_min, $pages, $page));
}

else if ($left_gap && $right_gap) {
$output .= sprintf(”,
emm_paginate_loop(1, $anchor),
$ellipsis,
emm_paginate_loop($block_min, $block_high, $page),
$ellipsis,
emm_paginate_loop(($pages – $anchor + 1), $pages));
}

else if ($right_gap && !$left_gap) {
$output .= sprintf(”,
emm_paginate_loop(1, $block_high, $page),
$ellipsis,
emm_paginate_loop(($pages – $anchor + 1), $pages));
}

else {
$output .= emm_paginate_loop(1, $pages, $page);
}

if ($page < $pages && !empty($nextpage)) {
$output .= “<a href='” . get_pagenum_link($page + 1) . “‘ class=’emm-next’>$nextpage</a>”;
}

$output .= $after;
}

if ($echo) {
echo $output;
}
return $output;
}

function emm_paginate_loop($start, $max, $page = 0) {
$output = “”;
for ($i = $start; $i <= $max; $i++) {
$output .= ($page === intval($i))
? “<span class=’emm-page emm-current’>$i</span>”
: “<a href='” . get_pagenum_link($i) . “‘ class=’emm-page’>$i</a>”;
}
return $output;
}

Следующим шагом будет вывод навигации, для этого в нужном нам месте, где будет использоваться постраничная навигация, например index.php, serch.php, archive.php

добавим код:

<?php if (function_exists(“emm_paginate”)) { emm_paginate();           } ?>

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

Для этого в конце вашего файла стилей добавляем следующий код

/* Навигация */

.emm-paginate { margin-bottom:60px; clear:both; }
.emm-paginate a { border: 0px solid #ccc; background: #ebebeb; color:#333; margin-right:7px; padding:6px 14px; text-align:center; text-decoration:none;}
.emm-paginate .emm-title {color:#555; margin-right:4px;}
.emm-paginate .emm-gap {color:#999; margin-right:4px;}
.emm-paginate a:hover, .emm-paginate a:active, .emm-paginate .emm-current { color:#fff; background:#5cbfd7; border: 0px solid #63800c; margin-right:7px; padding:6px 14px;}
.emm-paginate .emm-page {}
.emm-paginate .emm-prev, .emm-paginate .emm-next {}

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

<div class=”navigation”>
<div class=”alignleft”><?php next_posts_link() ?></div>
<div class=”alignright”><?php previous_posts_link() ?></div>
</div>

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



Оставить комментарий

Войти с помощью: 


<------------->