Criando um Slide Show de imagens com o WordPress [SEM PLUGINS]
Postado por Carlos em 06/01/08 às 8:39 pm e arquivado em Dicas e tutorias
Clique na imagem para ver o SlideShow em funcionamento
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! Até! 
Webtutoriais:6C45FB44
Posts relacionados
- Criando uma imagem (thumbnail) para cada post [sem plugins]
- Criando uma lista de posts randômicos
- WPshop de volta….
- Tipos de Editores no WordPress
- Criando CSS diferente para cada post.
Comentários - ( 17 )
Mr. WordPress - Criando uma imagem (thumbnail) para cada post
Enviado em
07/01/08
[...] como no tutorial do Slide Show, também já perguntaram como eu faço para exibir um thumbnail para cada post no WordPress. Assim [...]
Juan Vazquez
Enviado em
30/01/08
Excelente dica… Mas uma pergunta… ele aparece também o titulo do post? No meu não está aparecendo..
Carlos Henrique
Enviado em
31/01/08
Juan,
É como eu disse. O slideshow do exemplo que dei foi modificado com minhas necessidades. Daí, para ficar do jeito que vc esta querendo você teria que edita-lo.
Dica: Para exibir o título use < ?php the_title();?> abaixo do código que "puxa" a imagem, restando você só customiza-lo.
adriana
Enviado em
10/03/08
será que você pode explicar de um jeito mais fácil, por favor? :-)
Aguardo uma resposta
Adriana
Carlos Henrique
Enviado em
10/03/08
Adriana,
Esse é um dos jeitos mais simples de se fazer SEM PLUGINs, pois estou usando como base um script pronto.
Porém, pesquise por "plugins de slideshows"…
bkpgeral
Enviado em
03/05/08
Aqui não funcionou. Apareceu o slide rodando, mas não puxou os artigos da categoria (nem texto, nem fotos).
Alguma dica?
bkpgeral
Enviado em
03/05/08
Putz, tá quase, a imagem dos posts estão aparecendo. só falta aparecer o texto… 
woody
Enviado em
03/05/08
Aqui no meu funcionou, porém não ta puxando os artigos so a imagem aparece no slide o artigo é oublicado normalmente e ai oque fazer?
Carlos
Enviado em
03/05/08
@ bkpgeral ,
Como disse, não é exibido nenhum texto, o slide gerado vai ser igual a este ->
http://misterwp.com/wp-content/downloads/slide.html
Lendo sobre as Template Tags da para você editar o código e inserir textos como você quer.
bkpgeral
Enviado em
03/05/08
Bom, depois de muito F5… consegui criar um jeito. Não sei se MisterWP permite inserir código aqui, mas se servir pra alguém, tá aí:
<a href="" target="_blank" rel="bookmark"><img src="ID, img, TRUE) ?>" /> <div class="post" id="post-">
coloquei no top da sidebar, e até que ficou bacaninha rss. Valews!
Carlos
Enviado em
03/05/08
Para exibir códigos e scripts nos comentários você deve digitá-los dentro das tags e, ex: <?php bloginfo('name');?>
assim como diz acima do botão "enviar" da caixa de comentários.
bkpgeral
Enviado em
03/05/08
Ah, blz. Então aí vaí o code de como conseguir fazer:
<?php $artigos = get_posts('numberposts=7&category=novidades');
foreach($artigos as $post) : ?>
<div class="contentdiv">
<a href="<?php the_permalink();?>" target="_blank" rel="bookmark">
<h3><?php the_title(); ?></h3>
<img src="<?php echo get_post_meta($post->ID, img, TRUE) ?>" />
<div class="post" id="post-<?php the_ID(); ?>"></a>
ao clicar no titulo ou foto vai abrir em outra pagina target="_blank" e algumas mudanças no css e js também. Valeus!!
Carlos
Enviado em
07/05/08
@LuLu,
É só uma alternativa pra quem não quer usar…u_u'
ps: Se alguém souber de algum plugin que gere um slideshow como este, por favor, me contate!
Rodrigo
Enviado em
06/06/08
Oi, bom dia
Carlos, é possivel fazer slide para paginas internas?
Aguardo
Populares
- Criando um Slide Show de imagens com o WordPress [SEM PLUGINS]
- FAQ para iniciantes
- 3 maneiras diferentes de customizar a função the_excerpt
- Criando uma imagem (thumbnail) para cada post [sem plugins]
- Explorando as Template Tags
MrWP » Free Themes
BB Clean Theme
Simple Blue Magazine