Формуємо сторінку однієї роботи в портфоліо – урок 29
Сьогодні ми поговоримо про те, як зробити окрему сторінку для однієї з робіт у портфоліо, оскільки робота може мати опис. Крім того, створений у цьому уроці шаблон ви завжди зможете використовувати для подальшого доопрацювання.
Для початку нам необхідно трохи доопрацювати нашу сітку та дати можливість користувачеві переходити на відображення повного виду роботи. Зайдіть у файл archive-my_works.php та допишіть код посилання:
<a href=”‘.get_permalink($пункт->ID).’” клас=”текст-заголовок”>’.$item->post_title.'</a>
Порожній листинг ділянки коду:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="portfolio '.$dataCat.'" data-cat="'.$dataCat.'"> <div class="portfolio-wrapper"> '.$thymbUrlThumbnail.' <div class="label"> <div class="label-text"> <a href="'.get_permalink($item->ID).'" class="text-title">'.$item->post_title.'</a> <span class="text-category">'.$dataCatComma.'</span> </div> <div class="label-bg"></div> </div> </div> </div> |
функція get_permalink($пункт->ID) вставила посилання на окремий запис типу портфоліо з ID, яке підставляється у циклі виведення записів. Ось як виглядає посилання:
Для оформлення сторінки однієї роботи нам потрібно створити новий файл для шаблону і назвати його single-my_works.php. Я робив свій шаблон на основі попереднього шаблону tmp-twocolumn.php. Файл single-my_works.php я досить ґрунтовно перебудував та організував його в одну колонку. Пропоную вам скачати мій файл, зміни, які були зроблені у файлі, ми вже проходили раніше, тому пропоную просто скопіювати код із мого шаблону single-my_works.php в ваш для подальшого вивчення.
Важливо подивитися як організовано виведення зображення мініатюри у повному розмірі.
|
1 2 3 4 5 |
<?php if ( has_post_thumbnail() ) { ?> <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); $url = $thumb['0']; ?> <img src="<?php echo $url; ?>" alt="" /> <? } ?> |
Я ще трохи почаклував зі стилями у файлі css/style.css щоб наш шаблон виглядав непогано. Додамо новий клас.
|
1 2 3 4 5 6 7 |
.portfolio-single-img{ float: left; margin-right: 20px; margin-bottom: 20px; border: 1px #8F8F8F solid; padding: 3px; } |
Файли теми цього уроку
- Базовий курс з веб-дизайну;
- Верстка сайтів;
- Загальний курс CMS WordPress та продовження курсу з розробки шаблонів;
- Розробка сайтів на PHP.
