
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:
- Pasta font
- flexslider.css
- 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:
- assets
- css
- fonts
- images
- js
- includes
- 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. 😉