Lister des posts avec un effet graphique

Voici un exemple simple d’affichage d’article. Plutôt que d’afficher une mosaique, les articles sont ici listés sous la forme de titres imposants, accompagné d’une vignette minuscule et de leur date. En survolant avec la souris, on fait défiler latéralement les titres vers la droite.

Pour des raisons de facilité, le code a été écrit dans un template part, qui contient html, php, css et javascript. On peut séparer ces différentes parties si on veut obtenir un code plus clean (en copiant les css dans style.css et le javascript dans le fichier dédié), mais le tout est fonctionnel.

La méthode

Comme évoqué, on va d’abord créer un fichier dans le dossier "morceaux" du thème Hiremeplease. On lui donne un nom explicite, ici liste_articles_defilants.php.

Ce fichier sera inclus à l’endroit désiré, dans notre cas dans la page home.php.
On procède avec le code standard de Wordpress get_template_part :

<?php
// template avec liste d'article défilants
get_template_part( 'morceaux/liste_articles_defilants' );
?>

Le code du template

Voici le code, qui peut être adapté (selon la typo, la vitesse de défilement, etc.).
Il est commenté pour plus de lisibilité.

<?php
// stocker la query de base
$temp_query = $wp_query;

// demander tous les posts par ordre ascendant
$args = array(
   'post_type' => 'post',
   'order' => 'ASC',
   'posts_per_page' => -1
);
// faire la requete sur la base de donnée
query_posts($args);
?>

<div id="nav-bande" class="container my-5">
   <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
   <div class="bande-conteneur py-2" id="post-<?php the_ID(); ?>">
       <h2 class="bande-contenu mb-0">
           <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
               <?php the_post_thumbnail('vignette'); ?>
               <?php the_title(); ?>
               <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
<?php the_time('m/Y') ?>
           </a> </h2>
   </div>
   <?php endwhile; ?>
   <?php endif; ?>
</div>

<style>
   .bande-conteneur {
       border-bottom:2px solid #000;
       overflow:hidden;
       position:relative;
   }
   .bande-conteneur:first-child {
       border-top:2px solid #000;
   }
   .bande-contenu {
       font-size:45px;
       letter-spacing:0.3em;
       white-space: nowrap;
       position:relative;
       left:0px;
       transition-property: all;
       transition-duration: 2s; /* durée du déplacement */
       transition-timing-function: linear; /* type de déplacement */
   }
   .bande-contenu a:hover {
       text-decoration: none;
   }
   .bande-contenu .wp-post-image {
       height:45px !important;
       width:auto !important;
       vertical-align:text-bottom;
   }
</style>

<script>
   // le code s'occupant du défilement
   jQuery(".bande-conteneur").each(function(){
       var w=jQuery(this).outerWidth();
       var ew=jQuery(this).find(".bande-contenu a").outerWidth();
       var tpp=0.005; // temps par pixel pour le calcul de vitesse de déplacement pour chaque ligne
       var decalagedroite=30; // décalage à la fin de la ligne pour le confort de lecture
       jQuery(this).hover(function(){
           var sw=ew-w+decalagedroite;
           if(sw > 0){
               // calcul du temps de déplacement:
               // plus l'espace à parcourir est court
               // plus le temps est court
               var vitesse=sw*tpp;
               jQuery(this).find(".bande-contenu").css("left","-"+sw+"px").css("transition-duration",vitesse+"s");
           }
       },function(){
           jQuery(this).find(".bande-contenu").css("left","0");
       });
   });
</script>

<?php
// on remet en place la requete initiale
$wp_query = $temp_query; ?>