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

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

Завантажуємо скрипт зі сховища github. Приклад роботи майбутнього спливаючого вікна можна переглянути офіційному сайті скрипту.

Заливаємо скрипт в папку wp-content/themes/my_theme_tmp/js/responsive-lightbox-master/.

Далі нам треба підключити скрипт і для правильного підключення ми можемо скористатися вже знайомим файлом custom-header-script.php, знаходиться він за адресою wp-content/themes/my_theme_tmp/functions/custom-header-script.php.

Підключаємо скрипт та стилі в наявний код функції my_scripts_method

Скрипт підключається за допомогою коду:

// всплывающее окно для портфолио
wp_register_script('lightbox-portfolio', $tmpDir.'/js/responsive-lightbox-master/jquery.lightbox.min.js');
wp_enqueue_script( 'lightbox-portfolio' );

Повний лістинг функції my_scripts_method:

function my_scripts_method() { 
		$tmpDir = get_template_directory_uri();
		if ( uGetPostType() == "портфель"){
			wp_register_script( "Підсилення-портфоліо", $tmpDir". /js/simple-portfolio-page/js/jquery.easing.min.js');
			wp_enqueue_script( "Підсилення-портфоліо" );
			
			wp_register_script( 'mixitup-portfolio', $tmpDir". /js/simple-portfolio-page/js/jquery.mixitup.min.js');
			wp_enqueue_script( 'mixitup-portfolio' );
			
			wp_register_script( 'Портфоліо на замовлення', $tmpDir". /js/simple-portfolio-page/js/custom.js');
			wp_enqueue_script( 'Портфоліо на замовлення' );
			
			// всплывающее окно для портфолио
			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' );

Підключаємо стилі нижче у функції.

			wp_register_style('lightbox-portfolio', $tmpDir.'/js/responsive-lightbox-master/jquery.lightbox.min.css');
			wp_enqueue_style('lightbox-portfolio');

Повний лістинг функції add_my_styles:

функція add_my_stylesheet() {
		$tmpDir = get_template_directory_uri();   
		if ( uGetPostType() == "портфель"){
			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');

Після підключення скрипту та стилів ми можемо подивитися на результат. Якщо все було зроблено правильно, це на сторінки sitemame/портфоліо/ у коді з'явиться підключений скрипт, а також новий файл стилів.

Файл стилів jquery.lightbox.min.css

<посилання 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' />

Файл сценарію jquery.lightbox.js

<script type='text/javascript' src='https://wp-admin.com.ua/wp-content/themes/my_theme_tmp/js/responsive-lightbox-master/jquery.lightbox.js?версія=4.1'></сценарій>

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

1. Зайдем в functions.php і знайдемо код.

if ( функція_існує( 'add_theme_support' ) ) { 
	add_theme_support( 'post-thumbnails' ); 
	set_post_thumbnail_size( 200, 200, true );
}

Доповним код новим розміром зображення для сторінки портфоліо:

if ( функція_існує( 'add_theme_support' ) ) { 
	add_theme_support( 'post-thumbnails' ); 
	set_post_thumbnail_size( 200, 200, true ); 
	add_image_size( 'portfolio-thumbnail', 270, 203, true );
}

2. Зайдемо до шаблону archive-my_works.php і знайдемо в ньому код:

<img src=”‘.$thymbUrl.’” alt=”” />

Необхідно змінити код для виведення правильного розміру зображення.

$thymbUrlThumbnail = wp_get_attachment_link($attachmentId, 'portfolio-thumbnail');
										// берем URL миниатюры, которая относится к записи 
										echo '
											<клас div="портфоліо '.$dataCat.'" data-cat="".$dataCat".">
												<клас div="портфоліо-обгортка">
												".$thymbUrlThumbnail". 
													<клас div="label">
														<клас div="текст-мітка">
															<клас="текст-заголовок">'.$item->post_title.'</a>
															<клас span="текст-категорія">".$dataCatComma".</проліт>
														</див.>
														<клас div="Етикетка-БГ"></див.>
													</див.>
												</див.>
											</див.>		
										';

Якщо все зроблено правильно, то в розділі портфоліо при натисканні картинка відкриватиметься в новому вікні.

Увага, може бути проблема і виведення правильного розміру мініатюри, але її легко вирішити.

Якщо у вас картинка не змінила розмір, як очікувалося, то швидше за все необхідно перестворити мініатюри портфоліо за допомогою одного з плагінів Regenerate Thumbnails або Примусово відновити мініатюри. Після запуску активації плагіна, запустіть його роботу і обов'язково дочекайтеся закінчення.

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

Додаємо код у файл footer.php, як показано нижче.

<?php wp_footer(); ?>
 <сценарій>
    jQuery(документ).готовий(функція($) { 
      $('[rel="лайтбокс"]').лайтбокс();
    }); 
 </сценарій>
</body>

З вище зазначеного видно, що картинки будуть з'являтися у спливаючому вікні у тому випадку, коли в тезі буде атрибут rel=”лайтбокс”. Давайте зробимо так щоб у всіх картинок, які посилаються на свій більший варіант, цей атрибут з'явився. Для цього зайдіть у файл functions.php і додайте код спеціального фільтра:

add_filter( 'wp_get_attachment_link', 'sant_lightboxadd', 10, 6);

функція sant_lightboxadd ($content, $id, $розмір, $постійне посилання, $ікона, $text) {
    if ($постійне посилання) {
    повернення $content;    
    }
    $зміст = preg_replace("/<a/","<a rel="лайтбокс"",$content,1);
    повернення $content;
}

Після всіх маніпуляцій у мене вийшла така галерея.

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