--> Добавляем слайд шоу или слайдер в шапку сайта, в сайдбар, в пост или страницу WordPress опубликовал Радик Алиев категория Галереи и слайд шоу, Уроки Wordpress просмотры 99 175
У многих пользователей возникает вопрос как приукрасить свой сайт и добавить слайд шоу 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
Далее у Вас появляется таблица с настройками слайдера, которые необходимо заполнить, что Ваш слайдер работал корректно и не нужно было возвращаться, хотя Вы всегда сможете это сделать.
Теперь разберём по порядку, что делает каждый из пунктов настройки слайдера:- Slider Name — название Вашего слайдера или слайд шоу, которое Вы будете использовать для вставки на сайт. Можно создавать неограниченное число слайдеров, например для шапки сайта, для вывода в постах и тд.
- Slider Width — ширина отображаемого слайдера.
- Slider Height — высота слайд шоу.
- Transition Time — время через которое заработает слайдер (исчисляемся в миллисекундах).
- Show Pagination — отображать или нет навигацию в слайдере, это может быть миниатюры картинок, точки , номера картинок или название картинок.
- Pagination Type — именно в этом выпадающем меню Вы можете выбрать вариант навигации в слайд шоу, если в предыдущем пункте Вы поставили галочку. Dots — точки, Thumbnails — миниатюры картинок, Slide Names — название картинок, Numbers — нумерация картинок.
- Show Controls — если отмечено отображает стрелки вправо и влево на слайд шоу.
- Auto Play — если отмечено, автоматически запускает слайдер после загрузки страницы (интервал задаётся в Transition Time).
- Loop Slides — если отмечено, то изображения в слайде будут повторятся, после последней загруженной картинки будет отображаться первая.
- Resize Slides — если отмечено, то плагин автоматически изменит загруженные изображения до нужных пропорций, полезно в случае картинок с большим расширением.
- Linkback to Developer — если отмечено то Вы отобразите ссылку на создателей слайд шоу.
- Slider Style — Вы можете выбрать стиль Вашего слайдера из представленных, также Вы можете выбрать none и сделать Ваш собственный дизайн слайдера.
Настройте слайд шоу как Вам необходимо и нажмите Save. Далее нам необходимо загрузить картинки, которые будут отображаться в нашем слайд шоу, для этого нажмите на кнопку Save & Add New Slide, которая находиться рядом с Save. У Вас появится следующий шаг добавление картинки:
Рассмотрим подробнее, что значат каждый из пунктов настройки отображения картинок слайдера:- Image — загружаем картинку и вставляем, принцип вставки изображения в пост.
- Name — название картинки, используется для понятного использования картинок, также, если Вы в настройках слайд шоу выбрали Pagination Type и пункт Slide Names, то Ваши названия будут отображаться в слайдере.
- Link URL — вставляем урл на картинку слайдера, можно оставить пустым, если Вы не хотите делать ссылки.
- Delay — время смены картинок в слайд шоу, по умолчанию 5000 = 5 секунд, значит что смена картинок будет происходить каждые 5 секунд.
- Transition — эффекты перехода картинок в слайдере. Можно выбрать один из перечисленных или все случайным образом.
- Show Caption — если отмечено, то на картинке будет отображаться навигация.
- Caption Position — позиция навигации, вы можете выбрать Bottom — снизу, Left — слева, Right — справа, Top — сверху.
- Caption Size — размер навигации в пикселях.
- Caption Style — стиль отображения навигации, три варианта.
- Caption Background Color — Вы можете выбрать цвет заднего плана навигации.
- Caption Text Color — цвет текста навигации.
- Caption Background Opacity — прозрачность цвета заднего плана.
- Caption Text — текст навигации.
Рекомендую Вам не ставить галочку в настройках Show Caption, достаточно того, что Вы поставили галочку в настройках слайдера Show Pagination.
Как только Вы загрузили изображение и проделали все необходимые настройки, нажимайте Save & Add New Slide и проделайте необходимые настройки для добавление второй и последующих картинок в слайдер, количество картинок не ограничено.
Установка слайд шоу или слайдера в шапку сайта, в сайдбар, в пост или страницу Wordpress
После всех пройденных манипуляций с загрузкой изображений в слайдер, нажимайте Save & Exit, тем самым Вы выйдете из загрузки картинок и попадёте в главное меню, в котором у Вас будет название Вашего слайд шоу или слайдера как угодно. Также выйти в общее меню можно нажав на верхний таб. Sliders and Slides.
Теперь мы научились создавать слайдеры и загружать картинки в плагине TheThe Image Slider. Теперь нам необходимо научиться вставлять слайдер в шапку сайта.
В главном меню плагина Вы видите приблизительно следующую картинку, названия могут отличаться:
Как видно на картинке плагин сам генерирует название shortcode для вставки практически в любое место Вашего сайта слайд шоу, короткий код (shortcode) — это один из лучших способов вставки плагинов или хаков WordPress в контент Вашего сайта, я постоянно использую данный способ, далее я напишу как он используется.
Для того, чтобы вставить в пост, запись или страницу Вашего сайта слайд шоу используйте данный shortcode, просто вставьте в редактор, где значение name будет название Вашего слайдера, не путайте с названием картинок.
Чтобы вставить слайдер в шапку Вашего сайта, Вам необходимо немного владеть HTML и CSS навыками, чтобы разместить его более красиво и ровно, я приведу простой пример используя тему twentyten, стандартной сборки WordPress, тут главное понять принцип.
Берём файл header . php нашего шаблона и находим те строчки, которые отвечают за отображение шапки сайта, в шаблоне который я использую контейнер < div > отмечен id = "header"