Вам потрібен слайдер, при наведенні на картинки якого відвідувач зможе перейти на потрібну вам сторінку, та до того ж ви хочете, щоб поруч з картинкою на слайдері відображався короткий анонс, огляд - без проблем все це вам допоможе створити відмінний безкоштовний плагін Smooth Slider.
Завантажити вихідні для статті можна нижче
Використання даного плагіна Smooth Slider підійде для огляду нових статей на вашому сайті, причому це буде дуже ефектно. Також його можна використовувати для презентації ваших нових продуктів, послуг. Або ж можете розміщувати в ньому цікаві новини або події, які на вашу думку здадуться для відвідувачів цікавими, наприклад якась корисна халява в інтернеті, причому посилання можна робити як на статті на вашому сайті, так і на будь-які сайти в інтернеті.
Приклад слайдера, створеного за допомогою плагіна Smooth Slider:
Демонстраційний приклад можна подивитися за наступним посиланням:
Спробуємо створити даний слайдер за допомогою безкоштовного плагіна Smooth Slider.
1. Установка плагіна Smooth Slider.
Даний плагін є на wordpress.org!
Відомості про плагіні:
Кількість оцінили 120 чоловік і загальна поставлена оцінка 4.
Установка проста - заходимо в панель управління вашим сайтом, далі вибираємо в лівому меню пункт «Модулі» і підпункт «Додати новий» і в рядку Знайти плагіни вводимо Smooth Slider.
Тиснемо на посилання «Встановити зараз» і «Активувати».
Після чого в лівому меню вашої панелі управління з'явитися пункт «Smooth Slider» з двома підпунктами:
У вищевказаних підпунктах можна буде налаштувати зовнішній вигляд слайдера, також порядок проходження слайдеров, видалити непотрібні і інші настройки.
До даних налаштувань ми повернемося трохи пізніше, а тепер нам потрібно створити сам контент слайдера - його наповнення.
2. Створюємо контент (картинки + анонси) слайдера.
Якщо ми вибираємо пост (запис). то входимо в потрібну нам запис (в панелі управління вибираємо в лівому меню пункт «Записи», підпункт «Все записи» і вибираємо потрібну запис).
Розглянемо більш докладно настройки даного віконця:
1. Додати чи даний запис в слайдер, якщо так, то ставимо галочку.
2. Який стиль використовувати при відображенні даного слайдера (можна залишити значення за замовчуванням).
3. Тут необхідно вказати шлях до картинки, яка буде використовуватися в слайдері при відображенні даного поста.
4. Тут потрібно вказати посилання, по якій перейде відвідувач при натисканні на картинку слайдера (можна залишити порожнім).
Аналогічно дії можна робити і зі сторінками.
А як же справа складається з зображеннями?
Адже крім постів (записів), сторінок в слайдер можна додавати просто зображення.
Для цього нам потрібно перейти галерею картинок нашого сайту (в панелі управління сайтом в лівому меню вибираємо пункт «Медіафайли», підпункт «Бібліотека»).
Далі вибираємо потрібну нам картинку і потрапляємо в Редагування медіафайлу.
Тут у нас з'явилися нові підпункти:
1. Поставте галочку, щоб додати це зображення в слайдер.
2. Тут потрібно вказати посилання, по якій перейде відвідувач при натисканні на картинку слайдера (можна залишити порожнім).
Все наповнювати слайдер постами, сторінками і картинками ми навчилися! Тепер можна переходити до налаштувань слайдера.
3. Налаштування слайдера (зовнішній вигляд, порядок, видалення непотрібних пунктів)
Тепер розглянемо безпосередньо пункт «Smooth Slider» (в панелі управління в лівому меню панелі керування) з його двома підпунктами:
Підпункт Sliders складається з 2-х частин:
У першій частині ви можете видалити непотрібні слайди (пости, сторінки, зображення) вашого слайдера - для цього потрібно поставити галочки навпроти зайвих слайдів і натиснути на кнопку «Remove Selected».
У другій частині ви можете поміняти порядок слад (пости, сторінки, зображення) в слайдері - для цього достатньо натиснути лівою кнопкою миші по потрібного слайду і перетягнути його куди потрібно (вгору, вниз) і після натиснути на кнопку «Save the order».
Тут ви зможете налаштувати зовнішній вигляд слайдера.
Даний підпункт складається з 6 частин:
2. Slider Box - Налаштування боксу слайдера (інтервал, швидкість слайдів, кількість, колір, ширина, висота, межа, кнопки навігації)
У кнопках навігації поставте галочку напроти пункту «Show Prev / Next navigation arrows» (Показати Попередній / Наступний стрілками) - так буде більш ефектніше.
3. Slider Title - настройка самої назви і його шрифту слайдера.
4. Post Title - настройка самої назви і його шрифту слайдеров (анонсів постів, сторінок, зображень).
5. Thumbnail Image - настройка мініатюри (картинки слайдеров).
6. Slider Content - настройка контенту слайдера (шрифт, його розмір у символах, словах).
7. Miscellaneous - інші настройки (можна залишити за замовчуванням).
4. Як вставити слайдер на сайт
Також ви можете скористатися наступним тегом (шорткодом):
Його можна вставити на будь-яку сторінку, пост, але необхідно при вставці вибрати закладку HTML.
PS: Наведу приклад вставки слайдера в шаблон index.php, для відображення його на головній сторінці, використовувати буду тему Twenty Twelve.
Має вийти наступне:
Код шаблону index.php з кодом слайдера:
Слайдер вставлений за допомогою рядків 22-23, рядки 24-25 - це відступ, більше нічого не додавав в код шаблону index.php.