Es posible que se haya topado con el hecho de que en el papel de desarrollador de temas es un estándar para construir su tema con el rendimiento web en mente. Esto significa asegurarse de que las imágenes emitidas en su tema no están en tamaño ‘completo’ si pueden ser más de 100 kilobytes.
También, haciendo uso de la funcionalidad de WordPress para el atributo de imagen HTML srcset
es otra razón para utilizar la función wp_get_attachment_image()
en la salida de las imágenes.
Otro uso sería en la salida de las entradas del blog con imágenes destacadas. Como un desarrollador de temas que desea asegurarse de que o bien especificar: (a) uno de los tamaños de miniaturas de post por defecto, o (b) crear su propio tamaño de miniaturas de post personalizado.
Hay casos en los que puede no tener que utilizar un tamaño de miniaturas de post personalizado. Sin embargo, usted puede en su lugar utilizar un tamaño de miniatura post por defecto que hará perfectamente para sus necesidades.
Los tamaños de miniaturas por defecto disponibles para su uso son los siguientes:
-
thumbnail
(utiliza el tamaño 150px × 150px) -
medium
(utiliza el tamaño 300px × 300px) -
medium_large
(utiliza el tamaño 768px × 0px) -
large
(utiliza el tamaño 1024px × 1024px)
En estos casos puedes especificar fácilmente si tienes un tamaño similar para utilizar cualquiera de estos tamaños de miniaturas por defecto. Todo lo que tendrá que hacer es utilizar cualquiera de las cadenas mencionadas en el parámetro $size
de la función the_post_thumbnail().
Notará que estos tamaños de miniaturas de post por defecto son casi todos imágenes con recorte cuadrado. Esto se debe probablemente al espacio máximo del que puede salir una imagen: un cuadrado. Para aprovechar al máximo el espacio, se tomó la decisión de hacer estos tamaños de miniaturas de post por defecto como imágenes cuadradas.
Cuándo usar un tamaño de miniaturas de post personalizado
Sin embargo, hay casos en los que necesita dar salida a una imagen que no sea cuadrada. Tome por ejemplo que usted tiene que añadir una imagen destacada por encima de su blog artículo único utilizando la función the_post_thumbnail()
.
Puede utilizar el siguiente código que dará salida a una imagen destacada de su artículo con el tamaño 1024px × 768px:
add_image_size( 'single-feature', 1024, 768, true );
Y rápidamente identificar lo que esto significa en términos de laico:
- add_image_size() – crear un tamaño de miniatura de post personalizado
- ‘single-feature’ – parámetro
$name
, sólo un nombre del tamaño de miniatura de post personalizado - 1024 – parámetro
$width
, el ancho de la miniatura de la entrada personalizada - 768 – parámetro
$height
, la altura de la miniatura de la entrada personalizada - true – parámetro
$crop
, significa si (a) recortar duro, o (b) escalar la imagen al tamaño de la miniatura de la entrada personalizada. Más información en el WP Dev docs
Como información adicional: desde el ejemplo el ancho y la altura especificados fueron elegidos (1024 × 768) ya que son los tamaños comunes a utilizar para las imágenes destacadas. Sin embargo esto no tiene que significar que no se pueda utilizar cualquier otro tamaño. Asegúrate de ver lo que se ajusta mejor al diseño de tu tema y utiliza eso.
Cómo actualizar las miniaturas de las entradas personalizadas
A medida que vayas probando los nuevos tamaños de las imágenes de tu WordPress te darás cuenta de que puedes tener problemas para actualizar la anchura y la altura sin cambiar el $name
del tamaño de la miniatura de la entrada personalizada.
Tomemos por ejemplo que tienes el tamaño antiguo:
add_image_size( 'single-feature', 1024, 768, true );
Pero ahora necesitas actualizar el tamaño de esta miniatura de ‘una sola imagen’ a lo siguiente:
add_image_size( 'single-feature', 1366, 768, true );
Ves que el cambio fue en el ancho de 1024 a 1366. Pero al refrescar la plantilla donde se supone que se muestra este tamaño, seguirá mostrando su imagen con el ancho de 1024. ¿Cómo se puede arreglar esto?
Para remediarlo, tendrás que regenerar la miniatura.
Así que para empezar, asegúrate de que has actualizado el ancho y el alto de tu miniatura, luego instala el plugin Regenerate Thumbnails. Sigue las instrucciones del plugin y entonces habrás regenerado los tamaños de las miniaturas con éxito.
Regenerar todas tus imágenes puede llevar algo de tiempo especialmente si tu sitio web tiene muchas imágenes en tu Media Library.
Dónde colocar la función add_image_size
La función add_image_size()
no funcionará a menos que la coloques adecuadamente dentro del hook de acción de WordPress after_setup_theme
. Esto significa que el siguiente código de ejemplo:
add_image_size( 'archive-featured', 792, 446, true );
Debe estar dentro del siguiente gancho de acción en el archivo functions.php
de su tema bajo:
function ms_setup() {add_image_size( 'archive-featured', 792, 446, true );}add_action( 'after_setup_theme', 'ms_setup' );
Añadir add_image_size en el tema Underscores
Un tema de inicio muy popular llamado Underscores Theme o tema _s tiene un buen lugar para añadir sus funciones add_image_size()
.
Puedes añadir la función de tamaño de miniatura de post personalizado add_image_size()
bajo la línea add_theme_support( 'post-thumbnails' );
en el archivo functions.php
del tema Underscores.
La razón por la que puedes añadir la función add_image_size()
bajo aquí es porque ya está dentro del gancho de acción after_setup_theme
mencionado anteriormente.
Snippet de la función add_image_size para temas de WordPress
Si quieres, puedes copiar el snippet de abajo para el add_image_size en el tema Underscores para tu futura referencia:
/* * Custom post thumbnail sizes for use across the theme. * * @link https://developer.wordpress.org/reference/functions/add_image_size/ */add_image_size( $name, $width, $height, $crop );
Nota: Por favor, asegúrate de definir los parámetros utilizados en el snippet para asegurarte de que no recibes ningún error de advertencia PHP en tu tema. El fragmento anterior se utiliza como una plantilla para que usted pueda copiar y pegar en sus funciones de tema.
Conclusión
¡Gracias por leer este artículo! Por favor, hágame saber sus pensamientos y su configuración en tamaños de miniaturas de post personalizados.
Si usted disfrutó de este artículo le gustaría saber los errores del tema en la configuración de tipos de post personalizados. Por un lado, no registre los tipos de correos personalizados en su tema!