Haz que tu theme de WordPress sea «retina ready» en 3 pasos
Hoy vamos a aprender a dotar a tu theme de WordPress con soporte retina para los dispositivos que lo admitan. Por un lado, añadiremos las funciones necesarias en el archivo functions.php, así como los assets necesarios, y te enseñaré cómo testearlo una vez implementado. Vamos a ello!
1. Copia y pega las siguientes líneas en el archivo functions.php de tu theme:
/*********************************************************************
* RETINA SUPPORT
*/
add_filter( 'wp_generate_attachment_metadata', 'retina_support_attachment_meta', 10, 2 );
function retina_support_attachment_meta($metadata, $attachment_id) {
// Create first image @2
retina_support_create_images(get_attached_file($attachment_id), 0, 0, false);
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;
}
function retina_support_create_images($file, $width, $height, $crop = false) {
$resized_file = wp_get_image_editor($file);
if (!is_wp_error($resized_file)) {
if ($width || $height) {
$filename = $resized_file->generate_filename($width . 'x' . $height . '@2x');
$resized_file->resize($width * 2, $height * 2, $crop);
} else {
$filename = str_replace('-@2x','@2x',$resized_file->generate_filename('@2x'));
}
$resized_file->save($filename);
$info = $resized_file->get_size();
return array(
'file' => wp_basename($filename),
'width' => $info['width'],
'height' => $info['height'],
);
}
return false;
}
add_filter( 'delete_attachment', 'delete_retina_support_images' );
function delete_retina_support_images($attachment_id) {
$meta = wp_get_attachment_metadata($attachment_id);
$upload_dir = wp_upload_dir();
$path = pathinfo($meta['file']);
// First image (without width-height specified
$original_filename = $upload_dir['basedir'] . '/' . $path['dirname'] . '/' . wp_basename($meta['file']);
$retina_filename = substr_replace($original_filename, '@2x.', strrpos($original_filename, '.'), strlen('.'));
if (file_exists($retina_filename)) unlink($retina_filename);
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);
}
}
}
}
2. Incluir el archivo retina.min.js
Para esto, basta con realizar un wp_enqueue_script(). Fíjate si en tu archivo functions.php tienes llamadas a ésta función, para añadir la siguiente línea en el mismo sitio, para mantener la coherencia de tu código.
wp_enqueue_script('retina-js', get_template_directory_uri() . '/assets/libs/retina.min.js', array(), FALSE, TRUE);
Como ves, el archivo retina.min.js se añadirá antes del cierre del tag body.
3. ¡A testear!
Por último, para ver que todo funciona correctamente, lo primero es subir un par de imágenes a la librería multimedia. Te darás cuenta que se crean los thumbnails automáticamente, así como los archivos *@2X, que son los que están adaptados a dispositivos retina.
En el momento que el navegador detecte resoluciones altas, servirá las imágenes «@2X» en lugar de las normales. Puedes verificar esto aumentando el tamaño de tu navegador (normalmente con CTRL más la tecla +). Pulsa F12 en el navegador para acceder a las developer tools, y en la pestaña Network, comprobarás que se cargan las imágenes «@2X», ofreciendo una nitidez y calidad óptimas.