- Auction module
- Booking module
У цій короткій замітці розглянемо установку слайдера на тему WordPress. Звичайно ж, в мережі є маса плагінів з шорткодамі інтеграції в тему або пост, адмін-панелями, інше ... але нас цікавить максимально легкий і гнучкий варіант. Це особливо актуально, якщо потрібно створити свою унікальну тему WordPress. На допомогу прийде безкоштовний плагін FlexSlider від WooThemes.
Установка через адмін-панель WordPress не потрібно. Для відображення базової версії слайдера в нашій шапці сайту потрібно зробити наступні кроки:
1. Вставляємо в корінь сайту наступні файли:
- flexslider.css
- jquery.flexslider.js
- jquery.flexslider-min.js
- bg_direction_nav.png
Звичайно, можемо і цивілізовано додати ці файли в потрібні папки (наприклад, файл стилів в відповідну папку стилів і т.д.), але тоді слід переписати шляху в наступному пункті.
2. Вставити наступний код перед закривається тегом :
Цей код підключає файл стилів flexslider.css, який ми далі настроєм під себе; підключає бібліотеку jquery і файли js самого плагіна.
3. У файл шапки теми (як правило, header.php) вставляємо код:
В даному коді вказуються шляхи на зображення слайдів (slide1.jpg - slide3.jpg). Кількість зображень не має обмежень.
4. У файлі jquery.flexslider.js видаляємо значення Previous і Next (рядки 1091 і 1092 в файлі):
// Primary Controls controlNav: true, // Boolean: Create navigation for paging control of each slide? Note: Leave true for manualControls usage directionNav: true, // Boolean: Create navigation for previous / next navigation? (True / false) prevText: "Previous", // String: Set the text for the "previous" directionNav item nextText: "Next", // String: Set the text for the "next" directionNav item
5. У файлі flexslider.css замінюємо наступний код (рядки 71, 72 в файлі)