A utilização de sliders de imagens relativas aos artigos com o respetivo link tem sido uma prática comum nos websites no dia de hoje, sendo esta uma forma de aumentar a linkagem entra artigos e fazer com que os visitantes não leiam só o artigo em questão como também tenham á sua disposição outros artigos que sejam ou não relacionados com o mesmo tema. Este tipo de abordagem pode fazer com que a taxa de rejeição dos seus artigos seja menor, fazendo também com que os visitantes naveguem durante mais tempo e em mais páginas nos seus websites. Assim, esta pode ser considerada uma boa prática quando se pretende que os visitantes visualizem mais conteúdos e continuem a ter interesse acentuado no seu website. Neste artigo vamos-lhe mostrar como criar um slider de artigos que poderá inserir em qualquer local do seu website. Este artigo foi baseado no slider criado por Carina Javier para o WP Tuts. De notar que para a conclusão deste artigo o usuário deve ter alguns conhecimentos de CSS, uma vez que provavelmente terá de utilizar os seus conhecimentos para fazer as alterações necessárias para que o slider seja apresentado corretamente não só em termos visuais, como também em termos de posicionamento do mesmo.
1. DOWNLOAD DE FICHEIROS
Para a conclusão deste artigo irá necessitar de fazer o download de um ficheiro javascript que irá ser o núcleo do slider, denominado CarouFredSel, um ficheiro criado propositadamente para o efeito que poderá ser baixado em CarouFredSel. Depois de baixado o ficheiro (que á data de criação deste artigo estava na versão 6.1.0) insira-o no diretório que pretender e achar mais oportuno. De notar que irá necessitar de linkar para este ficheiro durante a execução deste artigo.
2. EDITAR FICHEIRO FUNCTIONS.PHP
Para a conclusão deste artigo iremos necessitar de alterar três ficheiros do seu theme distintos: o functions.php, o style.css e o ficheiro onde você pretenda inserir o slider. Assim, começamos com o ficheiro functions.php presente no diretório do seu theme WordPress. Edite-o e insira o seguinte código:
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'sliderimg', 200, 150, true );
}
Este pequeno trecho de código irá determinar a função e o tamanho das imagens a ser apresentadas. Desde já poderá começar a determinar ao seu gosto qual o tamanho das imagens a ser utilizadas durante o artigo e que serão apresentadas no seu slider final.
De seguida é necessário fazer a chamada aos ficheiros Javascript que irão ser utilizados, nomeadamente o ficheiro que foi baixado no ponto anterior e um ficheiro que iremos criar mais à frente. Assim, insira o seguinte código dentro do ficheiro functions.php:
function load_caroufredsel() {
wp_register_script( 'caroufredsel', get_template_directory_uri() . '/js/jquery.carouFredSel-6.1.0-packed.js', array( 'jquery' ), '6.1.0', true );
wp_enqueue_script( 'caroufredsel_pre', get_template_directory_uri() . '/js/caroufredsel_pre.js', array( 'caroufredsel' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'load_caroufredsel' );
3. CRIANDO UM FICHEIRO AUXILIAR
Para o correto funcionamento do slider iremos necessitar de criar um ficheiro Javascript onde iremos inserir alguns dados:
jQuery(function($) {
$('#foo2').carouFredSel({
prev: '#prev2',
next: '#next2',
auto: false,
items: 3,
});
});
Neste ficheiro estamos a introduzir alguns comportamentos que irão ser adotados pelo slider.
4. EDITANDO O FICHEIRO DO THEME
Para a introdução do slider em um local do seu theme, é necessário editar um ficheiro (o qual pretende onde o slider seja apresentado). Assim, escolha o ficheiro mais pertinente para introduzir o slider, edite-o e insira o seguinte código:
<div class="list_carousel">
<ul id="foo2">
<?php
$carouselPosts = new WP_Query();
$carouselPosts->query('showposts=12');
?>
<?php while ($carouselPosts->have_posts()) : $carouselPosts->the_post(); ?>
<li>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo get_the_post_thumbnail($id, 'sliderimg'); ?></a>
<div class="slidertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Link para <?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
</li>
<?php endwhile; ?>
</ul>
<div class="clearfix"></div>
<a class="prev" id="prev2" href="#"><span>ante</span></a>
<a class="next" id="next2" href="#"><span>segui</span></a>
</div>
Neste momento o slider deverá já estar a ser apresentado na página onde determinou.
5. ESTILIZAÇÃO
A estilização é um item integrante deste artigo, e voltamos a lembrar que este ponto é um dos mais importantes e provavelmente aquele que lhe irá dar mais trabalho, pois além de estilizar o slider, irá também determinar o seu posicionamento bem como o posicionamento dos elementos. Assim, edite o ficheiro style.css do seu theme e insira o seguinte código:
.list_carousel {
height: 175px;
margin: 30px, auto;
overflow: hidden;
width: 760px;
}
.list_carousel ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.list_carousel li {
font-size: 14px;
color: #333;
width: 200px;
padding: 0;
margin: 2px;
display: block;
float: left;
}
.list_carousel.responsive {
width: auto;
margin-left: 0;
}
.list_carousel .clearfix {
float: none;
clear: both;
}
.list_carousel a.prev {
background: url("next-arrow-left.png") no-repeat scroll 0 0 transparent;
display: block;
height: 150px;
position: relative;
left:-30px !important;
top: -362px;
width: 50px;
}
.list_carousel a.next {
background: url("next-arrow-right.png") no-repeat scroll 0 0 transparent;
display: block;
height: 150px;
position: relative;
left: 632px !important;
top: -512px;
width: 50px;
}
.list_carousel a.prev {
}
.list_carousel a.next {
right: -29px;
}
.list_carousel a.prev.disabled, a.next.disabled {
cursor: default;
}
.list_carousel a.prev span, a.next span {
display: none;
}
#foo2 {
left: 20px;
margin: 0 2px;
position: relative;
}
Todos os valores, e principalmente aqueles que determinam o posicionamento do slider e dos seus elementos devem ser revistos por si, uma vez que estes valores introduzidos foram aqueles que a nós nos serviram e permitiram o correto posicionamento do slider e dos elementos.
6. RESULTADO
Este é o resultado tendo em conta os valores que utilizamos na estilização:
(As imagens não correspondem de todo ao conteúdo dos artigos, sendo este o blog de testes utilizado para demonstração dos nossos artigos)
7. OBSERVAÇÕES
Como referimos no início do artigo, são necessários alguns conhecimentos não só a nível da linguagem de programação PHP e como trabalhar themes WordPress, como também conhecimentos a nível do CSS. Assim, para o correto funcionamento do slider e correto posicionamento do mesmo você terá de editar os valores que fornecemos, fazendo com que o slider seja posicionado e estilizado de acordo com a sua preferência e necessidade.
Abraço!
