Como alterar os tamanhos de imagem em destaque no WordPress

As imagens em destaque são usadas no WordPress de várias maneiras, dependendo do tema que você está usando. A maioria dos temas usa imagens em destaque como uma visualização em miniatura de uma das imagens em uma postagem ou página que normalmente é exibida na página inicial e nas páginas de arquivo.

Essa funcionalidade foi introduzida com o WordPress 2.9 e era originalmente conhecida como “miniaturas de postagem”. A maioria dos temas do WordPress (incluindo o nosso) agora usa imagens em destaque para muitas outras finalidades, como galerias de imagens, controles deslizantes de recursos e imagens de cabeçalho de página. Por exemplo, em nosso tema Full Frame, a imagem em destaque se torna a imagem de fundo da postagem.

As imagens em destaque são, obviamente, muito importantes para criativos e qualquer pessoa que crie um site WordPress que contenha muitas imagens. Para usar imagens em destaque em qualquer tema da Graph Paper Press, tudo o que você precisa fazer é selecionar uma imagem em destaque no link no lado direito da tela no editor de postagem.

Se o tamanho da imagem em destaque padrão definido em seu tema funcionar para seus propósitos, ótimo. Caso contrário, é possível alterar o tamanho com uma pequena edição de código.

Por que você deseja alterar o tamanho da imagem em destaque? Além de aumentar ou diminuir as galerias de miniaturas, você pode querer alterar a proporção das dimensões. Digamos, por exemplo, que você seja um fotógrafo de paisagens e seu portfólio seja composto de panoramas abrangentes. Nesse caso, se a imagem em destaque padrão do tema for quadrada, ela acabará recortando a maior parte da sua imagem. Você pode corrigir isso ajustando as dimensões manualmente para algo mais adequado.

Alterando o tamanho da imagem em destaque em functions.php

Para editar os tamanhos das imagens em destaque do padrão, você precisará alterar algum código no arquivo functions.php . Este arquivo pode ser acessado via FTP ou você pode editá-lo diretamente no painel do WordPress em Aparência > Editor. Eu sempre recomendaria a primeira abordagem sobre a segunda.

Antes de fazer qualquer alteração neste arquivo, sempre vale a pena certificar-se de ter um backup da versão original caso algo dê errado. Se você ainda não tem os arquivos do tema original em seu computador, certifique-se de baixar pelo menos o arquivo functions.php e salvá-lo em uma pasta de backup.

Existem duas maneiras diferentes de redimensionar uma imagem em destaque. Para redimensioná-la proporcionalmente (ou seja, para evitar esticar ou compactar a imagem) use o seguinte código:

 set_post_thumbnail_size( 50, 50 ); // 50 pixels de largura por 50 pixels de altura, modo de redimensionamento

você também pode optar por redimensionar a imagem cortando-a com este código:

 set_post_thumbnail_size( 50, 50, true ); // 50 pixels de largura por 50 pixels de altura, modo de corte

Isso define o tamanho padrão das imagens em destaque.

Adicionando tamanhos de imagem adicionais

Também é possível adicionar quantos tamanhos de imagem adicionais forem necessários adicionando uma linha extra de código para cada tamanho de imagem:

 add_image_size( 'categoria-polegar', 300, 9999 ); // 300 pixels de largura (e altura ilimitada)

Você pode usar esse novo tamanho em seu modelo de tema com o seguinte código:

 <?php the_post_thumbnail( 'category-thumb' ); ?>

Esse recurso é útil se você deseja exibir imagens em destaque de várias maneiras diferentes. Por exemplo, você pode definir um tamanho de miniatura para suas galerias de imagens e um tamanho maior para o cabeçalho da postagem.

Lembre-se de que as imagens que você envia devem ser pelo menos tão grandes quanto as dimensões que você definiu para suas imagens em destaque. Se você enviar imagens menores, elas serão ampliadas e acabarão ficando pixeladas e desfocadas.

Reconstruindo suas imagens em destaque

Alterar o tamanho da imagem em destaque afetará apenas os uploads a partir do momento em que o código for alterado. Quaisquer uploads anteriores terão sido salvos nas dimensões originais, portanto, você precisará gerá-los novamente.

Se você tiver apenas algumas imagens para redimensionar, poderá enviá-las novamente manualmente. Se você tiver mais do que um punhado, é melhor usar um plugin como Regenerate Thumbnails para fazer todo o trabalho duro para você. Este plug-in pode ser acessado através do menu Ferramentas e redimensionará uma ou mais imagens em sua galeria de mídia que você selecionar.

Deixe suas edições à prova de futuro com um tema filho

O problema de fazer edições diretamente no seu arquivo functions.php é que elas serão perdidas se uma nova versão do tema for lançada e você precisar atualizá-la. Você pode anotar o código que adicionou e inseri-lo no novo arquivo functions.php , mas isso pode se tornar entediante, principalmente se você estiver fazendo muitas edições ou se houver novas versões do tema sendo lançadas com frequência.

Usar um tema filho resolve esse problema, pois quando o tema pai é atualizado, o tema filho fica intacto. Se você estiver fazendo alguma edição no código de um tema, seja no arquivo functions.php , nas folhas de estilo ou em qualquer outro arquivo, é sempre uma boa prática usar um tema filho.

Já temos um guia completo para criar um tema filho no blog, mas aqui está o que você precisa saber para nossos propósitos.

Para criar um tema filho, conecte-se ao seu site via FTP e crie uma nova pasta em /wp-content/themes/ para seu novo tema filho. É uma prática comum nomear a pasta com o mesmo nome do tema que você deseja editar, com “-child” anexado a ela. Por exemplo: “awesome-child” se você estiver criando um tema filho do tema Awesome.

Você deve criar uma folha de estilo dentro da pasta do tema filho, mesmo que não pretenda editar o CSS. Crie um novo arquivo chamado style.css e cole o seguinte código:

 /*
Nome do Tema: Criança Incrível
URI do tema: http://example.com/awesome-child/
Descrição: Tema infantil incrível
Autor: Graph Paper Press
URI do autor: http://example.com
Modelo: Incrível
Versão: 1.0.0
Tags: claro, escuro, layout responsivo, pronto para acessibilidade
Domínio de texto: awesome-child
*/

@import url("../awesome/style.css");

/* =A personalização do tema começa aqui
-------------------------------------------------- ------------ */

Altere o nome do tema e outros detalhes conforme apropriado.

Para adicionar a funcionalidade para alterar a imagem em destaque em seu tema filho, você precisará criar um novo arquivo functions.php , então vá em frente e faça isso no diretório do tema filho. Este arquivo será carregado além do functions.php do tema pai.

O modelo para functions.php se parece com isso:

 <?php //Abrindo tag PHP

// funções

?> // Fechando a tag PHP

Você pode então adicionar seu código de redimensionamento de imagem entre as tags PHP, então você terá algo assim:

 <?php // Abrindo a tag PHP

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // dimensões padrão do Post Thumbnail (cortado)

// tamanhos de imagem adicionais
// exclui a próxima linha se você não precisar de tamanhos de imagem adicionais
add_image_size( 'categoria-polegar', 300, 9999 ); //300 pixels de largura (e altura ilimitada)
}

?> // Fechando a tag PHP

Depois de terminar de criar o código do seu tema filho, você precisará ativá-lo. Você pode fazer isso através do painel do site, em Painéis de Administração > Aparência > Temas . Encontre seu tema filho na lista e clique em Ativar.

Admire suas novas imagens em destaque redimensionadas

Alterar o tamanho das imagens em destaque e adicionar novos tamanhos de imagem é uma tarefa bastante simples, mas requer alguma edição de código. Por causa disso, alguns usuários preferem usar um plug-in para lidar com o redimensionamento da imagem, mas adicionar plug-ins adicionais é sempre um risco de segurança. Entrar nos bastidores e fazer algumas alterações simples no código como esse pode realmente ajudar a aumentar sua confiança no uso do WordPress e tornará mais fácil personalizar temas e torná-los realmente seus.