Всем привет! Немного раньше я обещал, что на SEO-Mayak.com я расскажу, как делается постраничная навигация на WordPress без плагина. Сегодня как раз наступил тот день.
Сложного особо нечего нет, может это мне так кажется, но в любом случаи я постараюсь как можно подробней описать процесс установки и последующее оформление стилей постраничной навигации.
В свей недавней статье «Постраничная навигация на WordPress с помощью плагина WP-PageNavi» я уже говорил о важности улучшения юзабилити блога, тем самым способствовать повышению показателя поведенческих факторов.
Представьте, что Вы читаете книгу, а в вместо номеров страниц в ней указано «Следующая страница» и «Предыдущая страница». По-моему Вы кого-нибудь точно захотели бы уволить из редакции за служебное несоответствие.
Так почему же на блогах сплошь и рядом встречается такое «служебное несоответствие». Дорогие товарищи, давайте ударим знаниями по невежеству и сделаем на своем блоге самую красивую постраничную навигацию без помощи всяких там плагинчиков.
Наверное еще раз стоит сказать про дополнительную нагрузку на сервер, которую создают плагины и по мере возможности надо от них избавляться, чем мы сейчас и займемся.
Постраничная навигация для WordPress на основе PHP без плагина
В свое время я перепробовал множество решений постраничной навигации без плагинов, но не все «самопальные» коды корректно работали и идеальный вариант я нашел на блоге wp-kama.ru, за что Тимуру моя огромная благодарность.
Вот сам код, который надо вставить в файл functions.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 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. Советую использовать для редактирования файлов текстовый редактор Notepad++.
Если Вы еще не устанавливали плагины постраничной навигации ,то строчки, которые нам надо заменить должны выглядеть примерно так:
<div class="navigation"> <div class="navleft"><?php next_posts_link('« Предыдущие записи') ?></div> <div class="navright"><?php previous_posts_link('Следующие записи »') ?></div> </div>
Ели у вас уже был установлен плагин WP-PageNavi, то ищем такой код:
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
И заменяем вышеуказанные строчки на:
<?php if (function_exists('kama_pagenavi')) kama_pagenavi(); ?>
Если возникли сложности со поиском нужных строчек, пишите в комментариях — постараюсь помочь!
Прописываем стили для постраничной навигации
Стили для плагина WP-PageNavi выглядят так:
.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; }
Эти стили вполне подходят и для данного PHP решения. Просто скопируйте стили и вставьте в конец файла style.css, который находится в папке с вашей темой.
Для соединения с сервером лучше всего использовать FTP клиент. Если Вы еще не знаете как пользоваться этой программой, то советую почитать статью «FTP клиент Filezilla»
Можно немного приукрасить нашу навигацию, изменить цвет фона или немного скруглить края, настроить отступы и т.д, но для этого необходимо иметь хотя бы базовые знания в языках HTML и CSS.
В дальнейшем я планирую сделать отдельную рубрику, где я буду по полочкам разбирать основные значения и принципы строения HTML и CSS, так что советую подписаться на обновления блога.
Ну а на десерт я приготовил для вас готовые стили, которые я сам составлял для постраничной навигации моего блога
.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; }
На сегодня у меня все. Как Вам статья?
С уважением, Виталий Кириллов
Все любят цирк, но таких представлений я в детстве не видел!
Очень симпатичная навигация на первой странице блога. Моя проще, но сделана благодаря данному коду. Нажимать по кнопочкам таким сплошное удовольствие. Интересно а круглые тоже можно сделать или это фантастика?
Наталья, стили с скругленными краями найдете в самом конце статьи.
Эх слишком поздно. Буквально месяц назад искала такую информацию Признаюсь, еле нашла, которая мне была полезна.
Сейчас ничего не меняю, не переделываю. Не до этого. Столько других дел навалилось, что я ничего особенно и не делаю по блогу. Только ответы на комментарии и раз в 2-3 дня — ставлю статью.
Здравствуйте Анна, да всему свое время, самое главное статьи успевать выпускать периодически. Я вот тоже никак не могу сайдбаром заняться, а надо, обещал ведь всем топ комментаторов сделать…
Чувак из цирка круче сделал, чем в Минуте славы показывали. Когда на вертикальную палку поставил, тут вообще круто.
А эта навигация — это вместо карты сайта что ли?
Очень рада знакомству с вашим блогом, каждая статья на вес золота, есть чем воспользоваться и много нужного для применения! Огромное спасибо за рекомендации и подробнейшие объяснения!
Пожалуйста Елена, Рад видеть Вас на блоге!
Захотелось тоже такую навигацию сделать, стили поставила, а они почему-то не работают. Так некрасиво показывает страницы, как мне это изменить?
Елена, стили надо изменять под свой шаблон.
Я не очень в этом разбираюсь, может Вы мне подскажете что и где мне нужно изменять?
Елена Вы выведите у себя на блоге, что у Вас получается, а я посмотрю, что можно сделать.
Елена, а Вы что именно хотели подправить в постраничной навигации?
Я сделала, можете посмотреть
Я посмотрел, что Вы конкретно хотите изменить?
Хочу, чтобы постраничная навигация была красивая, такая как у Вас. Я пробовала ставить первые стили, и те что Ваши, все остается одинаково ((
Все получиться, попробуйте поискать ощибки
Я только что еще раз переустановила стили, и все получилось! Спасибо большое, все благодаря Вам. У Вас супер сайт, я даже на обновления подписалась! Вы умеете все хорошо обьяснять!
Спасибо Елена!
Отлично! На одном из проектов ну никак не хотел фурычить плагин WP-PageNavi (видимо, из-за каких-то особенностей темы), а данная безплагинная альтернатива встала и заработала сразу и на ура. В общем, сбросил ещё один геммор со своих плеч))) Спасибо, старина!
Пожалуйста!
Здравствуйте, Виталий!
Спасибо Вам огромное за представленную статью. Хорошая, четкая, пошаговая подача информации помогла мне, наконец, правильно настроить постраничную навигацию без плагина.
Дело в том, что после обновления wordpress у меня перестал корректно работать плагин Page-Navi, а именно,при активированном плагине на главной странице перестал отображаться полностью боковой блок, полностью перестал работать переход по рубрикам и переключение по страницам. В моей ситуации установка постраничной навигации без плагина-идеальное решение.
Хочу поделиться информацией о том, что мне пришлось сделать немного не так , как описано Вами ( моя тема создана в программе artisteer).Возможно, кому-то пригодится.
1.Сам код в файле function.php я вставила не в конце, а в самом начале кода после <?php. Хорошо, что сделала копию файла, потому как, когда вставила в конец файла, как описано у Вас в статье, блог стал полностью недоступен. Пришлось через с-panel хостинга восстанавливать сохраненный файл.
2.Код вставила в файлы index.php, search.php и archive.php после кода вместо строчек
Отдельное спасибо за стили!!! 🙂
С уважением.
Супер! Спасибо!
Виталий попробовала сделать по вашему совету и вот что у меня получилось — просто перечень цифр, как это исправить, и зачем что то делать через FTR — это нужно обязательно, я не поняла.И еще в файле archive.php. таких строчек нет в моем шаблоне.
Анна, надо стили добавить и все будет нормально.
Виталий стили добавила, те которые вы предлогаете и вот что у меня получилось
12345678»
Анна а Вы ту строчку скопировали?
Надо вот эту строчку:
[php]<?php if (function_exists(‘kama_pagenavi’)) kama_pagenavi(); ?>[/php]
Вставить вместо:
[php]<div class="navigation">
<div class="navleft"><?php next_posts_link(‘« Предыдущие записи’) ?></div>
<div class="navright"><?php previous_posts_link(‘Следующие записи »’) ?></div>
</div>
[/php]
Да именно так я и сделала, только в архив.пиашпи у меня нет тех строчек какие нужно заменить и стили я добавила ваши — последний вариант.
А код в файл functions.php вставляли?
Да, конечно вставляла.
Странно…у всех работает.
Ура, кнопки стали как у вас — красивые и я для этого ничего не делала, странно. Сегодня только обнаружила, теперь вставлю и на другой сайт тоже. Спасибо.
Анна надо было кеш браузера сбросить и все бы сразу было нормально.
у меня вопрос как модифицировать до вашей?чтоб показывало Страница 1 из 7 к примеру
Вадим, обращаю Ваше внимание на этот участок кода:
[php] /* ================ Настройки ================ */
$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 = »; // текст "к последней странице" или пишем », если вместо текста нужно показать номер страницы.
/* ================ Конец Настроек ================ */[/php]
Все настройки производятся здесь!
Это единственный блог, рекомендации автора которого действительно помогли мне создать постраничную навигацию на сайте без плагина. Огромное спасибо!
Спасибо Айна!
Спасибо, Виталий, за хорошее объяснение и хорошую работу кода! С Вашей помощью надеюсь отказаться от пары-тройки плагинов
Пожалуйста Ярослав, рад видеть Вас на блоге!
Спасибо за хорошую статью, всё очень понятно и доходчиво.
Но или я такой или новый шаблон сильно отличается от старого. Теперь некоторые вещи найти в нём просто не могу. В роди и шаблон лучше, да и в настройках, более гибкий, а установить навигацию не получается. Не в одном из трёх файлов не могу найти даже близко похожие строки, которые заменить надо, или они очень отличаются от описанных. Да и файл у меня вот такой есть «navigation.php» в нём я так понял родная форма.
И вот в итоги, прошу помочь разобраться, а то вообще не как.
Дмитрий, шаблоны меняются и в новых действительно с первого взгляда много непонятных вещей. В них за частую файлы разделены на несколько частей. Например, к файлу index.php подключен 1, 2 или 3 дополнительных файла. Подключение выглядит примерно так:
[php]<?php get_template_part(‘/includes/post’); ?>[/php]
Где ‘/includes/post’ путь к подключенному файлу, относительно корня шаблона. Названия у подключаемых файлов конечно могут быть другими.
Проследуйте по указанным путям и найдете место куда надо вставить код вызова постраничной навигации.
Теперь по поводу файла navigation.php. Многие шаблоны, особенно премиумные, имеют, так сказать, не законченный вид. Т.е. просто заплатите и вам подключать дополнительные функции. Конечно мало кто платит. Я например самостоятельно могу найти «ключики» к этим спящим функциям, ну а Вам советую пока этим не заморачиваться, так как дело мудреное.
Ваша задача на данном этапе разобраться со структурой шаблона.
Спасибо, попробую разобраться.
Разобрался!!! Навигация получилась просто КЛАСС, только вот стили использовал свои. Спасибо Вам за хороший, а главное полезный блог.
Виталий, благодарю! ты лучший! я с этой навигацией бился уже дня три пока на твой блог не попал! спасибо! Вот если бы еще подсказал как комменты сделать как у тебя, то благодарность моя вообще границ бы не знала! 🙂
Андрей, что особенного в моих комментах?
Виталий, особенного в них нет ничего, но если ты зайдёшь на мой блог, то увидишь насколько они отличаются от моих. Я не могу сделать, чтобы текст был в рамке и древовидные и всё это хочется сделать кодом, а не плагином.
Здравствуйте, Виталий. Огромное Вам спасибо за стили к постраничной навигации! Я конечно их подправила для себя, но маленькая загвоздка — как сделать навигацию по центру страницы, а не справа?
Здравствуйте Ольга!
Надо добавить к классу .wp-pagemavi следующее:
Можно просто заключить код вызова функции в теги center:
Спасибо, Виталий, получилось с помощью заключения кода вызова в теги center.
Процветания Вашему блогу!
Здрасти!
Исправьте ошибку:
не правильно: text-aligin: center;
правильно: text-align: center;
Спасибо Павел, уже исправил.
Убедилась на собственном опыте, что хороший код не так просто найти. То навигация некорректно отображается, то блог «улетучивается» на глазах. Воспользовалась кодом из данной статьи и всё встало на свои места — красиво и аккуратно. Огромное спасибо за подробную и качественную статью!
Пожалуйста Анна, рад видеть Вас на блоге!
Получилось все с первого раза, спасибо. Убрал еще один плагин. Только код вставлял не в файлы index.php, search.php и archive.php. У меня в шаблоне есть файл navigation.php. В него и вставил, все работает. Еще раз спасибо, Виталий.
Виталий я сделал все как Вы написали в этой статье. Все получилось, только у меня на сайте не показывает сколько страниц (страница 1 из 5) и последняя страница. вместо них отображается кнопка с ромбикам и внутри его вопросительный знак. Может я что не так сделал, подскажите пожалуйста, что нужно сделать.
Если вопросики, значит у символов неправильная кодировка. Попробуйте сохранить функцию в отдельно файле и изменить кодировку, затем переместите в functions.php
Сделал все, как Вы ответили мне. Ничего не помогло, вроде кодировка правильная. Что делать???
Так вроде или правильная? Какая у Вас стоит кодировка?
Спасибо, который раз выручаешь. держи +
Спасибо за интересную и полезную статью!
Спасибо! Установил код, посмотрим как он себя покажет в будущем. А его нужно закрывать от индексации wp-pagenavi я вроде бы закрывал?
Виталий, спасибо большое за подробный урок! Наконец-то получилось избавиться от плагина pagenavi, и навигация на блоге смотрится очень симпатично. Здорово!
Здравствуйте, Виталий! Возникла проблема с данной навигацией, вернее ее адаптацией к мобильным версиям. Вы еще занимаетесь данным вопросом?
Эдакс, нет еще не занимался, все руки не дойдут.
Здравствуйте Виталий! Хорошая статья, спасибо! А не подскажите есть ли у Вас на блоге как сделать внизу страницы как у Вас : (предыдущая статья), (следующая статья) и с названием статей?
Здравствуйте Антон! Читайте здесь.
Спасибо огромное Виталий! Всё доходчиво и грамотно написано!
Здравствуйте, Виталий!
С осени держу Ваш блог в закладках, так как знания которыми Вы делитесь на его страницах, действительно уникальны и самое главное, актуальны. Уже применил несколько приёмов для своего ресурса благодаря Вам, за что хочу сказать спасибо.
Но на данный момент, у меня возникла проблема с постраничной навигацией, которую пока не удаётся решить даже с помощью плагинов WP-PageNavi и аналогичных. Дело в том, что тема которую я использую, то ли написана каким-то другим языком, то ли корявая, то ли наоборот слишком мудрёная, но в ней у меня не получается найти строки, которые Вы рекомендуете заменить, их просто нет. Возможно было бы проще просто поменять шаблон, но этот мне очень нравится (он для меня идеальный), поэтому очень хочу разобраться с ним…
Буду Вам признателен, если поможете разобраться в каком направлении «копать».
Заранее, благодарю!
Здравствуйте Евгений, напишите мне через форму обратной связи, пообщаемся.
Евгений, в Вашем шаблоне за вывод навигации отвечает строчка:
Вот ее и надо заменять на:
Остальное все по инструкции.
Благодарю Вас, Виталий.
Теперь всё получилось. Остаётся только со стилями повозиться, чтобы довести до идеала.
Здравствуйте! Подскажите, пожалуйста. Перепробовал уже несколько плагинов. Везде нужно как и у вас в файлах php заменять строчки с div на примерно такой же код. Навигация в теме у меня никакущая — вместо цифр малюсенькая стрелочка. Хочу поменять. При замене кода пропадает навигация, но новая ни от плагинов, ни от вашего кода не появляется. Всё делаю по инструкции!
Здравствуйте, Виталий. У меня вопрос немного не по теме. Задумал на странице вывода анонсов и на страницах с категориями и метками сделать загрузку на Ajax, без перезагрузки страницы и постраничной навигации. Говорят, что это не очень хорошо влияет на индексацию. Не пойму, если у меня итак стоит rel=»canonical» и страницы типа /blog/page/2/ не индексируются? Чем не хорошо то, в моем случае?
Здравствуйте Егор! Надо взять и провести эксперимент, думаю ничего ужасного не случится.
Добрый вечер!
Возникла проблема.
После вставки кода, когда нажимаешь на кнопки перейти на предыдущую страницу или перейти на следующую страницу, то все работает. А вот если нажать на кнопку с номером страницы, открывается пустая страница.
Может это что-то в самой теме, не могу понять. Но вот что накопал. Кнопки с номером страницы ведут по адресу мойсайт.ру/page/7, а кнопки сл. или предыдущая страницы по адресу мойсайт.ру/page/7/. То есть, отличие только в «/». Где и как это исправить пока не нашел. Может у вас будут какие-то соображения?
Здравствуйте Алексей.
Если дело в слешах, попробуйте установить редирект в .htaccess, который будет перенаправлять на урл со слешем.
Хотя уже и неактуально, но некоторую справедливость хотела восстановить, раз уж Вы по-благородному относитесь к ссылкам на авторство. Понятно, что ссылку оставили на тот ресурс, где нашли, но … Передрал Ваш «Алаич» у Камы скрипт и даже не соизволил поменять название функции, а Вы вслед по неосведомленности и еще и ссылку. Блог Kama найдете без труда и убедитесь сами:
wp-kama.ru/id_8/alternativa-wp-pagenavi-bez-lishnix-zaprosov-k-bd-ili-keshu.html
Если б не ссылка на коммерческий сайт, то и промолчала бы — все мы тащим по-немногу у кого-нибудь и как-нибудь, но за полезность Тимура (Кама) обидно. Это не претензия, а мнение.
Ну что же, будет справедливо, если вместо Алыча я сошлюсь на сайт Тимура, к которому я испытываю искренние уважение.
Я сейчас как раз ищу скрипты, которыми можно заменить плагины на моем контентнике. Заменить Page Navi на скрипт тоже здорово. Спасибо)
Виталий!
У меня в указанных Вами файлах нет подобных строчек. У меня во всех следующий код:
Мне его заменить kama_pagenavi? И влияет ли на функцию kama?
Добрый день.В своей теме не могу найти:
1
2
3
4
Подскажите пожалуйста,где искать,весь мозг сломал.
Не понял вопрос.
У себя в теме не могу найти строки,отвечающие за навигацию.Может посмотрите,где это находится?
Доброго времени суток!
Статья хорошая, но для новичка, обилие неизвестных понятий и терминов — пугает)
тут ошибка в коде
if($i % $stepLink == 0 && $i!==$num_pages) {
if (++$dd == 1) $out.= ».$dotright_text2.»;
$out.= ».$i.»;
}
переменной $dd не существует
Здравствуйте! Как сделать по аналогии с сайтом coolidea.ru? Нужна следующая схема: « ».
Пытаюсь сделать, но страницы выводятся все равно, при попытке их убрать убирается ссылка на след. страницу. Помогите пожалуйста, заранее спасибо!
Нужна следующая схема: «Первая» «Предыдущая» «Страница 1 из 10» «Следующая» «Последняя»
Круто.
Здравствуйте, Виталий, подскажите, пожалуйста, как сделать такую навигацию в записи «Обзор Цены Характеристики Фото Видео» как на этом сайте
roadres.com/renault/arkana/
?