Навигация страниц с плагином или без

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

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

Как правило, на большинстве шаблонов WordPress уже имеется встроенная навигация, которая чаще всего ( по моим наблюдениям) выглядит "следующая страница – предыдущая страница", "раньше – позже" и так далее. Лично мне в блоге нравится мои "предыдущие записи – следующие записи". Помимо такой навигации в многих темах есть постраничная навигация, в этом случае как правило написано на какой мы находимся странице из их общего числа и далее идет список номеров страниц: 1 2 3 … 65, можно так же перейти на последнюю и первую. Такой навигацией мы с вами и займемся в этой инструкции. Но существуют темы, которые вовсе лишены любого вида навигации, и если такая тема вам нравится, то будет необходимо сделать навигацию самому.

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

Навигация с помощью плагина wp-pagenavi

Плагин качается прямо из админки > плагины > добавить новый. Качаем, активируем его. Теперь шагаем в "параметры > Список страниц" и нам открываются все не многочисленные настройки плагина:

Постраничная нумерация страниц wordpress

 

Все настройки можно поменять под себя, но помоему они по умолчанию очень хорошо выставлены. И еще один блок настроек:

wp-pagenavi настройка плагина

Если не хотите сами писать css, то не снимаем галочку сверху.
Можно сделать выбор страниц из выпадающего меню, по-моему крайне не удобно.

Количество страниц для показа – это количество номеров страниц, выводимых в обведенной области ( на скриншоте).

С настройками мы разобрались, перед тем как установить навигацию от нашего плагина предлагаю удалить стандартную навигацию ссылками:

Как удалить навигацию темы WordPress

Первым делом нужно удалить стандартную навигацию, если она у вас есть.

Нумерацию вы вряд ли будете стирать, поэтому рассмотрим вариант удаления ссылок типа "следуюшие записи – предыдущие записи"

Для этого нужно найти на всех страницах (index.php, archive.php,category.php и так далее) такие строки ( или строки такого типа):

<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'snowsummit' ) ); ?></div>
 <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&raquo;</span>', 'snowsummit' ) ); ?></div>

У вас они могут выглядеть несколько иначе, но в большинстве случаев сочетание

class="nav-next"

даст вам результат!

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

<div id="nav-below" class="navigation">
 <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'snowsummit' ) ); ?></div>
 <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&raquo;</span>', 'snowsummit' ) ); ?></div>
 </div><!-- #nav-below -->

В некоторых темах навигация идет сверху и снизу, т.е. надо удалять этот код в двух местах!

Привожу универсальный способ поиска этих навигаций!

Нам нужен гугл хром, заходим на страницу сайта и жмакаем правой кнопкой по ссылке типа "предыдущая страница" и выбираем пункт "Посмотреть код элемента":

Удалить постраничную навигацию wordpress

Серой строкой подсвечивается код, ко которому мы жмакнули, если вы не промазали, то этим кодом должна быть ссылка. В обведенном прямоугольнике видно, что ссылки предыдущей и следующей страницы находятся в блоке div с присвоенным классом class="navigation", именно эту строку мы будем искать в наших index.php, archive.php  и так далее.

Таким образом очень легко все удалять в нашем шаблоне:

удаляем навигацию wordpress

Как установить навигацию wp-pagenavi

Чтобы установить навигацию, нужно в шаблон главной страницы, страницы рубрик и прочих вставить код:

<?php wp_pagenavi(); ?>

в нужное место.

например, нам нужна постраничная навигация внизу страницы, тогда заходим в index.php проматываем код до самого низа, находим строчки вызова сайдбара и подвала:

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Над ними находим закрывающийся тэг </div> и сразу перед ним вставляем код вызова навигации.

Если хочется повыше, то попробуйте поставить код на строку выше.

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

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

Без всяких плагинов можно тоже сделать навигацию с номерами страниц. Чуть больше возни но по итогу получим схожую картину.

Зайдите в админку > редактор > functions.php и вставим внизу следующий код функции:

function nav() {
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'] = 5; //Количество ссылок вначале и в конце
$a['prev_text'] = '&laquo; Предыдущая '; //отображение ссылки для предыдущей страницы
$a['next_text'] = 'Следующая &raquo;'; //отображение ссылки для следующей страницы
if ($max > 1) echo '<div class="nav">';
if ($total = 1 && $max > 1) $pages = '<span>Страница ' . $current . ' из ' . $max . '</span>'."\r\n";
echo $pages . paginate_links($a);
if ($max > 1) echo '</div>';
}

Обратите внимание, вы можете внести свои корректировки (указанные в комментариях). Попробуйте методом тыка поменять, если вам нужно, но они достаточно стандартны.

Теперь по аналогии с установкой навигации с помощью wp-pagenavi вставляем код:

<?php nav(); ?>

в нужное место. Если вы прочитали пост по диагонали, то поднимитесь на один заголовок выше и там все расписано :arrow:

Если вы все сделали правильно, то у вас получится навигация:

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

Как вы видите, к рукописной навигации придется писать css, ибо смотрится не ахти.

Если вы не умеете это делать, то предлагаю воспользоваться таким наброском:

откройте "админка > редактор > style.css" и добавьте внизу следующее:

.nav {
padding:15px 0 25px 0;
overflow:hidden;
font-size:13px;
color:#000;
clear:both;}

.nav a{background: #fff;
border: 1px solid #DDDDDD;
color: #000000;
font-size: 13px;
padding:5px;
text-decoration: none;}

.nav span.pages {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}

.nav a:hover{background: #fff;
border: 1px solid red;
color:red;
font-size: 13px;
text-decoration: none;}

.nav span.pages {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}

.nav span.current {background: #fff;
border: 1px solid #111;
font-size: 13px;
padding:5px;
text-decoration: none;}

.nav span.extend {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}

Если вы все сделали верно, то ваша навигационная область приобретет вид:

навигация wordpress без плагина

Какой бы вариант вы не выбрали (с плагином или ручками) не забудьте проделать описанные операции с каждым из файлов index,category,archive и так далее, чтобы везде была красивая навигация!

Надеюсь Инструкция была вам полезна! Если у вас появились вопросы или у меня что-то написано непонятно, то не стесняйтесь стучать в комментарии! Очень советую вам настроить оформление своей постраничной навигации в соответствии с общим дизайном блога, например, фон кнопок и шрифты. Раз уж вы занялись навигацией, то заодно можете занять и внутренней перелинковкой , как и прочими улучшениями вашего сайта! Читайте всепро100!

vsepro100.net был атакован и восстановлен недавно!
У вас быстро открывается сайт vsepro100.net

Добавить статью в соц сеть

Комментарии к: Навигация страниц с плагином или без

  1. благодраю автора, помогло, а то нигде полезной инфы нету по этому вопросу, в вордпрессе все как обычно самому надо делать :?:

  2. Спасибо за интересную и полезную статью!

  3. Даниил Шумский

    Сейчас попробую у себя также сделать)

  4. Здравствуйте, спасибо, все получается нормально, но как только отключаю плагин, то то при нажатии на название статьи, на странице открывается только шапка сайта и все. Почему так, подскажите, пожалуйста, что у меня не так? Сейчас работает и ваша функция и плагин.

  5. Прошу прощения нашла ошибку(особенности шаблона), еще раз спасибо за статью

  6. Спасибо за вашу статью. Все получилось! :!:

  7. Спасибо Вам огромное! Я с этой навигацией возилась не пойми сколько, а только Вы и помогли :smile:
    Спасибо!!

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

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

Captcha Captcha Reload

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Подписаться, не оставляя комментарий