Поддержка Retina-дисплеев в темах WordPress

Сегодня доступно очень много различных устройств, обладающих высоким разрешением экрана, потому есть смысл внедрить в свою тему WordPress поддержку вывода изображений высокого качества. Это означает, что нужно добавить функциональность создания таких изображений, чтобы они корректно загружались в зависимости от разрешения экрана конечного пользователя.

Есть довольно много плагинов, доступных пользователям WordPress, которые позволяют добавлять поддержку Retina к своему сайту. Поиск по репозиторию WordPress выдает следующие решения:

Каждый плагин использует свой собственный подход по добавлению поддержки Retina, однако все они в той или иной степени базируются на двух компонентах: скрипте определения экранного разрешения и функции создания изображений для Retina-экранов. Первое, что потребуется сделать разработчикам, желающим добавить данную возможность напрямую к своим темам – это подключить правильный JS-файл для определения пользовательского разрешения экрана.

Обнаружение Retina-дисплеев

Выводить изображение высокого качества требуется лишь в том случае, если конечный пользователь работает с Retina-дисплеем. Для наших целей самый лучший способ сделать это состоит в использовании JS. Я предпочитаю использовать скрипт retina.js от Imulus. Он весит всего лишь 4 Кб, добавляет всю необходимую фронт-энд функциональность, которая требуется для обнаружения Retina-дисплея и загрузки верного изображения.

Подключаем скрипт

Скопируем файл retina.js в папку /js с темой. Файл должен находиться в верном месте, чтобы мы могли подключить его.

Добавим следующий код в файл темы functions.php:

01 add_action( 'wp_enqueue_scripts''retina_support_enqueue_scripts' );
02 /**
03  * Enqueueing retina.js
04  *
05  * This function is attached to the 'wp_enqueue_scripts' action hook.
06  */
07 function retina_support_enqueue_scripts() {
08     wp_enqueue_script( 'retina_js', get_template_directory_uri() .'/js/retina.js''''', true );
09 }

Больше для обнаружения дисплеев ничего не требуется. Далее уже будут идти функции, которые будут отвечать за создание изображений высокого качества.

Создание изображений

Вы должны убедиться в том, что каждый раз при загрузке изображения будет создаваться его высококачественная версия и сохраняться с приставкой @2x, которая будет добавляться к названию файла. Скрипт обнаружения будет разыскивать эту приставку, чтобы при необходимости загружать Retina-версию изображения.

Настраиваем функцию

Чтобы убедиться в том, что Retina-изображение будет автоматически создаваться всякий раз при загрузке изображения, вы должны сцепиться с соответствующим фильтром WordPress. Корректным фильтром в данном случае является wp_generate_attachment_metadata.

Добавляем следующий код к своему файлу темы functions.php:

01 add_filter( 'wp_generate_attachment_metadata','retina_support_attachment_meta', 10, 2 );
02 /**
03  * Retina images
04  *
05  * This function is attached to the 'wp_generate_attachment_metadata' filter hook.
06  */
07 function retina_support_attachment_meta( $metadata$attachment_id ) {
08     foreach $metadata as $key => $value ) {
09         if is_array$value ) ) {
10             foreach $value as $image => $attr ) {
11                 if is_array$attr ) )
12                     retina_support_create_images( get_attached_file($attachment_id ), $attr['width'], $attr['height'], true );
13             }
14         }
15     }
16  
17     return $metadata;
18 }

Функция проверяет, является ли загруженный файл изображением. Если да, то она обрабатывает его, используя функцию retina_support_create_images().

Создаем изображение

После проверки, было ли изображение загружено, нам нужно создать функцию, которая будет обрабатывать и создавать высококачественную Retina-версию изображения.

Добавляем в functions.php следующий код:

01 /**
02  * Create retina-ready images
03  *
04  * Referenced via retina_support_attachment_meta().
05  */
06 function retina_support_create_images( $file$width$height$crop = false ) {
07     if $width || $height ) {
08         $resized_file = wp_get_image_editor( $file );
09         if ( ! is_wp_error( $resized_file ) ) {
10             $filename $resized_file->generate_filename( $width 'x' .$height '@2x' );
11  
12             $resized_file->resize( $width * 2, $height * 2, $crop );
13             $resized_file->save( $filename );
14  
15             $info $resized_file->get_size();
16  
17             return array(
18                 'file' => wp_basename( $filename ),
19                 'width' => $info['width'],
20                 'height' => $info['height'],
21             );
22         }
23     }
24     return false;
25 }

Теперь Retina-изображение будет создаваться в двойном размере от оригинала. Приставка @2x будет добавлена к названию файла, чтобы скрипт обнаружения мог корректно работать во фронт-энде.

В принципе, это практически все, в чем вы нуждаетесь. Единственное, что можно добавить – это функцию, которая будет все подчищать после того, как изображение будет удалено.

Задаем очистку

Если пользователь удаляет изображение из медиа-библиотеки, вы можете также удалить все retina-изображения, которые были созданы на его основе.

Поместите заключительный фрагмент кода в файл темы functions.php:

01 add_filter( 'delete_attachment''delete_retina_support_images' );
02 /**
03  * Delete retina-ready images
04  *
05  * This function is attached to the 'delete_attachment' filter hook.
06  */
07 function delete_retina_support_images( $attachment_id ) {
08     $meta = wp_get_attachment_metadata( $attachment_id );
09     $upload_dir = wp_upload_dir();
10     $path pathinfo$meta['file'] );
11     foreach $meta as $key => $value ) {
12         if 'sizes' === $key ) {
13             foreach $value as $sizes => $size ) {
14                 $original_filename $upload_dir['basedir'] . '/' .$path['dirname'] . '/' $size['file'];
15                 $retina_filename = substr_replace( $original_filename'@2x.',strrpos$original_filename'.' ), strlen'.' ) );
16                 if file_exists$retina_filename ) )
17                     unlink( $retina_filename );
18             }
19         }
20     }
21 }

Заключение

Реализовать тему, готовую к Retina-дисплеям, можно очень легко и быстро. Воспользовавшись несколькими функциями, а также одним дополнительным JS-файлом, вы можете сделать так, чтобы ваши пользователи видели привлекательные изображения на всех типах экранов.

Источник: wp.tutsplus.com