Comment utiliser Masonry pour ajouter une grille d'articles de style Pinterest dans WordPress

Ceci est un article invité de Josh Pollock

L'affichage en grille de publications, similaire à Pinterest, est un design populaire pour les pages d'index de blogs WordPress depuis un certain temps. Il est populaire non seulement parce qu'il imite l'apparence du site de médias sociaux populaire, mais aussi parce qu'il optimise l'espace à l'écran. Sur un index de blog WordPress, il permet à chaque aperçu d'article d'avoir la taille dont il a naturellement besoin, sans laisser d'espace supplémentaire.

Dans ce tutoriel, je vais vous montrer comment utiliser la populaire bibliothèque JavaScript Masonry pour créer des mises en page en grille en cascade pour l'index de votre blog, ainsi que pour les pages d'archives de votre thème. J'aborderai quelques problèmes que vous devez prendre en compte pour l'optimisation mobile et comment les résoudre.

Remarque : Ceci est un tutoriel de niveau avancé pour ceux qui se sentent à l'aise avec la modification de thèmes WordPress et qui possèdent des connaissances suffisantes en HTML/CSS.

Étape 1 : Ajouter les bibliothèques nécessaires à votre thème

Mise à jour : WordPress 3.9 inclut désormais la dernière version de Masonry.

Vous devez d'abord charger Masonry dans votre thème, en utilisant ce code :

if (! function_exists('slug_scripts_masonry') ) :
if ( ! is_admin() ) :
function slug_scripts_masonry() {
    wp_enqueue_script('masonry');
    wp_enqueue_style('masonry’, get_template_directory_uri().'/css/’);
}
add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
endif; //! is_admin()
endif; //! slug_scripts_masonry exists

Ce code charge simplement Masonry et le rend disponible pour les fichiers de modèle de votre thème (voir notre guide sur la façon d'ajouter correctement des JavaScript et des styles dans WordPress). Notez également que nous n'ajoutons pas jQuery comme dépendance pour l'un ou l'autre. L'un des avantages de Masonry 3 est qu'il ne nécessite pas jQuery, mais peut être utilisé avec. D'après mon expérience, initialiser Masonry sans jQuery est plus fiable et ouvre la possibilité de ne pas charger jQuery, ce qui peut aider à la fois au temps de chargement des pages et aux problèmes de compatibilité.

Étape 2 : Initialiser le JavaScript

La fonction suivante configure Masonry, définit les conteneurs qui seront utilisés avec et s'assure également que tout se passe dans le bon ordre. Masonry doit calculer la taille de chacun des éléments de la page afin de disposer sa grille dynamiquement. Un problème que j'ai rencontré avec Masonry dans de nombreux navigateurs est que Masonry calcule mal la hauteur des éléments avec des images à chargement lent, ce qui entraîne des éléments qui se chevauchent. La solution consiste à utiliser imagesLoaded pour empêcher Masonry de calculer la disposition tant que toutes les images ne sont pas chargées. Cela garantit un dimensionnement correct.

Ceci est la fonction et l'action qui généreront le script d'initialisation dans le pied de page :

if ( ! function_exists( 'slug_masonry_init' )) :
function slug_masonry_init() { ?>
<script>
    //set the container that Masonry will be inside of in a var
    var container = document.querySelector('#masonry-loop');
    //create empty var msnry
    var msnry;
    // initialize Masonry after all images have loaded
    imagesLoaded( container, function() {
        msnry = new Masonry( container, {
            itemSelector: '.masonry-entry'
        });
    });
</script>
<?php }
//add to wp_footer
add_action( 'wp_footer', 'slug_masonry_init' );
endif; // ! slug_masonry_init exists

La fonction est expliquée étape par étape avec des commentaires en ligne. Ce que fait la fonction JavaScript, c'est de dire à Masonry de chercher à l'intérieur d'un conteneur avec l'ID « masonry-loop » des éléments avec la classe « masonry-entry » et de calculer la grille uniquement après le chargement des images. Nous définissons le conteneur extérieur avec querySelector et l'intérieur avec itemSelector.

Étape 2 : Créer la boucle Masonry

Au lieu d'ajouter le balisage HTML pour Masonry directement à un modèle, nous allons créer une partie de modèle distincte pour cela. Créez un nouveau fichier nommé « content-masonry.php » et ajoutez-le à votre thème. Cela vous permettra d'ajouter la boucle Masonry à autant de modèles différents que vous le souhaitez.

Dans votre nouveau fichier, vous ajouterez le code montré ci-dessous. Le balisage est similaire à ce que vous verriez normalement pour n'importe quel aperçu de contenu. Vous pouvez le modifier comme vous le souhaitez, assurez-vous simplement que l'élément le plus externe a la classe « masonry-entry », que nous avons définie comme itemSelector à l'étape précédente.

<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<?php if ( has_post_thumbnail() ) : ?>
    <div class="masonry-thumbnail">
        <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
    </div><!--.masonry-thumbnail-->
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
        <div class="masonry-post-excerpt">
            <?php the_excerpt(); ?>
        </div><!--.masonry-post-excerpt-->
    </div><!--/.masonry-entry-details -->  
</article><!--/.masonry-entry-->

Ce balisage a des classes pour chacune de ses parties afin que vous puissiez ajouter un balisage correspondant à votre thème. J'aime ajouter une belle bordure légèrement arrondie à .masonry-entry. Une autre bonne option est de ne pas avoir de bordure pour .masonry-entry, mais de lui donner une légère ombre. Cela rend particulièrement bien lorsque la miniature de l'article s'étend sur toute la largeur du conteneur, ce qui peut être réalisé en donnant à .masonry-thumbnail des marges et des remplissages de 0 dans toutes les directions. Vous voudrez ajouter tous ces styles dans un fichier nommé masonry.css dans le répertoire css de votre thème.

Étape 3 : Ajouter la boucle Masonry aux modèles

Maintenant que nous avons notre partie de modèle, vous pouvez l'utiliser dans n'importe quel modèle de votre thème. Vous pourriez l'ajouter à index.php, mais pas à category.php si vous ne voulez pas qu'elle soit utilisée pour les archives de catégories. Si vous ne voulez qu'elle soit utilisée que sur la page d'accueil de votre thème, lorsqu'elle est configurée pour afficher des articles de blog, vous l'utiliseriez dans home.php. Où que vous choisissiez, tout ce que vous avez à faire est d'envelopper votre boucle dans un conteneur avec l'ID « masonry-loop » et d'ajouter la partie de modèle dans la boucle en utilisant get_template_part(). Assurez-vous de commencer le conteneur de la boucle masonry avant while (have_posts() ).

Par exemple, voici la boucle principale de index.php de twentythirteen :

<?php if ( have_posts() ) : ?>

    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', get_post_format() ); ?>
    <?php endwhile; ?>

    <?php twentythirteen_paging_nav(); ?>

<?php else : ?>
    <?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

Et voici comment il est modifié pour utiliser notre boucle Masonry :

<?php if ( have_posts() ) : ?>
<div id="masonry-loop">
    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', 'masonry' ?>
    <?php endwhile; ?>
</div><!--/#masonry-loop-->
    <?php twentythirteen_paging_nav(); ?>

<?php else : ?>
    <?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

Étape 4 : Définir les largeurs réactives des éléments Masonry

Il existe plusieurs façons de définir la largeur de chaque élément Masonry. Vous pouvez définir la largeur en utilisant un nombre de pixels lors de l'initialisation de Masonry. Je n'aime pas faire cela car j'utilise des thèmes réactifs et cela nécessite des requêtes média complexes pour que les choses soient correctes sur les petits écrans. Pour les conceptions réactives, j'ai trouvé que la meilleure chose à faire est de définir une valeur de largeur pour .masonry-entry avec un pourcentage, en fonction du nombre d'éléments que vous souhaitez par ligne, et de laisser Masonry faire le reste du calcul pour vous.

Tout ce qu'il faut, c'est diviser 100 par le nombre d'éléments que vous souhaitez définir en pourcentage dans une simple entrée de votre fichier style.css de thème. Par exemple, si vous souhaitez quatre éléments par ligne, vous pouvez le faire dans votre fichier masonry.css :

.masonry-entry{width:25%}

Étape 5 : Optimisation mobile

On pourrait s'arrêter là, mais je ne pense pas que le résultat final fonctionne très bien sur les petits écrans de téléphone. Une fois que vous êtes satisfait de l'apparence de votre thème avec la nouvelle grille Masonry sur votre ordinateur, vérifiez-la sur votre téléphone. Si vous n'êtes pas satisfait de son apparence sur votre téléphone, vous devrez faire un peu de travail.

Je ne pense pas qu'il y ait assez de place sur l'écran d'un téléphone pour tout ce que nous avons ajouté à notre partie de modèle content-masonry. Deux bonnes solutions s'offrent à vous : raccourcir l'extrait pour les téléphones ou le supprimer entièrement. Voici une fonction supplémentaire que vous pouvez ajouter au fichier functions.php de votre thème pour ce faire. Parce que je ne pense pas que ces problèmes soient un problème sur les tablettes, j'utilise un excellent plugin Mobble dans tous les exemples de cette section pour ne faire les changements que sur les téléphones, pas sur les tablettes. Je vérifie également si Mobble est actif avant de l'utiliser et, si nécessaire, je me rabats sur la fonction de détection mobile plus générale wp_is_mobile, qui est intégrée à WordPress.

if (! function_exists('slug_custom_excerpt_length') ) :
function slug_custom_excerpt_length( $length ) {
    //set the shorter length once
    $short = 10;
    //set long length once
    $long = 55;
    //if we can only set short excerpt for phones, else short for all mobile devices
    if (function_exists( 'is_phone') {
        if ( is_phone() ) {
            return $short;
        }
        else {
            return $long;
        }        
    }
    else {
        if ( wp_is_mobile() ) {
            return $short;
        }
        else {
            return $long;
        }
    }
}
add_filter( 'excerpt_length', 'slug_custom_excerpt_length', 999 );
endif; // ! slug_custom_excerpt_length exists

Comme vous pouvez le voir, nous commençons par stocker la longueur de l'extrait long et la longueur de l'extrait court dans des variables, car nous utiliserons ces valeurs deux fois et nous voulons pouvoir les modifier à un seul endroit si nous en avons besoin plus tard. À partir de là, nous testons si nous pouvons utiliser is_phone() de Mobble. Si c'est le cas, nous définissons l'extrait court pour les téléphones et l'extrait long si ce n'est pas le cas. Ensuite, nous faisons la même chose de base, mais en utilisant wp_is_mobile, ce qui affectera tous les appareils mobiles, si is_phone() ne peut pas être utilisé. J'espère que la partie else de cette fonction ne sera jamais utilisée, mais il est bon d'avoir une sauvegarde au cas où. Une fois que la logique de longueur de l'extrait est définie, il suffit de raccrocher la fonction au filtre excerpt_length.

Raccourcir l'extrait est une option, mais nous pouvons aussi nous en passer entièrement avec un processus simple. Voici une nouvelle version de content-masonry, avec la partie extrait entièrement omise sur les téléphones :

<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<?php if ( has_post_thumbnail() ) : ?>
    <div class="masonry-thumbnail">
        <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
    </div><!--.masonry-thumbnail-->
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
        <?php 
            //put the excerpt markup in variable so we don't have to repeat it multiple times.
            $excerpt = '<div class="masonry-post-excerpt">';
            $excerpt .= the_excerpt();
            $excerpt .= '</div><!--.masonry-post-excerpt-->';
//if we can only skip for phones, else skip for all mobile devices
            if (function_exists( 'is_phone') {
                if ( ! is_phone() ) {
                    echo $excerpt;
                }
            }
            else {
                if ( ! wp_is_mobile() ) {
                    echo $excerpt;
                }
            }
        ?>
    </div><!--/.masonry-entry-details -->  
</article><!--/.masonry-entry-->

Cette fois, nous testons pour voir si nous ne sommes pas sur un téléphone/appareil mobile et si c'est le cas, nous retournons la partie extrait de notre boucle. Si nous sommes sur un téléphone/appareil mobile, nous ne faisons rien.

Une autre chose que vous pourriez vouloir faire est d'augmenter la largeur des éléments Masonry, ce qui réduit leur nombre par ligne, sur les appareils mobiles. Pour ce faire, nous ajouterons un style en ligne différent à l'en-tête en fonction de la détection de l'appareil. Comme cette fonction utilise wp_add_inline_styles, elle dépendra d'une feuille de style spécifique. Dans ce cas, j'utilise masonry.css, que vous pourriez vouloir pour séparer vos styles de masonry. Si vous ne l'utilisez pas, vous pouvez utiliser le handle d'une autre feuille de style déjà enregistrée.

if ( ! function_exists ( 'slug_masonry_styles' ) ) :
function slug_masonry_styles() {
    //set the wide width
    $wide = '25%';
    //set narrow width
    $narrow = '50%';
    /**Determine value for $width**/
    //if we can only set narrow for phones, else narrow for all mobile devices
    if (function_exists( 'is_phone') {
        if ( is_phone() ) {
            $width = $narrow;
        }
        else {
            $width = $wide;
        }        
    }
    else {
        if ( wp_is_mobile() ) {
            $width = $narrow;
        }
        else {
            $width = $wide;
        }
    }
    /**Output CSS for .masonry-entry with proper width**/
    $custom_css = ".masonry-entry{width: {$width};}";
    //You must use the handle of an already enqueued stylesheet here.
    wp_add_inline_style( 'masonry', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'slug_masonry_styles' );
endif; // ! slug_masonry_styles exists

Cette fonction met en file d'attente la feuille de style personnalisée, puis définit une valeur pour la largeur en utilisant une logique qui devrait maintenant être très familière. Ensuite, nous créons la variable $custom_css en passant la valeur de la largeur dans un morceau de CSS d'apparence autrement normale avec {$width}. Après cela, nous utilisons wp_add_inline_style pour dire à WordPress d'imprimer nos styles en ligne dans l'en-tête chaque fois que la feuille de style Masonry est utilisée, puis nous accrochons toute la fonction à wp_enqueue_scripts et nous avons terminé.

Si vous avez choisi de combiner vos styles Masonry dans une feuille de style existante, assurez-vous d'utiliser le handle de cette feuille de style avec wp_add_inline_style ou vos styles en ligne ne seront pas inclus. J'aime utiliser wp_add_inline_style car j'enveloppe généralement le hook d'action pour la mise en file d'attente de Masonry dans une conditionnelle afin qu'il ne soit ajouté que lorsque nécessaire. Par exemple, si j'utilise Masonry uniquement sur mon index de blog et mes pages d'archives, je ferais ceci :

if ( is_home() || is_archive() ) {
    add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
}

Ces derniers exemples devraient ouvrir d'autres idées dans votre esprit. Par exemple, vous pourriez utiliser une logique similaire pour ignorer Masonry complètement sur un appareil mobile. De plus, wp_add_inline_style() est une fonction moins utilisée, mais très utile car elle vous permet de définir programmatiquement différents styles en fonction de tout type de conditionnelle. Elle peut vous permettre de changer radicalement le style de n'importe quel élément en fonction non seulement de la détection de l'appareil, mais les changements pourraient également être basés sur le modèle utilisé, ou même si l'utilisateur est connecté ou non.

J'espère que vous verrez ces différents changements que j'apporte comme une opportunité de faire preuve de créativité. Les systèmes de grille en maçonnerie et similaires en cascade sont populaires depuis un certain temps, il est donc temps d'apporter de nouvelles touches à cette idée populaire. Montrez-nous dans les commentaires les façons intéressantes que vous avez trouvées pour utiliser Masonry dans un thème WordPress.

Un passionné de WordPress polyvalent, Josh Pollock écrit sur WordPress, développe des thèmes, est le responsable de la communauté pour le Pods Framework et défend les solutions open source pour la conception durable.