Добавляем слайд шоу или слайдер в шапку сайта, в сайдбар, в пост или страницу WordPress опубликовал Радик Алиев категория Галереи и слайд шоу, Уроки Wordpress 
просмотры 99 938

У многих пользователей возникает вопрос как приукрасить свой сайт и добавить слайд шоу 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 Width — ширина отображаемого слайдера.
3. Slider Height — высота слайд шоу.
4. Transition Time — время через которое заработает слайдер (исчисляемся в миллисекундах).
5. Show Pagination — отображать или нет навигацию в слайдере, это может быть миниатюры картинок, точки , номера картинок или название картинок.
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 Position — позиция навигации, вы можете выбрать Bottom — снизу, Left — слева, Right — справа, Top — сверху.
8. Caption Size — размер навигации в пикселях.
9. Caption Style — стиль отображения навигации, три варианта.
10. Caption Background Color — Вы можете выбрать цвет заднего плана навигации.
11. Caption Text Color — цвет текста навигации.
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 будет название Вашего слайдера, не путайте с названием картинок.

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

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

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

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

Сохраняем файл и закидываем его в папку с нашей темой WordPress . После обновления страницы в браузере Вы сможете увидеть хорошее и функциональное слайд шоу.

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

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

В середине данного вызова мы пишем наш shortcode и он будет выводиться в любом месте Вашего сайта.

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

Смотрите другие уроки WordPress, которые помогут Вам создавать хорошие сайты на WordPress .

Удачи Друзья! Если статья была Вам полезна, поделитесь с Друзьями!

Работа с WordPress.