Como criar um carrossel “Recent Post” usando o Owl Carousel

Como a maioria de vocês sabe, o WordPress vem com um widget de “Postagens Recentes” que irá puxar os títulos de suas postagens mais recentes para uma barra lateral e vinculá-los à postagem completa. O problema com isso é que o widget de Postagens Recentes é muito limitador. E se você precisar de algo um pouco mais elegante e com um pouco mais de funcionalidade? Por exemplo, e se você quiser extrair a imagem em destaque e um trecho e de um tipo de postagem personalizado? Definitivamente, existem alguns plugins por aí que farão essas coisas, como Advanced Recent Posts ou Recent Posts Widget Extended. Na verdade, existem muitos plugins excelentes para exibir postagens e alguns até permitem que você os estilize para combinar com seu tema.

No entanto, consultar postagens é realmente uma coisa muito fácil de fazer e seguir a rota DIY quase sempre garantirá que você obtenha exatamente o que deseja e que seu carrossel seja estilizado para corresponder perfeitamente ao seu tema.

Neste artigo, mostrarei como construir um carrossel de “Postagens Recentes” usando a popular biblioteca JavaScript Owl Carousel.

Vamos começar. Se você estiver revisando os exemplos no site Owl Carousel, a primeira coisa que você notará é que seus exemplos são escritos para um site HTML simples. Para que o Owl Carousel funcione no WordPress, você terá que fazer as coisas de maneira um pouco diferente.

Primeiro, você precisa baixar os arquivos do site Owl Carousel ou bifurcá-los no Github. Depois de ter os arquivos localmente, você desejará adicionar o arquivo CSS principal ao diretório /css/ do seu tema. Esse arquivo é owl.carousel.min.css. Existe outro arquivo CSS para um tema e é owl.theme.default.min.css . Não é um arquivo obrigatório, portanto, não vou usá-lo neste tutorial.

Uma vez carregado para o seu tema, o caminho para o arquivo deve ser algo assim:
/wp-content/themes/your-theme/css/owl.carousel.min.css
/wp-content/themes/your-theme/css/owl.carousel.min.css .

Você também precisa incluir os arquivos JS

Se o seu tema filho ainda não tiver uma pasta /js/ , vá em frente e crie uma agora. Em seguida, adicione o owl.carousel.min.js ao diretório /js/ do seu tema para que fique parecido com o seguinte: /wp-content/themes/your-theme/js/owl.carousel.min.js .

Em seguida, você precisa adicionar algum jQuery que inicializa e controla seu carrossel

Este código irá configurar suas necessidades específicas do carrossel. Se você ainda não tiver um arquivo JS que controle outras configurações de script, crie um arquivo settings.js e coloque-o no mesmo diretório /js/ acima. Isso deve ser algo como: /wp-content/themes/your-theme/js/settings.js .

Em seguida, você adicionará o seguinte código a esse mesmo arquivo JavaScript e salvará. Esse código é o que faz a chamada para o carrossel e informa quantos itens usar, se deve ou não fazer um loop, que tipo de navegação usar e como responder a diferentes tamanhos de dispositivos.

(function($) {
"use strict";

$(document).ready(function() {

$('#blog .owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
dots: false,
nav: true,
navText: ['<i class="fa fa-arrow-left fa-2x"></i>','<i class="fa fa-arrow-right fa-2x"></i>'], //Note, if you are not using Font Awesome in your theme, you can change this to Previous & Next
responsive:{
        0:{
            items:1,
            //nav:true
        },
        767:{
            items:2,
            //nav:false
        },
    }
});
})
})(jQuery);


Você precisará registrar e enfileirar quaisquer novos arquivos adicionados. Se você já tinha um settings.js ou custom.js , ele já deve estar enfileirado em seu tema. No entanto, como você está adicionando pelo menos dois novos arquivos ( owl.carousel.min.css e owl.carousel.min.js ), você precisará abrir o functions.php do seu tema e adicioná-los corretamente ao seu tema. Deve ser algo assim:
		


add_action( 'wp_enqueue_scripts', 'yourtheme_scripts');
function yourtheme_scripts(){
wp_enqueue_script('owl.carousel', get_template_directory_uri() . '/js/owl.carousel.min.js', array(), '1.0.0', true );
wp_enqueue_script('settings', get_template_directory_uri() . '/js/settings.js', array(), '1.0.0', true );
}

function yourtheme_styles() {
wp_register_style('owl-carousel', get_template_directory_uri() .'/css/owl.carousel.css', array(), null, 'all' );
wp_enqueue_style( 'owl-carousel' );
}
add_action( 'wp_enqueue_scripts', 'yourtheme_styles' );


O HTML e o PHP que exibirão o carrossel em sua página
Esta seção pode variar dependendo de como seu tema está configurado e onde você deseja colocar o carrossel. Vou usar um modelo personalizado que criei usando o Bootstrap. Seu primeiro passo aqui é determinar onde você quer que o carrossel apareça. Se você quiser que ele esteja em sua página inicial, você deve procurar por home.php ou frontpage.php . O nome varia de tema para tema, portanto, certifique-se de entender a estrutura do seu tema e edite o arquivo correto. Depois de saber qual arquivo editar, você deve fazer uma cópia dele em seu tema filho e certificar-se de que ele resida na mesma estrutura de diretórios. Por exemplo, se o arquivo residir em um diretório chamado templates , certifique-se de criar uma pasta chamada templates no mesmo local do seu tema pai.
		


Quando estiver pronto, você pode adicionar o seguinte no local apropriado. No meu arquivo, adicionei isso na parte inferior do meu frontpage.php para que ele seja exibido logo acima do rodapé do meu site.
<!-- ============ BLOG CAROUSEL START ============ -->
<section id="blog">
  <div class="container">
     <div class="row"> <!-- this is the carousel’s header row -->
        <div class="col-sm-12 text-center">
           <h5>Recent posts</h5>
           <h1>Blog</h1>
        </div>
     </div>
     <div class="row"> <!-- this row starts the carousel-->
        <div class="col-sm-12">
           <div class="owl-carousel">
              <!-- query the posts to be displayed -->
              <?php $loop = new WP_Query(array('post_type' => 'post', 'posts_per_page' => -1, 'orderby'=> 'ASC')); //Note, you can change the post_type to a CPT and set the number to pull and order to display them in here. ?>
              <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
                 <div class="recent-post"> <!-- I don’t have any unique css here, just needed to make sure every recent post gets wrapped as a block element.  However, you may want to add your own css here... -->
                    <?php
<a href="<?php print get_permalink($post->ID) ?>">
              <?php echo the_post_thumbnail(); ?></a>
              <h4><?php print get_the_title(); ?></h4>
              <?php print get_the_excerpt(); ?><br />
          <p><a class="btn btn-default" href="<?php print get_permalink($post->ID) ?>">More</a></p>
</div> <!-- End the Recent Post div -->
              <?php endwhile; ?>
           </div> <!-- End the Owl Carousel div -->
        </div> <!-- End the recent posts carousel row -->
        <div class="row"> <!-- start of new row for the link to the blog -->
           <div class="col-sm-12 text-center">
              <a href="blog.html" class="btn btn-primary">Read All Posts</a>
           </div>
        </div>
     </div> <!-- End blog button row -->
</section>  <!-- ============ RECENT POSTS CAROUSEL END ============ -->


Quando terminar, você deve ter um carrossel que mostra a imagem em destaque da postagem, título, trecho e um botão “Mais” que o vincula à postagem completa do blog.
		



		
		
Quer mais dicas de design? Assine o layout
		
Enviaremos o design mais recente e o conteúdo do WordPress diretamente para sua caixa de entrada, uma vez por semana.
		

		
		Sim por favor!