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; ?>