Cómo cambiar los tamaños de imagen destacados en WordPress

Las imágenes destacadas se utilizan en WordPress de diferentes maneras, según el tema que esté utilizando. La mayoría de los temas usan imágenes destacadas como una vista previa en miniatura de una de las imágenes en una publicación o página que normalmente se muestra en la página de inicio y en las páginas de archivo.

Esta funcionalidad se introdujo con WordPress 2.9 y originalmente se conocía como "publicar miniaturas". La mayoría de los temas de WordPress (incluido el nuestro) ahora usan imágenes destacadas para muchos otros propósitos, como galerías de imágenes, controles deslizantes de funciones e imágenes de encabezado de página. Por ejemplo, en nuestro tema de fotograma completo, la imagen destacada se convierte en la imagen de fondo de la publicación.

Las imágenes destacadas son, por supuesto, muy importantes para los creativos y cualquiera que cree un sitio de WordPress que contenga muchas imágenes. Para utilizar imágenes destacadas en cualquier tema de Graph Paper Press, todo lo que necesita hacer es seleccionar una imagen destacada del enlace en el lado derecho de la pantalla en el editor de publicaciones.

Si el tamaño de imagen destacado predeterminado que se establece en su tema funciona para sus propósitos, genial. Si no, es posible cambiar el tamaño con un poco de edición de código.

¿Por qué querrías cambiar el tamaño de la imagen destacada? Además de hacer que las galerías de miniaturas sean más grandes o más pequeñas, es posible que desee cambiar la relación de aspecto de las dimensiones. Digamos, por ejemplo, que es un fotógrafo de paisajes y su cartera se compone de amplias panorámicas. En este caso, si la imagen destacada predeterminada del tema es cuadrada, terminará recortando la mayor parte de su imagen. Puede solucionar esto ajustando las dimensiones manualmente a algo más adecuado.

Cambiar el tamaño de la imagen destacada en functions.php

Para editar los tamaños predeterminados de las imágenes destacadas, deberá cambiar un código en el archivo functions.php . Se puede acceder a este archivo a través de FTP o puede editarlo directamente en el panel de control de WordPress en Apariencia > Editor. Siempre recomendaría el primer enfoque sobre el segundo.

Antes de realizar cambios en este archivo, siempre vale la pena asegurarse de tener una copia de seguridad de la versión original en caso de que algo salga mal. Si aún no tiene los archivos del tema original en su computadora, asegúrese de descargar al menos el archivo functions.php y guárdelo en una carpeta de respaldo.

Hay dos formas diferentes de cambiar el tamaño de una imagen destacada. Para redimensionarlo proporcionalmente (es decir, para evitar estirar o comprimir la imagen) use el siguiente código:

 set_post_thumbnail_size( 50, 50 ); // 50 píxeles de ancho por 50 píxeles de alto, modo de cambio de tamaño

también puede elegir cambiar el tamaño de la imagen recortándola con este código:

 set_post_thumbnail_size( 50, 50, verdadero ); // 50 píxeles de ancho por 50 píxeles de alto, modo de recorte

Esto establece el tamaño predeterminado de las imágenes destacadas.

Agregar tamaños de imagen adicionales

También es posible agregar tantos tamaños de imagen adicionales como necesite agregando una línea de código adicional para cada tamaño de imagen:

 add_image_size('categoría-pulgar', 300, 9999); // 300 píxeles de ancho (y altura ilimitada)

Luego puede usar este nuevo tamaño en su plantilla de tema con el siguiente código:

 <?php the_post_thumbnail( 'categoría-miniatura' ); ?>

Esta característica es útil si desea mostrar imágenes destacadas de varias maneras diferentes. Por ejemplo, es posible que desee establecer un tamaño de miniatura para sus galerías de imágenes y un tamaño más grande para el encabezado de su publicación.

Recuerda que las imágenes que cargues deben ser al menos tan grandes como las dimensiones que hayas establecido para tus imágenes destacadas. Si subes imágenes más pequeñas, se ampliarán y terminarán luciendo pixeladas y borrosas.

Reconstruyendo sus imágenes destacadas

Cambiar el tamaño de la imagen destacada solo afectará las cargas desde el momento en que se cambia el código. Todas las cargas anteriores se habrán guardado en las dimensiones originales, por lo que deberá volver a generarlas.

Si solo tiene algunas imágenes para cambiar el tamaño, puede cargarlas nuevamente manualmente. Si tiene más de un puñado, es mejor usar un complemento como Regenerar miniaturas para hacer todo el trabajo duro por usted. Se puede acceder a este complemento a través de su menú Herramientas y cambiará el tamaño de una o más de las imágenes en su galería de medios que seleccione.

Prepara tus ediciones para el futuro con un tema infantil

El problema de realizar ediciones directamente en su archivo functions.php es que se perderán si se lanza una nueva versión del tema y necesita actualizarlo. Puede tomar nota del código que ha agregado e insertarlo en el nuevo archivo functions.php , pero esto puede volverse tedioso, especialmente si está haciendo muchas ediciones o hay nuevas versiones del tema que salen con frecuencia.

El uso de un tema secundario resuelve este problema, ya que cuando se actualiza el tema principal, el tema secundario permanece intacto. Si está editando el código de un tema, ya sea en el archivo functions.php , en las hojas de estilo o en cualquier otro archivo, siempre es una buena práctica usar un tema secundario.

Ya tenemos una guía completa para crear un tema hijo en el blog, pero esto es lo que necesita saber para nuestros propósitos.

Para crear un tema secundario, conéctese a su sitio a través de FTP y cree una nueva carpeta en /wp-content/themes/ para su nuevo tema secundario. Es una práctica común nombrar la carpeta del mismo modo que el tema que desea editar, con "-child" adjunto. Por ejemplo: "infantil-increíble" si está creando un tema secundario del tema Impresionante.

Debe crear una hoja de estilo dentro de la carpeta de su tema secundario, incluso si no tiene la intención de editar el CSS. Cree un nuevo archivo llamado style.css y pegue el siguiente código:

 /*
Nombre del tema: Niño impresionante
URI del tema: http://example.com/awesome-child/
Descripción: Impresionante tema infantil
Autor: Graph Paper Press
Autor URI: http://example.com
Plantilla: Impresionante
Versión: 1.0.0
Etiquetas: claro, oscuro, diseño receptivo, listo para accesibilidad
Dominio de texto: impresionante-niño
*/

@importar url("../impresionante/estilo.css");

/* =La personalización del tema comienza aquí
-------------------------------------------------- ------------ */

Cambie el nombre del tema y otros detalles según corresponda.

Para agregar la funcionalidad para cambiar la imagen destacada en su tema secundario, deberá crear un nuevo archivo functions.php , así que continúe y hágalo en el directorio de temas secundarios. Este archivo se cargará además de functions.php del tema principal.

La plantilla para functions.php se ve así:

 <?php //Abrir etiqueta PHP

// funciones

?> // Cerrar etiqueta PHP

Luego puede agregar el código de cambio de tamaño de su imagen entre las etiquetas PHP, por lo que terminará con algo como esto:

 <?php // Abriendo la etiqueta PHP

if ( función_existe( 'agregar_tema_soporte' ) ) {
add_theme_support('post-miniaturas');
set_post_thumbnail_size(150, 150, verdadero); // dimensiones predeterminadas de la miniatura de la publicación (recortada)

// tamaños de imagen adicionales
// elimine la siguiente línea si no necesita tamaños de imagen adicionales
add_image_size('categoría-pulgar', 300, 9999); //300 píxeles de ancho (y altura ilimitada)
}

?> // Cerrar etiqueta PHP

Una vez que haya terminado de crear el código de su tema hijo, deberá activarlo. Puede hacerlo a través del panel de control del sitio, en Paneles de administración > Apariencia > Temas . Busque el tema de su hijo en la lista y haga clic en Activar.

Admire sus nuevas imágenes destacadas redimensionadas

Cambiar el tamaño de las imágenes destacadas y agregar nuevos tamaños de imagen es una tarea bastante simple pero requiere algo de edición de código. Debido a esto, algunos usuarios prefieren usar un complemento para manejar el cambio de tamaño de la imagen, pero agregar complementos adicionales siempre es un riesgo de seguridad. Entrar bajo el capó y hacer algunos cambios simples en el código como este realmente puede ayudar a construir su confianza con el uso de WordPress y le facilitará la personalización de temas y realmente los hará suyos.