WordPress — повноекранне слайд-шоу на головній сторінці

1

Від автора: У цьому уроці ми попрацюємо з CMS WordPress і спробуємо реалізувати функціонал, який часто можна бачити в преміум-теми WordPress. Мова йде про повноекранному слайдшоу на головній сторінці. Виглядає цей ефект досить симпатично: на головній сторінці представлений мінімум даних (назва сайту, меню, логотип), які представлені на фоні привабливих зображень, що змінюють один одного.

WordPress — повноекранне слайд-шоу на головній сторінці

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

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

WordPress — повноекранне слайд-шоу на головній сторінціWordPress — повноекранне слайд-шоу на головній сторінці

Отже, для реалізації задуманого нам, в першу чергу, необхідний javascript-плагін, що дозволяє реалізувати повноекранне слайд-шоу. Я використовую плагін Backstretch. Документацію до нього і сам плагін можна знайти на Гітхабі або офіційному сайті плагіна.

Для роботи я скористаюся темою, яку ми створили в курсі Унікальний сайт на WordPress.

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

Document
‘menu’, ‘container’ = > ‘false’)); ? >
jQuery.backstretch([
], {
fade: 750,
duration: 4000
});

Суть роботи з головною сторінкою буде полягати в наступному: ми створимо категорію і назвемо її, скажімо Home. Всі пости даної категорії як раз і будуть відбиратися для виведення на головну сторінку. В цих постах нас будуть цікавити тільки прикріплені мініатюри, які і будуть використані для слайдшоу бекграунду. Зрозуміло, що зображення повинні бути заздалегідь підготовлені і мати відповідні розміри.

У коді шаблону ми трохи коригуємо стандартний цикл, вибираючи пости з створеної категорії Home. З обраних постів ми отримуємо url мініатюр і передаємо параметром однойменним методом плагіна.

Залишилося підключити бібліотеку jQuery і сам плагін. В моїй темі всі скрипти підключаються з файлу functions.php. Щоб підключити на головній сторінці тільки необхідні нам скрипти і стилі, скористаємося функцією is_front_page(), яка перевірить, чи знаходимося ми на головній сторінці:

function load_style_script(){
if( is_front_page() ){
wp_enqueue_script(‘backstretch’, get_template_directory_uri() . ‘/js/jquery.backstretch.min.js’, array(‘jquery’));
wp_enqueue_style(‘style-home’, get_template_directory_uri() . ‘/style-home.css’);
return;
}
wp_enqueue_script(‘jquery-1’, get_template_directory_uri() . ‘/js/jquery-1.js’);
wp_enqueue_script(‘jquery00’, get_template_directory_uri() . ‘/js/jquery00.js’);
wp_enqueue_script(‘init0000’, get_template_directory_uri() . ‘/js/init0000.js’);
wp_enqueue_style(‘style’, get_template_directory_uri() . ‘/style.css’);
}
add_action(‘wp_enqueue_scripts’, ‘load_style_script’);

Якщо все зроблено вірно, то на головній сторінці ми будемо бачити меню на тлі змінюють один одного повноекранних слайдів.

На цьому я з вами прощаюся. Удачі і до нових зустрічей!