Tworzymy stronę jednej pracy w portfolio - lekcję 29
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:
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> |
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.
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="" /> <? } ?> |
Zrobiłem trochę więcej stylizacji w pliku css/style.css, aby nasz szablon wyglądał zadowalająco.. Dodajmy nową klasę.
1 2 3 4 5 6 7 |
.portfolio-single-img{ float: left; margin-right: 20px; margin-bottom: 20px; border: 1px #8F8F8F solid; padding: 3px; } |
Pliki tematyczne dla tej lekcji
/*
- 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.