WordPress — приваблива галерея за 5 хвилин

1

Від автора: У цьому уроці ми з вами навчимося створювати просту і, разом з тим, привабливу галерею на WordPress. WordPress вже пропонує простий спосіб створення і додавання галерей до матеріалів нашого сайту. Однак, отримана галерея буде не дуже зручна для користувача, оскільки перегляду збільшеної картинки галереї буде відбуватися за новою адресою. Давайте усунемо цей недолік, додавши галереї динамічності і привабливості.

WordPress — приваблива галерея за 5 хвилин

Автор: Андрій Кудлай

Звуть мене Андрій Кудлай. Родом я з України, живу в Дніпропетровську. Веб-програмування вчився сам. Непогано знаю HTML, CSS, PHP, JavaScript.

WordPress — приваблива галерея за 5 хвилинWordPress — приваблива галерея за 5 хвилин

Отже, для роботи нам знадобиться встановлена CMS WordPress плагін модальних вікон Fancybox або будь-який інший на ваш смак. Почнемо з створення галереї. Відкриємо запис, до якої потрібно додати галерею, гукнемо по кнопці Додати медиафайл і у вікні управління медіафайлами перейдемо по посиланню Створити галерею. Завантажимо необхідні картинки і додамо їх в галерею. У налаштуваннях галереї в якості посилання встановимо медиафайл. Інші налаштування можна не змінювати.

Тепер завантажити плагін Fancybox і помістимо його в папку з нашою темою. Папку плагіна назвемо fqncybox. Підключимо необхідні для роботи плагіна файли у файлі functions.php:

wp_enqueue_script( ‘my-fancybox’, get_template_directory_uri() . ‘/fancybox/jquery.fancybox.pack.js’, array(‘jquery’) );
wp_enqueue_style( ‘my-fancybox-css’, get_template_directory_uri() . ‘/fancybox/jquery.fancybox.css’ );

Тепер відкриємо файл з клієнтськими скриптами (jQuery) нашої теми і пропишемо всього один рядок коду:

$(‘.gallery a’).attr(‘rel’, ‘group’).fancybox();

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

Ось, власне, і все, проблема вирішена. На цьому наш урок закінчено. Удачі і до нових зустрічей!