Создание адаптивного плагина Slider с помощью FlexSlider для WordPress

12 января 2018

Слайдеры, кажется, все эти гнев в наши дни, и не зря! Вы можете добавлять фотографии, контент, видео и т. Д. В привлекательную, анимированную область вашего сайта. Хотя там есть множество плагинов слайдера (мой текущий любимый - тот, что у 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. Заметьте, что я начинаю все мои константы с «EFS». Я сделаю то же самое для имен функций, чтобы мы не создавали конфликт с другими плагинами или ядром WordPress.

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


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

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

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, который заставит слайдер работать. Мы делаем это с помощью нашей собственной функции и действия 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, чтобы сделать FlexSlider своим делом!

Вы заметите, что я использую «JQuery» вместо традиционного «$», обычно используемого в сценариях JQuery. Это значит, что наш скрипт не конфликтует с другими библиотеками JavaScript, такими как Scriptaculous.

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


Шаг 3 Штрих-код и тег шаблона

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

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 () и возвращаем результаты. Для тега шаблона мы печатаем результаты. Мы также используем функцию add_shortcode () WordPress для регистрации нашего короткого кода. Я намеренно отказался от реализации efs_get_slider (), потому что мы еще не настроили, как мы будем делать изображения. Чтобы пользователи могли добавлять любое количество изображений в свой слайдер, мы создадим настраиваемый тип сообщений.


Шаг 4 Пользовательский тип ползунка Пользовательский тип сообщения

Первое, что мы сделаем, это создать новый файл под названием «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');

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

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


Шаг 5 Создание слайдера

Вернитесь туда, где мы определили efs_get_slider () и заменим комментарий. Мы воспользуемся этим позже:

$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. Он будет искать неупорядоченный список под названием «слайды» в div, называемый «flexslider», и применить к нему анимацию javascript. Наш CSS также настроен для определения.flexslider и ul.slides. После этого мы создаем цикл WordPress, захватывающий все сообщения типа slider-image (наш пользовательский тип сообщения), и мы получаем его для печати большой версии отображаемого изображения. Затем мы возвращаем весь сгенерированный HTML как переменную, которая может быть напечатана, например, с нашим тегом шаблона или возвращена, как и в нашем коротком коде.

Пара примечаний

На нашем пользовательском типе сообщений мы можем добавить заголовок и изображение, а также включить поле редактора сообщений. Хотя сейчас мы используем только расширенный образ (и заголовок для текста alt), мы включили редактор, если, например, в будущем мы хотим поддерживать титры на слайдере.При добавлении нового изображения слайдера мы должны загрузите признак для слайдера. Он не просто захватит сообщение attach.


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

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

Заключение

Вот и все. Есть определенно несколько вещей, которые мы можем сделать, чтобы улучшить плагин, например добавить поддержку опций для расширенных настроек. FlexSlider предлагает или добавляет поддержку надписей. При этом этот плагин дает вам все, что вам нужно, чтобы сделать довольно простой, простой в управлении и легко вставляемый вариант FlexSlider для WordPress! Если вы не уверены в размещении или включенных файлах, вы можете загрузить исходные файлы, используя ссылку в верхней части учебника. Наслаждайтесь!