Створення галереї-слайдера на WordPress

20

Від автора: Даний урок буде логічним продовженням уроку щодо створення галереї за 5 хвилин на WordPress. У зазначеному уроці ми фактично лише зробили галерею WordPress більш сучасною і динамічною, аж ніяк не правлячи її структуру. У даному уроці ми вже кардинально перепишемо структуру галереї і, в результаті, створимо слайдшоу, використовуючи jQuery плагін Nivo Slider.

Створення галереї-слайдера на WordPress

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

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

Створення галереї-слайдера на WordPressСтворення галереї-слайдера на WordPress

Отже, скачаємо jQuery плагін Nivo Slider і підключимо всі необхідні файли до нашого сайту. Нагадаю, що я виробляю підключення через файл functions.php теми WP:

wp_enqueue_style( ‘my-nivoslider-css’, get_template_directory_uri() . ‘/nivoslider/nivo-slider.css’ );
wp_enqueue_style( ‘my-nivoslider-default’, get_template_directory_uri() . ‘/nivoslider/themes/default/default.css’ );
wp_enqueue_style( ‘my-nivoslider-bar’, get_template_directory_uri() . ‘/nivoslider/themes/bar/bar.css’ );
wp_enqueue_style( ‘my-nivoslider-dark’, get_template_directory_uri() . ‘/nivoslider/themes/dark/dark.css’ );
wp_enqueue_style( ‘my-nivoslider-light’, get_template_directory_uri() . ‘/nivoslider/themes/light/light.css’ );
wp_enqueue_script( ‘my-nivoslider-js’, get_template_directory_uri() . ‘/nivoslider/jquery.nivo.slider.js’, array(‘jquery’) );

Тут ми підключаємо файл стилів слайдера, js-файл плагіна і чотири файлу з темами оформлення.

Тепер вставимо галерею WordPress в запис. Як і в минулому уроці, ми отримали картинки, збудовані плитками, тобто отримали формат галереї. Що ж нам потрібно для того, щоб отримати формат слайдера? Давайте поглянемо в редакторі, що представляє із себе галерея WP в режимі коду, для цього переведемо редактор з візуального режиму в режим тексту. В результаті ми побачимо щось на зразок такого: . Це ніщо інше, як шорткод, в якому є параметр ids з ідентифікаторами картинок галереї.

Якщо це шорткод, то ми цілком можемо повісити на нього свою функцію, яка буде генерувати необхідний висновок. Давайте так і зробимо у файлі functions.php. Цим рядком ми зв’яжемо щорткод gallery з функцією my_gallery:

add_shortcode( ‘gallery’, ‘my_gallery’ );

Ну і код самої функції:

function my_gallery($atts, $text = «){
$img_src = explode(‘,’, $atts[‘ids’]);
$theme = isset($atts[‘theme’]) ? $atts[‘theme’] : ‘default’;
$html = ‘

‘;
$html .= ‘

‘;
foreach($img_src as $img){
$html .= wp_get_attachment_image( $img, ‘full’ );
}
$html .= ‘

‘;
$html .= ‘

‘;
$html .= ‘

‘;
return $html;
}

Дана функція ID картинки отримує її HTML-код і складає в змінну $html. В цю ж змінну складає вся необхідна верстка. Крім атрибуту ids шорткода, ми можемо додати додаткові атрибути, наприклад атрибут theme, в якому користувач може вказати необхідну тему оформлення для слайдера. Для цього замінимо шорткод таким:

Ну і останній штрих: трохи підкоригуємо плагін Nivo Slider під себе, щоб він виводив опису картинок. Для цього відкриємо файл jquery.nivo.slider.js, знайдемо рядка 95-96:

if(vars.currentImage.attr(‘title’) != «&& vars.currentImage.attr(‘title’) != undefined){
var title = vars.currentImage.attr(‘title’);

І замінимо їх на наступні:

if(vars.currentImage.attr(‘alt’) != «&& vars.currentImage.attr(‘alt’) != undefined){
var title = vars.currentImage.attr(‘alt’);

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