Як у WordPress створити свій слайдер із зображеннями

Слайдери зараз у моді, і не дарма! Ви можете додавати на свій сайт фотографії, контент, відео та багато іншого, що привертає увагу відвідувачів. У цьому уроці розглянемо, як самому створити гарний слайдер із зображеннями на основі FlexSlider.

І хоча існує безліч плагінів слайдерів (мій поточний фаворит - Повзунок Nivo), не існує плагіна для 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

Тепер настав час додати важливу частину: наявність и 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, який змусить скрипт працювати. Ми зробимо це за допомогою нашої власної функції та дію-функції 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, наприклад, Сценарний.

Нарешті, просто скопіюйте папку /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. Він візьме невпорядкований список, який називається 'слайдах'всередині шару'FlexSlider' і застосує до нього javascript анімацію. В нашому CSS також визначено .flexslider и ul.slides.

Після цього ми створюємо цикл WordPress, збираючи всі пости типу слайдер-зображення (наш користувальницький тип посту) і виводимо велику версію картинки.

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

Декілька зауважень

• З нашим новим типом користувача посту, ми можемо додавати заголовок і картинку, ми також додали блок редагування посту. І хоча зараз ми використовуємо лише зображення (і заголовок, для атрибуту alt), ми також включили редактор на випадок, якщо, наприклад, у майбутньому ми захочемо зробити підтримку розміщення напису на слайдері.
• Додаючи новий пост типу Зображення повзунка, ми повинні завантажити зображення Мініатюри, щоб слайдер працював. Він не може просто взяти прикріплений до посту файл.

Крок 6. Тестування

Тепер час тестувати! Як тільки ви додали кілька зображень до вашого користувача пост, створіть нову сторінку (я назвав свою просто Slider) і додайте до неї наш створений нещодавно шорткод [ef_slider]. Збережіть сторінку та перегляньте її. Ви повинні побачити щось на кшталт цього:

Висновок

На цьому все. Звичайно, є ще кілька речей, які можна покращити у плагіні. Наприклад, додати підтримку варіантів розширеної настройки, яку може запропонувати FlexSlider, або додати підтримку назв.

Як було сказано, цей плагін дає вам все необхідне для створення дійсно простої, легкої в керуванні, легкої для вставки версії FlexSlider для WordPress!

Якщо ви не впевнені щодо вставок або додавання файлів, ви можете завантажити вихідні джерела за посиланням вгорі посібника. Успіхів!

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

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