Aplicando o Flexslider no WordPress

Muitas pessoas tem dúvidas de como criar um slide para o WordPress utilizando o flexslider 2.

Para isso resolvi escrever esse tutorial.

Primeiramente você tem que acessar o site do flexslider 2 e faça o download da biblioteca clicando no botão verde conforme imagem abaixo:

Após isso abra o arquivo zip que você fez o download e separe os seguintes arquivos:

1. Pasta font
2. flexslider.css
3. jquery.flexslider.js

Feito essa separação vamos para o seu tema.

Geralmente eu utilizo a seguinte ordem de pastas para organizar a criação de meus temas, são essas:

1. assets
   1. css
   2. fonts
   3. images
   4. js
2. includes
3. templates

Mas se você organizar de outra forma não tem problema, somente siga as informações abaixo:

Na pasta css você precisa colocar o arquivo flexslider.css

Na pasta js você precisa colocar o arquivo jquery.flexslider.js

E a pasta font você precisa colocar na pasta do seu tema, se seguir o meu modelo acima, seria dentro da pasta assets.

Feito isso vamos fazer o enfileiramento dos arquivos, vale a pena lembrar que eu vou seguir a minha estrutura de arquivos mencionada acima para fazer o enfileiramento.

 

No arquivo functions.php onde você já deve ter enfileirado seus arquivos .js e .css você vai inserir a seguinte linha:

Enfileirando o CSS

wp_enqueue_style('point-flexslider', get_template_directory_uri() . '/assets/css/flexslider.css', array(), '1.0.0', 'all');

Acima eu utilizei o caminho até a minha pasta onde contem o arquivo .css do flexslider, ou seja, /assets/css/flexslider.css

Enfileirando o JAVASCRIPT

wp_enqueue_script('point-flexslidermin', get_template_directory_uri() . '/assets/js/jquery.flexslider.js', array('jquery'), null, true);

Acima eu utilizei também o caminho que me leva até o arquivo .js do flexslider /assets/js/jquery.flexslider.js

Agora vem a parte mais simples, ou seja, a aplicação no arquivo.

Acessando o arquivo onde deseja apresentar o slider você irá utilizar a seguinte configuração:

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>

Lembrando que esse modelo acima serve para listar os elementos do slide, quando for fazer o loop, faça sempre com a linha abaixo:

<li><img src="slide1.jpg"/></li>

Agora crie um arquivo .js, exemplo main.js e não esqueça de enfileirar ele também no seu arquivo functions.php.

Para habilitar o funcionamento do slide segue abaixo o código de inicialização que deve ser inserido entro do arquivo .js que criou, no meu caso foi main.js.

// Vamos iniciar a função
$(window).load(function() {
        $('.flexslider').flexslider({ // A classe .flexslider é a classe que aparece no html
            animation: "slide", // Forma de animação
            easing: "swing",
            animationLoop: true, // Loop infinito do slide, se não quiser seta como false
            itemWidth: 312, // Largura da imagem, caso queira o slide full, remova essa linha
            itemMargin: 32, // Margem da imagem, caso não queira espaçamento das colunas remova essa linha
            slideshowSpeed: 5000, // Velocidade da transição em milésimo de segundos
            touch: true, // Ativa a função de touch em dispositivos móveis
            keyboard: true // Navegação pelo teclado
        });
    });

 

Basicamente é isso para aplicar o Flexslider em seu site WordPress.

Espero que tenha gostado desse post. 😉