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

Віталий

11 років ago

Доброе время суток. Каждый кто работает с WordPress, сталкивается с тем что хочет увидеть на своем блоге удобную постраничную навигацию. Стандартной навигации, которая представляет собой - Предыдущая запись и Следующая запись, явно мало - хочется чтобы разбивало на страницы. Многие пользуются плагином WP-PageNavi, он удобный и в полной мере справляется со своей задачей. Но мы легких путей не ищем 🙂 Тем более если мы хотим уменьшить до минимума использование плагинов, которые в огромном количестве явно замедляют работу нашего блога. Поэтому сегодня мы рассмотрим простенький способ как добавить удобную постраничную навигацию на WordPress без использования плагинов. Приступим!

1. Пропишем функцию в файл 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 = 1; //1 - выводить текст "Страница N из N", 0 - не выводить  
      $a['mid_size'] = 3; //сколько ссылок показывать слева и справа от текущей  
      $a['end_size'] = 1; //сколько ссылок показывать в начале и в конце  
      $a['prev_text'] = 'Назад'; //текст ссылки "Предыдущая страница"  
      $a['next_text'] = 'Дальше'; //текст ссылки "Следующая страница"  
      
      if ($max > 1) echo '<div class="navigator">';  
      if ($total == 1 && $max > 1) $pages = '<span class="pages">Страница ' . $current . ' из ' . $max . '</span>'."\r\n";  
      echo $pages . paginate_links($a);  
      if ($max > 1) echo '</div>';  
    }

В коде присутствуют подсказки, думаю кто захочет поиграться с настройками разберется без проблем.

2. Выводим навигацию на страницах нашей темы.

Для того, чтобы вывести навигацию, нужно вставить код в в нужном месте. К примеру навигация используется в файле category.php или index.php. Нужно найти стандартную навигацию заменить ее. У меня она выглядела так:

<div>
	<div><?php next_posts_link('&laquo; Раньше') ?></div>
	<div><?php previous_posts_link('Позже &raquo;') ?></div>
</div>

или как то так:

<nav id="nav-single">
<div class="assistive-text"><?php _e( 'Post navigation', 'gstudio' ); ?></div>
<span class="nav-previous"><?php previous_post_link( 'Предыдущая запись <br> %link'); ?></span>
<span class="nav-next"><?php next_post_link ('Следующая запись <br> %link'); ?></span>
<div class="clear"></div>
</nav><!-- #nav-single -->

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

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

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

3. Зададим стили css нашей навигации

Ниже приведен css код с видом как на моем сайте, который нужно вставить в файл style.css. Если вы хоть немного разбираетесь в css, думаю вы без проблем подгоните его под себя.

.navigator {
padding:22px 0 25px 0;
overflow:hidden;
font-size:13px;
color:#333333;
clear:both;
margin:0 auto;
text-align:center;
}
.navigator a{
color: #333333;
font-size: 13px;
padding:5px 9px;
text-decoration: none;
-moz-box-shadow:  0 1px 2px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
box-shadow:  0 1px 2px rgba(0,0,0,0.4);

}
.navigator span.pages {padding: 3px 5px;
color: #ffffff;
background: #544DA7; 
padding:5px 9px;
-moz-box-shadow:  0 1px 2px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.navigator a:hover{
background: #544DA7; 
color: #ffffff;
font-size: 13px;
text-decoration: none;
padding:5px 9px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.navigator span.current {background: #fff;
border: 1px solid #544DA7; 
font-size: 13px;
padding:5px 9px;
text-decoration: none;
-moz-box-shadow:  0 1px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:  0 1px 2px rgba(0,0,0,0.4);
box-shadow:  0 1px 2px rgba(0,0,0,0.4);
}
.navigator span.extend {
padding:5px 9px;
background:#f1f8f9;
border: 1px solid #544DA7; 
}
.str{background: #fff;
color: #333333;
font-size: 13px;
padding:5px 9px;
text-decoration: none;
-moz-box-shadow:  0 1px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:  0 1px 2px rgba(0,0,0,0.4);
box-shadow:  0 1px 2px rgba(0,0,0,0.4);}

Вот и все что нужно, чтобы заработала постраничная навигация на WordPress. Если вы все вставили правильно то у вас появится симпатичная навигация.
На этом все. Спасибо за внимание 🙂

Exit mobile version