Установка постраничной навигации без плагинов
Life-crazy.ru | блог о SEO
и заработке в Интернет


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

Доброго времени суток, уважаемые читатели блога. Сегодня речь пойдет о постраничной навигации. Постраничная навигация — очень нужная функция при создании блога. Ее можно реализовать при помощи плагинов и при помощи кода.  В этом посте, я научу вас делать постраничную навигацию кодом.

Постраничная навигация

В интернете масса информации по установке постраничной навигации при помощи различных плагинов, наиболее популярный плагин — «WP-PageNavi». Как я уже неоднократно говорил, плагины нагружают блог и по-возможности, необходимо избавляться от них!

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

Я уже избавился от некоторых плагинов. Конкретней можете почитать здесь:  «Топ комментаторы без плагина», «Кнопка вверх для сайта».

Вообще, зачем нужна эта навигация? Ответ прост – она необходима для удобства! Стандартная навигация очень НЕ удобная, выглядит она приблизительно так:

стандартная навигация

И если у вас на блоге более чем 20-30 статей, то читатель просто за*****ся щелкать по следующим записям. Для комфортной юзабельности, создали правильную постраничную навигацию, выглядит она так:

правильная навигация

Чтобы ее настроить, нужно открыть файл functions.php вашего шаблона любым текстовым редактором и после открывающегося элемента  — «<?php» вставить данный код:

 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>'.$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>'.$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>'.$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>'.$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;
}

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

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

Если вы не сильны в php, ищите нечто подобное:

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

и меняйте на строку, указанную выше.

(у меня это файлы: index.php, archive.php и search.php – если вы пользуетесь поиском от google или яндекс, то в последний файл можете не вносить код.) Открывайте эти файлы при помощи любого текстового редактора, я рекомендую Notepad++.

Вот и все ребятки, постраничная навигация практически готова, остается последний маленький шаг. Нужно добавить оформление для нее. Открываем файл “Style.css” и в самый конец добавляйте данный код:

 .wp-pagenavi {
    clear: both;
    padding:2px;
    text-align:center;
}
.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: bold;
}

На свое усмотрение можете менять оформление. Вот что получилось у меня.

результат

Примечание! Если у вас не получается отредактировать стили, то это значит, что похожий код уже установлен. Чтобы его обнаружить, открывайте файл «Style.css», жмите сочетание клавиш CTRL+F и в строке поиска введите wp-pagenavi и жмите «найти». Удалите весь код, где встречается wp-pagenavi и оставьте только тот код, который приведен выше.

На этом у меня все. Жду ваших комментариев. Подписывайтесь на обновления блога и стройте свой блог правильно с первых дней его жизни!

Классное видео «Секс танец»

С уважением, Михед Александр

Метки:


Комментарии
  1. Людмила Винокурова  |  13.03.2013 в 08:07  |  Цитировать

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

    Ответить
    • Михед Александр  |  13.03.2013 в 09:27  |  Цитировать

      Спасибо Людмила. Если будут затруднения обращайтесь. С радостью помогу;)

      Ответить
  2. Александр  |  30.04.2013 в 16:35  |  Цитировать

    спасибо автору за нужную подсказку, всё отлично работает плагин убит 😀

    Ответить
    • Михед Александр  |  30.04.2013 в 18:48  |  Цитировать

      Пользуйтесь 😉 рад помочь))

      Ответить
  3. Юрий  |  31.05.2013 в 06:59  |  Цитировать

    Хе хе изменил, спасибо! А то раньше было «следующие записи» «предыдущие записи» очень не удобно.  =)

    Ответить
    • Михед Александр  |  31.05.2013 в 07:05  |  Цитировать

      Рад помочь Юрий 😉

      Ответить
  4. Сергей  |  24.10.2013 в 04:33  |  Цитировать

    У меня в новой теме Вордпресс вполне сносная постраничная навигация встроена. Вот в предыдущей не было и плагины работали не очень корректно. Вот тогда бы мне эту статью =)

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

up