Tworzymy stronę jednej pracy w portfolio - lekcję 29

przez Nikołajenko Maksym · Opublikowany Wrzesień 5, 2015 · Zaktualizowano Sierpień 8, 2018

Dzisiaj porozmawiamy o, jak zrobić osobną stronę dla jednej z prac w portfolio, ponieważ praca może mieć opis. Oprócz, zawsze możesz użyć szablonu utworzonego w tej lekcji w celu dalszego udoskonalenia.

Na początek musimy nieco zmodyfikować naszą siatkę i umożliwić użytkownikowi przełączenie się na wyświetlanie pełnego widoku pracy.. Idź do pliku Archive-my_works.php i dodaj kod linku:

<href=”„.get_permalink($przedmiot->ID).’” klasa=”tekst-tytuł”>’.$ pozycja->post_title.'</a>

Lista pustych kodów:

											<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>

'.$thymbUrlThumbnail.'

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

<span class="text-category">'.$dataCatComma.'</span>

</div>

</div>

Funkcjonować get_permalink($przedmiot->ID) wstawił link do osobnego posta typu portfolio z ID, który jest podstawiony w pętli wyjściowej nagrywania. Oto jak wygląda link:

Ссылка на отдельную работу в портфолио

Aby zaprojektować stronę jednej pracy, musimy utworzyć nowy plik dla szablonu i nadać mu nazwę single-my_works.php. Zrobiłem swój szablon na podstawie poprzedniego szablonu tmp-dwiekolumny.php. Plik single-my_works.php Przebudowałem go dość dokładnie i ułożyłem w jedną kolumnę. proponuje Ci pobierz mój plik, zmiany, które zostały wprowadzone w pliku, przez które już przeszliśmy, więc sugeruję po prostu skopiować kod z mojego szablonu single-my_works.php w twój do dalszej nauki.

Ważne jest, aby zobaczyć, jak zorganizowana jest miniatura obrazu w pełnym rozmiarze.

<?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="" /> 
										<? }  ?>

<?php if ( has_post_thumbnail() ) { ?>

<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );

$url = $thumb['0']; ?>

<? } ?>

Zrobiłem trochę więcej stylizacji w pliku css/style.css, aby nasz szablon wyglądał zadowalająco.. Dodajmy nową klasę.

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

.portfolio-single-img{

float: left;

margin-right: 20px;

margin-bottom: 20px;

border: 1px #8F8F8F solid;

padding: 3px;

}

Pliki tematyczne dla tej lekcji

Usługi korepetycji online. Lista kursów, które prowadzę

Podstawowy kurs projektowania stron internetowych;
Układ stron;
Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
Tworzenie stron internetowych w PHP.

Czytaj więcej na stronie Nauczyciel WordPressa