Crie seu próprio Slider para WordPress com carouFredSel

Quantas vezes precisamos de um (ou mais) slider para destacar alguns conteúdos em nosso WordPress e então resolvemos por instalar um plugin? O ponto fraco nisso é que muitas vezes ele não é exatamente o que precisamos, ou possui um estilo engessado e não nos permite customizar como queremos e precisamos. Pensando nisso, vou mostrar nesse post como criar o seu próprio slider, de acordo com a sua necessidade. E por mais que isso possa parecer trabalhoso, você terá, com esse tutorial, um código de fácil reaproveitamento e estilização.  Garanto que na segunda implementação desse passo a passo você terá compreendido completamente suas possibilidades e a autonomia que terá com seus sliders!
Este post também será muito útil para aqueles que gostam de aprender como funcionam as partes do WordPress antes de procurar soluções prontas.

Existem muitas formas de solucionar um slider – podemos listar os últimos posts de um Custom Post Type, uma taxonomia específica, uma categoria de posts específica e, também, exibir posts baseados em algum metabox, por exemplo um checkbox com a informação:

[] Adicionar esse post no slider.

As possibilidades são inúmeras, tudo vai depender do que você precisa e de sua criatividade. Vamos abordar aqui, por ser um primeiro post sobre o assunto no BlogLite, uma forma simples de criar um slider para o seu site.

Esse slider que vamos criar, a principio, não é um plugin. Ele deve ser incluído na pasta do seu tema a partir do functions.php. Para reutilizar o slider em outros projetos, basta fazer o mesmo procedimento e alterar os arquivos responsáveis pelo visual e query do slider, para que funcionem de acordo com o projeto em questão.

O que vamos precisar

Para criar esse slider vamos utilizar a biblioteca jQuery – certifique-se de que ela esteja adicionada em seu tema. Existem duas formas de adicionar essa biblioteca ao seu tema: baixando o arquivo e adicionando em seu tema, ou linkando para algum CDN de distribuição, como o Google ou o próprio jQuery. Mas o WordPress já possui o jQuery em seu core, então, caso ainda não esteja rodando em seu tema, basta adicionar o seguinte no functions.php

wp_enqueue_script('jquery');

Com o jQuery adicionado, vamos então usar o plugin js carouFredSel mantido e distribuido pelo Dev7Studios. Uso esse js porque ele possui uma gama muito grande de configurações, o que torna a personalização muito mais fácil de atingir o resultado que preciso. Veja a documentação aqui.

Quando você baixa os arquivos do carouFredSel pelo Github, ele disponibiliza duas versões do arquivo, a jquery.carouFredSel-6.2.1.js e jquery.carouFredSel-6.2.1-packed.js (atualmente). Os dois são iguais, a única diferença é que a versão packed vem com o js comprimido, o que reduz o arquivo de 89 para 54kb. Esse arquivo é o que vamos adicionar mais abaixo.

Agora vamos criar também um arquivo slider.css, slider.php e template-slider.php. Coloque tudo dentro de uma pasta /slider para deixar a organização do tema o mais legível e intuitiva possível. Nossa pasta ficará assim:

pastas

Mãos na massa

Nesse slider vamos utilizar um Custom Post Type (CPT) chamado Slider, assim sua administração ficará muito mais intuitiva e amigável aos editores do site.

/wp-admin com o CPT Slider adicionado
/wp-admin com o CPT Slider adicionado

A princípio, vamos usar apenas o título (title) e a imagem destacada (featured image). Assim não precisamos criar nenhum campo extra, o que poderia ser feito com muita facilidade usando o Advanced Custom Field (veja aqui no blog como criar campos personalizados com o ACF).

No arquivo slider.php que criamos, adicione o seguinte código:

<?php
/**
 * Slider
 */

/**
 * Adiciona acao no inicio do WordPress
 * atraves do action add_action( 'init' )
 */
add_action( 'init', 'create_post_type_sliders' );

/**
 * Funcao chamada pelo add_action()
 */
function create_post_type_sliders() {

 /**
 * Labels customizados
 */
 $labels = array(
 'name' => _x('Sliders', 'post type general name'),
 'singular_name' => _x('Slider', 'post type singular name'),
 'add_new' => _x('Novo slider', 'itens'),
 'add_new_item' => __('Novo slider'),
 'edit_item' => __('Editar slider'),
 'new_item' => __('Novo slider'),
 'all_items' => __('Todos sliders'),
 'view_item' => __('Ver slider'),
 'search_items' => __('Procurar slider'),
 'not_found' => __('Nenhuma slider encontrado'),
 'not_found_in_trash' => __('Nenhuma slider encontrado no lixo'),
 'parent_item_colon' => '',
 'menu_name' => 'Sliders'
 );
 
 /**
 * Registra o cpt com os labels acima
 */
 register_post_type( 'sliders', array(
 'labels' => $labels,
 'menu_icon' => 'dashicons-slides',
 'public' => true,
 'publicly_queryable' => true,
 'show_ui' => true,
 'show_in_menu' => true,
 'query_var' => true,
 'rewrite' => array(
 'slug' => 'sliders',
 'with_front' => false,
 ),
 'capability_type' => 'post',
 'has_archive' => true,
 'menu_position' => 5,
 'supports' => array( 'title', 'editor', 'thumbnail' )
 )
 );

}

Vamos utilizar esse arquivo também para funções que podemos usar no slider frequentemente, e inclusive faremos a adição de scripts e estilos também, dessa forma:

function slider_enqueue() {
 wp_enqueue_style( 'slider-style', get_template_directory_uri() . '/slider/slider.css' );
 wp_enqueue_script( 'caroufredsel', get_template_directory_uri() . '/slider/js/jquery.carouFredSel-6.2.1-packed.js', array('jquery') );
 wp_enqueue_script( 'custom-caroufredsel', get_template_directory_uri() . '/slider/js/main.js', array('caroufredsel') );
}
add_action( 'wp_enqueue_scripts', 'slider_enqueue' );

Adicione esse arquivo no functions.php do seu tema com a seguinte linha:

require_once get_template_directory() . '/slider/slider.php';

Com isso, teremos o CPT ativo na nossa administração; vamos agora fazer a estrutura HTML, o loop e as funções nativas do WordPress que vai receber esses posts dentro do slider. Insira o seguinte código no arquivo template-slider.php que criamos:

<?php
 $args = array(
  'posts_per_page' => 5,
  'orderby' => 'date',
  'order' => 'DESC',
  'post_type' => 'sliders',
 );
 $sliders_home = new WP_Query( $args );
?>

<div class="slider">
 
 <ul class="slider-default">

  <?php while ( $sliders_home->have_posts() ) : $sliders_home->the_post(); ?>

   <li class="item item-slider">
    <a href="<?php echo 'http://' . slider_get_field( 'slider_link' ); ?>">
     <?php
      if ( has_post_thumbnail() ) {
       the_post_thumbnail('large');
      } else {
       echo '<img src="' . get_template_directory() . '/images/thumb-default.jpg" alt="<?php the_permalink(); ?>">';
      }
     ?>
    </a>
   </li>

  <?php endwhile; ?> 

 </ul><!-- slider-default -->
 
 <div class="prev" id="prev-default"></div>
 <div class="next" id="next-default"></div>

</div><!-- slider -->

Observe que inicio criando um loop que busca os últimos 5 sliders, organizados por data. Esse é um local que pode elevar e muito as possibilidades de utilização do seu slider – basicamente podemos criar qualquer loop que ele vai funcionar com a estrutura que estamos construindo, por exemplo, exibição de imagens anexas ao post, slider para exibir apenas a categoria “destaque” de seu blog e assim por diante.

Em seguida, faço a estrutura do slider, que é basicamente uma div e dentro uma lista ul, e o loop (nesse caso while) vai imprimir um li para cada item existente com a imagem destacada do post dentro. Essa ul exterior, que definimos a classe .slider-default é muito importante, pois mais à frente você verá que é com ela que informo ao js carouFredSel que isso é um slider e então ele faz todo o restante do trabalho.

Slider praticamente pronto, precisamos animá-lo; vamos adicionar algumas configurações de acordo com a documentação do carouFredSel, crie um novo arquivo .js, ou use algum que seu tema já possua para customizações e adicione o seguinte:

jQuery(document).ready(function () {

 var $ = jQuery.noConflict();

 /* Slider Default */
  $('.slider-default').carouFredSel({
   prev: '#prev-default',
   next: '#next-default',
   responsive: true,
   scroll: {
    fx: 'crossfade',
    items: 1,
    pauseOnHover: true
   },
  items: {
   visible: {
   min: 1,
   max: 4
   }
  }
 });
});

O slider está pronto, mas como aplicá-lo em nosso tema? Para facilitar a reutilização desse slider, fiz uma função que coloquei dentro do arquivo slider.php também. Essa função é apenas para simplificar a inserção do slider onde deseja que ele apareça.

/**
* Funcao para imprimir o slider
*/
function the_slider() {
require get_template_directory() . '/slider/template-slider.php';
}

Com isso, onde quiser que o slider apareça, use apenas <?php the_slider(); ?> que automaticamente ele vai inserir o arquivo template-slider.php e toda sua estrutura HTML.

Aplicando estilo

Com o CSS abaixo (adicione em seu slider.css) aplicar alguns estilos básicos para o slider funcionar. Esser arquivo foi adicionado dentro da função slider_enqueue() no arquivo slider.php que já aplicamos acima.

.caroufredsel_wrapper {
 height: 100%;
 padding-top: 1px;
 width: 100%;
}

.caroufredsel_wrapper ul, .caroufredsel_wrapper ul li {
 list-style: none;
 padding: 0;
}

.caroufredsel_wrapper ul li {
 border: 1px solid #BBB;
 border-radius: 10px;
 float: left;
 height: 350px;
 overflow: hidden;
}

.caroufredsel_wrapper ul li img {
 max-width: 100%;
}

.slider {
 position: relative;
}

.slider .prev, .slider .next {
 cursor: pointer;
 height: 70px;
 position: absolute;
 top: 140px;
 width: 50px;
 z-index: 9;
}

.slider .prev {
 background: url('images/prev.png') center center no-repeat transparent;
}

.slider .next {
 background: url('images/next.png') center center no-repeat transparent;
 right: 0;
}

Plus

Nesse slider eu precisei adicionar um metabox para a pessoa preencher com a URL que ela deseja que o slider possua. Para isso, estou usando uma código que também está na pasta /slider. Não vou entrar no assunto metabox nesse post, já que o foco aqui é a aplicação do js com um loop do WordPress para se tornar um slider. Mas caso tenha dúvidas, comente abaixo ou baixe o zip que disponibilizo aqui com todos os arquivos.

Para conhecer mais das configurações do carouFredSel, visite a documentação oficial e veja as infinitas possibilidades.

Como ficou

slider

Outras possibilidades
Podemos usar parte do mesmo procedimento para usar esse slider dentro de um post/página para exibir os anexos desse post. Ou também exibir posts relacionados a partir da mesma categoria. Como comentei acima, o que precisa fazer é alterar o loop que busca os posts no banco de dados.

Conclusão

Esse post certamente vai dar um pouco de trabalho aos aventureiros de códigos, mas uma vez isso organizado e implementado você entenderá a dimensão da ferramenta que criamos. Para facilitar os seus estudos sobre isso, clique aqui e faça o download do zip com todos esses arquivos. E vou manter esse código em constante melhorias em meu perfil do Github.

[box] Clique aqui para baixar todos os arquivos do tutorial [/box]

 

Um comentário

  1. Bom dia, Everaldo, ótimo post, único tutorial de slider que eu consegui fazer até agora (sou bem iniciante em WP). Porém estou com os seguintes problemas:

    1- A imagem aparece pela metade da largura do meu site, já tentei aumentar, cortar a imagem mas nada muda, é como se ela tentasse mostrar duas imagens, uma ao lado da outra.

    2-A div .slider não se encaixa na .caroufredsel_wrapper, ela fica mais a direita e eu não sei o motivo.

    Agradeço desde já.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *