Постраничная навигация PHP для WopdPress без плагина
Опубликовано: 24.08.2018
Всем привет! Немного раньше я обещал, что на SEO-Mayak.com я расскажу, как делается постраничная навигация на WordPress без плагина. Сегодня как раз наступил тот день.
Сложного особо нечего нет, может это мне так кажется, но в любом случаи я постараюсь как можно подробней описать процесс установки и последующее оформление стилей постраничной навигации.
В свей недавней статье « Постраничная навигация на WordPress с помощью плагина WP-PageNav i» я уже говорил о важности улучшения юзабилити блога, тем самым способствовать повышению показателя поведенческих факторов.
Постраничная навигация без перезагрузки на PHP + AJAX (часть 2)
Представьте, что Вы читаете книгу, а в вместо номеров страниц в ней указано «Следующая страница» и «Предыдущая страница». По-моему Вы кого-нибудь точно захотели бы уволить из редакции за служебное несоответствие.
Так почему же на блогах сплошь и рядом встречается такое «служебное несоответствие». Дорогие товарищи, давайте ударим знаниями по невежеству и сделаем на своем блоге самую красивую постраничную навигацию без помощи всяких там плагинчиков.
Проверенно, что наличие постраничной навигации способствует увеличению общей посещаемости, а также продолжительность нахождение пользователей на сайте и процент возвратов.
Наверное еще раз стоит сказать про дополнительную нагрузку на сервер, которую создают плагины и по мере возможности надо от них избавляться, чем мы сейчас и займемся.
Постраничная навигация для 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; }На сегодня у меня все. Как Вам статья?
С уважением, Виталий Кириллов
Все любят цирк, но таких представлений я в детстве не видел!