1. Встановлюємо та налаштовуємо плагін слайдера і слайд шоу TheThe Image Slider WordPress
2. Тепер розберемо по порядку, що робить кожен з пунктів налаштування слайдера:
3. Розглянемо докладніше, що означають кожен з пунктів налаштування відображення картинок слайдера:
4. Установка слайд шоу або слайдера в шапку сайту, в сайдбар, в пост або сторінку Wordpress

У багатьох користувачів виникає питання як прикрасити свій сайт і додати слайд шоу WordPress в шапку сайту, в будь-який пост сайту, на сторінку або навіть в сайдбар WordPress. Я розповідав як можна зробити Nivo слайдер WordPress без плагінів використовуючи картинки, які завантажені в стандартну галерею WordPress. Сьогодні я Вам розповім як використовувати плагін TheThe Image Slider для створення слайдера або слайд шоу WordPress на блозі.

Встановлюємо та налаштовуємо плагін слайдера і слайд шоу TheThe Image Slider WordPress

Для початку скачайте плагін TheThe Image Slider і встановіть на Вашу збірку WordPress, також Ви можете скористатися пошуком плагінів і встановити безпосередньо з адмінки (дивіться картинку).

Після встановлення плагіну в лівому меню з'явиться TheThe Fly меню, в якому виберіть Image Slider.

Далі натисніть на вкладку Sliders and Slides, в якій ми будемо створювати наше слайд шоу, яке в наслідок виводимо в шапці сайту або в тому місці де ми самі захочемо. Щоб почати натисніть на кнопку Add New Slider

Далі у Вас з'являється таблиця з настройками слайдера, які необхідно заповнити, що Ваш слайдер працював коректно і не потрібно було повертатися, хоча Ви завжди зможете це зробити.

Тепер розберемо по порядку, що робить кожен з пунктів налаштування слайдера:

1. Slider Name - назва Вашого слайдера або слайд шоу, яке Ви будете використовувати для вставки на сайт. Можна створювати необмежену кількість слайдерів, наприклад для шапки сайту, для виведення в постах і тд.
2. Slider Widt h - ширина відображуваного слайдера.
3. Slider Height - висота слайд шоу.
4. Transition Time - час через яке запрацює слайдер (обчислюється в мілісекундах).
5. Show Paginatio n - відображати чи ні навігацію в слайдері, це може бути мініатюри картинок, точки, номера картинок або назва картинок.
6. Pagination Type - саме в цьому випадаючому меню Ви можете вибрати варіант навігації в слайд шоу, якщо в попередньому пункті Ви поставили галочку. Dots - точки, Thumbnails - мініатюри картинок, Slide Names - назва картинок, Numbers - нумерація картинок.
7. Show Controls - якщо відзначено відображає стрілки вправо і вліво на слайд шоу.
8. Auto Play - якщо зазначено, автоматично запускає слайдер після завантаження сторінки (інтервал задається в Transition Time).
9. Loop Slides - якщо зазначено, то зображення в слайді будуть повторяться, після останньої завантаженої картинки буде відображатися перша.
10. Resize Slides - якщо зазначено, то плагін автоматично змінить завантажені зображення до потрібних пропорцій, корисно в разі картинок з великим розширенням.
11. Linkback to Developer - якщо наголошено на тому Ви відобразите посилання на творців слайд шоу.
12. Slider Style - Ви можете вибрати стиль Вашого слайдера з представлених, також Ви можете вибрати none і зробити Ваш власний дизайн слайдера.

Налаштуйте слайд шоу як Вам необхідно і натисніть Save. Далі нам необхідно завантажити картинки, які будуть відображатися в нашому слайд шоу, для цього натисніть на кнопку Save & Add New Slide, яка знаходитися поруч з Save. У Вас з'явиться наступний крок додавання картинки:

Розглянемо докладніше, що означають кожен з пунктів налаштування відображення картинок слайдера:

1. Image - завантажуємо картинку і вставляємо, принцип вставки зображення в пост.
2. Name - назва картинки, використовується для зрозумілого використання картинок, також, якщо Ви в налаштуваннях слайд шоу вибрали Pagination Type і пункт Slide Names, то Ваші назви будуть відображатися в слайдері.
3. Link URL - вставляємо урл на картинку слайдера, можна залишити порожнім, якщо Ви не хочете робити посилання.
4. Delay - час зміни картинок в слайд шоу, за замовчуванням 5000 = 5 секунд, значить що зміна картинок відбуватиметься кожні 5 секунд.
5. Transition - ефекти переходу картинок в слайдері. Можна вибрати один з перерахованих або все випадковим чином.
6. Show Caption - якщо зазначено, то на зображенні буде відображатися навігація.
7. Caption Positio n - позиція навігації, ви можете вибрати Bottom - знизу, Left - зліва, Right - справа, Top - зверху.
8. Caption Size - розмір навігації в пікселях.
9. Caption Style - стиль відображення навігації, три варіанти.
10. Caption Background Color - Ви можете вибрати колір заднього плану навігації.
11. Caption Text Colo r - колір тексту навігації.
12. Caption Background Opacity - прозорість кольору заднього плану.
13. Caption Text - текст навігації.

Рекомендую Вам не ставити галочку в налаштуваннях Show Caption, досить того, що Ви поставили галочку в налаштуваннях слайдера Show Pagination.

Як тільки Ви завантажили зображення і виконали всі необхідні налаштування, натискайте Save & Add New Slide і виконайте необхідні налаштування для додавання другої і наступних картинок в слайдер, кількість картинок не обмежена.

Читайте також відмінну статтю як зробити jQuery Mansory на WordPress .

Установка слайд шоу або слайдера в шапку сайту, в сайдбар, в пост або сторінку Wordpress

Після всіх пройдених маніпуляцій із завантаженням зображень в слайдер, натискайте Save & Exit, тим самим Ви вийдете з завантаження картинок і потрапите в головне меню, в якому у Вас буде назву вашого слайд шоу або слайдера як завгодно. Також вийти в загальне меню можна натиснувши на верхній таб. Sliders and Slides.

Тепер ми навчилися створювати слайдери і завантажувати картинки в плагіні TheThe Image Slider. Тепер нам необхідно навчитися вставляти слайдер в шапку сайту.

У головному меню плагіна Ви бачите приблизно таку картинку, назви можуть відрізнятися:

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

Для того, щоб вставити в пост, запис або сторінку Вашого сайту слайд шоу використовуйте даний shortcode, просто вставте в редактор, де значення name буде назву вашого слайдера, не плутайте з назвою картинок.

[Thethe - image - slider name = "назва слайд шоу"]

Щоб вставити слайдер в шапку Вашого сайту, Вам необхідно трохи володіти HTML і CSS навичками, щоб розмістити його більш красиво і рівно, я приведу простий приклад використовуючи тему twentyten, стандартної збірки WordPress, тут головне зрозуміти принцип.

Беремо файл header. php нашого шаблону і знаходимо ті рядки, які відповідають за відображення шапки сайту, в шаблоні який я використовую контейнер <div> відзначений id = "header"

<Div id = "wrapper" class = "hfeed">

<Div id = "header">

Саме в цей контейнер я і поставлю моє слайд шоу, яке буде відображатися на всіх сторінках, так як файл header. php підключається на всіх файлах шаблону.

Плагін має функцію, яку Ви можете використовувати в будь-якому місці Вашого шаблону, дана функція вставляється в. php файл Вашої теми, в те місце, де Ви хочете відобразити слайдер, в нашому випадку це після відкривається контейнера з id = "header", виглядає все це так:

<Div id = "wrapper">

<Div id = "header"> if (function_exists ( 'get_thethe_image_slider')) {

print get_thethe_image_slider ( 'Назва Слайд шоу');

}

// тут може бути інший код шапки сайту, наприклад верхнє меню, для тренування Ви можете видалити все з контейнера і закрити його </ div>

Зберігаємо файл і закидаємо його в папку з нашою темою WordPress. Після оновлення сторінки в браузері Ви зможете побачити гарне і функціональне слайд шоу.

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

Є ще один корисний код на WordPress, для тих плагінів, які не мають функції виклику плагіна з файлів, а маю лише shortcode, який іноді необхідно вставити в файли шаблону, виглядає він так:

<? Php echo do_shortcode ( '[thethe-image-slider name = "назва слайд шоу"]'); ?>

В середині даного виклику ми пишемо наш shortcode і він буде виводитися в будь-якому місці Вашого сайту.

У цьому уроці ми навчилися працювати з плагіном для створення слайд шоу або слайдера WordPress на будь-якій сторінці, на будь-якому пості, в сайдбарі або в шапці сайту WordPress.

Дивіться інші уроки WordPress, які допоможуть Вам створювати хороші сайти на WordPress.

Удачі Друзі! Якщо стаття була Вам корисна, поділіться з Друзями!

Робота з WordPress .