Создаем слайдер для WordPress – пошаговое руководство для новичков
Слайдер для WordPress необходим для простейшей анимации, он представляет собой динамическую смену с заданной частотой статичных картинок либо текста.
Этим элементом владелец ресурса удерживает посетителя, интригует его для дальнейшего ознакомления с контентом, опубликованным на сайте. Экономится место (на одном и том же месте выводится разная информация), увеличивается привлекательность дизайна.
В отличие от полноценной анимации страницы открываются максимально быстро, поэтому, потенциальный клиент не уйдет со страницы до ее полной загрузки.
Создание слайдера в WordPress
Слайдер для WordPress можно разработать средствами CSS3 , HTML5 без скриптов, хотя, в большинстве случаев используется JQuery библиотека.
В ней присутствуют оригинальные темы, поэтому, слайдером легко удерживаются посетители вне зависимости от содержания картинок. Готовые шаблоны бесплатны, находятся в общем доступе, платные варианты имеют увеличенный функционал, невысокие цены.
Популярные плагины для создания слайдеров в WordPress
Среди плагинов, позволяющих создать слайдер для WordPress, наиболее популярны следующие:
- Coin Slider – плагин слайдшоу для WordPress с простым управлением (пользователю не нужно знать коды), размеры картинок, а также все прочие регулировки производятся из панели администратора;
- Nivo Sliders – последняя версия платная, богатые настройки, валидная верстка, поддержка превью, тем, 16 вариантов смены картинок;
- Content Slider – это плагин для контента, который может интегрироваться в редактор постов, настройки разнообразные, стоит он $99 (Pro версия);
- Meteor Slider – встраивается по шорткоду, слайдшоу могут монтироваться в нескольких местах, интеграция в сайдбар, поддерживается;
- русский язык интерфейса;
- Slideshow Gallery – превью изображений, интеграция в редактор постов (шорткодом), картинки могут увеличиваться при кликах на них;
- TN3 Gallery – поддержка мобильных устройств, широкие настройки, для WordPress только встраиваемый шрифт, регистрация при скачивании;
- WordPress Content Slide – небольшой размер, внутренняя либо наружная настройка;
- ISlidex – интеграция в виджеты, кроссбраузерность, кэширование картинок, автоматическая обрезка, поддержка нескольких тем;
- Royal Slider – больше десятка шаблонов, поддержка мобильных устройств, Windows 8 в полном объеме, стоимость $12.
Создаем слайдер для WordPress
Для получения вышеописанного функционала не обязательно использовать плагин слайдер для WordPress. Достаточно создать слайд-шоу в программе WOW Slider , вставить его на сайт. Демо-версия программы бесплатна, но, традиционно имеет ряд функциональных ограничений.
Для скачивания программы необходима регистрация. После установки на ПК она имеет следующий вид:
Изображения из сети или с компьютера вставляются в окно программы, к ним прикручиваются ссылки, добавляется текст, названия, после чего, нажимается гаечный ключ:
На вкладке « Основные » расставляются чекбоксы, на следующей происходит выбор шаблона, эффектов. Следующая вкладка называется « Опубликовать », здесь так же широкий выбор:
Полученные файлы можно сохранить в ПК, отправить на сайт по FTP, причем, создаются плагины для WordPress, страницы, Joomla или Facebook.
В админке сайта на вкладке « Плагины » нажимается кнопка « добавить новый », а сам плагин загружается из сохраненной на предыдущем шаге папки:
Можно вставлять плагин прямо через менеджер загрузок на сайт из демо-программы. Указанные выше способы являются самыми легкими для новичков.
Как показывает практика, слайдеры позволяют украсить страницы сайта, увеличить входящий трафик, и именно поэтому они часто используются в блогах, сайтах-визитках.
Надеемся, что данная статья была Вам полезна.
Как создать слайдер из изображений, загруженных в пост?
После того, как в WordPress изменился загрузчик изображений, его стало удобнее использовать для других различных целей, то есть не только для загрузки изображений в пост .
Например для создания галерей или слайдеров. Слайдер мне кажется наиболее интересным, поэтому давайте попробуем реализовать его на стандартной вордпрессовской теме, например TwentyEleven.
Основная суть в том, что все изображения, добавленные в пост (но не вставленные в редакторе), можно прокрутить в слайдере или вывести как галерею.
Создание слайдера в 4 шага
Слайдер довольно удобная вещь, особенно если у вас на сайте есть несколько продуктов, и на страницу каждого из них вам хотелось бы добавить по несколько изображений.
Ниже пример такого слайдера с одного из созданных мной сайтов:
Можете кликнуть по изображению и посмотреть на него в действии.
Итак, для создания слайдера нам само собой понадобится какой-нибудь jQuery-плагин, я буду использовать бесплатный Nivo Slider, вы же можете взять что-нибудь другое.
Чтобы облегчить задачу, выкладываю необходимые файлы из плагина, можете скачать их прямо с моего сайта.
- nivo-slider.css — CSS стили, необходимые для корректного отображения слайдера,
- jquery.nivo.slider.pack.js — собственно сам jQuery-плагин.
Шаг 1. Подключение необходимых файлов
Прежду всего вы должны убедиться в том, что в шапке сайта задействована функция wp_head(), а в футере wp_footer(). Если этих функций там нет, то добавьте, иначе не рассчитывайте, что всё будет работать, как надо.
Итак, помещаем скачанные файлы в папку с темой (например), после этого воспользуемся функциями wp_enqueue_script() и wp_enqueue_style().
Вставляем следующий код в functions.php , который находится в папке с темой:
add_action( 'wp_enqueue_scripts', 'true_scripts_and_styles_for_slider' ); function true_scripts_and_styles_for_slider() { wp_enqueue_style( 'nivocss', get_stylesheet_directory_uri() . '/nivo-slider.css' ); wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'nivojs', get_stylesheet_directory_uri() . '/jquery.nivo.slider.pack.js', array('jquery'), null, true ); }
Содержимое файла nivo-slider.css можно засунуть внутрь стандартного style.css, в этом случае 4-ю строчку из предыдущего листинга можно удалить или закомментировать.
Шаг 2. Определяемся с размерами слайдера
Откройте ту самую страницу сайта, где вы хотите задействовать слайдер и определите, какая у него будет высота и ширина.
После этого открываем functions.php и вписываем туда следующую строку:
add_image_size( 'trueslider', 640, 480, true ); // где 640 это ширина, а 480 - высота слайдера
Это нужно для того, чтобы при загрузке изображения, WordPress автоматически генерировал копию соответствующих размеров непосредственно для слайдера.
Шаг 3. Выводим изображения в слайдер
Открываем необходимый нам PHP-файл, в котором будет выводиться слайдер, например у меня это шаблон обычного поста single.php .
// массив параметров вывода изображений $args = array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'orderby' => 'menu_order', // сортировка, menu_order - по выставленному в админке порядку, можно также сортировать по имени или дате добавления 'order' => 'ASC', 'numberposts' => 5, // количество выводимых изображений 'post_mime_type' => 'image' ); if ( $images = get_children( $args ) ) { // если никаких изображений в пост не добавлено, то не выводим вообще ничего echo ''; }// не забудьте указать свои значения ширины (640) и высоты (480) foreach( $images as $image ) { echo wp_get_attachment_image( $image->ID, 'trueslider' ); } echo '
Читайте подробнее про функцию get_children().
После добавления этого кода зайдите на страницу редактирования какого-нибудь поста и загрузите туда несколько изображений (вставлять в редактор поста их ни к чему, просто загружаем через загрузчик).
Шаг 4. Активируем слайдер.
Тут нужно обязательно выполнить следующее условие — код надо вставлять непосредственно перед закрывающим тегом
