Для противников использования большого количества плагинов в 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; }
Картинка изменится и станет такой:
Одним из многих преимуществ этого способа, помимо отсутствия плагина, является необходимое наличие гибких настроек. В результате чего, установленная система навигации практически ничем не отличаются от той, которая работала бы при помощи дополнительного модуля.
Навигация стала приятнее, красивее и удобнее.
Для меня это пока сложновато. Эх, не нахожу CMS под себя, учиться техническим вещам мало охота.