Comment créer un carrousel "Recent Post" en utilisant Owl Carousel

Publié: 2016-05-19

Comme la plupart d'entre vous le savent, WordPress est livré avec un widget "Messages récents" qui extrait les titres de vos messages les plus récents dans une barre latérale et les relie au message complet. Le problème avec cela est que le widget Articles récents est très limitatif. Et si vous avez besoin de quelque chose d'un peu plus élégant et avec un peu plus de fonctionnalité ? Par exemple, que se passe-t-il si vous souhaitez extraire l'image en vedette et un extrait, et à partir d'un type de publication personnalisé ? Il existe certainement des plugins qui feront ces choses, comme Advanced Recent Posts ou Recent Posts Widget Extended. En fait, il existe de nombreux excellents plugins pour afficher des publications et certains vous permettront même de les personnaliser en fonction de votre thème.

Cependant, interroger les messages est en fait une chose assez facile à faire et suivre la voie du bricolage garantira presque toujours que vous obtenez exactement ce que vous voulez et que votre carrousel sera stylé pour correspondre parfaitement à votre thème.

Dans cet article, je vais vous montrer comment créer un carrousel "Messages récents" à l'aide de la populaire bibliothèque JavaScript Owl Carousel.

Commençons. Si vous examinez les exemples sur le site Owl Carousel, la première chose que vous remarquerez est que leurs exemples sont écrits pour un site HTML simple. Pour que Owl Carousel fonctionne dans WordPress, vous devrez faire les choses légèrement différemment.

Tout d'abord, vous devez télécharger les fichiers depuis le site Owl Carousel ou les forker depuis Github. Une fois que vous avez les fichiers localement, vous voudrez ajouter le fichier CSS principal au répertoire /css/ de votre thème. Ce fichier est owl.carousel.min.css. Il y a un autre fichier CSS pour un thème et c'est owl.theme.default.min.css . Ce n'est pas un fichier requis, par conséquent, je ne vais pas l'utiliser dans ce tutoriel.

N'oubliez pas : vous ne devez jamais apporter de modifications à un site en ligne. Notre application gratuite de développement local, Local, vous aidera à simplifier votre flux de travail et à expérimenter votre site en toute sécurité. Essayez-le aujourd'hui!

Une fois téléchargé sur votre thème, le chemin d'accès au fichier devrait ressembler à ceci :
/wp-content/themes/your-theme/css/owl.carousel.min.css
/wp-content/themes/your-theme/css/owl.carousel.min.css .

Vous devez également inclure les fichiers JS

Si votre thème enfant n'a pas encore de dossier /js/ , allez-y et créez-en un maintenant. Ensuite, ajoutez le owl.carousel.min.js au répertoire /js/ de votre thème afin qu'il ressemble à ceci : /wp-content/themes/your-theme/js/owl.carousel.min.js .

Ensuite, vous devez ajouter du jQuery qui initialise et contrôle votre carrousel

Ce code configurera vos besoins spécifiques du carrousel. Si vous ne disposez pas déjà d'un fichier JS qui contrôle d'autres configurations de script, créez un fichier settings.js et placez-le dans le même répertoire /js/ que ci-dessus. Cela devrait ressembler à : /wp-content/themes/your-theme/js/settings.js .

Ensuite, vous allez ajouter le code suivant à ce même fichier JavaScript et enregistrer. Ce code est ce qui appelle le carrousel et lui indique le nombre d'éléments à utiliser, s'il faut ou non boucler, quel type de navigation utiliser et comment répondre aux différentes tailles d'appareils.

Remarque : pour ce didacticiel, j'utilise également Font Awesome pour fournir les icônes fléchées sur le carrousel. Pour en savoir plus sur Font Awesome, consultez cet article.

(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);




Vous devrez vous inscrire et mettre en file d'attente tous les nouveaux fichiers ajoutés. Si vous aviez déjà un settings.js ou custom.js , il devrait déjà être mis en file d'attente dans votre thème. Cependant, comme vous ajoutez au moins deux nouveaux fichiers ( owl.carousel.min.css et owl.carousel.min.js ), vous devrez ouvrir le functions.php de votre thème et les ajouter correctement à votre thème. Ça devrait ressembler a quelque chose comme ca:
		




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' );




Le HTML et le PHP qui afficheront le carrousel sur votre page


Cette section peut varier en fonction de la configuration de votre thème et de l'endroit où vous souhaitez placer le carrousel. Je vais utiliser un modèle personnalisé que j'ai créé à l'aide de Bootstrap. Votre première étape ici consiste à déterminer où vous voulez que le carrousel apparaisse. Si vous voulez qu'il soit sur votre page d'accueil, vous devriez chercher home.php ou frontpage.php . Le nom varie d'un thème à l'autre, alors assurez-vous de comprendre la structure de votre thème et de modifier le bon fichier. Une fois que vous savez quel fichier modifier, vous devez en faire une copie dans votre thème enfant et vous assurer qu'il réside dans la même structure de répertoires. Par exemple, si le fichier réside dans un répertoire appelé templates , assurez-vous de créer un dossier appelé templates au même emplacement que votre thème parent.
		




Une fois que vous êtes prêt à partir, vous pouvez ajouter les éléments suivants à l'emplacement approprié. Dans mon fichier, j'ai ajouté ceci au bas de mon frontpage.php afin qu'il s'affiche juste au-dessus du pied de page de mon 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 ============ -->




Lorsque vous avez terminé, vous devriez avoir un carrousel qui affiche l'image, le titre, l'extrait de l'article et un bouton "Plus" qui vous relie à l'article de blog complet.