Alterando as dimensões do controle deslizante no elegante tema WordPress
Nota: Este guia foi atualizado para a versão Classy 1.10+
Tenho recebido alguns pedidos me perguntando como alterar o tamanho do Nivo e Content Sliders no Classy WordPress Theme, então decidi fazer um tutorial aqui mostrando todos os passos envolvidos na alteração do tamanho da imagem em destaque, CSS e arquivos de modelo para que você possa definir seu próprio tamanho de controle deslizante.
Etapa 1: alterar o tamanho da imagem em destaque em Functions.php
A primeira coisa que você deve fazer é alterar o tamanho da imagem do slider conforme definido em functions.php para que ela seja cortada corretamente quando carregada na sua biblioteca de mídia.
* Abra functions.php e mude a linha 122
add_image_size( ‘nivo-slider’, [highlight]980[/highlight], [highlight]400[/highlight], true);
* O primeiro valor 980 é a largura da imagem do slider e 400 é a altura da imagem do slider. Altere-os para atender às suas necessidades.
Etapa 2: edite seu CSS
Em seguida, edite seu CSS para alterar a altura do contêiner do seu controle deslizante.
Nota : Você só precisa fazer isso para o “NivoSlider” porque o controle deslizante de conteúdo mudará a altura com base no conteúdo automaticamente.
* Abra style.css e altere o valor da altura entre as linhas 1132-1140
#slider_nivo {
posição: relativa;
[destaque]largura: 980px;[/destaque]
margem superior: -30px;
margem esquerda: -25px;
margem direita: -25px;
margem inferior: 30px;
[destaque]altura: 400px;[/destaque]
estouro: oculto;
}
Etapa 3: edite seus arquivos de modelo
A próxima etapa é editar seus arquivos de modelo para que o código corresponda às novas dimensões.
uma. Alterar controle deslizante de imagem do Nivo: Abra includes/sliders/nivo.php e entre as linhas (32-36) altere os valores da imagem para refletir suas novas dimensões.
<a href=”<?php echo $slidelink ?>” title=”<?php the_title(); ?>”><img src=”<?php echo $featured_image[0]; ?>” alt=”< ?php the_title(); ?>” <?php if($options[‘disable_caption’] != ‘disable’) { ?>title=”<?php the_title(); ?>”<?php } ?> [ destaque]width=”980″ height=”400″[/highlight] /></a>
<?php
// nenhum meta link definido, mostra img simples
} mais { ?>
<img src=”<?php echo $featured_image[0]; ?>” alt=”<?php the_title(); ?>” <?php if($options[‘disable_caption’] != ‘disable’) { ?>title=”<?php the_title(); ?>”<?php } ?> [highlight]width=”980″ height=”400″[/highlight] />
b. Alterar o controle deslizante de conteúdo para slides de imagem: Abra includes/sliders/content.php e entre as linhas (29-36) altere os valores da imagem para refletir suas novas dimensões.
<a href=”<?php echo $slidelink ?>” title=”<?php the_title(); ?>”><img src=”<?php echo $featured_image[0]; ?>” alt=”< ?php the_title(); ?>” [highlight]width=”980″ height=”400″[/highlight] /></a>
</div>
<!– END .slide-image –>
<?php
// nenhum meta link definido, mostra img simples
} mais { ?>
<div>
<img src=”<?php echo $featured_image[0]; ?>” alt=”<?php the_title(); ?>” [highlight]width=”980″ height=”400″[/highlight] />
Passo 4: Regenere suas imagens (somente se você precisar recortar suas imagens)
Lembra que no passo 1 mudamos o tamanho da imagem do slider em functions.php? Bem, este é o valor que o WordPress usa para cortar suas imagens quando elas são carregadas, portanto, se você já tiver imagens em sua biblioteca de mídia, precisará “regenerá-las” para refletir suas alterações.
Para fazer isso, você pode baixar o plugin “ Regenerate Thumbnails ” e executá-lo 1 vez.
Depois de executar o plugin (em ferramentas em seu painel), você não precisará mais fazer isso porque todas as novas imagens serão cortadas usando os valores definidos na etapa 1 em seu functions.php.
