Учитывая доступность экранов с высоким разрешением, ваша WordPress тема должна поддерживать отображение изображений высокого качества. Это значит, что должна быть функциональность для создания этих изображений, а также способ загрузки правильного изображения с учетом разрешения экрана конечного пользователя. В этом уроке давайте разберемся, поддерживает ли ваша WordPress-тема новомодные Retina-экраны.
Есть достаточно плагинов, доступных для WordPress пользователей, которые добавят поддержку ретины для сайта.
После поиска в плагинах для WordPress мы получили следующий ТОП-5:
- WP Retina 2x
- Retina Image Support
- Retina for WP
- Simple WP Retina
- wp-retina
Каждый плагин подходит к добавлению поддержки ретины по-своему, хотя в основном они используют те же 2 компонента: скрипт распознавания и функцию подготовки изображений. Для разработчиков, которые хотят добавить эту возможность напрямую в темы, первое, что нужно — вставить правильный JS для определения разрешения экрана.
Определение экрана
Отображать изображение высокого качества имеет смысл только если конечный пользователь использует ретина дисплей (дисплей с высокой плотностью точек на квадратный дюйм). Для наших целей лучший способ — с использованием JavaScript. Мне нравится скрипт retina.js от Imulus. Он весит всего 4кб и добавляет все функции, которые вам нужны, чтобы определить, используется ли ретина, и загрузить правильное изображение.
Добавление скрипта
Скопируйте файл 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 в имени файла. Скрипт определения экрана будет искать этот суффикс для загрузки изображения под ретину.
Установка
Чтобы изображения под ретину создавались автоматически при загрузке, вам нужно зацепиться за подходящий 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().
Создание изображения
После проверки, является ли загруженный файл изображением, вам нужна функция по обработке и созданию версии высокого качества под ретину.
Вот что еще нужно добавить в файл 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;
}
Теперь новое изображение под ретину будет создано. Плюс к названию файла будет добавлено @2x, чтобы скрипт распознавания правильно сделал свою задачу со стороны клиентской части.
Собственно, это все, что вам нужно. Хотя неплохо было бы добавить еще функцию, чтобы почистить все после удаления изображения.
Уборка
Если пользователь удаляет изображение из Медиа-библиотеки, также можно удалить и дополнительно созданные копии для ретины.
Вставьте этот завершающий блок кода в файл 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 );
}
}
}
}
Заключение
Чтобы подготовить вашу тему к поддержке ретины-дисплеев, не требуется много усилий. С помощью всего нескольких функций и одного JavaScript файла, вы сможете быть уверены, что изображения всегда будут выглядеть хорошо, на любом типе экрана.
Источник: wp.tutsplus.com
Комментарии к записи: 1
Скажем дружно — Нахуй нужно!