Поддержка Retina-дисплеев в темах WordPress
Сегодня доступно очень много различных устройств, обладающих высоким разрешением экрана, потому есть смысл внедрить в свою тему WordPress поддержку вывода изображений высокого качества. Это означает, что нужно добавить функциональность создания таких изображений, чтобы они корректно загружались в зависимости от разрешения экрана конечного пользователя.
Есть довольно много плагинов, доступных пользователям WordPress, которые позволяют добавлять поддержку Retina к своему сайту. Поиск по репозиторию WordPress выдает следующие решения:
Каждый плагин использует свой собственный подход по добавлению поддержки Retina, однако все они в той или иной степени базируются на двух компонентах: скрипте определения экранного разрешения и функции создания изображений для Retina-экранов. Первое, что потребуется сделать разработчикам, желающим добавить данную возможность напрямую к своим темам – это подключить правильный JS-файл для определения пользовательского разрешения экрана.
Обнаружение Retina-дисплеев
Выводить изображение высокого качества требуется лишь в том случае, если конечный пользователь работает с Retina-дисплеем. Для наших целей самый лучший способ сделать это состоит в использовании JS. Я предпочитаю использовать скрипт retina.js от Imulus. Он весит всего лишь 4 Кб, добавляет всю необходимую фронт-энд функциональность, которая требуется для обнаружения Retina-дисплея и загрузки верного изображения.
Подключаем скрипт
Скопируем файл retina.js в папку /js с темой. Файл должен находиться в верном месте, чтобы мы могли подключить его.
Добавим следующий код в файл темы functions.php:
add_action( 'wp_enqueue_scripts', 'retina_support_enqueue_scripts' );
/**
* Enqueueing retina.js
*
* This function is attached to the 'wp_enqueue_scripts' action hook.
*/
function retina_support_enqueue_scripts() {
wp_enqueue_script( 'retina_js', get_template_directory_uri() . '/js/retina.js', '', '', true );
}
Больше для обнаружения дисплеев ничего не требуется. Далее уже будут идти функции, которые будут отвечать за создание изображений высокого качества.
Создание изображений
Вы должны убедиться в том, что каждый раз при загрузке изображения будет создаваться его высококачественная версия и сохраняться с приставкой @2x, которая будет добавляться к названию файла. Скрипт обнаружения будет разыскивать эту приставку, чтобы при необходимости загружать Retina-версию изображения.
Настраиваем функцию
Чтобы убедиться в том, что Retina-изображение будет автоматически создаваться всякий раз при загрузке изображения, вы должны сцепиться с соответствующим фильтром WordPress. Корректным фильтром в данном случае является wp_generate_attachment_metadata.
Добавляем следующий код к своему файлу темы functions.php:
add_filter( 'wp_generate_attachment_metadata', 'retina_support_attachment_meta', 10, 2 );
/**
* Retina images
*
* This function is attached to the 'wp_generate_attachment_metadata' filter hook.
*/
function retina_support_attachment_meta( $metadata, $attachment_id ) {
foreach ( $metadata as $key => $value ) {
if ( is_array( $value ) ) {
foreach ( $value as $image => $attr ) {
if ( is_array( $attr ) )
retina_support_create_images( get_attached_file( $attachment_id ), $attr['width'], $attr['height'], true );
}
}
}
return $metadata;
}
Функция проверяет, является ли загруженный файл изображением. Если да, то она обрабатывает его, используя функцию retina_support_create_images().
Создаем изображение
После проверки, было ли изображение загружено, нам нужно создать функцию, которая будет обрабатывать и создавать высококачественную Retina-версию изображения.
Добавляем в functions.php следующий код:
/**
* Create retina-ready images
*
* Referenced via retina_support_attachment_meta().
*/
function retina_support_create_images( $file, $width, $height, $crop = false ) {
if ( $width || $height ) {
$resized_file = wp_get_image_editor( $file );
if ( ! is_wp_error( $resized_file ) ) {
$filename = $resized_file->generate_filename( $width . 'x' . $height . '@2x' );
$resized_file->resize( $width * 2, $height * 2, $crop );
$resized_file->save( $filename );
$info = $resized_file->get_size();
return array(
'file' => wp_basename( $filename ),
'width' => $info['width'],
'height' => $info['height'],
);
}
}
return false;
}
Теперь Retina-изображение будет создаваться в двойном размере от оригинала. Приставка @2x будет добавлена к названию файла, чтобы скрипт обнаружения мог корректно работать во фронт-энде.
В принципе, это практически все, в чем вы нуждаетесь. Единственное, что можно добавить – это функцию, которая будет все подчищать после того, как изображение будет удалено.
Задаем очистку
Если пользователь удаляет изображение из медиа-библиотеки, вы можете также удалить все retina-изображения, которые были созданы на его основе.
Поместите заключительный фрагмент кода в файл темы functions.php:
add_filter( 'delete_attachment', 'delete_retina_support_images' );
/**
* Delete retina-ready images
*
* This function is attached to the 'delete_attachment' filter hook.
*/
function delete_retina_support_images( $attachment_id ) {
$meta = wp_get_attachment_metadata( $attachment_id );
$upload_dir = wp_upload_dir();
$path = pathinfo( $meta['file'] );
foreach ( $meta as $key => $value ) {
if ( 'sizes' === $key ) {
foreach ( $value as $sizes => $size ) {
$original_filename = $upload_dir['basedir'] . '/' . $path['dirname'] . '/' . $size['file'];
$retina_filename = substr_replace( $original_filename, '@2x.', strrpos( $original_filename, '.' ), strlen( '.' ) );
if ( file_exists( $retina_filename ) )
unlink( $retina_filename );
}
}
}
}
Заключение
Реализовать тему, готовую к Retina-дисплеям, можно очень легко и быстро. Воспользовавшись несколькими функциями, а также одним дополнительным JS-файлом, вы можете сделать так, чтобы ваши пользователи видели привлекательные изображения на всех типах экранов.
Источник: wp.tutsplus.com
