Tworzenie wyskakującego okienka do portfolio - lekcja 28
Kontynuujmy rozwijanie naszego portfolio iw tym samouczku znalazłem fajny skrypt wyskakujący, spróbujmy to wykorzystać. Skrypt nazywa się Responsywna wtyczka Lightbox.
Aby użyć skryptu, musisz najpierw połączyć jego style w nagłówku witryny, a następnie możesz połączyć sam skrypt ze stopką witryny. Zobacz poniżej, aby uzyskać więcej informacji na temat tego, jak to zrobić..
Pobierz skrypt z magazynu github. Przykład działania przyszłego okna pop-up można obejrzeć pod adresem oficjalna strona skryptu.
Przesyłanie skryptu do folderu wp-content/themes/my_theme_tmp/js/responsive-lightbox-master/.
Następnie musimy podłączyć skrypt i do jego poprawnego połączenia możemy wykorzystać znany nam już plik niestandardowy-skrypt-nagłówka.php, Znajduje się na wp-content/themes/my_theme_tmp/functions/custom-header-script.php.
Skrypt i style łączymy z istniejącym kodem funkcji my_scripts_method
Skrypt jest połączony za pomocą kodu:
|
1 2 3 |
// всплывающее окно для портфолио wp_register_script('lightbox-portfolio', $tmpDir.'/js/responsive-lightbox-master/jquery.lightbox.min.js'); wp_enqueue_script( 'lightbox-portfolio' ); |
Pełna lista funkcji moja_metoda_skryptów:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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' ); // всплывающее окно для портфолио wp_register_script('lightbox-portfolio', $tmpDir.'/js/responsive-lightbox-master/jquery.lightbox.min.js'); wp_enqueue_script( 'lightbox-portfolio' ); } } add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); |
Uwzględnij poniższe style w funkcji.
|
1 2 |
wp_register_style('lightbox-portfolio', $tmpDir.'/js/responsive-lightbox-master/jquery.lightbox.min.css'); wp_enqueue_style('lightbox-portfolio'); |
Pełna lista funkcji dodaj_mój_arkusz stylów:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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'); wp_register_style('lightbox-portfolio', $tmpDir.'/js/responsive-lightbox-master/jquery.lightbox.min.css'); wp_enqueue_style('lightbox-portfolio'); } } add_action('wp_print_styles', 'add_my_stylesheet'); |
Po połączeniu skryptu i stylów możemy spojrzeć na wynik. Jeśli wszystko zostało zrobione dobrze, to na strony strona internetowa/portfolio/ podłączony skrypt pojawi się w kodzie, a także nowy plik stylu.
Plik stylu jquery.lightbox.min.css
|
1 |
<link rel='stylesheet' id='lightbox-portfolio-css' href='https://nature.wp-admin.com.ua/wp-content/themes/my_theme_tmp/js/responsive-lightbox-master/jquery.lightbox.min.css?ver=4.1' type='text/css' media='all' /> |
plik skryptowy jquery.lightbox.js
|
1 |
<script type='text/javascript' src='https://wp-admin.com.ua/wp-content/themes/my_theme_tmp/js/responsive-lightbox-master/jquery.lightbox.js?ver=4.1'></script> |
Po udanym połączeniu musisz dodaj niestandardowe rozmiary obrazów, napraw szablon portfolio w pliku Archive-my_works.php i określ, po kliknięciu na które elementy obraz zostanie wyświetlony w dużym formacie, w wyskakującym okienku.
1. Chodźmy do functions.php i znajdź kod.
|
1 2 3 4 |
if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 200, 200, true ); } |
Uzupełnij kod o nowy rozmiar obrazu dla strony portfolio:
|
1 2 3 4 5 |
if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 200, 200, true ); add_image_size( 'portfolio-thumbnail', 270, 203, true ); } |
2. Przejdźmy do szablonu Archive-my_works.php i znajdź w nim kod:
<źródło img=”‘.$thymbUrl.'” alt=”” />
Musisz zmienić kod, aby wyświetlić prawidłowy rozmiar obrazu.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$thymbUrlThumbnail = wp_get_attachment_link($attachmentId, 'portfolio-thumbnail'); // берем URL миниатюры, которая относится к записи echo ' <div class="portfolio '.$dataCat.'" data-cat="'.$dataCat.'"> <div class="portfolio-wrapper"> '.$thymbUrlThumbnail.' <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> '; |
Jeśli zrobione dobrze, następnie w sekcji portfolio po kliknięciu obraz otworzy się w nowym oknie.
Uwaga, może wystąpić problem i wynik prawidłowego rozmiaru miniatury, ale łatwo to rozwiązać.
Jeśli rozmiar obrazu nie został zmieniony zgodnie z oczekiwaniami, wtedy najprawdopodobniej będziesz musiał odtworzyć miniatury portfolio za pomocą jednej z wtyczek Regeneruj miniatury lub Wymuś regenerację miniatur. Po uruchomieniu aktywacji wtyczki, uruchom go i pamiętaj, aby poczekać, aż się zakończy.
Teraz, gdy wszystko działa, możesz modyfikować sposób wyświetlania obrazów w wyskakującym okienku. Aby wyświetlić wyskakujące okienko, należy poprawnie zarejestrować element, po kliknięciu, na którym obraz pojawi się na górze.
Dodanie kodu do pliku footer.php, jak pokazano poniżej.
|
1 2 3 4 5 6 7 |
<?php wp_footer(); ?> <script> jQuery(document).ready(function($) { $('[rel="lightbox"]').lightbox(); }); </script> </body> |
Z powyższego widać, że obrazy pojawią się w wyskakującym okienku w przypadkach, gdy tag zawiera atrybut rel=”lightbox”. Zróbmy tak, aby na wszystkich zdjęciach, które prowadzą do ich większej wersji, ten atrybut się pojawiał. W tym celu przejdź do pliku functions.php i dodaj do niego specjalny kod filtra:
|
1 2 3 4 5 6 7 8 9 |
add_filter( 'wp_get_attachment_link', 'sant_lightboxadd', 10, 6); function sant_lightboxadd ($content, $id, $size, $permalink, $icon, $text) { if ($permalink) { return $content; } $content = preg_replace("/<a/","<a rel=\"lightbox\"",$content,1); return $content; } |
Po tych wszystkich manipulacjach mam tę galerię.
Pliki motywu z tego samouczka
- 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.
