Mateus Neves – Wordpress, Workshops, Temas, Plugins e Desenvolvimento

A variedade de plugins que o WordPress tem é muito grande, plugins para criar sliders deve ter muitos. Mas é sempre bom saber usar o WordPress para criar algo novo ou algo que já existe mas com um toque seu. Hoje há vários scripts de jQuery com funcionalidades fantásticas para criar galerias, sliders entre outras coisas, então pode ser que você queira usar um script de jQuery que alguém ainda não tenha usado para criar um plugin para WordPress. É por isso que é bom saber usar o WordPress e sua flexibilidade.

Eu peguei um script bacana de jQuery que cria um slider com um efeito bem bacana e integrei ele com meu tema do WordPress, para carregar no slider um número especifico de posts no formato de slides. Olhe um demo do jQuery News Slider funcionando, só que sem a integração com o WordPress: Slider Demo

Salvei os arquivos necessários para o funcionamento deste slider e fiz a integração com meu tema de WordPress.

Segue abaixo os passos necessários:

1. O primeiro passo é fazer com que seu tema tenha suporte ao Post Thumbnail, para que possamos fazer o upload da imagem do post que será usada em cada slider, para isso abra o arquivo functions.php do seu tema, se não tiver este arquivo crie e salve dentro da pasta do seu tema e insira nele o código abaixo:

// Thumbnails Support
if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9
add_theme_support( 'post-thumbnails' );
}

2. Faça o download dos arquivos necessários abaixo:

Download: Wordpress Slider Files (405)

Dentro deste ZIP tem os arquivos( jquery.scrollTo.js, jquery.slider.js, slider.css e slider.php )

Para facilitar pode descompactar e jogar todos estes arquivos direto na pasta do seu tema, se quiser depois pode separá-los em pastas para organizar melhor.

3. Com os arquivos necessários na pasta do seu tema, abra o arquivo header.php do seu tema e insira entre as tags o seguinte código:

<!-- jQuery -->
<script>// <![CDATA[
src</span>="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript">
// ]]></script>

<!-- <span class="hiddenSpellError" pre="">Slider</span> -->
<script>// <![CDATA[
src</span>="/jquery.scrollTo.js" type="text/javascript">
// ]]></script>
<script>// <![CDATA[
src</span>="/jquery.slider.js" type="text/javascript">
// ]]></script>
<!-- <span class="hiddenSpellError" pre="style ">type</span>="text/css" media="screen"> -->
@import url( /slider.css );
&lt;/style&gt;

4. Agora que o template header.php esta carregando os arquivos necessários para o funcionamento do slider vamos abrir o arquivo index.php do seu tema e carregar o arquivo slider.php que é o template do slider. Para isso vamos utilizar uma função bastante útil do wordpress para deixar seu tema bem organizado.

Insira o código abaixo no arquivo index.php do seu tema onde você quer exibir o slider, lembrando que para este exemplo o formato que usei para o slider é de 700px x 300px, isso pode ser alterado no arquivo slider.css.

<?php get_template_part('slider'); ?>

5. Feito tudo isso seria bom agora antes de visualizar o tema, cadastrar alguns posts com um título, texto e o upload da uma imagem do post no campo ( Imagem destacada / Post Thumbnail ) no formato de 700px x 300px, para que você possa ver o slider funcionando corretamente já com alguns sliders de posts com imagens.

O meu aqui funcionou perfeitamente e já vai ser uma nova funcionalidade no meu tema WordPress Magazine que logo estará disponível com esta nova funcionalidade.