Здравствуйте, сегодня поговорим о плагине TheThe Image Slider, который позволяет создать симпатичный слайдер и разберем пример – как на основе данного плагина создать слайдер в шапке сайта в теме Twenty Eleven.
Скачать исходники для статьи можно ниже
Данный плагин есть на сайте wordpress.org:
Последнее обновление: 2013-1-25
Загрузок: 100,333 раз.
Автор: thethefly
Ссылка на плагин на wordpress.org: http://wordpress.org/extend/plugins/thethe-image-slider/
Установка стандартная – заходим в панель управления, в левом меню выбираем пункт “Плагины” и его подпункт “Добавить новый”, в строке поиска вводим “TheThe Image Slider”, устанавливаем и активируем.
После активизации в левом меню панели управления на wordpress появится новый пункт “The The Fly”, заходим в него и выбираем подпункт “Image Slider”:
В данной пункте есть 3 закладки:
– overview (обзор) – здесь есть уже готовый код для вставки слайдера в код header.php (шапку сайта, на скриншоте выше выделен стрелкой)!
– sliders and slides (слайдеры и слайды) – здесь будем непосредственно создавать слайдер, загружать картинки и др.
– custom style – пользовательский стиль.
Пример.
Давайте создадим слайдер с помощью плагина TheThe Fly и вставим его в шапку сайта в стандратной теме wordpress – Twenty Eleven.
1. Переходим в закладку “Sliders and Slides” и начинаем создавать слайдер.
Для этого нажимаем на кнопку “Add New Slider”.
Далее ставим настройки такие как и на скриншоте ниже:
Здесь я изменил некоторые настройки, которые идут по умолчанию, а именно:
– Slider Width – увеличил ширину слайдера, поставил 900.
– Slider Height – увеличил высоту слайдера, поставил 288.
– Show controls – снял галочку с данного пункта, можете оставить – это стрелки по бокам слайдера для его перелистывания.
2. Далее нажимаем кнопку “Save & Add New Slide” и переходим к созданию слайдов (рисунков сладера).
Если вы нажали на кнопку “Save & Exit” и вышли из редактора слайдера, то можно войти в него нажав опять на вкладку “Sliders and Slides” и выбрать “Edit” или же нажмите сразу на “Edit Sliders” и на кнопку “Add New Slide”
После нажатия на кнопку “Save & Add New Slide” появится следующее окошко:
Здесь в строчке Image – нажимаем на картинку и загружаем нужное нам изображение – выбрав его и нажав на кнопку “Insert into Post”.
В строчке “Link URL” можете задать ссылку для каждого слайда.
Далее в строчке Show Caption – убираем галочку, если не хотите, чтобы в каждой картинке появлялась “Надпись”.
После жмем на кнопку “Save & Add New Slide” и создаем очередной слайд.
После того как создадите нужное количество слайдов нажимаем кнопку “Save & Exit”.
3. Вставляем слайдер на сайт.
После нажатия на кнопку “Save & Exit” попадаем вновь на вкладку “Sliders and Slides”:
И видим, что у нас есть готовый слайдер с именем “Slider1”, далее идет параметр его размера (Size) – 900*288, потом стиль и шорткод (shortcode) для вставки данного слайдера в странички и записи сайта на wordpress.
Для вставки в записи или страницы – нужно перейти в “Редактор записи или страницы” (“Записи” – “Добавить новую”), открыть закладку “HTML” и вставить данный шорткод.
Но нам нужно вставить слайдер в шапку сайта (header.php), поэтому запоминаем название слайдера – в моем примере Slider1, которое указано в столбце slider name или непосредственно в самом шорткоде slider name=”Slider1″.
Далее переходим в закладку “Overview” и копируем предлагаемый нами код для вставки в файл heder.php:
if (function_exists('get_thethe_image_slider')) {
print get_thethe_image_slider('Slider Name');
}
Здесь заменяем Slider Name на название нашего слайдера, в моем примере – это Slider1 и в итоге, для данного примера получаем следующий код:
if (function_exists('get_thethe_image_slider')) {
print get_thethe_image_slider('Slider1');
}
После переходим в “Редактор” – в панели управления в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов ищем файл header.php и открываем его.
Где-то в середине его кода ищем строчки:
... <body <?php body_class(); ?>> <div id="page" class="hfeed"> <header id="branding" role="banner"> <hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> <?php ...
И сразу после тега … <body <?php body_class(); ?>> <div id="page" class="hfeed"> <header id="branding" role="banner"> <hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" title="<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>" rel="home"><?php bloginfo( ‘name’ ); ?></a></span></h1> <h2 id="site-description"><?php bloginfo( ‘description’ ); ?></h2> </hgroup> <?php if (function_exists(‘get_thethe_image_slider’)) { print get_thethe_image_slider(‘Slider1’); } …
4. Далее нам нужно отключить вывод стандартной картинки для шапки в теме Twenty Eleven.
Это достаточно легко сделать – заходим в панели управления, в левом меню, в пункт “Внешний вид” и выбираем его подпункт “Заголовок” (“Header”) и нажимаем на кнопочку “Remove header image” (удалить ) внизу страницы:
Нажимаем на кнопку “Save Changes” (Сохранить изменения).
Теперь все готово!!!
Поставил работает, но почему то картинки стали сильно пиксилизованные, как будто их подвергли сильной компрессии, такова эффекта ещё можно добиться применив фильтр из фотошопе. Загадка.
Александр, скорее всего проблема (сильно пиксилизованные) в том, что когда вы загружаете картинку для нового слайда, перед тем как нажать на кнопку “Вставить в запись” (“Insert into Post”), вам нужно проверить параметр “Размер” (“Size”) – он должен стоять на “Full Size” (“Оригинал”) – в этом случае wordpress не уменьшит размер изображения и слайдер будет четкий.
Пример слайдера, созданного с помощью плагина TheThe Image Slider из стандартных картинок темы Twenty Eleven, можете посмотреть на тестовом сайте – “mnogoblog6.p.ht”
Помогло спасибо.
Спасибо за подробное описание плагина. Все работает. Плагинов много, но мне нужен был простенький и чтоб работал. Установила, загрузила картинки и все. Еще раз спасибо.
Модуль работает хорошо все показывает прекрасно но как только пользователь авторизовался модуль перестает работать идет полоска загрузки в чем проблема?
Здравствуйте. Спасибо статья классная, все четко расписано. Но желательно бы еще добавить такой раздел в Статью, возможные глюки и как их исправить )).
Та же беда что и писал Денис, только я сразу ставила на хост, загружала Плагин через Админку ВП. Настроила так как вы опсиали в статье, но заходя на сайт, висит, крутиться полоска загрузки и на этом все… не появляются Слайды.
Зайдя обратно в админку ВП, в настройки Плагина, там все четко, все слайды есть, все картинки. Версия ВП 3.8.1. Это глюк потому что Плагин устарел и с новой версией ВП не работает?
Если та порекомендуйте простенький плагин для такой же реализации, нужен для Портфолио.
Спасибо