Ceci est un article invité de Josh Pollock

L'affichage en grille de messages de type Pinterest est une conception populaire pour les pages d'index de blog 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 utilise au mieux l'espace sur l'écran. Sur un index de blog WordPress, cela permet à chaque aperçu de publication d'avoir la taille dont il a naturellement besoin, sans laisser d'espace supplémentaire.

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

Capture d'écran de la mise en page de la grille de maçonnerie dans WordPress

Remarque : Il s'agit d'un didacticiel de niveau avancé pour ceux qui se sentent à l'aise pour éditer des thèmes WordPress et qui ont suffisamment de connaissances HTML/CSS.

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

Mettre à 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 la maçonnerie et la rend disponible pour les fichiers de modèle de votre thème (voir notre guide sur la façon d'ajouter correctement des JavaScripts et des styles dans WordPress). Notez également que nous n'ajoutons pas jQuery en tant que 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, l'initialisation de Masonry sans jQuery est plus fiable et ouvre la possibilité d'ignorer le chargement de jQuery, ce qui peut aider à la fois avec les temps de chargement des pages et les problèmes de compatibilité.

Étape 2 : Initialiser le Javascript

Cette fonction suivante configure la maçonnerie, définit les conteneurs qui seront utilisés avec elle 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 de manière dynamique. 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 mise en page tant que toutes les images ne sont pas chargées. Cela garantit un dimensionnement correct.

Voici la fonction et l'action qui afficheront 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 est de dire à Masonry de regarder à l'intérieur d'un conteneur avec l'id “masonry-loop” pour les éléments avec la classe “masonry-entry” et de calculer la grille uniquement après le chargement des images. Nous définissons le conteneur externe avec querySelector et l'intérieur avec itemSelector.

Étape 2 : créer une boucle de maçonnerie

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

Dans votre nouveau fichier, vous ajouterez le code ci-dessous. Le balisage est similaire à ce que vous verriez normalement pour tout aperçu de contenu. Vous pouvez le modifier comme bon vous semble, assurez-vous simplement que l'élément le plus à l'extérieur a la classe “masonry-entry” que nous avons définie comme itemSelector à la dernière étape.


<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 option intéressante est de ne pas avoir de bordure pour .masonry-entry, mais de lui donner une légère ombre. Cela semble particulièrement bien lorsque la vignette de la publication s'étend jusqu'à la bordure du conteneur, ce qui peut être accompli en donnant des marges et des rembourrages de .masonry-thumbnail de 0 dans toutes les directions. Vous voudrez ajouter tous ces styles dans un fichier appelé masonry.css dans le répertoire css de votre thème.

Étape 3 : Ajouter une boucle de maçonnerie aux modèles

Maintenant que nous avons notre partie modèle, vous pouvez l'utiliser dans n'importe quel modèle de votre thème que vous aimez. Vous pouvez l'ajouter à index.php, mais pas à category.php si vous ne voulez pas qu'il soit utilisé pour les archives de catégories. Si vous souhaitez uniquement l'utiliser sur la page d'accueil de votre thème, lorsqu'il est configuré pour afficher les articles de blog, vous devez l'utiliser dans home.php. Où que vous choisissiez, tout ce que vous avez à faire est d'envelopper votre boucle dans un conteneur avec l'identifiant « masonry-loop » et d'ajouter la partie modèle dans la boucle à l'aide de get_template_part(). Assurez-vous de démarrer le conteneur de boucles de maçonnerie avant while (have_posts() ).

Par exemple, voici la boucle principale du fichier 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 ici, il est modifié pour utiliser notre boucle de maçonnerie :


<?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 de maçonnerie

Il existe plusieurs façons de définir la largeur de chaque élément de maçonnerie. Vous pouvez définir la largeur en utilisant un certain nombre de pixels lorsque vous initialisez Masonry. Je ne suis pas fan de faire cela car j'utilise des thèmes réactifs et cela nécessite des requêtes multimédias complexes pour bien faire les choses 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, basé sur le nombre d'éléments que vous voulez dans une rangée et de laisser Masonry faire le reste du calcul pour vous.

Tout cela nécessite de diviser les 100 par le nombre d'éléments dont vous souhaitez définir le pourcentage dans une simple entrée dans le style.css de votre thème. Par exemple, si vous voulez quatre éléments dans chaque ligne, vous pouvez le faire dans votre fichier masonry.css :

.masonry-entry{width:25%}

Étape 5 : Optimisation mobile

Nous pourrions nous arrêter ici, mais je ne pense pas que le résultat final fonctionne incroyablement 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 de maçonnerie sur votre bureau, vérifiez-la sur votre téléphone. Si vous n'êtes pas satisfait de l'apparence de 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 de maçonnerie de contenu. Deux bonnes solutions qui s'offrent à vous sont de raccourcir l'extrait pour les téléphones ou de le sauter entièrement. Voici une fonction supplémentaire que vous pouvez ajouter au 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 Mobilité dans tous les exemples de cette section pour effectuer les modifications uniquement 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 reviens à 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 changer d'un endroit si nous en avons besoin plus tard. À partir de là, nous testons si nous pouvons utiliser is_phone() de Mobble. Si tel est le cas, nous définissons le court extrait pour les téléphones et le long extrait si nous ne le sommes pas. Après cela, nous faisons la même chose de base, mais en utilisant wp_is_mobile, qui affectera tous les appareils mobiles, si is_phone() ne peut pas être utilisé. Espérons 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 d'extrait est définie, il suffit de raccorder la fonction au filtre de longueur d'extrait.

Raccourcir l'extrait est une option, mais nous pouvons également nous en passer complètement avec un processus simple. Voici une nouvelle version de content-masonry, avec toute la partie de l'extrait 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 renvoyons la partie extraite de notre boucle. Si nous sommes sur un téléphone/appareil mobile, nous ne faisons rien.

Une autre chose que vous voudrez peut-être faire est d'augmenter la largeur des éléments de maçonnerie, ce qui réduit le nombre d'affilée, 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. Étant donné que 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 voudrez peut-être, pour séparer vos styles de maçonnerie. 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 active la feuille de style personnalisée, puis définit une valeur pour la largeur en utilisant ce qui devrait maintenant être une logique très familière. Après cela, nous créons la variable $custom_css en passant la valeur de la largeur dans un morceau de CSS d'apparence 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 de maçonnerie dans une feuille de style existante, assurez-vous d'utiliser la poignée 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 parce que j'enveloppe généralement le crochet d'action pour mettre en file d'attente Masonry dans un conditionnel afin qu'il ne soit ajouté qu'en cas de besoin. Par exemple, si j'utilise uniquement la maçonnerie sur les pages d'index et d'archives de mon blog, 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 cerveau. Par exemple, vous pouvez utiliser une logique similaire pour ignorer complètement la maçonnerie 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 par programme différents styles en fonction de tout type de conditionnel. Cela 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 modifications peuvent également être basées sur le modèle utilisé, ou même si l'utilisateur est connecté ou non.

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

Un gars WordPress polyvalent, Josh Pollock écrit sur WordPress, développe des thèmes, sert de gestionnaire de communauté pour le cadre Pods et préconise des solutions open source pour une conception durable.

Laisser un commentaire