Слайдеры сейчас в моде, и не зря! Вы можете добавлять на свой сайт фотографии, контент, видео и многое другое, что привлекает внимание посетителей. В этом уроке рассмотрим, как самому создать красивый слайдер с изображениями на основе FlexSlider.

И хотя существует множество плагинов слайдеров (мой текущий фаворит - Nivo Slider), не существует плагина для FlexSlider - слайдера, у которого есть клавиатурные сокращения и который работает со скольжением на тачскринах.

Скачать исходники

Для начала скачайте исходники с кодом, который нам вскоре понадобится.

Вот как будет выглядеть сам слайдер:

Шаг 1. Подготовка

Первое, что нам необходимо сделать, - это установить плагин. Создайте папку /envato-flex-slider/, и в ней файл под названием ‘envato-flex-slider.php’. Сюда мы будем добавлять всю необходимую информацию и код для нашего плагина, начиная с блока объявления плагина:

<?php

/*
Plugin Name: Envato FlexSlider
Plugin URI:
Description: A simple plugin that integrates FlexSlider (http://flex.madebymufffin.com/) with WordPress using custom post types!
Author: Your Name
Version: 1.0
Author URI: Your URL
*/

?>

Я также хочу установить несколько констант для информации, которую я буду часто использовать в плагине. Под объявлением блока, но перед закрытием тега php, я добавляю следующую информацию:

define('EFS_PATH', WP_PLUGIN_URL . '/' . plugin_basename( dirname(__FILE__) ) . '/' );
define('EFS_NAME', "Envato FlexSlider");
define ("EFS_VERSION", "1.0");

Я создал три константы: путь к плагину, имя плагина и версию плагина, которая необходима для обновлений и для того, чтобы в случае необходимости известить WordPress Plugin Directory об изменениях.

Обратите внимание, я начинаю все мои константы с "EFS". Я буду делать то же самое с названиями функций, чтобы не создать конфликтов с другими плагинами или ядром WordPress.

Теперь, когда мы закончили с подготовкой, давайте добавим файлы и код FlexSlider.

Шаг 2. Добавление FlexSlider

Теперь пора добавить важную часть: javascript и CSS для FlexSlider. Мы сделаем это, используя wp_enqueue_script и wp_enqueue_style самого WordPress, чтобы избежать конфликтов. Вы можете скачать FlexSlider здесь. Нам понадобятся 2 файла: jquery.flexslider-min.js, и flexslider.css, в папке /theme/.

wp_enqueue_script('flexslider', EFS_PATH.'jquery.flexslider-min.js', array('jquery'));
wp_enqueue_style('flexslider_css', EFS_PATH.'flexslider.css');

В обеих строках мы присваиваем имя каждому скрипту, затем привязываем файлы .js и .css. Обратите внимание, что мы используем нашу константу ESF_PATH. Нам нужно использовать полный путь, иначе файлы не привяжутся правильно.

Вы также можете заметить, что у нас есть третий параметр в wp_enqueue_script. Это массив других скриптов, от которых зависит наш скрипт. В данном случае, такой скрипт один – это JQuery. Здесь есть полный список скриптов, включенных в WordPress. Вы можете использовать любой из них, используя указанный массив зависимостей.

Следующее, что мы хотим сделать, это включить собственно JavaScript, который заставит скрипт работать. Мы сделаем это с помощью нашей собственной функции и Action-функции WordPress.

function efs_script(){

print '<script type="text/javascript" charset="utf-8">
  jQuery(window).load(function() {
    jQuery(\'.flexslider\').flexslider();
  });
</script>';

}

add_action('wp_head', 'efs_script');

Важная строка здесь – add_action('wp_head', 'efs_script');, которая запустит нашу функцию efs_script(), когда будет вызвана wp_head. Наша функция просто выводит Javascript, необходимый для того, чтобы заставить FlexSlide делать свою работу.

Вы можете заметить, что я использую ‘JQuery’ вместо традиционного ‘$’, который обычно используется в скриптах JQuery. Я делаю это для того, чтобы наш скрипт не конфликтовал с другими библиотеками JavaScript, например, Scriptaculous.

Наконец, просто скопируйте папку /theme/ в вашу папку /envato-flex-slider/.

Шаг 3. Короткий код и тег шаблона

Дальше мы создадим наш шорткод (shortcode, короткий код) и тег шаблона. Шорткод позволит пользователям вставить слайдер в любую страницу или пост. Вводное руководство по шорткодам вы можете посмотреть здесь.

Тег шаблона позволит разработчикам тем вставлять слайдер прямо в их темы. Как разработчик тем, считаю чрезвычайно важным создавать и то, и то, и делать их легкодоступными в документации. Вы никогда не знаете, кто будет использовать ваш плагин.

function efs_get_slider(){

//We'll fill this in later. 

}

/**add the shortcode for the slider- for use in editor**/

function efs_insert_slider($atts, $content=null){

$slider= efs_get_slider();

return $slider;

}

add_shortcode('ef_slider', 'efs_insert_slider');

/**add template tag- for use in themes**/

function efs_slider(){

	print efs_get_slider();
}

Сейчас этот код выглядит достаточно просто. Для шорткода мы вызываем нашу общую функцию efs_get_slider() и возвращаем результат. Для тега шаблона мы выводим результат. Я специально упустил внедрение efs_get_slider(), поскольку мы пока не установили, откуда мы собираемся брать изображения.

Чтобы сделать добавление любого количества картинок в слайдер удобным для пользователя, мы создадим отдельный тип поста.

Шаг 4. Пользовательский тип поста Slider Image

Первое, что мы сделаем, - это создадим новый файл под названием ‘slider-img-type.php’, где будет весь наш код для пользовательского типа поста. Сначала мы сделаем некоторую подготовку, как мы делали это для плагина.

<php
define('CPT_NAME', "Slider Images");
define('CPT_SINGLE', "Slider Image");
define('CPT_TYPE', "slider-image");

add_theme_support('post-thumbnails', array('slider-image'));
?>

Как вы видите, все, что я пока сделал, это создал несколько констант (которые будут очень удобными для более сложных пользовательских типов постов) и добавил поддержку миниатюр для нашего нового типа.

Единственная вещь, которую мы еще сделаем здесь, это зарегистрируем новый пользовательский тип поста. Больше о пользовательских типах постов вы можете найти в руководстве по созданию отличного портфолио. Прямо перед закрытием php тега, мы добавим следующий код:

function efs_register() {
    $args = array(
        'label' => __(CPT_NAME),
        'singular_label' => __(CPT_SINGLE),
        'public' => true,
        'show_ui' => true,
        'capability_type' => 'post',
        'hierarchical' => false,
        'rewrite' => true,
        'supports' => array('title', 'editor', 'thumbnail')
       );  

    register_post_type(CPT_TYPE , $args );
}  

add_action('init', 'efs_register');

Мы создали функцию для регистрации пользовательского типа поста, который использует блоки для названия, редактирования и миниатюры. Далее мы добавили Action WordPress, чтобы вызвать эту функцию сразу же после инициализации WordPress.

Все! Последнее, что нам нужно сделать, это включить наш новый файл, добавив require_once('slider-img-type.php'); в envato-flex-slider.php. Я добавил его прямо над вызовом наших скриптов.

Теперь, когда мы знаем, как внедрять картинки в слайдер, давайте вернемся назад и заполним нашу общую функцию для слайдера.

Шаг 5. Генерация слайдера

Вернитесь к объявлению efs_get_slider() и замените //We'll fill this in later на следующее:

$slider= '<div class="flexslider">
	  <ul class="slides">';

	$efs_query= "post_type=slider-image";
	query_posts($efs_query);

	if (have_posts()) : while (have_posts()) : the_post();
		$img= get_the_post_thumbnail( $post->ID, 'large' );

		$slider.='<li>'.$img.'</li>';

	endwhile; endif; wp_reset_query();

	$slider.= '</ul>
	</div>';

	return $slider;

Первые две строки обязательны из-за метода работы FlexSlider. Он возьмет неупорядоченный список, который называется ‘slides’ внутри слоя ‘flexslider’ и применит к нему javascript анимацию. В нашем CSS также определены .flexslider и ul.slides.

После этого, мы создаем цикл WordPress, собирая все посты типа slider-image (наш пользовательский тип поста) и выводим большую версию картинки.

Далее мы возвращаем весь сгенерированный HTML как переменную, которая может быть выведена (нашим тегом шаблона), или возвращена (нашим шорткодом).

Несколько замечаний

  • С нашим новым пользовательским типом поста, мы можем добавлять заголовок и картинку, мы также добавили блок редактирования поста. И хотя сейчас мы используем только изображение (и заголовок, для атрибута alt), мы включили также редактор на случай, если, например, в будущем мы захотим сделать поддержку размещения надписи на слайдере.
  • Добавляя новый пост типа Slider Image, мы должны загрузить изображение Миниатюры, чтобы слайдер работал. Он не может просто взять прикрепленный к посту файл.

Шаг 6. Тестирование

Теперь время тестировать! Как только вы добавили несколько изображений в ваш пользовательский тип поста, создайте новую страницу (я назвал свою просто Slider) и добавьте в нее наш созданный недавно шорткод [ef_slider]. Сохраните страницу и просмотрите ее. Вы должны увидеть нечто вроде этого:

Заключение

На этом все. Конечно, есть еще несколько вещей, которые можно улучшить в плагине. Например, добавить поддержку вариантов для расширенной настройки, которую может предложить FlexSlider, или добавление поддержки названий.

Как было сказано, этот плагин дает вам все необходимое для создания действительно простой, легкой в управлении, легкой для вставки версии FlexSlider для WordPress!

Если вы не уверены по поводу вставок или добавления файлов, вы можете загрузить исходники по ссылке вверху руководства. Удачи!

Источник: WP.tutsplus.com

Вам понравился материал?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

12 комментариев

сначала новые
по рейтингу сначала новые по хронологии
Алексей

Здравствуйте! Подскажите плиз, как только я установил плагин Rus-To-Lat то слайдер в теме Bresponzive перестает работать. И даже если эти плагин деактивировать или удалить, то все ровно слайдер перестает работать, грузит и не показывает картинки. Подскажите плиз как исправить... ссылка на сайт http://янаул102.рф/

Все замечательно было бы хорошо если бы появилось видео туториал а то читая порой не понять что именно надо вводить и как бы как добавлять картинки и тд

Сергей Солодов

Спасибо огромнейшее за статью!Чтобы слайдер смотрелся симпатичнее и стрелки не отступали от слайдера в файл flexslider.css надо добавить стиль:
.flexslider {
background: none repeat scroll 0 0 #FFFFFF;
border: 4px solid #FFFFFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
margin: 0 0 60px;
position: relative;
}

Ну тут уже на вкус и цвет, как говорится)

Можете ли помочь совсем чайникам, которые не знают что такое языки программирования, коды... Можно ли взять готовый плагин, вставить ссылки на видеоролики, и чтоб был слайдер? Или готовый код...?

Конечно уже есть готовые решения в виде плагинов. Вы можете поискать на официальном репозитории плагинов WordPress или в поисковике.

А как вставить слайдер только на главную страницу выше всего контента?
какой то код вписать в header.php ?

Александр

надо добавить в нужном месте header.php

Извините, но подскажите если вставляю [ef_slider], то на странице отображается именно [ef_slider], что я делаю не так? css и js в папке Theame в которой находятся все файлы и папки скаченные с сайта.

Да, вы можете вставить готовый код слайдера в header.php в нужном месте или же в index.php, если хотите разместить его в основной части главной страницы.

Извините, но подскажите если вставляю [ef_slider], то на странице отображается именно [ef_slider], что я делаю не так? css и js в папке Theame в которой находятся все файлы и папки скаченные с сайта.

Василий

Очень интересно