Creer un slider de posts horizontal

Creer un slider de posts horizontal

Ici on va voir comment faire un slider de posts, une galerie horizontale des derniers articles. Pour ce premier slider de posts :

… c’est très simple, il suffit de télécharger le plugin smooth slider.
Vous l’installez, puis dans les réglages il suffit d’indiquer le type de scroll souhaité, il n’y aura qu’un article à chaque défilement. Le plugin ramène l’image à la une, l’extrait de l’article et le titre.
Vous pouvez ensuite l’intégrer dans votre code avec la fonction fournie sur la page des settings:

<?php if( function_exists( "get_smooth_slider_recent" ) ){ get_smooth_slider_recent(); } ?>

Pour un deuxième exemple , j’ai suivi le tutoriel à cette adresse. Il s’agit cette fois du plugin Caroufredsel : http://code.tutsplus.com/tutorials/displaying-posts-in-a-carousel–wp-26801

Il suffit en premier lieu de télécharger l’archive zip à disposition sur le site : http://dev7studios.com/plugins/caroufredsel.

Dans la page, descendez puis télécharger le plugin jquery en cliquant sur ce bouton :

Vous dézippez l’archive, puis prenez les fichier js pour les mettre  dans le dossier js de votre thème:

Copier coller dans votre fichier functions.php le code suivant, afin de créer de nouvelles tailles d’images sur votre site.

if ( function_exists( 'add_image_size' ) ) { 
    add_image_size( 'sliderimg', 200, 150, true );
}

Ici on active un nouveau type d’image, on les appelle « sliderimg ».

Dans le même dossier js de notre thème, là où on a importé nos fichiers js du caroussel, on va créer un nouveau fichier js : copiercoller-caroufredsel.js dans lequel on va coller le code suivant:

jQuery(function($) {
	$('#foo2').carouFredSel();
});

C’est le premier code de base servi en exemple dans la bibliothèque Jquery. On peut rajouter d’innombrables paramètres, comme le fait de mettre une pause au scroll lors du passage de la souris, rajouter des flèches etc…

Pour plus d’infos, ouvrez le pack js que vous venez de télécharger et lancez le fichier index, vous aurez tous les exemples.

Dans le fichier functions.php, il va falloir bien sûr faire l’appel à nos scripts  js:

function copiercoller_load_caroufredsel() {
    wp_register_script( 'caroufredsel', get_template_directory_uri() . '/js/jquery.carouFredSel-6.2.1-packed.js', array( 'jquery' ), '6.2.1', true );
 wp_enqueue_script('caroufredsel');
wp_enqueue_script( 'copiercoller-caroufredsel', get_template_directory_uri() . '/js/copiercoller-caroufredsel.js', array( 'caroufredsel' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'copiercoller_load_caroufredsel' );

Il ne nous reste plus qu’à placer notre galerie là où on veut dans notre thème : On appelle ici  l’image à la une avec le  « <?php echo get_the_post_thumbnail($id, ‘sliderimg’); ?>« ,  et le titre entouré d’un lien pour qu’il soit cliquable.

<div class="list_carousel">
<ul id="foo2">
        <?php
$carouselPosts = new WP_Query();
$carouselPosts->query(‘showposts=12′);
?>
<?php while ($carouselPosts->have_posts()) : $carouselPosts->the_post(); ?>
<li>
            <a href="<?php the_permalink() ?>” title=”<?php the_title(); ?>“><?php echo get_the_post_thumbnail($id, 'sliderimg'); ?></a>
<div class="slidertitle"><a href="<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>“><?php the_title(); ?></a></div>
</li>
<?php endwhile; ?></ul>
<div class="clearfix"></div>
</div>

Pour cibler une catégorie par défaut, modifiez la query comme ceci:

<?php query_posts('category_name=votrenomdecategorie&showposts=10'); ?>

Puis vient enfin le css, pour styliser nos blocks

.list_carousel {
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    width: 660px;
}
.list_carousel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
}
.list_carousel li {
    font-size: 14px;
    color: #333;
    width: 200px;
    padding: 0;
    margin: 2px;
    display: block;
    float: left;
}
.list_carousel.responsive {
    width: auto;
    margin-left: 0;
}
.list_carousel .clearfix {
    float: none;
    clear: both;
}


.list_carousel a.prev.disabled, a.next.disabled {
    cursor: default;
}
.list_carousel a.prev span, a.next span {
    display: none;
}
#foo2 {
    left: 20px;
    margin: 0 2px;
    position: relative;
}

Vous aurez au final et assez facilement un beau slider à customiser selon vos besoins!!