La guía completa de miniaturas destacadas y tamaños de imagen en WordPress

Una imagen vale más que mil palabras, a menos que haya sido redimensionada de manera inapropiada, en cuyo caso vale cien palabras negativas. Bien, quizás esa sea una versión menos conocida de un viejo dicho o algo que inventé, pero el punto es que: WordPress es muy poderoso cuando se trata de miniaturas y tamaños de imagen. Solo necesitas saber cómo tratarlos. Lea todo lo que necesita saber sobre el tamaño de las imágenes en WordPress y cómo administrar las imágenes destacadas.

Nota: esta publicación es bastante pesada con PHP, no es nada complicado, pero es posible que desee leer nuestro curso gratuito de PHP antes de intentar realizar modificaciones en su tema..

Fundamentos primero

En el panel de administración de WordPress, probablemente ya sepas Ajustes -> Medios de comunicación.

Estos son los tres tamaños de imagen predeterminados que WordPress llama: miniatura, medio, y grande. El tamaño de la miniatura tiene una configuración especial para recortar en la dimensión exacta que especifique aquí. Esto no tiene por qué ser una dimensión 1: 1, puede configurarlo como desee, pero las imágenes se centrarán y se recortarán, lo que significa que cualquier parte de su imagen que no se ajuste a esas dimensiones después de ser reducida simplemente se recortará.

El ajuste medio y grande funciona de forma ligeramente diferente, ya que especificará máximo Las dimensiones para el ancho y el alto, y las imágenes se reducirán en consecuencia. Si la imagen es demasiado pequeña, esos tamaños de imagen simplemente no se crearán. Cuando carga una nueva imagen, el original se guarda y está disponible para insertarlo en una publicación a tamaño completo, y los otros tamaños de imagen registrados se crean automáticamente.

Estos tres tamaños de imagen, así como el original. tamaño completo, son los únicos disponibles cuando edita una publicación e inserta medios, así que tiendo a establecer el ancho absoluto de mi tema para las páginas y publicaciones de ancho completo, y el ancho medio de la columna de contenido típico.

Haciendo más tamaños

Al editar un tema o crear widgets, los tres tamaños definidos en la configuración de sus medios pueden no ser suficientes. Siempre los dejo solo para el contenido, luego defino algunos nuevos tamaños de imagen en funciones.php archivo, como este:

add_image_size ('my-thumbnail', 400, 200, true);

Cada nuevo tamaño de imagen necesita un nombre, dimensiones de ancho y alto, y si las imágenes deben recortarse o no exactamente a este tamaño (verdadero o falso). Para las partes estructurales de un tema o widget, generalmente querrá recortar para que no rompa el diseño.

Foto principal

Desde la versión 2.9, WordPress nos ha permitido establecer una imagen específica como “Foto principal” para un post. Esta imagen no se inserta en el cuerpo de la publicación (a menos que la inserte usted mismo), sino que se puede usar estructuralmente en todo su tema, como una miniatura al lado del título de la publicación, o tal vez en el encabezado al ver esa publicación en particular. No incluir una imagen destacada parece perezoso dado el número de temas y widgets que dependen de ellos. Pega este fragmento en functions.php para recordarte cuándo guardar una publicación si olvidaste establecer una (fuente):

 add_action ('save_post', 'wpds_check_thumbnail'); add_action ('admin_notices', 'wpds_thumbnail_error'); función wpds_check_thumbnail ($ post_id) // cambiar a cualquier tipo de publicación personalizada if (get_post_type ($ post_id)! = 'post') devolver; if (! has_post_thumbnail ($ post_id)) // establece un transitorio para mostrar a los usuarios un mensaje de administrador set_transient ("has_post_thumbnail", "no"); // desenganche esta función para que no se repita infinitamente remove_action ('save_post', 'wpds_check_thumbnail'); // actualizar la publicación configurada en draft wp_update_post (array ('ID' => $ post_id, 'post_status' => 'draft')); add_action ('save_post', 'wpds_check_thumbnail');  else delete_transient ("has_post_thumbnail");  función wpds_thumbnail_error () // compruebe si el transitorio está configurado y muestra el mensaje de error si (get_transient ("has_post_thumbnail") == "no") echo "
Debes seleccionar Imagen destacada. Tu publicación está guardada pero no puede ser publicada.
"; delete_transient (" has_post_thumbnail ");

WordPress proporciona una función conveniente para obtener la imagen destacada y usarla en temas:

the_post_thumbnail ('my-thumbnail', array ('class' => 'my_post_thumbnail_css_class'));

La función toma 2 parámetros: el tamaño con nombre que está buscando y cualquier atributo que desee pasar, como una clase CSS personalizada (nota: no se puede anular el atributo alt). Si está modificando un tema muy antiguo, es posible que también deba agregar lo siguiente a su functions.php:

add_theme_support ('post-thumbnails');

Si prefiere simplemente obtener la URL real de la imagen destacada en lugar de generar también el HTML requerido, intente esto en su lugar (obteniendo el tamaño de imagen medio en este ejemplo):

$ thumbnail = wp_get_attachment_image_src (get_post_thumbnail_id (), 'medium'); echo $ thumbnail [0];

Imágenes Regeneradoras

Cada vez que cambie los tamaños de imagen predeterminados o cree una nueva definición de tamaño, solo se aplicará a nuevo subidas Todas sus imágenes existentes permanecen como las dimensiones originales. Sin embargo, nunca temas, hay un gran complemento que volverá a través de tus publicaciones y regenerará estos nuevos tamaños de imagen para ti. La Reconstrucción de miniaturas AJAX le permite seleccionar qué tamaños para regenerar y trabajará lentamente en su archivo. Esto no cambiará el tamaño de las imágenes que se han insertado en las publicaciones, ya que están fijas en el punto de inserción. La regeneración de imágenes hará que el nuevo tamaño esté disponible para usar en tus temas o en publicaciones futuras, pero no puedes editar automáticamente el tamaño de las imágenes existentes que ya se han insertado..

Encontrarás dos inconvenientes para hacer nuevas imágenes. En primer lugar, incluso si el tamaño de imagen que ha creado solo se usa para la imagen destacada como parte de un tema, se creará una nueva versión de cada imagen que haya subido, no solo la imagen destacada. Esta es una limitación de WordPress; una imagen destacada es como cualquier otra y no puede apuntarla específicamente con el add_image_size () función. Afortunadamente, el plugin Thumbnail Rebuild realmente te permite limitar esto a solo imagenes destacadas desde el archivo, pero todas las futuras cargas de imágenes serán administradas por WordPress, y creará el nuevo tamaño de imagen para todo. Ahora sería un buen momento para aprender la diferencia entre JPG y PNG. Saber cuándo usar qué formato de archivo: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC Saber cuándo usar qué formato de archivo: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC ¿Conoce las diferencias entre JPG y PNG, o MP3 y FLAC? Si no sabe qué formatos de archivo utilizar, permítanos guiarlo a través de sus distinciones. Lea más para que sepa utilizar el formato óptimo en el futuro..

En segundo lugar, incluso si ya no está utilizando un cierto tamaño, permanecerán en el servidor: WordPress no eliminará las imágenes que no utilice. En un sitio como MakeUseOf con cientos de miles de imágenes, esto significa un par de gigabytes desperdiciados. Para sitios más pequeños, el complemento de limpieza de imágenes lo ayudará a escanear y le dará la opción de eliminar; pero los sitios más grandes necesitarán aprender algo de línea de comandos y regex fu (vea nuestra guía rápida paraComenzando con la línea de comandos de Linux Una guía rápida Para comenzar con la línea de comandos de Linux Una guía rápida Para comenzar con la línea de comandos de Linux Puede hacer muchas cosas increíbles con comandos en Linux y realmente no es difícil de aprender. Lee mas ). Siempre tome una copia de seguridad completa primero, en caso de que elimine algo que no debería tener.

Mi tema no cambia

¿Así que ha editado un tema con sus nuevos tamaños de imagen y ha regenerado correctamente todas las imágenes destacadas existentes, pero aún no aparece el tamaño correcto? Probablemente tengas algo de CSS aplicado a la imagen o está rodeando el DIV entonces. Use el modo de depuración de su navegador. Descubra los problemas del sitio web con Chrome Developer Tools o Firebug. Resuelva los problemas del sitio web con Chrome Developer Tools o Firebug. para arreglarlos. Cuando se enfrenta con un bit de código no funcional, es muy ... Leer más para encontrar el CSS ofensivo y modificarlo en consecuencia. Y recuerde, solo puede cambiar el tamaño si la imagen de origen es lo suficientemente grande: WordPress y el complemento de miniaturas generadas no aumentarán la imagen debido a la pérdida de calidad..

WordPress tiene casi 11 años, por lo que es una prueba de su poder y flexibilidad que es una de las pocas aplicaciones web que se ha mantenido con vida durante tanto tiempo y no ha sido reemplazada. Las características como las miniaturas de las publicaciones ahora son omnipresentes en la web, y para su crédito, WordPress siempre ha estado al día con las tendencias de diseño. ¿Te importa, Ghost se ve bien en Wordpress Killer? Bienvenido a Ghost (y cómo instalarlo en una Raspberry Pi) Wordpress Killer? Bienvenido a Ghost (y cómo instalarlo en una Raspberry Pi) Leer más .

¿Tienes problemas con las imágenes destacadas? Publicar en los comentarios y veré si puedo ayudarte.

Explorar más sobre: ​​Wordpress.