Сегодня доступно очень много различных устройств, обладающих высоким разрешением экрана, потому есть смысл внедрить в свою тему 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' ); |
03 |
* Enqueueing retina.js |
05 |
* This function is attached to the 'wp_enqueue_scripts' action hook. |
07 |
function retina_support_enqueue_scripts() { |
08 |
wp_enqueue_script( 'retina_js', get_template_directory_uri() .'/js/retina.js', '', '', true ); |
Больше для обнаружения дисплеев ничего не требуется. Далее уже будут идти функции, которые будут отвечать за создание изображений высокого качества.
Создание изображений
Вы должны убедиться в том, что каждый раз при загрузке изображения будет создаваться его высококачественная версия и сохраняться с приставкой @2x, которая будет добавляться к названию файла. Скрипт обнаружения будет разыскивать эту приставку, чтобы при необходимости загружать Retina-версию изображения.
Настраиваем функцию
Чтобы убедиться в том, что Retina-изображение будет автоматически создаваться всякий раз при загрузке изображения, вы должны сцепиться с соответствующим фильтром WordPress. Корректным фильтром в данном случае является wp_generate_attachment_metadata.
Добавляем следующий код к своему файлу темы functions.php:
01 |
add_filter( 'wp_generate_attachment_metadata','retina_support_attachment_meta', 10, 2 ); |
05 |
* This function is attached to the 'wp_generate_attachment_metadata' filter hook. |
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 ); |
Функция проверяет, является ли загруженный файл изображением. Если да, то она обрабатывает его, используя функцию retina_support_create_images().
Создаем изображение
После проверки, было ли изображение загружено, нам нужно создать функцию, которая будет обрабатывать и создавать высококачественную Retina-версию изображения.
Добавляем в functions.php следующий код:
02 |
* Create retina-ready images |
04 |
* Referenced via retina_support_attachment_meta(). |
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' ); |
12 |
$resized_file->resize( $width * 2, $height * 2, $crop ); |
13 |
$resized_file->save( $filename ); |
15 |
$info = $resized_file->get_size(); |
18 |
'file' => wp_basename( $filename ), |
19 |
'width' => $info['width'], |
20 |
'height' => $info['height'], |
Теперь Retina-изображение будет создаваться в двойном размере от оригинала. Приставка @2x будет добавлена к названию файла, чтобы скрипт обнаружения мог корректно работать во фронт-энде.
В принципе, это практически все, в чем вы нуждаетесь. Единственное, что можно добавить – это функцию, которая будет все подчищать после того, как изображение будет удалено.
Задаем очистку
Если пользователь удаляет изображение из медиа-библиотеки, вы можете также удалить все retina-изображения, которые были созданы на его основе.
Поместите заключительный фрагмент кода в файл темы functions.php:
01 |
add_filter( 'delete_attachment', 'delete_retina_support_images' ); |
03 |
* Delete retina-ready images |
05 |
* This function is attached to the 'delete_attachment' filter hook. |
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 ); |
Заключение
Реализовать тему, готовую к Retina-дисплеям, можно очень легко и быстро. Воспользовавшись несколькими функциями, а также одним дополнительным JS-файлом, вы можете сделать так, чтобы ваши пользователи видели привлекательные изображения на всех типах экранов.
Источник: wp.tutsplus.com
