Cómo agregar tamaños de imagen personalizados en WordPress

¿Desea incluir tamaños de imagen personalizados en su sitio? Has venido al lugar correcto. En este tutorial, le mostraremos cómo agregar tamaños de imagen personalizados en WordPress y realizar cambios en los existentes.

¿Cuáles son los tamaños predeterminados de las imágenes de WordPress?

De forma predeterminada, cada instalación de WordPress viene con tres tamaños de imagen personalizados.

• Miniatura – 150*150
• Medio – 300*300
• Grande – 1024*1024

Esto significa que cuando carga una imagen en su sitio, el núcleo creará automáticamente copias en esos tamaños. Sin embargo, a veces esas dimensiones no son las que necesita para su sitio.

¿Por qué cambiar los tamaños de imagen predeterminados?

Las dimensiones de imagen predeterminadas que proporciona WordPress son estándar, pero a veces es posible que necesite diferentes tamaños de imagen. En este caso, deberá crear unos personalizados. Para hacer esto, la mayoría de los principiantes suben la imagen a sus sitios y usan la función de cambio de tamaño nativa de WordPress para ajustar el tamaño de la imagen en la parte frontal.

Sin embargo, esto no es eficiente si tiene que hacerlo para todas sus imágenes. Es por eso que agregar tamaños de imagen personalizados lo ayudará a ahorrar mucho tiempo. En esta guía, le mostraremos cómo incluir nuevos tamaños de imagen en WordPress para que cada vez que cargue una imagen en su sitio, WordPress la convierta automáticamente a todos los tamaños diferentes que necesita sin ningún trabajo adicional de su parte.

Por otro lado, también puede eliminar los tamaños de imagen predeterminados que no necesita para ahorrar espacio en el servidor. Si sabe cómo hacerlo, consulte esta guía.

NOTA: algunos temas de WordPress ya vienen con tamaños de imagen personalizados, así que asegúrese de que las nuevas dimensiones que planea registrar no estén disponibles.

Cómo cambiar los tamaños de imagen predeterminados de WordPress

Si no usa todos los tamaños de imagen predeterminados que incluye WordPress, puede cambiar esas dimensiones en lugar de agregar otras nuevas. Y la buena noticia es que puede hacer esto sin usar ningún complemento adicional o código personalizado.

En su panel de administración de WordPress , vaya a Configuración > Medios . Allí podrá cambiar las dimensiones de los 3 tamaños de imagen predeterminados.

Simplemente ingrese el ancho y la altura que desea en el tamaño de la imagen que desea modificar. Por ejemplo, supongamos que desea cambiar las imágenes de tamaño mediano a 500*500 px. Agregue los nuevos valores en el campo correspondiente y luego haga clic en el botón Guardar cambios .

Puedes cambiar todos los tamaños por defecto o unos específicos según tus necesidades. Asegúrese de guardar los cambios y considere regenerar las miniaturas después de agregar un tamaño de imagen personalizado a su tienda WooCommerce o sitio de WordPress.

Cómo agregar tamaños de imagen personalizados en WordPress

Si en lugar de cambiar los tamaños predeterminados desea agregar tamaños de imagen personalizados en WordPress, tiene dos opciones.

1. A mano
2. con un complemento

En esta sección te explicaremos ambos métodos para que puedas elegir el que mejor se adapte a tus necesidades y habilidades.

1) Agregar tamaños de imagen personalizados manualmente

Con unas pocas líneas de PHP, podrá agregar tamaños de imagen personalizados a su sitio de WordPress. Como editaremos algunos archivos principales, antes de comenzar, le recomendamos que cree un tema secundario y genere una copia de seguridad completa de su sitio. Para esta demostración, vamos a utilizar el complemento de WordPress Child Themify.

Instalar y activar Themify infantil

En su tablero de WordPress , vaya a la sección Complementos e instale y active el complemento Child Themify en su sitio.

Agregar tamaños de imagen personalizados

Luego, ve a Apariencia > Editor de temas .

De manera predeterminada, el editor de temas cargará el archivo style.css , pero para agregar tamaños de imagen personalizados, deberá seleccionar functions.php de su tema secundario.

Después de abrir el archivo fuctions.php , pegue el siguiente código.

 add_theme_support( 'post-thumbnails' );

Este sencillo script habilitará la función add_image_size en su instalación. Sin esto, no podrá crear ningún tamaño de imagen adicional. Después de pegar el código, presione el botón Actualizar archivo .

Hemos habilitado con éxito la función en su sitio web. Ahora, debe agregar sus dimensiones personalizadas preferidas. Para eso, usaremos el siguiente código:

 add_image_size( 'post-thumbnail size' , 800, 240 ); add_image_size( 'homepage-thumb size' , 220, 180 ); add_image_size( 'fullpage-thumb size' , 590, 790 );

Si observa más de cerca la imagen a continuación, verá que hemos agregado el nombre y la dimensión de cada tamaño personalizado que queremos incluir. Simplemente cambie el nombre y el tamaño según sus necesidades. Una vez que haya personalizado el código, péguelo en el archivo functions.php y actualice el archivo.

¡Eso es! Ha agregado con éxito tamaños de imagen personalizados a su sitio de WordPress .

Ahora, cada vez que subas una imagen y marques la opción de tamaño, verás que WordPress crea copias de la imagen en los nuevos tamaños personalizados. Además, puede usar el complemento Regenerar miniaturas para crear miniaturas de sus imágenes.

2) Cree tamaños de imagen personalizados con complementos

Si no desea editar los archivos principales de su tema, puede agregar tamaños de imagen personalizados mediante complementos. En lugar de editar el archivo functions.php , agregaremos código personalizado usando dos herramientas diferentes:

1. Fragmentos de código
2. Regenerar imagen y seleccionar recortar.

Método 1: fragmentos de código

Instalación y activación de fragmentos de código

Primero, en su tablero de WordPress, vaya a Complementos> Agregar nuevo. Busque Code Snippets, instálelo y actívelo.

Luego, vaya a la configuración del fragmento.

Agregar fragmento personalizado

Para agregar nuevos tamaños de imagen personalizados, deberá crear un nuevo fragmento.

Para eso, puedes usar el siguiente código y ajustar los nombres y tamaños según tus necesidades.

 add_theme_support('post-miniaturas');

add_image_size ('tamaño posterior a la miniatura', 800, 240);
add_image_size('tamaño del pulgar de la página de inicio', 220, 180);
add_image_size( 'tamaño de miniatura de página completa', 590, 9999);

Después de agregar el código en la sección de fragmentos, guárdelo.

Verificando el código

Para asegurarse de que todo funciona correctamente, verifique los tamaños de imagen activos.

Como puede ver en la captura de pantalla anterior, WordPress ya reconoció las imágenes personalizadas que acabamos de agregar. Este método implica un poco de codificación, pero no requiere editar los archivos de su tema. Además, Code Snippets es una excelente opción para insertar código en su sitio sin crear temas secundarios ni modificar archivos existentes.

Método 2: regeneración de imagen y selección de recorte

Image Regenerate & Select Crop es otro complemento excelente que te ayudará a regenerar y recortar imágenes.

Instalación de imagen regenerada y recorte seleccionado

Primero, instale y active Image Regenerate & Selected Crop en su sitio.

Agregar tamaños de imagen personalizados

Una vez que haya activado el complemento, vaya a Configuración > Medios . En el pie de página, verá una nueva opción para agregar tamaños de imagen personalizados. Simplemente asigne un nombre a su nuevo tamaño personalizado, ingrese el ancho, la altura y seleccione la opción de recorte. Para esta demostración, llamaremos a la nueva imagen de prueba de tamaño . Repita el proceso para agregar tantos tamaños de imagen como desee. Si, por el contrario, necesita eliminar los tamaños de imagen que ha agregado, simplemente borre el nombre y guarde los cambios.

Verificación final

Después de agregar los tamaños de imagen que desea, debe verificar que se hayan agregado correctamente a WordPress desde la configuración de Regenerar miniaturas. Como puede ver arriba, la imagen de prueba aparece en la configuración, lo que significa que la hemos agregado con éxito a nuestro sitio.

Regeneración de imágenes

Además, puede regenerar imágenes antiguas con las nuevas dimensiones personalizadas. Para hacerlo, simplemente vaya a Regenerar imagen y seleccione Recortar > Configuración general .

Una gran cosa acerca de este complemento es que no necesita confiar en ningún complemento de regeneración de imagen adicional. Image Regenerate & Select Crop se encarga tanto de la creación del nuevo tamaño de imagen como de la regeneración de la imagen.

Bonificación: Administrador de tamaños de imagen

Si en lugar de herramientas gratuitas prefiere una solución premium, consulte Image Sizes Manager. Por 13 USD, este complemento asequible ofrece una licencia de por vida y 6 meses de soporte premium.

Al igual que los otros complementos, le permite crear tamaños de imagen personalizados sin tener que editar sus archivos de tema o agregar código. Además, puede mostrar una imagen recortada usando un código abreviado. Lo bueno de este complemento es que, dado que no está agregando ningún tamaño de imagen adicional a su sitio, WordPress no generará imágenes adicionales, por lo que ahorrará espacio en disco en su servidor.

Regeneración de miniaturas

Una vez que haya creado tamaños de imagen personalizados en su sitio de WordPress, el servidor convertirá todas las imágenes nuevas en consecuencia. Sin embargo, no recortará sus imágenes existentes. Para eso, tienes que usar una herramienta llamada Regenerar miniaturas .

Instalación y activación de miniaturas regeneradas

Primero, instale y active el complemento en su sitio.

En la sección Herramientas , verá la configuración de los complementos y podrá regenerar todos sus archivos multimedia o solo las imágenes destacadas.

Si ha cambiado recientemente su tema de WordPress, le recomendamos que regenere las miniaturas de todas las imágenes destacadas. Por otro lado, si necesita aplicar su nuevo tamaño de imagen personalizado a sus archivos multimedia existentes, elija la opción Regenerar miniaturas para todos los archivos adjuntos XX . El complemento comenzará la regeneración y, después de unos minutos, estará listo para comenzar.

NOTA: Si no puede ver los tamaños de imagen personalizados recién registrados, se debe al almacenamiento en caché de su servidor. Si ese es tu caso, te recomendamos Borrar la caché de WordPress.

Eliminar tamaños de imagen predeterminados

Cuando subes una imagen a WordPress, por defecto, tu servidor genera automáticamente copias de la misma en 3 tamaños diferentes:

• Miniatura
• Medio
• Grande

Como esto ocupa espacio en su servidor, puede eliminar algunos de estos tamaños de imagen predeterminados para evitar crear tantas copias de sus imágenes. Puede hacerlo, anualmente a través del panel de administración de WordPress o programáticamente. Para obtener más información sobre ambos métodos, puede consultar esta guía.

Recomendaciones

Antes de concluir este post, tenemos algunas recomendaciones para ti.

Crear un tema hijo

Como se mencionó anteriormente, si va a utilizar el método de codificación para crear tamaños de imagen personalizados en su sitio de WordPress, le recomendamos que utilice un tema secundario. De lo contrario, si cambia el archivo functions.php del tema principal, perderá todas sus personalizaciones la próxima vez que actualice el tema.

Considere usar un complemento de compresión de imágenes

Tener muchos tamaños personalizados significa que su servidor creará muchas copias de las imágenes que cargue y esto puede afectar el almacenamiento de su servidor. Por lo general, las empresas de alojamiento limitan el uso del espacio en disco de acuerdo con el plan del usuario, por lo que es una buena idea usar un complemento de compresión de imágenes para ayudarlo a ahorrar espacio. Según nuestra experiencia, ShortPixel es una excelente herramienta para comprimir imágenes. Este complemento es fácil de configurar y usar y lo ayudará a ahorrar un valioso espacio en el servidor.

Además, puede usar un complemento de optimización de imágenes. Jetpack es una excelente opción y también ofrece una imagen CDN (red de entrega de contenido) para sus usuarios.

Conclusión

En resumen, WordPress viene con tres tamaños de imagen personalizados por defecto. Sin embargo, puede agregar tamaños de imagen personalizados a su sitio de WordPress y ajustarlos a sus necesidades. En esta guía, hemos visto dos métodos para hacerlo:

1. A mano
2. Con complementos

Si no desea instalar ningún complemento en su sitio, el método manual es el mejor para usted. Con unas pocas líneas de código, podrá incluir tamaños de imagen personalizados en su sitio web.

Por otro lado, si no se siente cómodo editando archivos principales, use uno de los complementos. Code Snippets es un complemento básico para agregar código personalizado, pero necesitará un complemento de regeneración de imágenes para regenerar imágenes. Por el contrario, Regenerar imagen y Recortar seleccionado lo ayuda a agregar tamaños de imagen personalizados y regenerar imágenes.

Finalmente, Image Sizes Manager es una herramienta premium que en lugar de generar tamaños de imagen adicionales, te permitirá cambiar el tamaño de algunas de tus imágenes. ¿Conoces algún otro método para agregar tamaños de imagen personalizados en tu sitio?

¿Qué método usas? Háganos saber en la sección de comentarios. Si acaba de crear nuevos tamaños de imagen y necesita eliminar miniaturas antiguas, consulte esta guía que explica 3 formas diferentes de hacerlo.

Si está buscando formas de incluir imágenes en sus productos, consulte nuestra guía sobre cómo agregar imágenes a los productos de WooCommerce.