Задавайте питання щодо курсів WordPress

Формуємо сторінку однієї роботи в портфоліо – урок 29

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

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

<a href=”‘.get_permalink($пункт->ID).’” клас=”текст-заголовок”>’.$item->post_title.'</a>

Порожній листинг ділянки коду:

											<клас div="портфоліо '.$dataCat.'" data-cat="".$dataCat".">
												<клас div="портфоліо-обгортка">
												".$thymbUrlThumbnail". 
													<клас div="label">
														<клас div="текст-мітка">
															<a href="'.get_permalink($пункт->ID).'" клас="текст-заголовок">'.$item->post_title.'</a>
															<клас span="текст-категорія">".$dataCatComma".</проліт>
														</див.>
														<клас div="Етикетка-БГ"></див.>
													</див.>
												</див.>
											</див.>

функція get_permalink($пункт->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($пост->ID), 'Повний' );
													$url = $thumb['0']; ?>
													<img src="<?php echo $url; ?>" alt="Формуємо сторінку однієї роботи в портфоліо – урок 29" /> 
										<? }  ?>

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

.Портфоліо-одно-IMG{
	плавати: Ліворуч;
	Поле праворуч: 20px;
	поле-дно: 20px;
	border: 1px #8F8F8F тверда;
	Заповнення: 3px;
}

Файли теми цього уроку

zip архів тем wordpress


Купити хостинг WordPress
Репетитор по wordpress
Послуги репетитора онлайн. Список курсів, які я веду
  • Базовий курс з веб-дизайну;
  • Верстка сайтів;
  • Загальний курс CMS WordPress та продовження курсу з розробки шаблонів;
  • Розробка сайтів на PHP.
Докладніше читайте на сторінці репетитор по WordPress
*/

Ніколаєнко Максим

Директор веб-студии ProGrafika. Займаюсь розробкою, дизайном та просуванням веб-сайтів. Завжди радий новим читачам блогу та добрим клієнтам.


Вам також може сподобатися...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються дані ваших коментарів.

Шаблони для WordPress
Найкращий хостинг в Україні
Стабільний хостинг для Drupal