Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Alterando as dimensões do controle deslizante no elegante tema WordPress

Você está em:

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.

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.