Меню Закрыть

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


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

Здравствуйте друзья, поклонники движка WordPress. Сегодняшнюю тему я решил посвятить установке постраничной навигации на сайт. Ранее я уже обращался к этому вопросу, где рассматривалась установка навигации с плагинами WP-PageNavi и Simple Pagination. Сейчас же рассмотрим этот процесс, но без использования каких-либо дополнительных модулей (плагинов).

Так же, как и в случае с плагинами, нам нужно будет вносить изменения в некоторые файлы активной темы WordPress. Эти файлы находятся в папке:
ваш сайт/wp-content/themes/название активной темы/

Перечень необходимых файлов:

  • functions.php;
  • index.php;
  • archive.php;
  • search.php;
  • style.css;
  • category.php.

Примечание: в некоторых темах могут наблюдаться небольшие отличия в плане присутствия именно этих перечисленных мною файлов. Например, в темах, которые я тестировал (Cardio и Inventor), есть файл category.php, а в остальных — нет.  В итоге, Вам нужно выбрать файлы, отвечающие за вывод категорий, метокархивов и страниц поиска.

Вносить изменения в эти файлы можно во встроенном редакторе движка, но практичнее скачать их на компьютер и редактировать в текстовом редакторе, например, Notepad++.
Начнем по порядку. Открываем файл 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; }

Здесь главное — не совершить ошибку и не вставить код внутрь какой-либо функции, поэтому лучше вставить предлагаемый код в самый конец файла functions.php.
Далее открываем следующие файлы:

  • index.php;
  • archive.php;
  • search.php;
  • category.php.

В этих файлах необходимо найти участки кода вывода штатной навигации.  Для обнаружения этих участков используйте функцию поиска в Notepad++.

Штатный код вывода навигации может иметь примерно такой вид:

<?php the_post_navigation(); ?>

А в большинстве тем WordPress бывает такой:

<?php название темы_pagination(); ?>

В более ранних темах коды могут выглядеть так:

<div>
<div>
<?php next_posts_link('Предыдущие записи') ?>
</div>
<div>
<?php previous_posts_link('Следующие записи') ?>
</div>
</div>

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

Прежние участки кода во всех перечисленных файлах нужно заменить на следующий код:

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

И, наконец, в файле style.css пропишем стили для навигации:

.wp-pagenavi {
 clear: both; 
padding-top: 20px;
 } 

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

После внесения всех изменений, откройте страницу с рубриками, архивами или метками и при наличии достаточного количества страниц для разделения, увидите примерно такую картину:

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

В файле functions.php заложена возможность проведения настроек навигации.  Откройте файл в Notepad++ и попытайтесь поработать с настройками. Там все расписано подробно. Оперируя настройками, можно добиваться изменения облика навигации. Например, он может быть таким:

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

Если все Вас устраивает, можно на этом закончить, а можно пойти далее и изменить внешний вид навигации, используя другие стили. Давайте в файл style.css пропишем такие стили:

.wp-pagenavi {
 clear: both;
 margin: 5px;
 padding-top: 20px;
}
.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 комментария

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

         Яндекс.Метрика