Как в WordPress создать свой слайдер с изображениями

Слайдеры сейчас в моде, и не зря! Вы можете добавлять на свой сайт фотографии, контент, видео и многое другое, что привлекает внимание посетителей. В этом уроке рассмотрим, как самому создать красивый слайдер с изображениями на основе 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

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/