Блог Максима Войтика
Публикации о способах
заработка в интернете и SEO
Анализ сайта: Проверка Траста

Как создать постраничную навигацию плагином WP-PageNavi или PHP кодом

25 сентября 2012
Комментарии: 29

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

Привет уважаемые читатели! Я продолжаю серию полезных постов по настройке блога, сегодня вы узнаете, что такое постраничная навигация на wordpress, и как она реализовывается с помощью плагина wp-pagenavi или без него.

Если вы только недавно открыли для себя путь блоггинга и в этом деле совсем новичок, могу сказать, что движок wordpress (на котором сделан и работает этот блог) имеет небольшой недостаток.

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

админ панель wordpress

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

А если таких страниц со временем на блоге накопится 100 или 1000. Вот в таком случае нам поможет плагин постраничной навигации wp-pagenavi, который будет выводить в любом месте, где вы захотите вот такой список:

плагин постраничной навигации

или такой

плагин постраничной навигации wp-pagenavi

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

Лучший плагин постраничной навигации на wordpress


Первым делом вам потребуется скачать плагин wp-pagenavi, для этого переходите по этой ссылке.

Затем устанавливаем данный плагин. Для этого переходим в админ панель, затем выбираем вкладку «Плагины» далее «Добавить новый» потом "Загрузить" далее «Обзор» и "Установить". Подробно про установку плагинов я писал здесь.

плагин wp-pagenavi

Ждем пока плагин установится, а затем его активируем. Но не думайте что после этого у вас все сразу заработает, необходимо будет еще добавить специальной php-код, отвечающий за вызов функции плагина wp-pagenavi.

Добавьте следующий код:

<?php wp_pagenavi(); ?>

Во все файлы темы, где у вас будет выводиться постраничная навигация. У меня это главная страница (файл index.php), затем архивы (файл archive.php) и поиск по блогу (файл search.php).

Открываем данные файлы с помощью программы Notepad++ (можно непосредственно из консоли wordpress «Внешний вид» — «Редактор» — «Шаблоны»), находим там примерно следующие строчки:

код для плагина

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

код для плагина второй вариант

Внимательно изучив структуру, редактируемого файла, вы обязательно найдете что-то похожее. Точно, таким образом, замените код в файлах archive.php и search.php.

Теперь сохраняем изменения, закачиваем файлы на хостинг (используйте МакХост), перезагружаем страницу и смотрим полученный результат.

работа плагина wp-pagenavi

Основные настройки WP-PageNavi


Теперь давайте немного настроим вывод навигации страниц и разделов площадки. Для этого заходим в админ панель wordpress. Находим вкладку «Параметры» далее «Список страниц».

плагин список страниц

Перед нами откроется окно с настройками плагина.

постраничная навигация настройка

В поле «Шаблон общего списка страниц» я добавил слово «Страница» в итоге у меня выводится небольшое пояснение к текущей и общему количеству страниц.

навигация всех страниц сайта

В поля «Первая и последняя страница» вы можете задать название для заданных кнопок.

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

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

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

Чуть ниже вы можете отредактировать стиль списка страниц (обычный или выпадающий). Указать диапазон и количество страниц, а так же задать коэффициент для диапазонов страниц.

список страниц

Для самых продвинутых можно пойти еще дальше и попробовать изменить внешний вид плагина wp-pagenavi. Для этого необходимо отредактировать файл pagenavi-css.css, который отвечает за вывод стилевого оформления.

Его адрес у меня такой:

/httpdocs/wp-content/plugins/wp-pagenavi/pagenavi-css.css

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

Если есть еще какие-то сомнения, обязательно посмотрите видео по установке и настройке данного модуля.

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


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

Если кто-то не в курсе, то в предыдущих постах, я уже рассказывал какими еще способами можно ускорить проект, дабы его любили поисковые машины и посетители. Прочтите эти статьи: «Оптимизация базы данных» и «Кэширование».

Перед дальнейшими действиями хочу сразу сказать, что все php коды, о которых пойдет речь дальше надо вставить в файл functions.php.

Этот метод я позаимствовал на блоге alaev.info, именно его результат работы я посчитал наиболее правильным и стоящим, потому что только он добился того, что такая html постраничная навигация не будет содержать дублей страниц и редиректов.

Итак приступим... Первым делом нам потребуется вставить в любое место (между тегами ) файла functions.php вот этот код:

/*** Альтернатива wp_pagenavi (без лишних обращений к данным) ***/
 
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;
}

Затем во всех файлах, где будет осуществляться вывод списка страниц необходимо вставить код вместо предыдущего, отвечающего за вывод плагина wp-pagenavi.

Меняем в файлах index.php, archive.php и search.php код:

<?php wp_pagenavi(); ?>

на следующий

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

На последнем этапе вам потребуется перенести все стили из плагина к себе в файл style.css. Для этого открываем файл плагина pagenavi-css.css, который расположен по адресу:

/httpdocs/wp-content/plugins/wp-pagenavi/pagenavi-css.css

И копируем оттуда к себе в файл 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: bold;
}

Теперь перезагружаем страницу и смотрим полученный результат.

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

Заключение

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

Когда я только начинал заниматься блоггингом, было проще использовать плагин wp-pagenavi, но теперь я набрался опыта и решил не создавать лишнюю нагрузку на базу данных, перешел на альтернативную замену ему, сделав навигацию страниц за счет php кода без плагина.

Смех продлевает жизнь! Смейтесь от души и до слез. :)

Если понравилась статья обязательно подпишись на обновления блога, если что-то непонятно опишите в комментариях проблему, помогу всем. На этом у меня все, пока!

(3 голос., в среднем: 5,00 из 5)
Загрузка...
С уважением, Максим Войтик
Буду рад, если нажмете на любую из кнопок:
Комментарии (29)
  1. Элина в 09:08

    В общем, теперь мой блог не работает. 🙁

    Не знаю, что я там натворила!!!

    Вроде бы только код вставила. А у меня выдаёт

    Parse error: syntax error, unexpected $end in /home/osadchay/philosoff.net/www/wp-content/themes/twentyten/functions.php on line 593

    Я в панике.

    Ответить
    • Максим Войтик в 13:53

      Всегда сохраняйте копии редактируемых файлов )

      Ответить
  2. Анатолий в 11:03

    Не знаю, у Элины, но у меня плагин пошел на УРА! И правильно сказал Макс

    делайте копию например я пользуюсь WordPress Database Backup. 💡

    Ответить
  3. Елена в 11:38

    Установила плагин, но выглядит он не так, как у вас. Подскажите, пожалуйста, в чем может быть дело? Плагин отображается у меня на сайте справа под шапкой. Выглядит отвратительно 🙁

    Ответить
    • Максим Войтик в 19:22

      А вам куда его надо вставить? И что вас собственно не устраивает?

      Ответить
  4. Елена в 13:52

    Цвета — в первую очередь. Синий и черный на темном фоне 🙁 . Вы знаете, где настройка цветов у этого плагина? Еще не устраивает то, что номера страниц расположены вплотную друг к другу, а не как у вас, в квадратиках. Может, подскажите, как это исправить? 😳

    Ответить
    • Максим Войтик в 13:53

      Настройки плагина посмотрите по этому адресу wp-content/plugins/wp-pagenavi/pagenavi-css.css, в этом файле стилей все его настройки.

      Ответить
  5. Елена в 08:47

    Спасибо, попробую разобраться.

    Ответить
  6. Елена в 09:20

    Изменения не сохраняются 🙁 . В редакторе плагина пишет, что этот файл отключен, такая строчка:

    Редактирование wp-pagenavi/pagenavi-css.css (отключен)

    Хотя плагин активен. В настройках галочку соответствующую поставила, толку никакого 🙁

    Ответить
    • Максим Войтик в 13:15

      Могу вам на почту скинуть свой файл pagenavi-css.css для сравнения?

      Ответить
  7. Елена в 12:17

    Спасибо, вышлите, пожалуйста. Решение проблемы я нашла в конце вашей статьи, спасибо огромное! Я скопировала содержимое этого файла в style.css и плагин заработал, только он расположен не по центру, а слева. С цветами я думаю, разберусь, но как разместить его по центру?

    P.S. Еще раз спасибо за помощь.

    Ответить
    • Максим Войтик в 20:53

      Все элементарно...откройте файл в котором прописывает код вывода плагин, у меня это single.php и пропишите его между тегами div

      <div align="center"></div>здесь прописывает код вывода навигации

      Ответить
  8. Елена в 17:47

    Спасибо, получилось, правда не так как вы написали. Осталось цвета подправить и все!

    Ответить
  9. Артём в 16:27

    Не нашёл код "". Тема стандартная twentytwelve. Буду рад если поможете.

    P.S. Смайлики у вас стандартные как-то не сочетаются с профессиональным дизайном блога.

    P.P.S. Особенно прикалывает вот этот: 😀

    Ответить
    • Максим Войтик в 17:28

      Зато они реализованы без плагина, в будущем буду менять на уникальные, пока нет времени на такие мелочи...

      Ответить
  10. Stratocaster в 05:17

    Тоже пользуюсь kama_pagenavi на своем блоге i-wanna-think.ru, очень доволен! Самое главное — удалось обойтись без плагина.

    Ответить
  11. Станислав в 19:20

    Спасибо! Рисковать не стал. Поставил плагин. Хотя дизайн делался специально, у меня плагин сработал без кода. Все равно, спасибо.

    Ответить
  12. Илья в 23:28

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

    Ответить
  13. Простой в 15:48

    Здравствуйте.

    Может подскажите советом.

    Вопрос в следующем:

    И с плагином page navi и без него с этим кодом — построчная навигация работает без проблем.

    Но не работает она в обоих случаях только в архиве автора. То есть: сайт.ру/автор/имя автора/page/2 и так далее (page/3...page/5).

    Навигация выводится благодаря файлу loop.php и там заменял строки:

    <?php next_posts_link ( __ ( ' ', 'slidingdoor' ) ); ?>

    <?php previous_posts_link ( __ ( ' ', 'slidingdoor' ) ); ?>

    Соответственно на строки плагина:

    Или когда делал без плагина, то заменял на:

    Всё прекрасно работает. Только в архиве автора нет. Когда переходишь на страница 2 (или любую другую), то выдаёт: такой страницы нет.

    Буду признателен за совет.

    Ответить
  14. 4idroid в 13:21

    Отлично, все вышло. Большое спасибо!

    Ответить
  15. Александр Блуждающий в 22:00

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

    Только вот не задача одна появилась, пустой квадратик с точками, как у вас на скриншоте

    seoslim.ru/wp-content/upl...novka-490×37.gif

    перед квардратом страницы 20 стоит пустой квадрат. где его можно убрать?

    Ответить
    • Максим Войтик в 23:16

      Так так я создавал смайлики без плагино, тогда ковыряться в коде нужно в файле function.php.

      Ответить
  16. Юлия в 08:47

    Максим, можно к вам обратиться за помощью? Не могу разобраться, какой код поменять, чтобы плагин WP-pagenavi заработал. У меня немного другой код в index.php, не такой, как все описывают. Обыскалась по всем блогам, нигде не могу найти пример как у меня. У меня кусок кода довольно длинный, не знаю, можно ли его в комментарий запихнуть.

    Ответить
    • Максим Войтик в 09:33

      Напишите мне на почту, через раздел Контакты.

      Ответить
  17. Жук Юрий в 19:09

    Я вот тоже хочу сейчас без плагина постраничную навигацию установить.

    ;-) Недавно пробовал, но не получилось.

    Ответить
  18. Игорь в 12:26

    Хочу изменить свою навигацию,на вашу,с помощью плагина WP-PageNavi.

    Спасибо за видео инструкцию.

    Ответить
  19. Aleksandr в 22:49

    а что лучше выбрать плагин или рнр? у меня плагин на данный момент стоит

    Ответить
    • Игорь в 23:40

      Конечно же код рнр.

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

      Ответить
  20. Денис в 12:59

    Здравствуйте. Что я неправильно сделал:

    ( ! ) Parse error: syntax error, unexpected T_VARIABLE in D:\OpenServer\domains\test1.ru\wp-content\themes\esteem\functions.php on line 268

    Call Stack

    #

    Строка 268 — это:

    $text_num_page = 'Страница {current} из {last}';

    Благодарю.

    Ответить
Оставить свой комментарий
Обязательно ознакомьтесь с правилами комментирования!!! СПАМ будет удален!
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]

© 2011-2017 seoslim.ru, блог Максима Войтика

Внимание! Копирование материала строго запрещено. Соблюдайте авторские права и уважайте труд других людей!