RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Ноя
9

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

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

В предыдущих статьях я уже писал, про постраничную навигацию в вордпресс, реализованную на основе плагинов WP-PageNavi и WP-PageNavi style. Тогда мы с вами заменили стандартную wordpress причуду:

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

на гораздо более красивую и функциональную навигацию от WP-PageNavi:

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

Это как раз та самая навигация, которая нам нужна на блоге. Но, использование плагина, да и не одного а целых двух, слишком щедрый жест в плане загрузки блога. Поэтому, я использовал для организации навигации функцию php и стили оформления, а сами плагины удалил с блога. Ну что, приступим…

Функция WP-PageNavi

  Данная функция php абсолютно идентична используемой, и с помощью настроек повторяет практически все опции wordpress плагина:

function pagenavi($before='', $after='', $echo=true) {
/* ================ Настройки ================ */
$text_num_page = ''; // текст для количества страниц. {current} заменится текущей, а {last} последней. Пример: 'Страница {current} из {last}' = Страница 4 из 60
$num_pages = 6; // сколько ссылок показывать
$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; }

Итак, открываем админ панель сайта/внешний вид/редактор в правой колонке выбираем файл functions.php копируем вышеприведенный код и вставляем в самый конец  перед значком ?>. Сохраняем файл. Но, прежде чем производить какие-либо действия с файлом функций, обязательно сделайте резервную копию этого файла, вдруг пойдет что-то не так …

Теперь эту функцию, нужно вызвать в шаблоне. Для этого  в том же редакторе открываем файл отвечающий за вывод рубрик у меня это index.php, у вас может быть, либо archive.php или category.php. И после строчки: <?php endwhile; ?> вставляем вызов функции постраничного перехода:

<center>
<div class="navigation">
<?php if (function_exists('pagenavi')) pagenavi(); ?>
</div>
</center>

Сохраняем файл.

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

/*Стили для wp-pagenavi (без плагина)*/.wp-pagenavi a ,.wp-pagenavi span.pages, .wp-pagenavi span.extend {
color:#333333 !important;
text-shadow:0px 1px #F6F6F6 !important;
padding:6px 9px 6px 9px !important;
border:solid 1px #B6B6B6 !important;
box-shadow:0px 1px #EFEFEF !important;
-moz-box-shadow:0px 1px #EFEFEF !important;
-webkit-box-shadow:0px 1px #EFEFEF !important;
background:#E6E6E6 !important;
background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6) !important;
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6)) !important;
font-size:12px !important;
margin-right:3px !important;
text-decoration:none !important;
}
.wp-pagenavi a:hover {
color:#fff !important;
text-shadow:0px 1px #4876C9 !important;
border-color:#3D6DC3 !important;
background:#5A8CE7 !important;
background:-moz-linear-gradient(top,#C2E0FF 1px,#84AFFE 1px,#5A8CE7) !important;
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C2E0FF),color-stop(0.02,#84AFFE),color-stop(1,#5A8CE7)) !important;
color:#FFFFFF !important;
box-shadow:0px 1px #E7E7E7 !important;
-moz-box-shadow:0px 1px #E7E7E7 !important;
-webkit-box-shadow:0px 1px #E7E7E7 !important;}
.wp-pagenavi span.current{
padding:6px 9px 6px 9px !important;
border:solid 1px #DCDCDC !important;
color:#fff !important;
box-shadow:0px 1px #E7E7E7 !important;
-moz-box-shadow:0px 1px #E7E7E7 !important;
-webkit-box-shadow:0px 1px #E7E7E7 !important;
margin-right:3px !important;
text-shadow:0px 1px #4876C9 !important;
border-color:#3D6DC3 !important;
background:#5A8CE7 !important;
background:-moz-linear-gradient(top,#C2E0FF 1px,#84AFFE 1px,#5A8CE7) !important;
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C2E0FF),color-stop(0.02,#84AFFE),color-stop(1,#5A8CE7)) !important;
}

Если, после добавления стилевого кода визуализация не появилась, то просто найдите нужное место для вставки этого кода. На этом у меня сегодня все. Надеюсь у вас все получилось.

Получай первым обновления блога!

Введите Ваш e-mail:

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


вверх