Дек
22
95

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

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. Там есть три блока настроек:

настройка 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 для тех кому удаленная работа просто необходима — причем как работодателям, так и веб разработчиками.
Говорят, что сани на зиму нужно готовить летом, тогда бассейны для дачи наоборот зимой чтобы летом можно было хорошо отдохнуть.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 12, средний балл: 5,25 из 7)
Загрузка...

категория Категории: Плагины;
теги Теги: , , , , .

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

  • 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 слайдов, возможно это он.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Заработай в GoGetLinks
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости