Quer saber como colocar um slideshow como este no seu blog ou site em WP? Fácil, siga o tuto…Vou mostrar como adaptar um script pronto de slides para funcionar automaticamente no WordPress. Ou seja, será atualizado pelo sistema sem a necessidade de mexer no HTML para isso.
Como não sou nenhum expert em Java script, aproveitei as facilidades da web e encontrei um script de slides do jeitinho que eu queria. O que restava então era adaptá-lo no WordPress e customiza-lo com CSS usando meu estilo e criatividade.
O script pronto que usei é o “Feature Content Slider” e esta disponível no dynamicdrive.com (Aliás, recomendo esse site, pois contem dezenas de scripts ótimos).
Instalação
1-Crie uma pasta dentro do seu tema com o nome “js”. Use um programa FTP para isso.
2- Para “simplificar” eu ajustei o CSS do script original para que ele fique mais adequado a maioria dos temas, daí é só você personalizar coms eu estilo. Baixe os seguintes arquivos e envie-os para a pasta “js” que nós criamos.
Obs: Para fazer o download dos arquivos cima, clique com o botão direito sobre o link -> Salvar link como.
Ou se preferir, use os arquivos originais disponíveis na pagina do script.
3-Vá ao Painel Administrativo do WordPress e crie uma nova categoria, ex: destaques.
Nota: É bom você anotar a ID da categoria.
4- Abra o header.php do seu tema e cole o seguinte código entre as tags <head> e </head>:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');
?>/js/contentslider.css" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/contentslider.js">
/*********************************************** * Featured Content Slider- ©
Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact
for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script
and 100s more ***********************************************/
</script>
Nota: A função <?php bloginfo('template_url'); ?> gera a url completa do seu tema… Assim o caminho para os arquivos do Slide Show ficarão todos corretos.
Obs.: Certifique-se ter criado a pasta “js” dentro do tema.
5- Agora abra o arquivo index.php do seu tema e cole o seguinte código, fora do loop, onde você quer que seja exibido o Slide Show:
<div id="slider1" class="contentslide">
<div class="opacitylayer">
<?php $artigos = get_posts('numberposts=4&category=384'); foreach($artigos as $post) : ?>
<div class="contentdiv">
<a href="<?php the_permalink();?>"><img src="<?php echo get_post_meta
($post->ID, img, TRUE) ?>" /></a>
</div>
<?php endforeach; ?>
</div></div>
<div class="pagination" id="paginate-slider1"></div>
<script type="text/javascript">
//Define: ContentSlider("slider_ID", [autorotate_miliseconds], [custompaginatelinkstext],
[customnextlinktext])
ContentSlider("slider1", 5000)
//OR ContentSlider("slider1", 3000)
//OR ContentSlider("slider1", 3000, linktextarray)
//OR ContentSlider("slider1", 3000, linktextarray, "Foward")
//OR ContentSlider("slider1", "", linktextarray)
//OR ContentSlider("slider1", "", "", "Foward")
</script>
Analisando:
<?php $artigos = get_posts('numberposts=3&category=384'); foreach($artigos as $post) : ?>
numberposts=4 = É a quantidade de slides que você deseja que sejam exibidos.
category=384 = onde “384″ é a ID da categoria “destaque” que nós criamos. Mas lembre-se: a id “384″ é um exemplo, você deverá substituir esse número pelo ID correto no seu blog. Para ver o número da ID, basta ir no painel administrativo do WordPress, em Manage -> Categories. Logo a esquerda do nome da categoria você irá localizar a ID da categoria nós criamos.
<a href="<?php the_permalink();?>"><img src="<?php echo get_post_meta
($post->ID, img, TRUE) ?>" alt="<?php the_title();?>" /></a>
the_permalink = Faz um link no Slide para que ele aponte para o post correspondente.
get_post_meta() = Será responsável por chamar a url da imagem do slide. Não altere esse código.
O script foi adaptado no tema. Agora preste bastante atenção nos próximos passos.
Usando
-Crie (ou edite) um post. Construa o conteúdo dele normalmente, com título, categoria, contexto, etc..
-Desça a pagina até encontrar a opção “Custom Fields” e siga as imagens:
1- No campo “Key”, preencha com a palavra “img” (IMPORTANTE! Não altere o nome)
2- No campo “Value”, coloque a url da imagem do slide (Nota: A imagem deve estar entre 400px (largura) e 250px (altura)).
3-Clique em Add Custom Field.
- Nas categorias, marque a opção “destaques”(que é justamente a categoria que nós criamos).
- Marque quantas categorias você quiser, mas certifique-se novamente de ter marcado também a categoria que nós criamos, caso o contrário, os slides não funcionarão.
Logo depois, você pode publicar o post, repita o processo em mais dois ou três.
Pronto! Veja, agora o seu blog terá um Slide Show de imagens movido à WordPress! O resultado final será semelhante ao mostrado no início do tutorial.
Informações:
- Você pode personalizar o CSS e o JS de acordo com as suas necessidades. Veja um exemplo no site http://www.tecnopop.info desse mesmo slideshow, só que com moficações.
- Estude o Js e o CSS do script. Assim você poderá adaptar esse slide para várias coisas.
- A imagem do slide deve estar em 400×250px de larg e alt. Porém, para usar imagens com tamanhos diferentes é preciso editar o css.
- Coloque o Slide Show em cima do primeiro loop do seu blog, e sempre na index.php (ou em mais paginas).
- Você pode usar essa dica para construir um slide show das fotos do seu blog.
Espero que tenham gostado e qualquer duvida entrem em contato ou postem nos comentários!
Autor Henrique Artur Wint
http://www.misterwp.com
julho 13th, 2008 at 12:43 am
Olá! Eu adorei o site/blog de vocês.
Mas gostaria de saber uma coisa, nada a ver com post, mas que estou quebrando a cabeça pra conseguir fazer ¬¬
Eu vi que vocês tem tutoriais de flash então talvez possa me ajudar.
Preciso fazer um rollover com imagem e que ao clicar na imagem, abra ao lado do rollover um flash novo. Alguém pode me ajudar?
Obrigada!
julho 13th, 2008 at 12:47 am
Ahh que anta… rs
Não foi rollover que eu quis dizer, é scrollbar… haha
Obrigada!