Домой / Раскрутка и SEO / Навигация wordpress

Навигация wordpress

навигация wordpress
навигация wordpress

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

Здравствуйте, уважаемые друзья! Сегодня я Вам расскажу, как делается постраничная навигация wordpress без плагина.


Все очень даже просто делается. Вам будет нужно дочитать статью «Постраничная навигация wordpress без плагина» до конца и проделать все действия с кодом предложенным мной. И так, приступим ...

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

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

Думаю, что этих доводов достаточно, чтобы у Вас появилась постраничная навигация wordpress без плагина!

Делаем постраничную навигацию wordpress без плагина

Скопируйте код, который находится в открывающемся спойлере и вставьте в файл functions.php в конеце кода перед тегом  ?>:

 

Постраничная навигация wordpress без плагина Код для вставки на блог
function kama_pagenavi($before='', $after='', $echo=true) {

  /* ================ Настройки ================ */
  $text_num_page = ''; // текст для количества страниц. {current} заменится текущей, а {last} последней. Пример: 'Страница {current} из {last}' = Страница 4 из 60
  $num_pages = 10; // сколько ссылок показывать
  $stepLink = 10; // после навигации ссылки с определенным шагом (значение = число (какой шаг) или '', если не нужно показывать). Пример: 1,2,3...10,20,30
  $dotright_text = '…'; // промежуточный текст "до".
  $dotright_text2 = '…'; // промежуточный текст "после".
  $backtext = '«'; // текст "перейти на предыдущую страницу". Ставим '', если эта ссылка не нужна.
  $nexttext = '»'; // текст "перейти на следующую страницу". Ставим '', если эта ссылка не нужна.
  $first_page_text = ''; // текст "к первой странице" или ставим '', если вместо текста нужно показать номер страницы.
  $last_page_text = ''; // текст "к последней странице" или пишем '', если вместо текста нужно показать номер страницы.
  /* ================ Конец Настроек ================ */

  global $wp_query;
  $posts_per_page = (int) $wp_query->query_vars[posts_per_page];
  $paged = (int) $wp_query->query_vars[paged];
  $max_page = $wp_query->max_num_pages;

  if($max_page <= 1 ) return false; //проверка на надобность в навигации

  if(empty($paged) || $paged == 0) $paged = 1;

  $pages_to_show = intval($num_pages);
  $pages_to_show_minus_1 = $pages_to_show-1;

  $half_page_start = floor($pages_to_show_minus_1/2); //сколько ссылок до текущей страницы
  $half_page_end = ceil($pages_to_show_minus_1/2); //сколько ссылок после текущей страницы

  $start_page = $paged - $half_page_start; //первая страница
  $end_page = $paged + $half_page_end; //последняя страница (условно)

  if($start_page <= 0) $start_page = 1;
  if(($end_page - $start_page) != $pages_to_show_minus_1) $end_page = $start_page + $pages_to_show_minus_1;
  if($end_page > $max_page) {
    $start_page = $max_page - $pages_to_show_minus_1;
    $end_page = (int) $max_page;
  }

  if($start_page <= 0) $start_page = 1;

  $out=''; //выводим навигацию
    $out.= $before."<div class='wp-pagenavi'>\n";
        if ($text_num_page){
          $text_num_page = preg_replace ('!{current}|{last}!','%s',$text_num_page);
          $out.= sprintf ("<span class='pages'>$text_num_page</span>",$paged,$max_page);
        }

        if ($start_page >= 2 && $pages_to_show < $max_page) {
          $out.= '<a href="'.rtrim(get_pagenum_link(), '/').'">'. ($first_page_text?$first_page_text:1) .'</a>';
          if($dotright_text && $start_page!=2) $out.= '<span class="extend">'.$dotright_text.'</span>';
        }

        if ($backtext && $paged!=1) $out.= '<a href="'.rtrim(get_pagenum_link(($paged-1)), '/').'">'.$backtext.'</a>';

        for($i = $start_page; $i <= $end_page; $i++) {
          if($i == $paged) {
            $out.= '<span class="current">'.$i.'</span>';
          } else {
            $out.= '<a href="'.rtrim(get_pagenum_link($i), '/').'">'.$i.'</a>';
          }
        }

        if ($nexttext && $paged!=$end_page) $out.= '<a href="'.get_pagenum_link(($paged+1)).'">'.$nexttext.'</a>';

        //ссылки с шагом
        if ($stepLink && $end_page < $max_page){
          for($i=$end_page+1; $i<=$max_page; $i++) {
            if($i % $stepLink == 0 && $i!==$num_pages) {
              if (++$dd == 1) $out.= '<span class="extend">'.$dotright_text2.'</span>';
              $out.= '<a href="'.get_pagenum_link($i).'">'.$i.'</a>';
            }
          }
        }

        if ($end_page < $max_page) {
          if($dotright_text && $end_page!=($max_page-1)) $out.= '<span class="extend">'.$dotright_text2.'</span>';
          $out.= '<a href="'.get_pagenum_link($max_page).'">'. ($last_page_text?$last_page_text:$max_page) .'</a>';
        }
    $out.= "</div>".$after."\n";
  if ($echo) echo $out;
  else return $out;
}

Затем следующим шагом будет редактирование в файлах: index.php, search.php и archive.php.

Первое, ищем и меняем код:

  • Для тех, кто не устанавливал плагины постраничной навигации, ищем вот такой код:
<div class="navigation">
    <div class="navleft"><?php next_posts_link('&laquo; Предыдущие записи') ?></div>
    <div class="navright"><?php previous_posts_link('Следующие записи &raquo;') ?></div>
</div>
  •  Для тех, кто установил плагин постраничной навигации, ищем вот такой код:
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

В обоих случаях меняем вот на этот код:

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

 

Далее нужно прописать стили для нашей новой постраничной навигации. В файле style.css темы оформления пропишите вот этот код:

.wp-pagenavi {
 clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
 text-decoration: none;
 border: 1px solid #BFBFBF;
 padding: 3px 5px;
 margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
 border-color: #000;
}
.wp-pagenavi span.current {
 font-weight: normal;
}

Или вот такие стили, они немного красивее, чем выше предложенные:

.wp-pagenavi {
 clear: both;
 margin: 5px;
}

.wp-pagenavi a, .wp-pagenavi span {
 text-decoration: none;
 border: 1px solid #BFBFBF;
 padding: 3px 12px;
 margin: 2px;
 background-clip:padding-box;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 box-shadow:3px 3px 3px #666666;
 -webkit-box-shadow 5px 5px 15px #666666;
 -moz-box-shadow: 5px 5px 15px #666666;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
 border-color: #BFBFBF;
}
.wp-pagenavi span.current {
 font-weight: bold;
}

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

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



Про Валерий Бородин

Проверьте также

как быстро раскрутить инстаграм

Как быстро раскрутить Инстаграм или любой аккаунт соцсети?

Как быстро раскрутить Инстаграм, ВК, Youtube, Одноклассники, Twitter, Facebook и любую социальную сеть? Узнайте прямо …

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу