Это шестой урок из серии о том, как создать тему для WordPress из верстки. Из него вы узнаете, как добавить в тему постраничную навигацию и создать шаблоны для страницы записи и архивов single.php и archives.php
Функция постраничной навигации
Чтобы добавить в тему поддержку постраничной навигации, можно воспользоваться функцией пагинации, которую я уже приводила в своем блоге, только немного ее изменив и настроив CSS.
Сначала нужно посмотреть, какие теги и классы используются для вывода страниц в верстке. Открываем наш файл index.php, и в самом низу видим:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- Pager --> <div class="pager"> <!--<a href="#" class="button previous">Previous Page</a>--> <div class="pages"> <a href="#" class="active">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <span>…</span> <a href="#">20</a> </div> <a href="#" class="button next">Next Page</a> </div> |
Теперь нам нужно немного модифицировать код функции для вывода пагинации, чтобы HTML-код, который она генерирует, был таким же, как этот. Другой вариант – оставить код функции как есть, но внести изменения в CSS файлы темы.
Сначала нужно скопировать код постраничной навигации в файл function.php, и вызвать его в файле index.php. Давайте сделаем это ниже существующей навигации из верстки, чтобы были видны отличия. Код и его вызов можно взять в этом посте.
Посмотрим, какой HTML сейчас генерирует функция:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class='clearfix navigation-top'> <div class='pagination'> <span> Pages: </span> <span class='current'> 1 </span> <a href='/page/2/' class='inactive' > 2 </a> <a href='/page/3/' class='inactive' > 3 </a> <a href='/page/2/'> › </a> <a href='/page/6/'> » </a> </div> </div> |
Не совсем то, что нам нужно, правда? Поэтому внесем изменения в код функции.
Изменяем код вывода пагинации
В комментариях я написала, какие значения были изменены:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
/* * Pagination */ // $range - сколько страниц выводить до и после текущей страницы, я поставила 3 function oriolo_pagination($pages = '', $range = 3) { $showitems = ($range * 2)+1; global $paged; if(empty($paged)) $paged = 1; if($pages == '') { global $wp_query; // $pages - это общее число страницы, запомним это, дальше оно нам понадобится $pages = $wp_query->max_num_pages; if(!$pages) { $pages = 1; } } // здесь начинается вывод навигации if(1 != $pages) { // я изменила название класса на pager echo "<div class='pager'>"; // изменен порядок вывода кнопок со ссылками на первую страницу и на предыдущую // добавлен класс button previous для кнопки со ссылкой на предыдущую страницу if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."' class='button previous'> " . __('Previous Page', 'striped') . " </a>"; // добавлена строка с <div class='pages'> - внутри него будут кнопки со страницами echo "<div class='pages'>"; // кнопка первой страницы if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>1</a>"; // вывод всех остальных страниц for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) { // к текущей странице добавим класс active echo ($paged == $i)? "<a class='active'>".$i."</a>":"<a href='".get_pagenum_link($i)."' >".$i."</a>"; } } // перед выводом кнопки с последней страницей добавлен <span> с многоточием // текстом ссылки будет общее количество страниц: $pages if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<span>…</span><a href='".get_pagenum_link($pages)."'> $pages </a>"; // закроем div со страницами echo "</div>"; // выведем кнопку со следующей страницей if ($paged < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($paged + 1)."' class='button next'>" . __('Next Page', 'striped') . "</a>"; echo "</div>\n"; } } |
После изменения функции, HTML код из верстки нужно удалить. На первой странице навигация будет выглядеть так:
А на второй и следующей – добавится ссылка на предыдущую страницу:
На этом мы практически закончили с настройкой главной страницы нашей темы. В следующей части мы создадим шаблон archive.php, который будет выводить страницы архивов и рубрик.