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

Якщо ви схожі на мене, і хочете налаштувати адаптивний сайт, який відносно легко оновлювати, WordPress є найбільш придатною для цієї CMS.

Якщо ви думаєте зовсім так само, як я, ви, можливо, не звертаєте уваги на проміжні адаптивні рішення для зображень, віддаючи перевагу можливості відразу завантажувати адаптивні зображення. На щастя, з допомогою кількох рядків PHP і JavaScript, тепер ви можете додати на свій WordPress сайт функціонал автоматичних адаптивних зображень.

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

Розмітка, яку ми в кінцевому підсумку хочемо отримати

Ми будемо використовувати бібліотеку Picturefill. На поточний момент ми використовуємо розмітку, передбачувану бібліотекою, яка точно імітує готується до релізу елемент .

UPDATE: Елемент був реалізований у багатьох браузерах, тому плагін / код цієї статті був оновлений, щоб відповідати його синтаксису.

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

Чого ми точно не будемо робити, це використовувати цю розмітку безпосередньо в блозі, ми хочемо змусити сам WordPress робити це за нас.

Тема

Все, що вам потрібно змінити у вашій темі, це додати наступний рядок у файл functions.php:

add_theme_support(‘post-thumbnails’);

Цей код гарантує, що ваша тема дає WordPress дозвіл змінювати розмір завантажених зображень. Без нього плагін не буде працювати.

Плагін

Має сенс реалізувати потрібний нам функціонал саме у вигляді плагіна WordPress, тому що нам потрібно буде, щоб він був активний, незалежно від того, яку тему ми встановлюємо. Ми можемо створити папку з файлом PHP, який буде містити код самого плагіна, а також копію бібліотеки Picturefill:

Адаптивні зображення WordPress без проблем

Додавання бібліотеки

function get_picturefill() {
wp_enqueue_script(‘picturefill’, plugins_url( ‘/js/picturefill.js’, __FILE__ ));
}
add_action(‘init’, ‘get_picturefill’);

Це забезпечує завантаження цієї бібліотеки JavaScript.

Визначення розмірів

Вкажіть WordPress, який розмір зображення ви хочете створити по завершенню завантаження:

add_image_size(‘large-img’, 1000, 702);
add_image_size(‘medium-img’, 700, 372);
add_image_size(‘small-img’, 300, 200);

Ви можете встановити ці параметри на свій розсуд. add_image_size має цілий ряд параметрів, які можна налаштувати. Для JPGзображення Кролика Банні розміром 1024 на 768 пікселів, створюється ціла купа версій:

Адаптивні зображення WordPress без проблем

Зображення розміром 936 на 702 пікселя було створено, тому що ми вказали, що повинно створюватися одне зображення з максимальною висотою 702 пікселя. Зображення розміром 150 на 150 пікселів було створено, тому що WordPress автоматично створює квадратні мініатюри такого розміру.

Створення [шорткода]

Давайте розширимо наш плагін, додамо йому додатковий функціонал, і створимо шорткод адаптивних зображень. Таким чином, ми зможемо правильно вставити його в зміст запису:

[responsive imageid=»12″ size1=»0″ size2=»500″ size3=»1000″]

і він буде виводити розмітку, необхідну для Picturefill.

Ми розділимо це на три функції. Одна буде визначати шорткод і HTML для висновку, одна — допоміжна повернути тексту alt, і одна спеціально для перебору варіантів зображення і вибору одного джерела:

function tevkori_get_img_alt( $image ) {
$img_alt = trim( strip_tags( get_post_meta( $image, ‘_wp_attachment_image_alt’, true ) ) );
return $img_alt;
}
function tevkori_get_picture_srcs( $image, $mappings ) {
$arr = array();
foreach ( $mappings as $size => $type ) {
$image_src = wp_get_attachment_image_src( $image, $type );
$arr[] = «;
}
return implode( array_reverse ( $arr ) );
}
function tevkori_responsive_shortcode( $atts ) {
extract( shortcode_atts( array(
‘imageid’ => 1,
// Тут ви можете додати більше розмірів для свого шорткода
‘size1’ => 0,
‘size2’ => 600,
‘size3’ => 1000,
), $atts ) );
$mappings = array(
$size1 => ‘small-img’,
$size2 => ‘medium-img’,
$size3 => ‘large-img’
);
return


. tevkori_get_picture_srcs( $imageid, $mappings ) .

' . tevkori_get_img_alt( $imageid ) . '
‘. wp_get_attachment_image( $imageid, $mappings[0] ) . ‘
‘;
}

Потім підключаємо шорткод:

add_shortcode( ‘responsive’, ‘tevkori_responsive_shortcode’ );

В ідеалі ви визначаєте тут контрольні точки, щоб їх не потрібно було передавати за допомогою шорткода:

[responsive imageid=»12″]

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

Зміна зовнішнього вигляду завантажувача файлів мультимедіа

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

Але, як ми дізнаємося, ID зображення, яке потрібно використовувати? В інтерфейсі завантажувача медіафайлів дана інформація недоступна. Проте ми все ж можемо зробити цей ID доступним у завантажувачі, для цього нам потрібно налаштувати простий фільтр:

function responsive_insert_image($html, $id, $caption, $title, $align, $url) {
return «[responsive imageid=’$id’ size1=’0′ size2=’600′ size3=’1000′]»;
}
add_filter(‘image_send_to_editor’, ‘responsive_insert_image’, 10, 9);

Тепер вибір і вставлення зображення через редактор буде працювати наступним чином:

Адаптивні зображення WordPress без проблем

Все працює! На картинці ви можете бачити результат нашої нової функції:

Адаптивні зображення WordPress без проблем

Що ви ще можете зробити:

  • Якщо ви хочете забезпечити більш широку підтримку браузерами, ви можете подумати над тим, щоб встановити Matchmedia.js. Це дозволить працювати медіа запитам в старих браузерах, які потім автоматично переходять на Picturefill;
  • Замість того щоб використовувати шорткоди або налаштовувати завантажувач медіафайлів, ви можете задіяти спеціальну панель через додаткові користувальницькі поля;
  • Ви можете налаштувати розмітку, щоб дозволити використання align-*, як це часто робиться в WordPress. Або елементів . А також тегів alt;
  • Ви можете налаштувати визначення контрольних точок через інтерфейс завантажувача, замість жорсткої установки через плагін.

Переклад статті «Hassle Free Responsive Images for WordPress» був підготовлений дружною командою проекту Сайтостроение від А до Я.