Як переконатися, що ваша тема має підтримку Retina-екранів

Враховуючи доступність екранів з високою роздільною здатністю, WordPress тема повинна підтримувати відображення зображень високої якості. Це означає, що має бути функціональність для створення цих зображень, а також спосіб завантаження правильного зображення з урахуванням роздільної здатності екрана кінцевого користувача. У цьому уроці давайте розберемося, чи підтримує ваша WordPress-тема новомодні Retina-екрани.

Є достатньо плагінів, доступних для WordPress користувачів, які додадуть підтримку ретин для сайту.

Після пошуку в плагінах для WordPress ми отримали наступний ТОП-5:

• WP Retina 2x
• Підтримка зображень Retina
• 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

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/