>
Главная » WordPress » Как добавить постраничную навигацию на WordPress?
    РейтингРейтингРейтингРейтингРейтинг

Как добавить постраничную навигацию на WordPress

В данном материале я покажу, как делается постраничная навигация без плагинов и с помощью всем известного WP-PageNavi.

Устанавливаем плагин Prime Strategy Page Navi через админку — плагины — добавить новый или скачиваем с официального сайта вордпресс https://wordpress.org/plugins/prime-strategy-page-navi/

После активации настроек нам нужно будет проделать только две манипуляции. Первое это зайти в файлы вашего шаблона, они находятся в разделе внешний вид — редактор. Справа в файлах index.php, archive.php, category.php, search.php находим код примерно такого вида

<div class="navleft"><?php next_posts_link('&laquo; Предыдущие записи') ?></div>
<div class="navright"><?php previous_posts_link('Следующие записи &raquo;') ?></div>

Удаляем его и вставляем на его место следующую строчку

<?php if ( function_exists( 'page_navi' ) ) { page_navi(); } ?>

Теперь нужно вставить стили для нашей навигации, там же в редакторе находим файл style.css в него вставим следующий css

код

  1. .page_navi {
  2. text-align: center;
  3. }
  4. .page_navi li {
  5. display: inline;
  6. list-style: none;
  7. }
  8. .page_navi li.current span {
  9. color: #000;
  10. font-weight: bold;
  11. display: inline-block;
  12. padding: 3px 7px;
  13. background: #fee;
  14. border: solid 1px #fcc;
  15. }
  16. .page_navi li a {
  17. color: #333;
  18. padding: 3px 7px;
  19. background: #eee;
  20. display: inline-block;
  21. border: solid 1px #999;
  22. text-decoration: none;
  23. }
  24. .page_navi li a:hover {
  25. color: #f00;
  26. }
  27. .page_navi li.page_nums span {
  28. color: #fff;
  29. padding: 3px 7px;
  30. background: #666;
  31. display: inline-block;
  32. border: solid 1px #333;
  33. }
  34.  

Навигация должна получится следующего вида

Плагин WP PAGENAVI

Этот плагин имеет  понятную страницу настроек,  в связке с плагином WP PageNavi Style, можно поменять цвет навигации без каких либо правок css кода. Установим эти два плагина и перейдем в настройки

 и настраиваем пункт в "списке страниц".

Далее  находим в вашем шаблоне похожее на это:

<div class="navleft"><?php next_posts_link('&laquo; Предыдущие записи') ?></div>

<div class="navright"><?php previous_posts_link('Следующие записи &raquo;') ?></div>

Удаляем и вставляем следующий код:

<?php wp_pagenavi(); ?>

В настройках WP PageNavi Style справа в админке создать свою вкладку. Здесь все просто, в выпадающем списке выбираем цвет навигации, и ее положение:

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

Информация для тех кто не любит пользоваться плагинами. Нужно скопировать следующий код и вставить его в файл functions.php

  1. /**
  2. * Альтернатива wp_pagenavi. Создает ссылки пагинации на страницах архивов
  3. *
  4. * @param string $before - текст до навигации
  5. * @param string $after - текст после навигации
  6. * @param bool $echo - возвращать или выводить результат
  7. * @param array $args - аргументы функции
  8. *
  9. * Версия: 2.2
  10. * Автор: Тимур Камаев
  11. * Ссылка на страницу функции: http://wp-kama.ru/?p=8
  12. */
  13. function kama_pagenavi( $before = '', $after = '', $echo = true, $args = array() ) {
  14. global $wp_query;
  15.  
  16. // параметры по умолчанию
  17. $default_args = array(
  18. 'text_num_page' => '', // Текст перед пагинацией. {current} - текущая; {last} - последняя (пр. 'Страница {current} из {last}' получим: "Страница 4 из 60" )
  19. 'num_pages' => 10, // сколько ссылок показывать
  20. 'step_link' => 10, // ссылки с шагом (значение - число, размер шага (пр. 1,2,3...10,20,30). Ставим 0, если такие ссылки не нужны.
  21. 'dotright_text' => '…', // промежуточный текст "до".
  22. 'dotright_text2' => '…', // промежуточный текст "после".
  23. 'back_text' => '« назад', // текст "перейти на предыдущую страницу". Ставим 0, если эта ссылка не нужна.
  24. 'next_text' => 'вперед »', // текст "перейти на следующую страницу". Ставим 0, если эта ссылка не нужна.
  25. 'first_page_text' => '« к началу', // текст "к первой странице". Ставим 0, если вместо текста нужно показать номер страницы.
  26. 'last_page_text' => 'в конец »', // текст "к последней странице". Ставим 0, если вместо текста нужно показать номер страницы.
  27. );
  28. $args = array_merge( $default_args, $args );
  29. extract( $args );
  30.  
  31. $posts_per_page = (int) $wp_query->query_vars['posts_per_page'];
  32. $paged = (int) $wp_query->query_vars['paged'];
  33. $max_page = $wp_query->max_num_pages;
  34.  
  35. //проверка на надобность в навигации
  36. if( $max_page <= 1 )
  37. return false;
  38.  
  39. if( empty( $paged ) || $paged == 0 )
  40. $paged = 1;
  41.  
  42. $pages_to_show = intval( $num_pages );
  43. $pages_to_show_minus_1 = $pages_to_show-1;
  44.  
  45. $half_page_start = floor( $pages_to_show_minus_1/2 ); //сколько ссылок до текущей страницы
  46. $half_page_end = ceil( $pages_to_show_minus_1/2 ); //сколько ссылок после текущей страницы
  47.  
  48. $start_page = $paged - $half_page_start; //первая страница
  49. $end_page = $paged + $half_page_end; //последняя страница (условно)
  50.  
  51. if( $start_page <= 0 )
  52. $start_page = 1;
  53. if( ($end_page - $start_page) != $pages_to_show_minus_1 )
  54. $end_page = $start_page + $pages_to_show_minus_1;
  55. if( $end_page > $max_page ) {
  56. $start_page = $max_page - $pages_to_show_minus_1;
  57. $end_page = (int) $max_page;
  58. }
  59.  
  60. if( $start_page <= 0 )
  61. $start_page = 1;
  62.  
  63. //выводим навигацию
  64. $out = '';
  65.  
  66. // создаем базу чтобы вызвать get_pagenum_link один раз
  67. $link_base = get_pagenum_link( 99999999 ); // 99999999 будет заменено
  68. $link_base = str_replace( 99999999, '___', $link_base);
  69. $first_url = user_trailingslashit( get_pagenum_link( 1 ) );
  70. $out .= $before . "<div class='wp-pagenavi'>\n";
  71.  
  72. if( $text_num_page ){
  73. $text_num_page = preg_replace( '!{current}|{last}!', '%s', $text_num_page );
  74. $out.= sprintf( "<span class='pages'>$text_num_page</span> ", $paged, $max_page );
  75. }
  76. // назад
  77. if ( $back_text && $paged != 1 )
  78. $out .= '<a class="prev" href="'. str_replace( '___', ($paged-1), $link_base ) .'">'. $back_text .'</a> ';
  79. // в начало
  80. if ( $start_page >= 2 && $pages_to_show < $max_page ) {
  81. $out.= '<a class="first" href="'. $first_url .'">'. ( $first_page_text ? $first_page_text : 1 ) .'</a> ';
  82. if( $dotright_text && $start_page != 2 ) $out .= '<span class="extend">'. $dotright_text .'</span> ';
  83. }
  84. // пагинация
  85. for( $i = $start_page; $i <= $end_page; $i++ ) {
  86. if( $i == $paged )
  87. $out .= '<span class="current">'.$i.'</span> ';
  88. elseif( $i == 1 )
  89. $out .= '<a href="'. $first_url .'">1</a> ';
  90. else
  91. $out .= '<a href="'. str_replace( '___', $i, $link_base ) .'">'. $i .'</a> ';
  92. }
  93.  
  94. //ссылки с шагом
  95. $dd = 0;
  96. if ( $step_link && $end_page < $max_page ){
  97. for( $i = $end_page+1; $i<=$max_page; $i++ ) {
  98. if( $i % $step_link == 0 && $i !== $num_pages ) {
  99. if ( ++$dd == 1 )
  100. $out.= '<span class="extend">'. $dotright_text2 .'</span> ';
  101. $out.= '<a href="'. str_replace( '___', $i, $link_base ) .'">'. $i .'</a> ';
  102. }
  103. }
  104. }
  105. // в конец
  106. if ( $end_page < $max_page ) {
  107. if( $dotright_text && $end_page != ($max_page-1) )
  108. $out.= '<span class="extend">'. $dotright_text2 .'</span> ';
  109. $out.= '<a class="last" href="'. str_replace( '___', $max_page, $link_base ) .'">'. ( $last_page_text ? $last_page_text : $max_page ) .'</a> ';
  110. }
  111. // вперед
  112. if ( $next_text && $paged != $end_page )
  113. $out.= '<a class="next" href="'. str_replace( '___', ($paged+1), $link_base ) .'">'. $next_text .'</a> ';
  114.  
  115. $out .= "</div>". $after ."\n";
  116. if ( ! $echo )
  117. return $out;
  118. echo $out;
  119. }

Теперь в то место где должна выводится навигация нужно вставить

<?php kama_pagenavi(); ?>

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

На этом все!

css template

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!