Додаємо навігацію до WordPress – урок 20
Для розробки навігації нам необхідно додати не менше 15 тестових записів та перевірити, щоб у панелі адміністратора, в налаштуваннях було вказано 10 записів на сторінці. Налаштування -> Налаштування читання -> На сторінках блогу відображати не більше 10 записів.
Якщо у вас записів буде більше, ніж 10, то користувач побачить лише останні 10 доданих записів. Щоб дати можливість користувачеві переглядати всі записи, ми можемо додати навігацію на сайт.
Для початку необхідно до файлу archive.php після циклу додати функцію pagination().
Поки що посторінкова навігація не відображатиметься, так як функцію pagination() ми ще не створювали. Зараз ми маємо створити цю функцію.
Для додавання навігації, додайте до папки шаблону нову папку з ім'ям functions. У папці функцій додайте новий файл під назвою pagination.php.
До файлу pagination.php додайте код:
|
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 |
<?php /** * @package WordPress * @subpackage my_theme_tmp */ //pagination function function pagination($pages = '', $range = 4) { $showitems = ($range * 2)+1; global $paged; if(empty($paged)) $paged = 1; if($pages == '') { global $wp_query; $pages = $wp_query->max_num_pages; if(!$pages) { $pages = 1; } } if(1 != $pages) { echo "<div class=\"page-pagination clearfix\">"; if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>"; if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Previous</a>"; for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) { echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>"; } } if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next ›</a>"; if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »</a>"; echo "</div>\n"; } } ?> |
Зайдіть у файл functions.php і підключіть туди файл із функцією навігації як показано на малюнку нижче:
|
1 |
require('functions/pagination.php'); |
Тепер, коли функція створена та викликана у файлі archive.php, на сайті ми можемо побачити навігацію.
Навігація працює але виглядає не дуже красиво, для оформлення навігації пропоную додати стилі до кінця файлу /wp-content/themes/my_theme_tmp/css/style.css
|
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 |
/* pagination */ .page-pagination { padding: 10px 20px 10px !important; display:block !important; clear:both !important; } .page-pagination a ,.page-pagination span.pages, .page-pagination span.extend { color:#707070 !important; background:#FFFFFF !important; border-radius:3px !important; -moz-border-radius:3px !important; -webkit-border-radius:3px !important; border:solid 1px #DCDCDC !important; padding:6px 9px 6px 9px !important; margin-right:3px !important; text-decoration:none !important; font-size:12px !important; } .page-pagination a:hover { border-color:#202020 !important; background:#525252 !important; color:#fff !important; background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252) !important; background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)) !important; } .page-pagination span.current{ padding: 0px 9px 4px 9px !important; border:solid 1px #DCDCDC !important; border-color:#3390CA !important; border-radius:3px !important; -moz-border-radius:3px !important; -webkit-border-radius:3px !important; color:#fff !important; margin-right:3px !important; border-color:#202020 !important; background:#525252 !important; background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252) !important; background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)) !important; } /* pagination */ |
Після нескладної роботи ми маємо чудову навігацію.
Базову функцію для навігації я вам дав та розповів, як її вбудувати, кому буде необхідно, можете доопрацьовувати функцію під свій шаблон. Успіхів у вивченні WordPress, а я як завжди закріплюю для вас файли поточного уроку.
У наступному уроці ми вивчимо, як робити навігацію у файлі single.php.
- Базовий курс з веб-дизайну;
- Верстка сайтів;
- Загальний курс CMS WordPress та продовження курсу з розробки шаблонів;
- Розробка сайтів на PHP.
