Featured Images & Post Thumbnails
Las imágenes destacadas (también conocidas como miniaturas de entradas) son imágenes que representan una entrada, página o tipo de entrada personalizado. Cuando creas tu tema, puedes mostrar la imagen destacada de varias formas, en tu página de archivo, en tu encabezado o encima de una entrada, por ejemplo.
Habilitar el soporte para la imagen destacada
Los temas deben declarar el soporte para la función de imagen destacada para que la interfaz de imagen destacada aparezca en la pantalla de edición. Se declara el soporte colocando lo siguiente en el archivo functions.php de tu tema:
add_theme_support('post-thumbnails');Establecer una imagen destacada
Una vez que habilitas el soporte para las imágenes destacadas, el cuadro de meta para la imagen destacada será visible en las pantallas de edición de los elementos de contenido correspondientes. Si un usuario no puede verlo, puede habilitarlo en las opciones de pantalla. Por defecto, el cuadro de meta de la imagen destacada se muestra en la barra lateral de las pantallas de edición de entradas y páginas.
Referencia de funciones
add_image_size(): registra un nuevo tamaño de imagen.set_post_thumbnail_size(): registra un tamaño de imagen para la miniatura de la entrada.has_post_thumbnail(): verifica si la entrada tiene una imagen adjunta.the_post_thumbnail(): muestra la miniatura de la entrada.get_the_post_thumbnail(): obtiene la miniatura de la entrada.get_post_thumbnail_id(): obtiene el ID de la miniatura de la entrada.
Tamaños de imagen
Los tamaños de imagen predeterminados en WordPress son “Miniatura”, “Medio”, “Grande” y “Tamaño completo” (el tamaño original de la imagen que has subido). Estos tamaños de imagen se pueden configurar en el panel de Medios de la Administración de WordPress en Configuración > Medios. También puedes definir tu propio tamaño de imagen pasando una matriz con las dimensiones de la imagen:
the_post_thumbnail(); // Sin parámetros -> Miniatura
the_post_thumbnail('thumbnail'); // Miniatura (150px x 150px máximo por defecto)
the_post_thumbnail('medium'); // Resolución media (300px x 300px máximo por defecto)
the_post_thumbnail('medium_large'); // Resolución media-grande (768px x sin límite de altura máximo por defecto)
the_post_thumbnail('large'); // Resolución grande (1024px x 1024px máximo por defecto)
the_post_thumbnail('full'); // Resolución original de la imagen (sin modificar)
the_post_thumbnail(array(100, 100)); // Otros tamaños (altura, ancho) Agregar tamaños personalizados de imágenes destacadas
Además de definir tamaños de imagen individualmente utilizando the_post_thumbnail(array()), puedes crear tamaños personalizados de imagen destacada en el archivo functions.php de tu tema y luego llamarlos en los archivos de plantilla de tu tema.
add_image_size('category-thumb', 300, 9999); // 300 píxeles de ancho (y altura ilimitada) Aquí tienes un ejemplo de cómo crear tamaños personalizados de imágenes destacadas en el archivo functions.php de tu tema.
if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
set_post_thumbnail_size(150, 150, true); // dimensiones predeterminadas de la imagen destacada (recortada)
// tamaños de imágenes adicionales
// elimina la siguiente línea si no necesitas tamaños de imágenes adicionales
add_image_size('category-thumb', 300, 9999); // 300 píxeles de ancho (y altura ilimitada)
}Establecer el tamaño de la imagen destacada de salida
Para ser utilizado en el archivo functions.php de tu tema actual. Puedes utilizar set_post_thumbnail_size() para establecer el tamaño predeterminado de la imagen destacada redimensionando la imagen proporcionalmente (es decir, sin distorsionarla):
set_post_thumbnail_size(50, 50); // 50 píxeles de ancho por 50 píxeles de alto, modo de redimensionamiento Establece el tamaño predeterminado de la imagen destacada recortando la imagen (desde los lados o desde la parte superior e inferior):
set_post_thumbnail_size(50, 50, true); // 50 píxeles de ancho por 50 píxeles de alto, modo de recorte Estilizar las imágenes destacadas
Las imágenes destacadas tienen la clase “wp-post-image”. También obtienen una clase dependiendo del tamaño de la miniatura que se muestra. Puedes estilizar la salida con estos selectores CSS:
- img.wp-post-image
- img.attachment-thumbnail
- img.attachment-medium
- img.attachment-large
- img.attachment-full
También puedes darle a las imágenes destacadas sus propias clases utilizando el parámetro de atributo en the_post_thumbnail(). Muestra la imagen destacada con la clase “alignleft”:
the_post_thumbnail('thumbnail', array('class' => 'alignleft'));Ejemplos
Uso predeterminado
// verificar si la entrada o página tiene una imagen destacada asignada
if (has_post_thumbnail()) {
the_post_thumbnail();
}Nota: Para devolver la imagen destacada para usar en tu código PHP en lugar de mostrarla, usa get_the_post_thumbnail().
Enlazar al enlace permanente de la entrada o a una imagen más grande
Alerta: No uses estos dos ejemplos juntos en el mismo tema.
Ejemplo 1. Para enlazar las miniaturas de las entradas al enlace permanente de la entrada en un bucle específico, utiliza lo siguiente en los archivos de plantilla de tu tema:
<?php if (has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>Ejemplo 2. Para enlazar todas las miniaturas de las entradas en tu sitio web al enlace permanente de la entrada, coloca esto en el archivo functions.php de tu tema actual:
add_filter('post_thumbnail_html', 'my_post_image_html', 10, 3);
function my_post_image_html($html, $post_id, $post_image_id)
{
$html = '<a href="' . get_permalink($post_id) . '">' . $html . '</a>';
return $html;
}Este ejemplo enlaza al tamaño “large” de la miniatura de la entrada y debe utilizarse en The Loop.
<?php if (has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');
echo '<a href="' . $large_image_url[0] . '">';
the_post_thumbnail('thumbnail');
echo '</a>';
} ?>Archivo fuente
wp-includes/post-thumbnail-template.php
Valoraciones
No hay valoraciones aún.