A Unix Mind In A Windows World .

Chroniques tech et pérégrinations digitales. Opinons incluses.

Post Page Advertisement [Top]

image
Je ne me souviens plus de la dernière fois où j’ai pu voir un site web sans slider d’articles  . Le fait est que cette fonctionnalité est devenue, au fil des ans, un ingrédient indispensable pour tout site web, en grande partie à cause du fait qu’elle permet de présenter de façon conviviale les informations les plus importantes (ou les articles les plus récents) d’un site web.
Du fait même, les sliders d’article sont , à mon humble avis, les extensions les plus téléchargées illégalementavec tous les risques de sécurité inhérents à cette pratiquepar les webmasters et développeurs web des bords de la lagune ébrié .  C’est quand même un peu dommage, d’autant plus que créer un slider d’articles est à la portée de toute personne ayant des connaissances basiques en php et jQuery.
Je me propose donc aujourd’hui de vous montrer la marche à suivre pour créer un slider d’article pour Wordpress  .
Pour les fins de la démonstration, j’utiliserais le theme twenty fifteen de wordpress 4.1 : les fichiers modifiés sont disponibles au téléchargement en fin d'article.

1. Créer une catégorie “slider” et récuperer l’ID correspondant

La catégorie “slider” servira à indiquer à Wordpress les articles qui devront être inclus dans le slider de la page d’accueil. Afin de  la créer, veuillez suivre les étapes suivantes :
  1. Allez dans le menu “articles”, puis dans le sous menu ”catégories”
    image
  2. Créez une catégorie “slider” et cliquez sur le bouton ajouter une nouvelle catégorie
    image

Une fois la catégorie créée, il faudra récupérer l’id correspondant à cette dernière. Pour ce faire, je vous recommande d’installer et d’activer Wp Show IDs , une extension pour Wordpress qui permet d’afficher les ID des articles, des pages et des catégories dans le backend du CMS.
Une fois l’extension installée (et activée), allez dans la liste des catégories et copiez l’id correspondant à la catégorie “slider”
image
Enfin, n’oubliez de créer au moins deux articles, chacun des 2 articles devant avoir une image à la une. Les deux articles serviront à alimenter le slider d’articles.

2. Implanter jQuery Cycle 2 dans le template


jQuery Cycle est un plugin  gratuit qui, comme son nom l’indique, permet de faire défiler des éléments du DOM de façon cyclique. Dans un premier temps, rendez vous à l’adresse suivante afin de le récupérer.
http://jquery.malsup.com/cycle2/download/
NB : choisissez la version dénommée “Production version” .
Une fois le fichier téléchargé, copiez le dans le dossier “js” situé à la base de votre thème wordpress, puis faites y référence dans le fichier header.php du thème , de la manière suivante.
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.cycle2.min.js" type="text/javascript" ></script>
NB : insérez ce code après l’instruction  <?php wp_head(); ?>

 

3. Ecrire la boucle du slider


Enfin, la partie la plus intéressante Sourire . Dans un premier temps, ouvrez le fichier index.php et saisissez y le code suivant (juste après la ligne  <div id="primary" class="content-area"> )
    <!--slider-->
    <?php
    if ( is_home() ) {

?>   
<?php } else { ?>

<?php } ?>
Ce bout de code indique à wordpress qu’on souhaite afficher le slider seulement sur la page d’accueil.
Saisissez ensuite le code suivant (entre <?php if (is_home(){?>) et <?php }else{?> ), qui permet de créer une boucle pour les articles appartenant à la catégorie “slider” et d’en faire une userlist animée par jQuery Cycle2 (grâce à la classe “cycle-slideshow”)
?>
         <ul id="tre" class="cycle-slideshow"
            data-cycle-slides="li">
        <?php
            wp_reset_postdata();
            $query = new WP_Query(array(
                    'posts_per_page' => 5,
                    'cat'=>2));
          while($query->have_posts()) : $query->the_post();
    ?>                                   
            <li id="post-<?php the_ID(); ?>" class="ym-grid">
                    <?php
                        //miniature
                        if ( has_post_thumbnail()) {
                            the_post_thumbnail('large', array('class' => 'flexible'));
                        }
                    ?>
                    <!--lien vers l'article-->
                    <a href="<?php the_permalink(); ?>" class="overlay">
                        <?php the_excerpt();?>
                    </a>
            </li>
            <?php
                            endwhile;                            
                        wp_reset_postdata();
                        ?>
        </ul>

 
Vous obtiendrez alors un résultat similaire à celui ci dessous .
image
Je sais, c’est loin d’être impressionnant. Voyons comment améliorer un peu tout ceci, en ajoutant un compteur de slides, une navigation et en centrant les images.
Pour ce faire, rajoutez les éléments suivants à votre code
<!--slider-->
    <?php
//debut de la boucle
    if ( is_home() ) {
        ?>
         <ul id="tre" class="cycle-slideshow"
            data-cycle-slides="li"
            data-cycle-pager="#socialclub"
            data-cycle-prev="#prev"
            data-cycle-next="#next">

        <?php
            wp_reset_postdata();
            $query = new WP_Query(array(
                    'posts_per_page' => 5,
                    'cat'=>2));
          while($query->have_posts()) : $query->the_post();
    ?>                                   
            <li id="post-<?php the_ID(); ?>" class="ym-grid">
                    <div id="sswrapper">                            <?php
                            //miniature
                            if ( has_post_thumbnail()) {
                                the_post_thumbnail('large', array('class' => 'flexible'));
                            }
                        ?>
                        <!--lien vers l'article-->
                        <a href="<?php the_permalink(); ?>" class="overlay">
                            <?php the_excerpt();?>
                        </a>
                    </div>
                   
            </li>
            <?php
                            endwhile;                            
                        wp_reset_postdata();
                        ?>
        </ul>
  <div id="zenav">
      <a id="prev" href="#re">&lt;</a>
            <a id="next" href="#re">&gt;</a>
  </div>
   <div id="socialclub">
      
   </div>

<?php } else { ?>
<?php } ?>
ainsi que les instructions suivantes dans votre feuille de style
/*slider styles*/
ul#tre {
width: 100%;
    position: relative;
text-align: center;
}
#tre li{
    width: 100%;
    height:auto;
   
    position: relative;
    margin: 0 auto;
    text-align:center}
#tre li img{
   
    position: relative;
    margin: 0 auto}
.overlay{
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
    color:white !important;
    text-shadow: 1px 1px 0px #000;
    width:100%;
    display: block;
    padding:5px;
    text-align: center;
    position: absolute;
    bottom:0}
#zenav{
        top: 123px;
        position: absolute;
    z-index:100000;
    }
#zenav a{
position: absolute;
z-index: 100000;
height: 30px;
width: 24px;
box-shadow: 1px 1px 0px rgba(51, 51, 51, .1);
background: white;}

    #prev {
        position: absolute;
        left:0;
            top: 123px;

    }
    #next {
        position: absolute;
        left:0;
            top: 176px;

    }
#socialclub{
    width: 990px;
bottom: 49px;
position: absolute;
z-index: 100000;
text-align: center;}
#socialclub > span{
    color:#333333;
    font-size:40px}
.cycle-pager-active{
        color:#CECECE
}


Ce qui donnera le résultat ci dessous .
image
Le thème final est disponible au téléchargement ici .
Jean Luc Houedanou

Aucun commentaire:

Bottom Ad [Post Page]

| Designed by Colorlib | (Heavily) Modified by Jean Luc Houedanou