Wyjście prac portfolio w postaci siatki z filtrem - lekcja 27
Dane są dodawane i wyprowadzane, ale chciałbym nie tylko wyświetlać dane, ale zrobić coś podobnego do prawdziwego portfolio, z listą prac, które można przeglądać i filtrować. Ale już, nasze portfolio wygląda jak zwykłe posty. Możesz zobaczyć pracę portfolio, które stworzyliśmy wcześniej, klikając w link Protokół https://{Twoja strona}/moje portfolio/
Jak teraz wyświetlić portfolio
Jak będzie prezentować się portfolio po zakończeniu
Demonstracja galerii na stronie dewelopera
Kontynuujemy pracę nad naszym tematem
Myślę, że ty, jak ja, bardzo tego nie lubie, że link wygląda jak /moje-portfolio/, zmieńmy to w pliku /wp-content/themes/my_theme_tmp/functions/custom-type.php.
Zmieńmy się ślimak taki moje portfolio na teczka. Jeśli podążasz za swoim linkiem Protokół https://{Twoja strona}/teczka/, możesz napotkać problem, ponieważ stworzyliśmy już stronę z etykietą (ślimak) teczka. Aby nasze rekordy znów dobrze się wyświetlały, Usuńmy stronę z etykietą portfolio.
Po usunięciu strony wordpress nadal ją pamięta. Aby trwale zamknąć problem z etykietą portfolio, musimy usunąć tę stronę z koszyka.
Po tych czynnościach nie wyświetla mi się już szablon oddzielnej strony, ale znalazłem sposób. Jeśli masz ten sam błąd, wtedy potrzebujesz w ustawieniach w sekcji “Permalinki” najpierw przełącz do widoku domyślnego (Domyślna), aby wszystkie linki działały w formularzu Protokół https://wp-admin.com.ua/?p=123, zapisz ustawienie.
Po ponownym zapisaniu w ustawieniach łącza wybierz “Rekordy tytułowe“, jak pokazano poniżej i zapisz.
Po tych niezbyt przebiegłych manipulacjach linki i nowa etykieta dowolnego typu powinny znów działać normalnie. /teczka/.
Dostosowywanie szablonu wyjściowego
Po ustawieniu pięknych linków przejdźmy do ustawienia szablonu do wyświetlania wszystkich prac w portfolio. Wywołamy szablon Archive-my_works.php (archiwum-{typ postu}...php). Ponieważ nasz typ został wywołany moja praca, wówczas utworzenie pliku o tej nazwie zostanie automatycznie przypisane do listy rekordów tego typu.
Nazwę naszego typu można zobaczyć w pliku /wp-content/themes/my_theme_tmp/functions/custom-type.php, na poniższym obrazku pokażę gdzie szukać.
Umieśćmy kod bazowy top, środkowa i dolna.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php get_header(); ?> <div id="header-wrapper"> <?php get_template_part( 'content-top', get_post_format() ); ?> </div> <!-- Content --> <div id="content-wrapper"> <div id="content"> <div class="container"> <div class="row"> <!-- тут будет вывод портфолио --> </div> </div> </div> </div> <?php get_template_part( 'content-bottom', get_post_format() ); get_footer(); ?> |
Ponieważ portfolio będzie korzystać z nowych skryptów, wtedy będziemy musieli je połączyć. Skrypty muszą być połączone w ten sposób, tak, aby były wyświetlane między znacznikami <głowa></głowa>, ale nie zmienił głównego kodu szablonu nagłówek.php.
Aby połączyć skrypty utwórz plik /functions/ utwórz plik custom-header-script.php i podłącz go functions.php nasz temat.
Do pliku custom-header-script.php wprowadź kod, aby połączyć skrypt galerii.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?php function my_scripts_method() { $tmpDir = get_template_directory_uri(); if ( uGetPostType() == 'portfolio'){ wp_register_script( 'easing-portfolio', $tmpDir.'/js/simple-portfolio-page/js/jquery.easing.min.js'); wp_enqueue_script( 'easing-portfolio' ); wp_register_script( 'mixitup-portfolio', $tmpDir.'/js/simple-portfolio-page/js/jquery.mixitup.min.js'); wp_enqueue_script( 'mixitup-portfolio' ); wp_register_script( 'custom-portfolio', $tmpDir.'/js/simple-portfolio-page/js/custom.js'); wp_enqueue_script( 'custom-portfolio' ); } } add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); function add_my_stylesheet() { $tmpDir = get_template_directory_uri(); if ( uGetPostType() == 'portfolio'){ wp_register_style('normalize-portfolio', $tmpDir.'/js/simple-portfolio-page/css/normalize.css'); wp_enqueue_style('normalize-portfolio'); wp_register_style('layout-portfolio', $tmpDir.'/js/simple-portfolio-page/css/layout.css'); wp_enqueue_style('layout-portfolio'); } } add_action('wp_print_styles', 'add_my_stylesheet'); function uGetPostType(){ $post_type = get_post_type(); if ($post_type){ $post_type_data = get_post_type_object( $post_type ); $post_type_slug = $post_type_data->rewrite['slug']; return $post_type_slug; } } ?> |
Powyższy skrypt łączy CSS i JS pliki w WordPressa do tego miejsca, gdzie w pliku nagłówek.php zainstalowana funkcja wp_head(). Więcej o funkcjach łączenia czcionek możesz przeczytać w moim artykule “Praca z jquery w wordpress“, który na przykładzie biblioteki jquery pokazuje, jak dołączyć skrypty. Możesz także przeczytać o uwzględnianiu stylów w kodeksie WordPress..
Mój przykład ma niestandardową funkcję uGetPostType() stworzone przeze mnie, służy do wyciągania bieżącego typu danych na bieżącej stronie. Na podstawie otrzymanego typu określamy, czy musimy dodać skrypty do nagłówka witryny, czy nie.
Kolejnym krokiem jest dodanie galerii do plików witryny.. Pobierz archiwum galerii poniżej i umieść je w folderze /wp-content/themes/my_theme_tmp/js/simple-portfolio-page/… .
Oferuję mój kod do wyświetlenia tej galerii w pliku Archive-my_works.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<?php get_header(); ?> <div id="header-wrapper"> <?php get_template_part( 'content-top', get_post_format() ); ?> </div> <!-- Content --> <div id="content-wrapper"> <div id="content"> <div class="container"> <div class="row"> <?php // берем все имеющиеся термы (категории нашего портфолио) из таксономии category_portfolio $categories = get_terms( 'category_portfolio', array( 'orderby' => 'count', // в начале показывает категории с большим количеством работ 'hide_empty' => 0, // скрывает пустые категории ) ); ?> <div class="container"> <ul id="filters" class="clearfix"> <?php /* формируем структуру меню фильтра для портфолио на основе полученных категорий */ foreach($categories as $cat){ if($cat->parent==0 && $cat->count>0){ $singleCat .= '<li><span class="filter" data-filter="'.$cat->slug.'">'.$cat->name.'</span></li>'; $allCat .= $cat->slug.' '; } } echo '<li><span class="filter active" data-filter="'.$allCat.'">All</span></li>'; echo $singleCat; /* формируем структуру меню фильтра для портфолио на основе полученных категорий */ ?> </ul> <div id="portfoliolist"> <?php // выводим работы из портфолио $args = array( 'post_type' => 'my_works' // указываем записи какого типа необходимо достать ); $query = new WP_Query; $portfolio_item = $query->query($args); // делаем запрос данных foreach( $portfolio_item as $item ){ $category = get_the_terms( $item->ID, 'category_portfolio' ); // достае все термы таксономии category_portfolio $flag = 0; foreach($category as $catItem){ if($flag == 0){ // если запись закреплена за одной категорией, категории сохраняются без запятой $dataCat = $catItem->slug; $dataCatComma = $catItem->name; }else{ // если запись закреплена за несколькими категориями, категории сохраняются с запятой $dataCat .= ' '.$catItem->slug; $dataCatComma .= ', '.$catItem->name; } $flag++; } $attachmentId = get_post_thumbnail_id($item->ID); $thymbUrl = wp_get_attachment_url($attachmentId, 'full', true); // берем URL миниатюры, которая относится к записи echo ' <div class="portfolio '.$dataCat.'" data-cat="'.$dataCat.'"> <div class="portfolio-wrapper"> <img src="'.$thymbUrl.'" alt="" /> <div class="label"> <div class="label-text"> <a class="text-title">'.$item->post_title.'</a> <span class="text-category">'.$dataCatComma.'</span> </div> <div class="label-bg"></div> </div> </div> </div> '; } ?> </div> </div><!-- container --> </div> </div> </div> </div> <?php get_template_part( 'content-bottom', get_post_format() ); get_footer(); ?> |
Kod jest dość duży, ale dodałem komentarze, aby łatwiej było to zrozumieć. Poniżej możesz pobrać pełny kod szablonu w tej chwili.
Ostatnią rzeczą, jaka nam pozostaje, jest dodanie linku do portfolio w menu naszej strony. Idziemy do menu Wygląd -> Menu -> Linki i dodaj nowy link /teczka/, umieść wynikowy link we właściwym miejscu.
Przenieś pozycję menu we właściwe miejsce, aby po wejściu na stronę było to widoczne.
Gotowy szablon portfolio, spróbuj zrozumieć lekcję, Jeśli to nie zadziała, następnie zadawaj pytania w komentarzach. Postaram się na nie odpowiedzieć jak najszybciej.
W następnym samouczku zaimplementujemy otwieranie każdej pracy w wyskakującym okienku. (lightbox) dla portfela.
- 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.
