¿Quieres crear tamaños de imagen adicionales en WordPress?
De forma predeterminada, WordPress crea automáticamente varias copias de imágenes cargadas en diferentes tamaños. Además, los temas y complementos de WordPress también pueden crear sus propios tamaños de imagen.
En este artículo, le mostraremos cómo crear fácilmente tamaños de imagen adicionales en WordPress y usarlos en su sitio web.
¿Por qué crear tamaños de imagen adicionales en WordPress?
Normalmente, todos los temas y complementos populares de WordPress manejan muy bien los tamaños de imagen. Por ejemplo, su tema de WordPress puede crear tamaños adicionales para usar como miniaturas en las páginas de archivo.
Sin embargo, a veces estos tamaños de imagen pueden no ajustarse a sus propios requisitos. Es posible que desee utilizar un tamaño de imagen diferente en un tema secundario o en un diseño de cuadrícula de publicación.
Puede hacer esto creando tamaños de imagen adicionales en WordPress y luego llamando a estos tamaños cuando los necesite.
Dicho esto, echemos un vistazo a cómo crear tamaños de imagen adicionales en WordPress.
Registro de tamaños de imagen adicionales para su tema
La mayoría de los temas de WordPress, incluidos todos los principales temas de WordPress, admiten la función de miniaturas de publicaciones (imagen destacada) de forma predeterminada.
Sin embargo, si está creando un tema de WordPress personalizado, deberá agregar soporte para miniaturas de publicaciones agregando el siguiente código al archivo functions.php de su tema.
add_theme_support( 'post-thumbnails' );
Una vez que habilite el soporte para miniaturas de publicaciones, ahora puede usar la funcionalidad de registrar tamaños de imagen adicionales usando la función add_image_size().
La función add_image_size se utiliza en el siguiente formato:
add_image_size( 'name-of-size', width, height, crop mode );
El código de ejemplo puede parecerse al siguiente:
add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode
Ahora, si se da cuenta, hemos especificado tres tipos diferentes de tamaños de imagen. Cada uno tiene diferentes modos, como recorte duro, recorte suave y altura ilimitada.
Veamos cada ejemplo y cómo puede usarlos en sus propios proyectos.
1. Modo de recorte duro
Como puede notar, hay un valor «verdadero» agregado después de la altura. Esto le dice a WordPress que recorte la imagen exactamente al tamaño que hemos definido (en este caso, 120 x 120 px).
Este método se utiliza para garantizar que todo sea exactamente proporcionado. Esta función recortará automáticamente la imagen desde los lados o desde arriba y abajo dependiendo del tamaño.
2. Modo de recorte suave
De forma predeterminada, el modo de recorte suave está activado, por eso no ve ningún valor adicional agregado después de la altura. Este método cambia el tamaño de la imagen proporcionalmente sin distorsionarla. Por lo tanto, es posible que no obtenga las dimensiones que desea. Por lo general, coincide con la dimensión del ancho y las alturas son diferentes según la proporción de cada imagen. Una pantalla de ejemplo se vería así:
Modo de altura ilimitada
Hay momentos en los que tiene imágenes súper largas que desea usar en su diseño, pero desea asegurarse de que el ancho sea limitado. Por ejemplo, las imágenes infográficas tienden a ser muy largas y generalmente más anchas que el ancho del contenido.
Este modo le permite especificar un ancho que no romperá su diseño mientras deja que la altura sea ilimitada.
Mostrar tamaños de imagen adicionales en su tema de WordPress
Ahora que ha agregado la funcionalidad para los tamaños de imagen deseados, echemos un vistazo a mostrarlos en su tema de WordPress. Abra el archivo del tema donde desea mostrar la imagen y pegue el siguiente código:
<?php the_post_thumbnail( 'your-specified-image-size' ); ?>
Nota: este fragmento de código debe pegarse dentro del ciclo de publicación.
Eso es todo lo que tiene que hacer para mostrar los tamaños de imagen adicionales en su tema de WordPress. Probablemente debería envolverlo con el estilo que se ajuste a sus necesidades.
Regeneración de tamaños de imagen adicionales
Si no está haciendo esto en un sitio nuevo, entonces probablemente tendrá que regenerar las miniaturas.
La función add_image_size() solo genera los tamaños desde el punto en que se agregó al tema. Esto significa que las imágenes de publicación que se agregaron antes de la inclusión de esta función no tendrán nuevos tamaños.
Para solucionar esto, debe regenerar el nuevo tamaño de imagen para imágenes más antiguas. Esto es fácil gracias al complemento llamado Regenerar miniaturas. Una vez que instala y activa el complemento, se agrega una nueva opción en el menú: Herramientas » Regenerar miniaturas
Verá la opción para regenerar miniaturas para todas las imágenes o solo para las imágenes destacadas. Recomendamos regenerar todas las imágenes para evitar cualquier comportamiento inesperado o imágenes rotas.
Para obtener más detalles, consulte nuestro artículo sobre cómo regenerar fácilmente nuevos tamaños de imagen en WordPress.
Habilitación de tamaños de imagen adicionales para el contenido de su publicación
Aunque haya habilitado los tamaños de imagen en su tema, el uso está limitado solo a su tema, lo que no tiene ningún sentido.
Todos los tamaños de imagen se generan independientemente, entonces, ¿por qué no ponerlos a disposición del autor de la publicación para que los use dentro del contenido de la publicación?
Puede hacerlo agregando el siguiente código al archivo de funciones de su tema.
function wpb_custom_image_sizes( $size_names ) {
$new_sizes = array(
'homepage-thumb' => 'Homepage Thumbmail',
'singlepost-thumb' => 'Infographic Single Post'
);
return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );
No olvides guardar tus cambios después de agregar el código.
Ahora puede ir y cargar una imagen en una publicación o página de WordPress. En la configuración del bloque de imágenes, verá los tamaños de imagen personalizados en la opción «Tamaño de imagen».
Usted y otros autores que trabajan en su sitio web ahora pueden seleccionar estas opciones de tamaño al agregar imágenes a publicaciones y páginas.
Esperamos que este artículo le haya ayudado a aprender cómo crear tamaños de imagen adicionales en WordPress. También puede consultar nuestro artículo sobre los mejores complementos de compresión de imágenes para WordPress y nuestra guía de rendimiento de WordPress para mejorar la velocidad de su sitio web.
.