Quando instala um tema novo no WordPress, o slider quase nunca se ajusta às dimensões do seu conteúdo. Tem capturas de ecrã 16:9, capas de produtos, imagens quadradas, e o tema corta-as para as suas próprias proporções. Metade do enquadramento é cortado e a montra principal do seu site parece ter sido montada de olhos fechados.

Mas isto não é um bug do tema. São configurações fixas que residem em três locais: o registo do tamanho das miniaturas no functions.php, o contentor CSS do slider e os templates de saída. A quarta camada é regenerar as imagens já carregadas para o novo tamanho. Corrija as quatro e o slider alinha na perfeição.

Abaixo está uma explicação passo a passo usando o tema Classy da WPExplorer como exemplo. Mas a lógica é universal: qualquer tema clássico com um slider Nivo ou um slider personalizado que use add_image_size edita os mesmos ficheiros.

💡 Visão geral rápida:

• Altere add_image_size no functions.php, isto controla o corte no momento do upload
• Edite width e height do contentor no style.css para que o layout não colapse
• Atualize os atributos width e height nos templates nivo.php e content.php para que o navegador não estique a img
• Execute o Regenerate Thumbnails na sua biblioteca de media, as imagens antigas são recriadas no novo tamanho

Todo o processo é mostrado neste vídeo:

Passo 1. Alterar o tamanho da miniatura no functions.php

Quando o WordPress carrega uma imagem, processa-a através de todos os tamanhos registados. O registo acontece através da função add_image_size. O tema declara um slider de 980×400, mas precisa de 1200×500, portanto precisa de editar aqui.

Abra o functions.php do tema. Caminho: Aparência → Editor de Ficheiros do Tema no painel de administração, ou via FTP em /wp-content/themes/theme-name/. No Classy, a linha add_image_size para o slider está por volta da linha 122:

1
add_image_size( 'nivo-slider', 980, 400, true );

O primeiro parâmetro é a largura, o segundo é a altura, o terceiro (true) é o corte rígido. Se definir false, o WordPress ajusta a imagem pelo lado menor sem cortar. Parece tentador, mas o slider pode "flutuar" em altura de imagem para imagem.

Substitua pelos seus valores e guarde:

1
add_image_size( 'nivo-slider', 1200, 500, true );

A partir deste ponto, todos os novos uploads são cortados para o seu tamanho. Os antigos ainda não, trataremos deles no passo 4.

Passo 2. Corrigir o contentor CSS

Alterou o tamanho da miniatura. Mas o contentor do slider no layout ainda vive com os valores antigos do CSS. A imagem carrega corretamente, mas o bloco ou a corta ou deixa espaço vazio nas bordas.

No Classy, o contentor do slider Nivo está descrito no style.css, linhas 1132-1140:

1
#slider_nivo {
2
    position: relative;
3
    width: 980px;
4
    margin-top: -30px;
5
    margin-left: -25px;
6
    margin-right: -25px;
7
    margin-bottom: 30px;
8
    height: 400px;
9
    overflow: hidden;
10
}

Altere width e height para os seus valores:

1
#slider_nivo {
2
    position: relative;
3
    width: 1200px;
4
    margin-top: -30px;
5
    margin-left: -25px;
6
    margin-right: -25px;
7
    margin-bottom: 30px;
8
    height: 500px;
9
    overflow: hidden;
10
}

Nuance importante: isto edita especificamente o slider Nivo. O Content Slider no Classy ajusta a altura automaticamente com base no conteúdo, não precisa de lhe tocar. Noutros temas a lógica é a mesma: encontre o seletor do slider específico que está a alterar e não mexa nos adjacentes.

Passo 3. Atualizar atributos nos templates

O add_image_size devolve o URL da miniatura correta. Mas a marcação HTML do slider contém width="980" height="400" fixos. Deixe os valores antigos e o navegador vai esticar ou comprimir a imagem para os igualar. Resultado: imagem desfocada ou esmagada, mesmo que a fonte esteja correta.

No Classy, dois ficheiros precisam de edição.

Nivo Image Slider, ficheiro includes/sliders/nivo.php, linhas 32-36:

1
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>">
2
  <img src="<?php echo $featured_image[0]; ?>" 
3
       alt="<?php the_title(); ?>" 
4
       width="1200" height="500" />
5
</a>

Content Slider para slides de imagem, ficheiro includes/sliders/content.php, linhas 29-36:

1
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>">
2
  <img src="<?php echo $featured_image[0]; ?>" 
3
       alt="<?php the_title(); ?>" 
4
       width="1200" height="500" />
5
</a>

Edite ambos, guarde. Se o tema usar background-image no CSS em vez de <img>, não toque nos templates, o passo 2 é suficiente.

Passo 4. Regenerar imagens antigas

No passo 1 alterámos o add_image_size. Os novos uploads são feitos com o corte correto. Mas todas as imagens na biblioteca de media carregadas antes da edição estão armazenadas no tamanho antigo. O slider olha para elas e obtém as proporções erradas.

Solução: o plugin Regenerate Thumbnails. Ele percorre toda a biblioteca de media e recria as miniaturas para os tamanhos atualmente registados. Instalação padrão: Plugins → Adicionar Novo → pesquisar "Regenerate Thumbnails" → Instalar → Ativar.

Após a ativação: Ferramentas → Regenerate Thumbnails → "Regenerate All Thumbnails". Para uma biblioteca grande, o processo demora alguns minutos, o plugin desencadeia a regeneração de todos os tamanhos declarados em cada imagem.

O plugin também pode eliminar tamanhos de miniatura não utilizados, libertando espaço no servidor. Depois de executar uma vez, não precisará mais dele: todos os uploads futuros passarão pelo novo valor de add_image_size.

Se tiver acesso à consola do servidor, o WP-CLI é mais rápido:

1
wp media regenerate --yes

Sem sobrecarga de pedidos HTTP e não atinge timeouts em bibliotecas grandes.

O que fazer se o slider continuar a falhar

Às vezes completou os quatro passos, mas o slider comporta-se de forma estranha. Percorra esta lista de verificação:

• Especificidade CSS: o seu novo width/height está a ser substituído por um seletor mais específico no tema. Abra o inspetor do navegador e veja qual a regra que está realmente a ser aplicada ao elemento.
• Cache: limpe a cache do navegador (Ctrl+F5). Se tiver um plugin de cache no servidor como WP Rocket ou LiteSpeed Cache, limpe essa também.
• Tema filho: editar o tema principal diretamente significa que as alterações são eliminadas na próxima atualização. Crie um tema filho e mova as suas edições para lá.
• Responsivo: a largura do contentor é maior do que a largura do site? Em mobile, o slider transborda a borda. Adicione max-width: 100% e height: auto numa media query para mobile.

A atualização do tema estragou tudo: como se proteger

A principal dor de editar o tema principal: as atualizações substituem os ficheiros e as suas alterações desaparecem. O slider regressa silenciosamente às configurações de fábrica.

A abordagem correta é um tema filho. Mova três coisas para lá:

• Substitua o add_image_size no functions.php do tema filho através do hook after_setup_theme;
• Substitua o CSS, o style.css do filho carrega depois do pai, as suas regras vencem por cascata;
• Templates do slider, copie nivo.php e content.php para o tema filho com a mesma estrutura de pastas (includes/sliders/). O WordPress usa automaticamente a versão do filho.

Após isto, as atualizações do tema principal não representam ameaça para os seus tamanhos.

⁉️🤔 Perguntas frequentes

Tenho de editar os três ficheiros: functions.php, style.css e templates?

Sim, caso contrário o resultado será incompleto. Alterou apenas o add_image_size sem o CSS e o contentor corta a nova imagem. Sem os templates, o navegador estica a imagem para o width/height antigo e ela fica desfocada. Três edições dão um dimensionamento consistente em todas as camadas: registo da miniatura → contentor → atributos HTML.

Preciso de mexer no content.php se usar apenas o slider Nivo?

Não. O content.php é para o content slider, aquele que puxa texto e imagens dos artigos. Se o content slider não for usado no site, pode saltar o ficheiro. Mas na dúvida, a edição demora um minuto, mais vale fazer ambos.

O plugin Regenerate Thumbnails apaga os meus originais?

Não. A imagem original, em tamanho completo, permanece intocada. O plugin apenas recria as miniaturas: os tamanhos registados via add_image_size e em Definições → Media. A opção de eliminar tamanhos não utilizados também não toca no original, limpa miniaturas "órfãs" não declaradas no tema ou plugins.

E se o add_image_size não estiver no tema e o slider funcionar de forma diferente?

Alguns temas modernos não usam add_image_size para o slider. Em vez disso, carregam a imagem original e controlam o tamanho através de CSS: object-fit: cover ou background-size: cover. Neste caso, o passo 2 é suficiente, edite apenas o contentor CSS. Verifique no inspetor do navegador qual o URL que está realmente a carregar no slider: se for image.jpg sem um sufixo -980x400, não precisa dos passos 1 e 4.

Preciso de um backup antes de editar o functions.php?

Absolutamente. Um erro de digitação no functions.php e o site cai num Ecrã Branco da Morte. Antes de editar, descarregue o ficheiro via FTP ou copie o conteúdo para um editor de texto. Se o site cair, carregue o functions.php original de volta, o site revive instantaneamente.

Slider personalizado: resumo final

O algoritmo é universal para qualquer tema WordPress clássico: registo de tamanho → contentor CSS → templates HTML → regenerar imagens antigas. Quatro passos e o slider funciona nas suas proporções sem cortes ou desfoque.

O principal é não editar o tema principal diretamente. Mova as alterações para um tema filho logo após confirmar que os tamanhos se adequam. Assim, nenhuma atualização fará o slider regressar às configurações de fábrica.