Со всеми экранами высокого разрешения, доступными сегодня, имеет смысл только то, что ваша тема WordPress включает в себя поддержку отображения изображений более высокого качества. Это означает добавление функциональности для создания этих изображений поверх способа загрузки нужного в зависимости от разрешения экрана конечного пользователя.
Для обычных пользователей WordPress доступно немало плагинов, которые добавят поддержку Retina на свой сайт. Выполнение поиска в каталоге плагинов WordPress выводит эти пять в первую пятерку:
Каждый плагин по-разному добавляет поддержку Retina, хотя все они в значительной степени используют одни и те же два компонента: скрипт обнаружения и функцию создания изображения, готовую к сетчатке. Для разработчиков, которые хотят добавить эту функцию непосредственно в свои темы, первое, что вам нужно сделать, это включить правильный файл JS, чтобы определить разрешение экрана пользователя.
Обнаружение дисплея
Имеет смысл выводить изображение более высокого качества, только если конечный пользователь использует дисплей сетчатки. Для наших целей лучше всего использовать JavaScript. Мне нравится использовать скрипт под названием retina.js от Imulus . Он весит всего 4 КБ и добавляет все функции интерфейса, необходимые для обнаружения дисплея сетчатки и загрузки нужного изображения.
Давайте ставить в очередь
Скопируйте файл retina.js в папку вашей темы / js . Это должно быть в правильном месте, чтобы поставить его в очередь.
Добавьте следующее в файл functions.php вашей темы:
|
1
2
3
4
5
6
7
8
9
|
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 вашей темы:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
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 вашей темы:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
/**
* 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 вашей темы:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
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’] .
$retina_filename = substr_replace( $original_filename, ‘@2x.’, strrpos( $original_filename, ‘.’ ), strlen( ‘.’ ) );
if ( file_exists( $retina_filename ) )
unlink( $retina_filename );
}
}
}
}
|
Вывод
Это не займет много времени, чтобы подготовить вашу тему для поддержки сетчатки. С помощью всего лишь нескольких функций и одного дополнительного файла JavaScript ваши пользователи могут быть уверены, что их изображения всегда будут отлично смотреться на экране любого типа.
Если у вас есть какие-либо комментарии или отзывы по поводу того, что вы прочитали выше, пожалуйста, обсудите это ниже.