Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

І хоча існує безліч плагінів слайдерів (мій поточний фаворит - Повзунок Nivo), не існує плагіна для FlexSlider - слайдера, який має клавіатурні скорочення і який працює зі ковзанням на тачскринах.

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

Завантажити вихідні

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

Ось як виглядатиме сам слайдер:

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

Крок 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), ми також включили редактор на випадок, якщо, наприклад, у майбутньому ми захочемо зробити підтримку розміщення напису на слайдері.
  • Додаючи новий пост типу Зображення повзунка, ми повинні завантажити зображення Мініатюри, щоб слайдер працював. Він не може просто взяти прикріплений до посту файл.

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

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

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

Висновок

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

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

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

Джерело: WP.tutsplus.com
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 13

Василь:

Дуже цікаво

Adward Valeev:

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

WordPresso:

Так, ви можете вставити готовий код слайдера header.php в потрібному місці або в index.php, якщо хочете розмістити його в основній частині головної сторінки.

Анна:

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

Олександр:

треба додати у потрібному місці header.php

Анна:

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

Марина Сидоряка:

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

WordPresso:

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

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

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

WordPresso:

Ну тут вже на смак і колір, як кажуть)

Рома:

Все чудово було б добре якби з'явилося відео туторіал а то читаючи часом не зрозуміти що саме треба вводити і як додавати картинки і тд

Олексій:

Доброго дня! Підкажіть пліз, як тільки я встановив плагін Rus-To-Lat, то слайдер у темі Bresponzive перестає працювати. І навіть якщо ці плагін деактивувати або видалити, то все одно слайдер перестає працювати, вантажить і не показує картинки. Підкажіть пліз, як виправити… посилання на сайт http://янаул102.рф/

Сергій:

Слайдер не робітник. Щось ви забули вказати в статті. Виводить [ef_slider], те, що й писала Ганна .

Додати коментар або відгук