Адаптивний слайдер для WordPress, XoZblog - Уроки та статті щодо створення сайту, блогу

Здрастуйте, шановні читачі XoZbloga! Сьогодні я покажу, як інтегруватислайдер JQuery на вашому WordPress блозі. У цьому уроці ми докладно розглянемо кожен крок створення слайдера. Будемо використовувати готовий скрипт прекрасногоFlexSlider 2 від WooThemes, а також типи користувача записів, для того щоб зручніше було маніпулювати зображеннями. Плюс слайдер буде адаптивним, тобто. розміри зображення будуть підлаштовуватися під роздільну здатність екрана.

Тож нам знадобиться. Насамперед необхідно завантажити сам плагін - GitHub сховище. Зі скачаного архіву дістаємо:

  • flexslider.css
  • images/bg_direction_nav.png
  • jquery.flexslider-min.js

слайдер

Крок 1: Встановлення

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

Для цього уроку ми будемо використовувати темуTwenty Eleven. Створимо папку slider у каталозі inc. А тепер у папці slider створимо ще кілька папок:

  • css
  • images
  • js

Файл flexslider.css переміщуємо до папкиcss, bg_direction_nav.png до папкиimages та jquery.flexslider-min.js як ви вже здогадалися, до папкиjs. Тепер давайте створимо ще 2 файли і розмістимо їх у корені папки slider :

  • slider.php — створює шаблон слайдера та вставляє зображення;
  • slider_post_type.php — для типу користувача записів.

Приблизно так виглядає папкаslider :

адаптивний

Перед тим, як йти далі, відкрийте файл functions.php активної теми і додайте наступні два рядки в кінець файлу, щоб завантажувати два щойно створені PHP-файли. Уважно перевіряйте шляхи:

Тепер переходимо до кодингу 🙂

Крок 2: Користувальницький тип запису та таксономія для слайдера

Перше що ми збираємося зробити, це створити власний тип запису, який буде містити всі наші слайди.

Відкрийте slider_post_type.php і додайте наступний код для створення типу користувача:

// Тип користувача запису для слайдера

function register_slides_posttype ( ) < $labels = array ( 'name' => _x ( 'Слайди' , 'post type general name' ) , 'singular_name' => _x ( 'Слайд' , 'post type singular name' ) , 'add_new' =>__ ( 'Додати новий' ) , 'add_new_item' => 'Редагувати слайд' ) , 'new_item' => __ ( 'Новий слайд' ) , 'view_item' => ( 'Знайти слайди') , 'not_found' => __ ( 'Слайд') , 'not_found_in_trash' => 'Слайд'), 'menu_name' =>__ ('Слайди') );

$supports = array ( 'title' , 'thumbnail' , 'cat-slides' ) ;

); register_post_type ( 'slides', $post_type_args); > add_action ('init', 'register_slides_posttype');

Тип користувача запису додали! Помітьте в масиві supports ми вказуємо, що за замовчуванням на сторінку створення слайда додається поле Назва, блок для прикріплення мініатюри і найважливіше - це користувальницька таксономія cat-slides .

За допомогою функціїregister_taxonomy додаємо нашу таксономію. Перший параметр — назва, другий — якого типу записів застосовується і аргументи.

Meta box для введення URL

Далі ми додамо метабокс (блок для введення даних), де є поле для URL слайду. Таким чином, після натискання на слайд, користувач потрапляє на вказану URL-адресу. Спочатку формуємо додатковий блок:

// Meta Box для URL картинки $slidelink_2_metabox = array ( 'id' => 'slidelink' , // ідентифікатор 'title' => 'Посилання на слайд' , // заголовок 'page' => array ( 'slides' ) , // для всіх записів типу slides 'context' => 'normal' , 'priority' => 'default' , 'fields' => array ( // єдине поле для URL

array ( 'name' => 'URL слайду' , 'desc' => '' , 'id' => 'wptuts_slideurl' , 'class' => 'wptuts_slideurl' , 'type' => 'text' , 'rich_editor' => 0 , 'max' => 0 ) , ) );

add_action ( 'admin_menu', 'wptuts_add_slidelink_2_meta_box'); function wptuts_add_slidelink_2_meta_box ( )

foreach ( $slidelink_2_metabox [ 'page' ] as $page ) < add_meta_box ( $slidelink_2_metabox [ 'id' ] , $slidelink_2_metabox [ 'title' ] , 'wptuts_show_slidelink_2_box' , $page , 'normal' , 'default' , $slidelink ) > >

Функцією add_meta_box додаємо поле для введення URL лише для записів з типом slides. Третім параметром йде змінна callback - представлена ​​у вигляді назви функції, яка відображатиме HTML нашого метабоксу (в даному випадку це функція wptuts_show_slidelink_2_box).

Функція для відображення wptuts_show_slidelink_2_box . По суті необхідно звичайне поле з типом text :

// функція відображення метабоксу function wptuts_show_slidelink_2_box( ) < global $post; global $slidelink_2_metabox ; global $wptuts_prefix ; global $wp_version ;

// використовуємо nonce для перевірки echo '';

foreach ( $slidelink_2_metabox [ 'fields' ] as $field )

// отримуємо поточні дані запису $meta = get_post_meta ($post -> ID, $field ['id'], true);

Тепер у блоці з'явиться поле для введення посилання.

І останнє, що стосується введення посилання, — це його збереження:

// Збереження введеного посилання add_action ( 'save_post', 'wptuts_slidelink_2_save'); function wptuts_slidelink_2_save ($post_id) < global $post; global $slidelink_2_metabox ;

// перевірка if ( ! wp_verify_nonce ( $_POST [ 'wptuts_slidelink_2_meta_box_nonce' ] , basename ( __FILE__ ) ) ) < return $post_id; >

// перевірка дозволу прав на редагування if ( 'page' == $_POST [ 'post_type' ] ) < if ( ! current_user_can ( 'edit_page' , $post_id ) ) < return $post_id; > > elseif(!current_user_can('edit_post', $post_id)) < return $post_id; >

foreach ( $slidelink_2_metabox [ 'fields' ] as $field )

$old = get_post_meta ($post_id, $field ['id'], true); $new = $_POST [$field['id']];

if ( $new && $new != $old ) < if ( $field [ 'type' ] == 'date' ) < $new = wptuts_format_date ($new); update_post_meta ($post_id, $field ['id'], $new); > else < if ( is_string ( $new ) ) < $new = $new; > update_post_meta ($post_id, $field ['id'], $new);

Результатом усіх маніпуляцій буде готова сторінка для створення/редагування слайда. За допомогою блокуМініатюра запису прикріплюємо картинку слайда, а вполеURL слайду вставляємо посилання.

слайдер

Крок 3: Підключаємо стилі та скрипт слайдера

Відкрийтеslider.php. Тепер ми підключаємо необхідні для роботи слайдера скрипт та стилі. Ви можете скопіювати код з flexslider.css у файл style.css, якщо це необхідно.

Якщо ви використовуєте іншу файлову структуру, не забудьте перевірити шлях із файлу flexslider.css до зображення зі стрілками!

Крок 4: Ініціалізуємо слайдер

Тепер нам потрібно ініціалізувати слайдер, використовуючи метод .flexslider із параметрами. Тому додамо у файлslider.php наступний код:

// Перевірка на наявність записів if ( $the_query -> have_posts ( ) ) < // Формуємо шаблон для слайдера?

have_posts ( ) : $the_query -> the_post(); ?>

Також трапляються такі випадки, коли потрібно вставити слайдер у запис на блозі. Для цього використовуються короткі коди (Shortcode ). Тому давайте створимо для нашого слайдера шорткод. Наступний код також знаходиться у файлі slider.php:

Тепер слайдер готовий! І його можна використовувати просто на сторінках записів, використовуючи короткий код.

уроки

Плагін для WordPress

Якщо Ви не бажаєте витрачати час на створення цього слайдера, спробуйте готовийплагін для WordPress — Captain Slider. Перейти на сторінку плагіна. Абозавантажити ВИХІДНИКИ, кнопки на початку уроку і трохи нижче!

wordpress

Щоб залишатися в курсі свіжих статей та уроків, підписуйтесь на щотижневу поштову розсилку або на новину RSS. Дякую!