¿Cómo obtener y establecer tamaños de imagen destacados en su tema de WordPress?

Las imágenes destacadas se han convertido en una parte importante de WordPress desde que se lanzaron por primera vez con WordPress 2.9. Algunos artículos y tutoriales también pueden referirse a ellos como Publicar miniaturas, pero significan lo mismo.

Si no está familiarizado con las imágenes destacadas, lea el tutorial vinculado para aprender rápidamente todos los conceptos básicos de las imágenes destacadas. Si bien el artículo vinculado proporciona una descripción general de las imágenes destacadas para principiantes, este tutorial cubrirá el aspecto de la programación.

Este tutorial le mostrará cómo obtener y configurar el tamaño de las imágenes destacadas en WordPress. Si desea aprender cómo obtener la imagen destacada o su ID para una publicación en particular y verificar si una publicación tiene una imagen destacada, debe leer mi publicación titulada Cómo obtener la imagen destacada en WordPress.

Comprender varios tamaños de imagen en WordPress

Las imágenes forman una parte importante de los sitios web y ayudan a hacer que una página sea más animada e interesante. Sin embargo, también pueden agregar una cantidad considerable de datos adicionales que los usuarios necesitan descargar para ver una página. Las cosas pueden empeorar aún más cuando utiliza un tamaño único de imagen para mostrar en todos los dispositivos, grandes y pequeños.

Afortunadamente, WordPress automatiza la creación de imágenes o de diferentes tamaños para que puedas optimizar la entrega de contenido para diferentes espectadores. He cubierto este tema en detalle en el tutorial sobre cambiar el tamaño de las imágenes destacadas en WordPress.

En resumen, WordPress tiene varios tamaños de imagen y uno de esos tamaños de imagen predeterminados se llama Miniatura. Las dimensiones para este tamaño de imagen están disponibles en el panel de administración de WordPress navegando a Configuración > Medios.

El valor por defecto Miniatura el tamaño de la imagen es diferente de otro tamaño de imagen llamado post-miniatura que se registra cada vez que un tema agrega soporte para imágenes destacadas.

El foco de discusión en este tutorial va a ser el post-miniatura size y aprenderemos a obtener y establecer su valor.

Lo más probable es que desee que el tamaño de sus imágenes destacadas sea consistente. Una manera fácil de lograr esto es con la ayuda de set_post_thumbnail_size() función. La función acepta tres parámetros: ancho, alto y un valor booleano opcional que especifica si desea recortar las imágenes o cambiar su tamaño. Esto está configurado para false de forma predeterminada, lo que significa que se cambiará el tamaño de las imágenes.

La siguiente línea le indica a WordPress que cree miniaturas de imágenes de 1200 px de ancho y 628 px de alto con cambio de tamaño.

1
set_post_thumbnail_size(1200, 628);

Tenga en cuenta que las imágenes se redimensionarán para que tengan exactamente 1200 px y 628 px de ancho solo si tienen la misma relación de aspecto. De lo contrario, se redimensionarán para que tengan un ancho o una altura coincidentes dependiendo nuevamente de la relación de aspecto.

Digamos que no le importa que las imágenes se recorten, pero siempre deben tener 1200 px de ancho y 628 px de alto cuando se usan como imágenes destacadas. En ese caso, puede configurar el tercer parámetro para que sea true.

1
set_post_thumbnail_size(1200, 628, true);

Todas sus imágenes destacadas ahora se recortarán para que tengan exactamente 1200 px de ancho y 628 px de alto.

Él set_post_thumbnail_size() función utiliza el add_image_size() función detrás de escena para registrar un tamaño de imagen para la miniatura de la publicación. Si desea registrar cualquier tamaño de imagen adicional, debe considerar usar el add_image_size() función.

Una cosa más que me gustaría agregar es que agregar esta llamada de función a su funciones.php archivo no dará como resultado el cambio de tamaño de las imágenes destacadas existentes. Tendrá que usar algún complemento de regeneración de miniaturas para lograrlo. Además, una imagen más pequeña no se ampliará a las dimensiones de la imagen destacada que especificó.

Digamos que desea averiguar el tamaño registrado actualmente para las imágenes destacadas para ver si es lo que espera. ¿Cómo haces eso?

WordPress nos ofrece múltiples funciones para obtener toda esta información. Los mencionaré aquí brevemente.

Él get_intermediate_image_sizes() La función es útil para cualquiera que solo quiera una lista de diferentes tamaños de imagen registrados. Esto no le dará ninguna otra información sobre los tamaños de imagen. Aquí está su salida para mi sitio web:

1
Array
2
(
3
    [0] => thumbnail
4
    [1] => medium
5
    [2] => medium_large
6
    [3] => large
7
    [4] => 1536x1536
8
    [5] => 2048x2048
9
    [6] => post-thumbnail
10
    [7] => woocommerce_thumbnail
11
    [8] => woocommerce_single
12
    [9] => woocommerce_gallery_thumbnail
13
)

Él wp_get_additional_image_sizes() La función le muestra información relacionada con todos los demás tamaños de imagen registrados además miniatura, medio, mediano grande y largo. Esta función devuelve una matriz asociativa de matrices con información como el ancho, la altura y el recorte de los tamaños de imagen registrados. Aquí está el resultado de esta función para mí:

1
Array
2
(
3
    [1536x1536] => Array
4
        (
5
            [width] => 1536
6
            [height] => 1536
7
            [crop] => 
8
        )
9

10
    [2048x2048] => Array
11
        (
12
            [width] => 2048
13
            [height] => 2048
14
            [crop] => 
15
        )
16

17
    [post-thumbnail] => Array
18
        (
19
            [width] => 1200
20
            [height] => 628
21
            [crop] => 1
22
        )
23

24
    [woocommerce_thumbnail] => Array
25
        (
26
            [width] => 324
27
            [height] => 324
28
            [crop] => 1
29
        )
30

31
    [woocommerce_single] => Array
32
        (
33
            [width] => 416
34
            [height] => 0
35
            [crop] => 0
36
        )
37

38
    [woocommerce_gallery_thumbnail] => Array
39
        (
40
            [width] => 100
41
            [height] => 100
42
            [crop] => 1
43
        )
44

45
)

Puedes ver el post-thumbnail tamaño que registré en la salida anterior. También tiene crop establecido en 1, lo que significa que las miniaturas se recortarán en lugar de cambiar su tamaño.

Supongamos que desea información sobre todos los tamaños de imagen registrados para un sitio web de WordPress. Él wp_get_registered_image_subsizes() la función es su mejor apuesta en ese caso. Aquí está mi salida con una llamada a esta función:

1
Array
2
(
3
    [thumbnail] => Array
4
        (
5
            [width] => 180
6
            [height] => 180
7
            [crop] => 
8
        )
9

10
    [medium] => Array
11
        (
12
            [width] => 420
13
            [height] => 420
14
            [crop] => 
15
        )
16

17
    [medium_large] => Array
18
        (
19
            [width] => 768
20
            [height] => 0
21
            [crop] => 
22
        )
23

24
    [large] => Array
25
        (
26
            [width] => 1024
27
            [height] => 1024
28
            [crop] => 
29
        )
30

31
    [1536x1536] => Array
32
        (
33
            [width] => 1536
34
            [height] => 1536
35
            [crop] => 
36
        )
37

38
    [2048x2048] => Array
39
        (
40
            [width] => 2048
41
            [height] => 2048
42
            [crop] => 
43
        )
44

45
    [post-thumbnail] => Array
46
        (
47
            [width] => 1200
48
            [height] => 628
49
            [crop] => 1
50
        )
51

52
    [woocommerce_thumbnail] => Array
53
        (
54
            [width] => 324
55
            [height] => 324
56
            [crop] => 1
57
        )
58

59
    [woocommerce_single] => Array
60
        (
61
            [width] => 416
62
            [height] => 0
63
            [crop] => 
64
        )
65

66
    [woocommerce_gallery_thumbnail] => Array
67
        (
68
            [width] => 100
69
            [height] => 100
70
            [crop] => 1
71
        )
72

73
)

Esto le brinda toda la información que pueda necesitar sobre los tamaños de imagen registrados en WordPress, incluido el tamaño de imagen destacado indicado por el post-thumbnail llave.

Es posible que algunos desarrolladores de temas deseen aplicar un estilo diferente a las imágenes destacadas que a las imágenes normales. WordPress hace que sea increíblemente fácil para nosotros diferenciar entre los dos con selectores de CSS.

Cualquier imagen destacada que envíe al sitio web tendrá una clase denominada wp-post-image ya se le aplicó. La imagen también tendrá algunas otras clases opcionales agregadas como size-post-thumbnail o size-large. dependiendo del tamaño que haya solicitado para la imagen destacada.

Esto le permite orientar imágenes destacadas de un tamaño específico y aplicar estilos en consecuencia.

Pensamientos finales

Este tutorial cubrió todo lo que necesita saber sobre cómo obtener o configurar el tamaño de las imágenes destacadas en cualquier instalación de WordPress. Ahora debería poder especificar exactamente qué tamaño desea que tengan sus imágenes destacadas y luego diseñar esas imágenes en función de las clases específicas que se les aplican.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *