Интеграция галереи FancyBox с CMS WordPress без плагинов

ШАГ 1

Создаем в админке новую страницу, назовем ее «Галерея», дадим ей ярлык «gallery»
Добавим страницу в меню
ШАГ 2

Далее будем работать с шаблоном вывода страницы «Галерея». Откройте шаблон для всех страниц page.php и сохраните его как page-gallery.php
Убираем все лишнее из шаблона — слайдер, вывод контента WordPress, сайдбар…ШАГ3

Скачиваем FancyBox с официального сайта http://fancyapps.com/fancybox/
Скачиваем версию 2.1.5, или последнюю версию с GitHub’a: https://github.com/fancyapps/fancyBox

ШАГ 4

В папке с библиотеками вашей темы libs/ создайте папку fancybox/ и туда скопируйте содержимое папки sourceШАГ5

Подключаем стили и скрипты в functions.php:

//fancybox gallery style
wp_enqueue_style( ‘fancybox-style’, get_template_directory_uri(). ‘/libs/fancybox/jquery.fancybox.css’, array(), » );

//script fancybox
wp_enqueue_script( ‘fancybox-script’, get_template_directory_uri() . ‘/libs/fancybox/jquery.fancybox.pack.js’, array( ‘jquery’ ));

Обязательно подключайте все css файлы библиотек перед вашим кастомным файлом стилей style.css.
А также все js-скрипты подключайте перед вашим кастомным файлом скриптов common.js.
Для того чтобы ваши кастомные стили переопределяли все остальные, а ваши кастомные скрипты работали с уже подключенными скриптами.ШАГ6

Запускаем fancyBox в нашем кастомном файле скриптов common.js:

//fancybox
$(«.fancybox»).fancybox({
openEffect : ‘none’,
closeEffect : ‘none’
});
ШАГ7

Выводим верстку нашей галереи в шаблон page-gallery.php сразу после хэдера:

<section class=»main_section»>
<div class=»container»>
<div class=»row»>
<div class=»portfolio»>

<?php
global $post;
$args = array( ‘numberposts’ => -1, ‘category’ => 3, ‘orderby’ => ‘ID’, ‘order’ => ‘ASC’ );
$myposts = get_posts( $args );
$tmpl_url = get_bloginfo(‘template_url’);
?>

<?php
$i=1;
?>

<div class=»col-md-12 content_column»>
<?php
foreach( $myposts as $post ){
setup_postdata($post);
$thumb=get_the_post_thumbnail($post->ID,»large»);

$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,’full’, true);
//echo $thumb_url[0];

?>

<a class=»fancybox» rel=»gallery1″ href=»<?php echo $thumb_url[0];?>»>
<?php echo $thumb;?>
</a>

<?php

$i++;
}
wp_reset_postdata();
?>
</div>

</div>
</div>
</div>
</section>

ШАГ 8

Я реализовал вариант интеграции с WordPress таким образом, что каждое фото в галерее будет выводиться из записи рубрики «Галерея».
Поэтому нам надо в админке создать рубрику «Галерея» — ярлык photogallery.
И добавить новые записи в эту рубрику. Создайте столько записей, сколько вам нужно фотографий в галерее. В качестве миниатюры для каждой записи укажите фотографию.
Такой вариант отлично подойдет для небольших галерей. Конечно, если вам нужна галерея более чем на 50фотографий, нужно реализовать интеграцию с WP по другому.
Можно использовать мультизагрузчик WordPress, либо подцеплять фотографии из папки. Это остается на ваше творчество.
А мы реализуем самый простой вариант, для небольших галерей.
Не забудьте проверить id созданной вами категории «Галерея». Возможно на шаге7 вам придется поставить другое значение для категории в строке $args = array( ‘numberposts’ => -1, ‘category’ => 3, ‘orderby’ => ‘ID’, ‘order’ => ‘ASC’ );
Картинки, использованные в видеоуроке, можно скачать по следующей ссылке: https://yadi.sk/d/zHxxBAjOpGacH
Это стоковые бесплатные фотографии, которые вы можете использовать в своих проектах, или в качестве обоев для рабочего стола.ШАГ9

Все уже должно выводиться в 1колонку. Осталось только сделать адаптивную верстку нашей галереи.
Нужно поработать со стилями style.css:

a.fancybox{
	width: 48%;
	height: 280px;
	display: block;
	float: left;
	overflow: hidden;
	margin-bottom: 30px;
	z-index: 1;
}
a.fancybox:nth-child(2n){
	float: right;
}
a.fancybox img{
	width: 100%;
	height: auto;
}

А также поработать с медиа-запросами media.css:

@media only screen and (max-width : 992px) {
	a.fancybox{
		height: 200px;
	}
}
@media only screen and (max-width : 768px) {
	/*fancybox*/
	a.fancybox{
		width: 100%;
		height: auto;
	}
}

Вот и все. Галерея теперь должна адаптивиться для любых разрешений. В 2 колонки — для девайсов с макс. шириной 992px, и в 1 колонку — для девайсов с макс. шириной 768px(смартфоны, планшеты…)
На этом мы заканчиваем урок по внедрению красивой галерейки FancyBox с CMS WordPress. Если остались какие-то вопросы или что-то не получилось, напишите в комментариях здесь или на ютубе.
А также обязательно подпишитесь на новые уроки на моем канале, и на новые статьи в блоге.