Формируем страницу одной работы в портфолио – урок 29
Сегодня мы поговорим о том, как сделать отдельную страницу для одной из работ в портфолио, так как работа может иметь описание. Кроме того, созданный в этом уроке шаблон вы всегда сможете использовать для дальнейшей доработки.
Для начала нам необходимо немного доработать нашу сетку и дать возможность пользователю переходить на отображение полного вида работы. Зайдите в файл archive-my_works.php и допишите код ссылки:
<a href=»‘.get_permalink($item->ID).’» class=»text-title»>’.$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($item->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.
