Сегодня мы поговорим о том, как сделать отдельную страницу для одной из работ в портфолио, так как работа может иметь описание. Кроме того, созданный в этом уроке шаблон вы всегда сможете использовать для дальнейшей доработки.

Для начала нам необходимо немного доработать нашу сетку и дать возможность пользователю переходить на отображение полного вида работы. Зайдите в файл archive-my_works.php и допишите код ссылки:

<a href=»‘.get_permalink($item->ID).’» class=»text-title»>’.$item->post_title.'</a>

Полый листинг участка кода:

											<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 в ваш для дальнейшего изучения.

Важно посмотреть как организован вывод изображения миниатюры в полном размере.

<?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="Формируем страницу одной работы в портфолио – урок 29" /> 
										<? }  ?>

Я еще немного поколдовал со стилями в файле css/style.css чтобы наш шаблон выглядел сносно. Добавим новый класс.

.portfolio-single-img{
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	border: 1px #8F8F8F solid;
	padding: 3px;
}

Файлы темы данного урока