Se você não estiver familiarizado com as imagens em destaque, leia o tutorial vinculado para aprender rapidamente todos os fundamentos das imagens em destaque. Embora o artigo vinculado forneça uma visão geral das imagens em destaque para iniciantes, este tutorial abordará o aspecto da programação.
Este tutorial mostrará como obter e definir o tamanho das imagens em destaque no WordPress. Se você quiser aprender como obter a imagem em destaque ou seu ID para uma postagem específica e verificar se uma postagem possui uma imagem em destaque, você deve ler minha postagem intitulada Como obter a imagem em destaque no WordPress.
Compreendendo vários tamanhos de imagem no WordPress
As imagens formam uma parte importante dos sites e ajudam a tornar a página mais viva e interessante. No entanto, eles também podem adicionar uma quantidade considerável de dados extras que os usuários precisam baixar para visualizar uma página. As coisas podem ficar ainda piores quando você está usando um único tamanho de imagem para exibir em todos os dispositivos grandes e pequenos.
Felizmente, o WordPress automatiza a criação de imagens ou tamanhos diferentes para você, para que você possa otimizar a entrega de conteúdo para diferentes visualizadores. Eu abordei esse tópico em detalhes no tutorial sobre como alterar os tamanhos das imagens em destaque no WordPress.
Resumindo, o WordPress tem vários tamanhos de imagem e um desses tamanhos de imagem padrão é chamado Miniatura. As dimensões para este tamanho de imagem estão disponíveis no painel de administração do WordPress navegando para Configurações > Mídia.
O padrão Miniatura tamanho da imagem é diferente de outro tamanho de imagem chamado pós-miniatura que é registrado sempre que um tema adiciona suporte para imagens em destaque.
O foco da discussão neste tutorial será o pós-miniatura size e aprenderemos como obter e definir seu valor.
Como definir o tamanho da imagem em destaque do WordPress
Você provavelmente desejará que o tamanho de suas imagens em destaque seja consistente. Uma maneira fácil de conseguir isso é com a ajuda de set_post_thumbnail_size() função. A função aceita três parâmetros: largura, altura e um valor booleano opcional especificando se você deseja recortar as imagens ou redimensioná-las. Isso está definido para false por padrão, o que significa que as imagens serão redimensionadas.
A linha a seguir instrui o WordPress a criar miniaturas de imagens com 1200px de largura e 628px de altura com redimensionamento.
1 |
set_post_thumbnail_size(1200, 628); |
Lembre-se de que as imagens serão redimensionadas para exatamente 1200px e 628px de largura somente se tiverem a mesma proporção. Caso contrário, eles serão redimensionados para ter uma largura ou altura correspondente, dependendo novamente da proporção.
Digamos que você não se importe com o corte das imagens, mas elas sempre precisam ter 1200px de largura e 628px de altura quando usadas como imagens em destaque. Nesse caso, você pode definir o terceiro parâmetro para ser true.
1 |
set_post_thumbnail_size(1200, 628, true); |
Todas as suas imagens em destaque agora serão cortadas para ter exatamente 1200px de largura e 628px de altura.
o set_post_thumbnail_size() função usa o add_image_size() função nos bastidores para registrar um tamanho de imagem para a miniatura do post. Se você deseja registrar quaisquer tamanhos de imagem adicionais, considere usar o add_image_size() função.
Mais uma coisa que gostaria de acrescentar é que adicionar esta chamada de função ao seu funções.php arquivo não resultará no redimensionamento de nenhuma imagem em destaque existente. Você terá que usar algum plug-in de regeneração de miniaturas para conseguir isso. Além disso, uma imagem menor não será ampliada para as dimensões da imagem em destaque que você especificou.
Como obter o tamanho de imagem em destaque do WordPress
Digamos que você queira descobrir o tamanho atualmente registrado para as imagens em destaque para ver se é o que você espera. Como você faz isso?
O WordPress nos oferece múltiplas funções para obter todas essas informações. Vou mencioná-los aqui brevemente.
o get_intermediate_image_sizes() A função é útil para quem quer apenas uma lista de diferentes tamanhos de imagens cadastradas. Isso não lhe dará nenhuma outra informação sobre os tamanhos das imagens. Aqui está sua saída para o meu site:
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 |
)
|
o wp_get_additional_image_sizes() A função mostra informações relacionadas a todos os outros tamanhos de imagem registrados, além miniatura, médio, médio Grande e ampla. Esta função retorna um array associativo de arrays com informações como largura, altura e recorte para os tamanhos de imagem registrados. Aqui está a saída desta função para mim:
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 |
)
|
Você pode ver o post-thumbnail size que registrei na saída acima. também tem crop definido como 1, o que significa que as miniaturas serão cortadas em vez de redimensionadas.
Digamos que você queira informações sobre todos os tamanhos de imagem registrados para um site WordPress. o wp_get_registered_image_subsizes() função é sua melhor aposta nesse caso. Aqui está minha saída com uma chamada para esta função:
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 |
)
|
Isso fornece todas as informações que você pode precisar sobre tamanhos de imagem registrados no WordPress, incluindo o tamanho da imagem em destaque representado pelo post-thumbnail chave.
Estilizando imagens em destaque
Alguns desenvolvedores de temas podem querer estilizar as imagens em destaque de maneira diferente das imagens comuns. O WordPress facilita incrivelmente a diferenciação entre os dois com seletores de CSS.
Qualquer imagem em destaque que você produzir no site terá uma classe chamada wp-post-image já aplicado a ele. A imagem também terá algumas outras classes opcionais adicionadas a ela, como size-post-thumbnail ou size-large. dependendo do tamanho que você solicitou para a imagem em destaque.
Isso permite que você direcione imagens em destaque de um tamanho específico e aplique estilos de acordo.
Pensamentos finais
Este tutorial abordou tudo o que você precisa saber sobre como obter ou definir o tamanho das imagens em destaque em qualquer instalação do WordPress. Agora você deve ser capaz de especificar exatamente o tamanho que deseja que suas imagens em destaque tenham e, em seguida, estilizar essas imagens com base nas classes específicas aplicadas a elas.
