Дек

Content Slide — простой плагин для создания слайдера (слайдшоу)

Иногда возникает необходимость немного оживить сайт графически и, возможно, добавить немного анимации. Это может быть какая-то флешка с шапке сайта, блок «наши клиенты» в сайдбаре с демонстрацией их логотипов, либо отображение слайдшоу созданных работ (шаблонов) для сайтов веб-студий или дизайнеров. При это возникает, по сути, 2 пути реализации — можно вручную с помощью специального софта для создания флешек создать нужный вам файл, а потом залить его на сайт, а можно воспользоваться специальными плагинами. Для системы WordPress можно использовать модуль Content Slide, о котором сегодня расскажу.

Его присмотрел уже давно еще когда писал статью о лучших плагинах для картинок в Вордпресс. По сути, там есть несколько решений поставленной задачи, но Content Slide показался наиболее подходящим. Он, во-первых, максимально прост в использовании без лишних наворотов и дополнений. Во-вторых, имеет достаточно гибкий механизм из множества специальных настроек для внешнего вида создаваемого слайдшоу (размеры, цвет, стили и многое другое). В работе плагин Content Slide использует скрипт Jquery Coin Slider для самого слайдшоу и jquery inner Fade effect для эффекта перехода (затемнения). Если я правильно понимаю, то это общедоступные скрипты, которые можно применить и самому, но это скорее для веб разработчиков, рядовому пользователю лучше установить Content Slide которые максимально упростить задачу интеграции скрипта слайдшоу в wordpress блог.

Установка Content Slide ничем особо не отличается от традиционного процесса установки плагина — скачиваем модуль с официального сайта вордпресс распаковываем архив и заливаем на ФТП сервер в директорию /wp-content/plugins/. Изменять название файлов и папок при этом крайне не рекомендуется. Далее идем в админку wordpress и активируем плагин в соответствующем разделе (Plugins).

Для вывода слайдшоу на сайте заходим в нужным вам файл шаблона и добавляем там код вызова плагина:

<!--?php if(function_exists('wp_content_slider')) { wp_content_slider(); } ?-->

Нужный файл значит header.php для добавления в шапку блога, sidebar.php в боковые колонки и т.п. Если вы, например, хотите отображать слайдер только на главной и в качестве домашней страницы у вас указана какая-либо страница блог, то нужно зайти в файл page.php где добавить код:

<!--?php
if(is_front_page())
{
if(function_exists('wp_content_slider')) { wp_content_slider(); }
}
?-->

Чаще всего нужно будет разместить его в файле index.php который является основным wordpress шаблоном блога.

Чтобы вывести слайдер на специальной отдельной странице можно использовать такой код:

<!--?php
if(is_page('about'))
{
if(function_exists('wp_content_slider')) { wp_content_slider(); }
}
?-->

Ну, можно использовать тому подобные конструкции, подробнее об этом читайте в статье про условные операторы wordpress .

Перед вставкой кода плагина в шаблон можно зайти в его настройки — после активации в админке wordpress появляется отдельный раздел Content Slide. Там есть три блока настроек:

General Settings — общие параметры для создаваемой флешки слайдшоу (ширина, высота, шрифт, рамка, цвет фона и т.п.)
Effects and Animations Settings — опции анимации переходов (задержка между сменой изображений, тип эффекта, наличие навигации и т.д.) С этим параметром можно немного поэкспериментировать дабы посмотреть все возможные эффекты.
Image Source Settings — здесь выбираются изображения, которые будут выводиться в слайдере, есть несколько параметров, которые нужно будет попробовать. Для картинок можно задавать ссылки для переходов, что открывает еще одну возможность использования модуля.

В целом плагин Content Slide со своей задачей справляется, работать с ним легко и просто — единожды настроив эффекты перехода и добавив картинки для слайдера можно наслаждаться приятной анимацией на своем сайте или блога.

UPDATE 15.06.2012: Автор плагина очень «интересно» поступил, разместив свою внешнюю ссылку прямо в его коде без возможности от нее отказаться. Для тех пользователей, кому важно количество внешних линков, это может стать проблемой. Поэтому идем на ФТП, находим файл плагина content_slide.php и в самом конце аккуратно убираем ссылку на сайт snilesh.com. Кроме того, есть подозрение, что если заполнить картинками не все 5 ячеек слайдера, то могут появиться и другие линки — проверьте этот вариант.

P.S. Новая перспективная биржа фриланса Golance для тех кому удаленная работа просто необходима — причем как работодателям, так и веб разработчиками.
Говорят, что сани на зиму нужно готовить летом, тогда бассейны для дачи наоборот зимой чтобы летом можно было хорошо отдохнуть.

Оцените статью:

(голосов - 14, средний балл: 5,07 из 7)

Загрузка...

Категории: Плагины;

Теги: изображения, обзоры плагинов, слайдеры / слайдшоу, установка, флеш на сайте.

комментариев 95 к статье “Content Slide — простой плагин для создания слайдера (слайдшоу)”

← Ранее 1 2 3 4 Далее →

Tod 22.09.2012
Андрей, реализовать такое очень сложно, если вообще возможно — единственное что приходит на ум это какой-то скрипт, который будет подстраивается под размер экрана и просчитывать его. Может, кстати, в css есть какие-то хаки для этого, но подобного плагина вордпресс точно не встречал.
Андрей 23.09.2012
Александр, нашел пример сайта с этой каруселью krasnogorsk.info, но там не для вордпресса.
Tod 24.09.2012
Андрей, это похоже на какой-то скрипт (не плагин), я бы поискал в гугле что-то вроде css picture slider или picture slider script. Данную реализацию можно использовать на любой CMS, без плагинов, просто разместив скрипт в код шаблона.
Владимир 21.10.2012
Есть ли у этого плагина возможность менять текст, который отображается в слайд-шоу?
Tod 22.10.2012
Владимир, текст там вроде бы какой-то отображается, может берется краткий анонс из поста, я уже точно не вспомню.
Ирина 24.11.2012
Подскажите чайнику, а в какое место в файле нужно добавить код для вызова плпгига?
Спасибо
Tod 25.11.2012
Ирина, код плагина добавляете в то место, где хотите выводить этот слайдер — например в header.php для шапки блога, sidebar.php — сайдбар и т.п. К сожалению, не могу точно сказать куда именно так как все шаблоны разные + вам придется немного разобраться в своем шаблоне дабы понять что выводит тот или иной код. Для начала можно попытаться добавить в header.php ближе к концу файла после вывода логотипов и меню, которые там обычно есть.
Ян 26.11.2012
Пожалуйста, помогите советом: плагин правильно отображается на главной странице, но он короче, чем ширина страницы, растягивать его не хочу, нужно сделать выравнивание по центру. А как? Видимо, для этого нужно его в стилях прописать? А где именно в стилях и что конкретно писать?
Tod 27.11.2012
Ян, надо в шаблоне в том месте где выводится модуль «вокруг» этого кода добавить DIV с классом например class=»myslider», а потом в стилях style.css прописать для него код что-то вроде:
.myslider {text-align: center; }
или если не сработает выравнивание добавить отступ слева:
.myslider {margin-left: 20px; }
Ирина 01.12.2012
Здравствуйте! Установила этот плагин, но он не работает: изображения выводятся просто вертикально в ряд одно за другим, без всякого слайдера. Я так думаю, что это из-за того, что блог установлен в папку site.ru/blog, а не в корневую директорию. Как решить эту проблему?
Tod 01.12.2012
Ирина, как по мне это больше похоже на то, что не загружается какой-то скрипт слайдера. То есть это либо несовместимость с другими плагинами либо из-за шаблона.
Ирина 01.12.2012
Я пробовала вручную прописывать все скрипты слайдера (а там их всего два) в шапке темы. Если посмотреть исходный код — то видно что адрес к скрипту прописан верно. И все равно не работает.
Кроме этого слайдера пробовала еще несколько — результат тот же.
Елена 16.12.2012
Подскажите, пожалуйста! Меня давно мучает вопрос: можно ли вставить этот плагин не в шаблон сайта, а в саму запись, для того, чтобы слайд шоу выводилось в середине текста на определенной странице? Заранее спасибо за ответ.
Tod 18.12.2012
Елена, когда я изучал плагин, то этого сделать нельзя было — в статье есть вариант кода как отобразить слайдер на отдельной странице — по аналогии с этим можно применить и для поста, но он будет отображаться только до или после текста.
Елена 18.12.2012
Спасибо. Про до и после текста я знаю. Жаль, что в середу текста его очень сложно или даже невозможно вставить
Василий 15.01.2013
Помогите, пожалуйста.
При наличии у «div» в моей таблице стилей «position:relative» исчезает кнопка «Вправо». Убрать свойство не могу, облекать все кроме слайдера в новый контейнер — проблематично. Есть идея подключить одну из таблиц стилей шаблона, отвечающую за это, в самом конце «head» — а, да только ее не обнаружить. Заранее благодарен.
Tod 16.01.2013
Василий, к сожалению, не смогу подсказать как это все реализовать, тут надо экспериментировать с CSS, может еще один div внешний добавить…
Василий 18.01.2013
Спасибо. Я разобрался и тем, у кого аналогичная проблема, нужно следующим блокам — «#wpcontent_slider_container div,#coin-slider-wpcontent_slider div, div.coin-slider div,#wpcontent_slider div, div#cs-navigation-wpcontent_slider div»
задать «position:static»
Игорь Канаев 05.09.2013
Добрый день, подскажите пожалуйста. Я установил content slider в хеадер все нормально, но он у меня смещен в правую сторону, пробовал заключить его php код в тег div с назначением класса и прописывания в нем антрибутов выравнивания но так не выходит. В firebug когда наводишь на сам слайдер, открываются назначенные ему стили в них я могу сделать то что мне надо(в режиме предпросмотра) но не могу найти где эти стили лежать чтобы внести изменения. В отладчике вижу что путь к ним такой: /wordp…/#2(сторока 46). Кто сталкивался с такой проблемой пожалуйста подскажите.
Tod 06.09.2013
Игорь, я бы поискал стили в директории плагина, там должен быть какой-то css файл. Странный путь в отладчике, там разве нельзя посмотреть полный? понимаю, что он не помещается, но кликнуть где-то дабы увидеть полный текст ссылки может как-то можно?
Илья 16.01.2014
Полезная статья!
настя 28.01.2014
здравствуйте. подскажите, как этот слайдер расположит с правой стороны? в шапку установила, но он стоит слева и закрывает название сайта. методом тыка много перепробовала, но либо он исчезает, либо также слева…
Tod 28.01.2014
Настя, я думаю тут нужно вносить правки в CSS стили, чтобы слайдер «не налазил на меню». Сказать что-то конкретное я вам увы не могу, в каждом шаблоне свои стили и коды.
Вова 07.03.2014
Вопрос. У меня плагин работает отлично, за исключение одного. Мне нужно расположить плагин чуть левее, в скриптах не нашел как это сделать. Подскажите пожалуста.
leo 07.03.2014
Класс!
Tod 08.03.2014
Вова, можно попробовать сделать это через CSS стили.
Елена 23.04.2014
Добрый день, подскажите для «чайника» какой код взять и куда поставить, что бы отображался на главной странице
Tod 24.04.2014
Елена, если нужно на главной странице, то это файл home.php или index.php — нужно смотреть. Возможно пригодится статья про вывод текста только на главной только вместо текста добавляете код плагина.
Hoztovaroved 04.10.2014
Как добавить слайды, чтобы больше 5 было ? Или там фиксировано ?
Tod 05.10.2014
Hoztovaroved, если честно, я уже не помню. Там был какой-то плагин, где было четко ограничено 4-5 слайдов, возможно это он.