Masonry et Infinite Scroll sous WordPress sans plugin

Masonry et Infinite Scroll sont 2 scripts jQuery qui permettent respectivement de gérer des hauteurs de contenus différentes –  pour une disposition en colonnes de vos articles, et d’afficher les pages suivantes sans rechargement de page.

Au clic sur un bouton ou par simple défilement à la manière de Facebook ou encore Twitter, ces scripts gagnent en popularité. Face à l’absence de tutoriel complet sur l’intégration de ces 2 scripts jQuery sous WordPress, je vous ai concocté un tutoriel complet – ou presque, sur le sujet.

Démonstration du résultat final

J’ai appliqué l’ensemble des technique énoncées ci-après pour l’affichage de toutes les pages d’archives de WordPress Channel : accueil, catégories, recherche… toutes je vous dis !

N’hésitez pas non plus à redimensionner la fenêtre du navigateur et admirer l’animation qui replace les éléments avec fluidité.

Étape n°1 – Ajout des scripts jQuery

Dans votre thème et plus précisément dans le fichier functions.php – ou celui qui charge l’ensemble de vos scripts, collez les lignes de code suivantes.

function wpc_styles() {
	wp_register_script( 'infinite-scroll', get_template_directory_uri().'/inc/js/jquery.infinitescroll.min.js', 'jquery', '2.0', true );
	wp_enqueue_script( 'jquery-masonry' );
	wp_enqueue_script( 'infinite-scroll' );
add_action('wp_enqueue_scripts', 'wpc_styles');

Vous noterez que Masonry n’a pas besoin d’être présent dans le dossier de votre thème et que nous pouvons le charger directement. WordPress l’intègre de base dans les scripts disponibles alors profitez-en !

Il vous faudra néanmoins télécharger Infinite Scroll et l’envoyer dans un dossier /inc/js de votre thème. Notez que le chemin dépend directement de la façon dont vous avez structuré votre thème. A vous, ensuite, d’adapter le code en fonction.

Étape n°2 – Ajout des styles CSS

La prise en charge des effets énoncés dépend directement des styles CSS que vous devez ajouter dans le fichier style.css.

Voici le code utilisé que vous serez libre d’adapter selon votre charte graphique :

/* Masonry */
.grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
.grid h2 {
    font-size: 17px;
	margin-top: 0;
}
.grid article {
    background-color: #FFFFFF;
    border: 2px solid #C3C0AB;
    display: block;
    float: left;
    margin: 10px;
    width: 23%;
}


/* Infinite Scroll */
.load-more-manual #page-nav {
	display:block !important; 
}
#page-nav {
	display:none; 
	text-align:center; 
}
.load-more-manual #page-nav a {
	margin:20px auto 10px auto;
	display:inline-block;
	width:auto;
}
.load-more-manual #page-nav a {
    font-weight: bold;
    display: inline-block;
    font-size: 15px;
    position: relative;
    transition-duration: 150ms;
    text-decoration: none;
}
#infscr-loading { 
	text-align: center;
	z-index: 100;
	position: fixed;
	left: 50%;
	bottom: 40px;
	width: 200px;
	margin-left:-100px;
	padding: 10px;
	background: #000; 
	opacity: 0.8;
	color: #FFF;
	-webkit-border-radius: 10px;
	 -moz-border-radius: 10px;
	      border-radius: 10px;
}
.more { 
	width: 300px;
}

Prenez garde à la propriété width: 23% pour .grid article car elle détermine la largeur de vos colonnes. Faites appel aux outils de développement intégrés dans votre navigateur favori.

Étape n°3 – Ajout du JavaScript

Il nous faut déclencher Masonry et Infinite Scroll en plaçant le bout de JavaScript suivant dans votre footer.php ou de façon plus propre dans un fichier scripts.js par exemple – n’oubliez pas de le charger comme les autres scripts (cf. étape n°1). L’exemple ci-dessous se base sur l’utilisation d’un fichier JS dans lequel je place mes différents scripts :

jQuery( document ).ready( function( $ ) {
    /* Masonry   Infinite Scroll */	
    var $container = $('#grid-container');
    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '.post'
        });
    });
    $('#grid-container').masonry({
        itemSelector: '.post',
        columnWidth: 258
    });
    $container.infinitescroll({
        navSelector: '#page-nav',
        nextSelector: '#page-nav a',
        itemSelector: '.post',
        loading: {
            msgText: 'Chargement des contenus...',
            finishedMsg: 'Aucun contenu à charger.',
            img: 'http://i.imgur.com/6RMhx.gif'
        }
    }, function (newElements) {
        var $newElems = $(newElements).css({
            opacity: 0
        });
        $newElems.imagesLoaded(function () {
            $newElems.animate({
                opacity: 1
            });
            $container.masonry('appended', $newElems, true);
        });
    });
    $(window).unbind('.infscr');
    jQuery("#page-nav a").click(function () {
        jQuery('#grid-container').infinitescroll('retrieve');
        return false;
    });
    $(document).ajaxError(function (e, xhr, opt) {
        if (xhr.status == 404) $('#page-nav a').remove();
    });    
});

Quelques notes importantes :

• La propriété columnWidth est à définir en pixels et correspond à la largeur d’une colonne ;
• Les différents textes de la propriété loading peuvent être modifiés au besoin ;
• Insérez l’URL du gif animé ou enregistrez celle de l’exemple dans le thème WordPress pour la propriété img;

Étape n°4 – Structure HTML

A présent nous disposons de tous les éléments : scripts jQuery, CSS et JavaScript. Il nous faut donc passer à la structure HTML.

D’ordinaire, on commence par l’inverse mais j’ai préféré procéder comme tel afin de vous amener à comprendre les liens avec le code HTML. Simple question de méthode pédagogique je dirais.

Comme vous pouvez le voir dans le code ci-dessous, nous utilisons des identifiants et des classes CSS spécifiques qui correspondent directement aux étapes précédentes. Il ne faut pas les supprimer.

<section id="grid-container" class="transitions-enabled fluid masonry js-masonry grid">
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<?php get_template_part('content', get_post_format()); ?>
	<?php endwhile; ?>
</section>
<div class="load-more-manual">
	<nav id="page-nav" role="navigation"><?php next_posts_link( __( '<span class="more btn btn-primary btn-lg btn-block">Load more posts</span>', 'wpc' ) ); ?></nav>
</div>
<?php else: ?>
	<?php get_template_part('content', 'none'); ?>
<?php endif; ?>

Remarque de taille : la boucle utilisée ici fait appel à un fichier content.php dans sa version la plus simple (si on exclut l’usage des posts formats). Il est impératif de rajouter une classe CSS dans chaque article que nous nommerons post pour que les scripts fonctionnent.

Les lignes 6 à 8 quand à elles permettent l’affichage du bouton pour charger plus d’éléments. Là encore, amusez-vous à le personnaliser via le CSS (cf. étape n°2).

Pour ce faire, modifiez le fichier correspondant et veillez à éditez cette ligne :

<article id="post-<?php the_ID(); ?>" <?php post_class('post'); ?>>

A propos du bouton load-more

Les plus attentifs d’entre vous auront noté que le chargement d’une page 3, 4 ou plus ne modifiait pas l’URL. Cela empêche donc le partage d’une URL en particulier comme me l’a fait remarqué Geoffrey Crofte :

Malheureusement, je n’ai à ce jour aucune solution technique à proposer. Si une âme charitable se sent l’envie de mes communiquer ses compléments, j’éditerai le tutoriel en conséquence avec mes remerciements les plus sincères cela va de soi.

Tous les sites ne se prêtent pas à un usage Masonry + Infinite Scroll mais dans le cas d’un blog ou d’un magazine avec du contenu régulier, j’y trouve personnellement beaucoup d’avantages. Quel est votre avis sur la question ?