Comment utiliser la maçonnerie pour ajouter une grille de poteaux de style Pinterest dans WordPress

Ceci est un commentaire de Josh Pollock

L’affichage sur grille de messages de type Pinterest a été un design populaire pour les pages d’index des blogs WordPress pendant un certain temps. Il est populaire non seulement parce qu'il imite l'apparence du site de média social populaire, mais aussi parce qu'il optimise l'utilisation de l'espace à l'écran. Sur un index de blog WordPress, il permet à chaque aperçu de publication d’être de la taille qui lui convient naturellement, sans laisser d’espace supplémentaire..

Dans ce tutoriel, je vais vous montrer comment utiliser la célèbre bibliothèque JavaScript Masonry pour créer des dispositions de grille en cascade pour votre index de blog, ainsi que des pages d'archivage 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..

Note: Ceci est un tutoriel de niveau avancé pour ceux qui se sentent à l'aise pour éditer des thèmes WordPress et qui ont une connaissance suffisante en HTML / CSS.

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

Mettre à jour: WordPress 3.9 inclut maintenant la dernière version de maçonnerie.

Tout d’abord, vous devez charger la maçonnerie dans votre thème à l’aide de ce code:

 if (! function_exists ('slug_scripts_masonry')): if (! is_admin ()): function slug_scripts_masonry () wp_enqueue_script ('maçonnerie'); wp_enqueue_style ('maçonnerie', get_template_directory_uri (). '/ css /');  add_action ('wp_enqueue_scripts', 'slug_scripts_masonry'); fin si; //! is_admin () endif; //! slug_scripts_masonry existe 

Ce code charge simplement la maçonnerie et le met à la disposition des fichiers de modèle de votre thème (voir notre guide sur la façon d’ajouter correctement des scripts et des styles JavaScript 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 la maçonnerie 3 est qu'elle ne nécessite pas jQuery, mais qu'elle peut être utilisée avec. D'après mon expérience, l'initialisation de Masonry sans jQuery est plus fiable et ouvre la possibilité de ne pas charger jQuery, ce qui peut aider à réduire le 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 garantit également que tout se passe dans le bon ordre. La maçonnerie 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 la maçonnerie dans de nombreux navigateurs est que la maçonnerie calculera mal la hauteur des éléments contenant des images à chargement lent, ce qui entraînera le chevauchement d'éléments. La solution consiste à utiliser imagesLoaded afin d’empêcher Maçonnerie de calculer la mise en page tant que toutes les images ne sont pas chargées. Cela garantit un bon dimensionnement.

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

 if (! function_exists ('slug_masonry_init')): function slug_masonry_init () ?> // définit le conteneur dans lequel se trouvera la maçonnerie dans un conteneur var = document.querySelector ('# maçonnerie-boucle'); // crée une variable vide msnry var msnry; // initialise la maçonnerie après le chargement de toutes les images imagesLoaded (conteneur, fonction () msnry = nouvelle maçonnerie (conteneur, itemSelector: '.masonry-entry'););   
La fonction est expliquée pas à pas avec des commentaires en ligne. La fonction Javascript demande à la maçonnerie de regarder dans un conteneur portant l'identifiant «boucle de maçonnerie» pour rechercher les éléments de la classe «entrée de maçonnerie» et de calculer la grille uniquement après le chargement des images. Nous définissons le conteneur externe avec querySelector et le conteneur interne avec itemSelector.
 
Étape 2: Créer une boucle de maçonnerie
 
Au lieu d’ajouter le balisage HTML pour la maçonnerie 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 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 du contenu. Vous pouvez le modifier quand vous le souhaitez, assurez-vous simplement que l'élément le plus à l'extérieur a la classe «entrée de maçonnerie» que nous avons définie comme élémentSelector à la dernière étape..
 
 
             
 
Ce balisage comporte des classes pour chacune de ses parties, ce qui vous permet d'ajouter un balisage correspondant à votre thème. J'aime ajouter une belle bordure légèrement arrondie à .masonry-entry. Une autre option intéressante n'est pas de bordure pour .masonry-entry, mais de lui donner une légère ombre. Cela semble particulièrement intéressant lorsque la vignette du message s’étend jusqu’à la bordure du conteneur, ce qui peut être accompli en donnant des marges et des marges de 0 .masonry-thumbnail à 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 de modèle, vous pouvez l’utiliser dans n’importe quel modèle de votre thème que vous aimez. Vous pouvez l'ajouter au fichier 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, utilisez-le dans home.php lorsqu'il affiche les articles de blog. 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 le modèle à la boucle à l’aide de get_template_part (). Assurez-vous de démarrer le conteneur de boucle de maçonnerie avant while (have_posts ()).
 
Par exemple, voici la boucle principale du fichier index.php de twentythirteen:
 
          
 
Et ici, il est modifié pour utiliser notre boucle de maçonnerie:
 
            
 
É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 nombre de pixels lorsque vous initialisez la maçonnerie. Je ne suis pas un fan de cela, car j'utilise des thèmes réactifs et il faut quelques requêtes complexes de la part des médias pour que tout se passe bien sur de petits écrans. Pour les conceptions réactives, 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 aligner, puis laissez la maçonnerie faire le calcul à votre place..
 
Tout ce que cela nécessite est de diviser le 100 par le nombre d'éléments pour lesquels vous souhaitez définir le pourcentage dans une entrée simple dans le fichier 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:
 
.entrée de maçonnerie largeur: 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 de 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-le sur votre téléphone. Si vous n'êtes pas satisfait de l'apparence de votre téléphone, vous devrez alors travailler un peu..
 
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 modèle de modèle de maçonnerie de contenu. Deux bonnes solutions s'offrent à vous: abréger l'extrait pour les téléphones ou le sauter complètement. Voici une fonction supplémentaire que vous pouvez ajouter au functions.php de votre thème pour le faire. Parce que je ne pense pas que ces problèmes posent problème sur les tablettes, j'utilise un excellent plugin, Mobble, dans tous les exemples de cette section, pour effectuer uniquement les modifications 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 retombe 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) // définit la longueur la plus courte une fois $ short = 10; // set long length once $ long = 55; // si nous ne pouvons définir qu'un court extrait pour les téléphones, sinon pour tous les appareils mobiles 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 existe 
 
Comme vous pouvez le constater, nous commençons par stocker la longueur des extraits longs et courts dans les variables, puisque nous utiliserons ces valeurs deux fois et que nous souhaitons pouvoir les modifier d’un endroit à un autre si nous en avons besoin ultérieurement. À 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 ce n’est pas le cas. 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 l’autre partie 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 ne reste plus qu’à associer la fonction au filtre extrait_length..
 
Raccourcir l'extrait est une option, mais nous pouvons également le supprimer entièrement avec un processus simple. Voici une nouvelle version de content-maonry, avec la totalité de la portion de l'extrait ommited sur les téléphones:
 
 
           
 
Cette fois, nous testons pour voir si nous ne sommes pas sur un téléphone / appareil mobile et si, si tel est le cas, nous renvoyons l'extrait de notre boucle. Si nous sommes sur un téléphone / appareil mobile, nous ne faisons rien.
 
Vous pouvez également augmenter la largeur des éléments de maçonnerie, ce qui en réduit le nombre sur une ligne, sur les appareils mobiles. Pour ce faire, nous allons ajouter un style en-ligne différent à l'en-tête en fonction de la détection du périphérique. 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, ce que vous voudrez peut-être, pour garder vos styles de maçonnerie séparés. Si vous n'utilisez pas cette option, vous pouvez utiliser la poignée d'une autre feuille de style déjà enregistrée..
 
 if (! function_exists ('slug_masonry_styles')): function slug_masonry_styles () // définit la largeur large $ wide = '25% '; // définir la largeur étroite $ narrow = '50% '; / ** Détermine la valeur de $ width ** / // si nous ne pouvons définir que étroit pour les téléphones, sinon étroit pour tous les appareils mobiles if (function_exists ('is_phone') if (is_phone ()) $ width = $ narrow;  else $ width = $ wide; else if (wp_is_mobile ()) $ width = $ étroit; else $ width = $ wide; / ** CSS en sortie pour .masonry-entry avec la largeur appropriée ** / $ custom_css = ".masonry-entry width: $ width;"; // Vous devez utiliser ici le descripteur d'une feuille de style déjà mise en file d'attente. wp_add_inline_style ('maçonnerie', $ custom_css); add_action (') wp_enqueue_scripts ',' slug_masonry_styles '); endif; //! slug_masonry_styles existe 
 
Cette fonction éneuque la feuille de style personnalisée, puis définit une valeur pour width en utilisant une logique qui devrait maintenant être très familière. Après cela, nous créons la variable $ custom_css en passant la valeur de width à un bit de CSS à l'apparence normale avec $ width. Après cela, nous utilisons wp_add_inline_style pour indiquer à WordPress d’imprimer nos styles en-ligne dans l’en-tête chaque fois que la feuille de style Maçonnerie est utilisée, puis nous accrochons toute la fonction à wp_enqueue_scripts et nous avons terminé..
 
Si vous choisissez de combiner vos styles de maçonnerie dans une feuille de style existante, veillez à utiliser le descripteur de cette feuille de style avec wp_add_inline_style, sinon vos styles en ligne ne seront pas inclus. J'aime utiliser wp_add_inline_style parce que j'emballe généralement le crochet d'action pour mettre en file d'attente la maçonnerie dans un conditionnel afin qu'il ne soit ajouté que si nécessaire. Par exemple, si je n'utilise que la maçonnerie sur mon index de blog et mes pages d'archive, je procéderais ainsi:
 
 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 la maçonnerie sur un périphérique mobile. Aussi, 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 tout élément en fonction de la détection de périphérique, mais également en fonction du modèle utilisé ou même si l'utilisateur est connecté ou non..
 
J'espère que vous voyez ces différents changements que je suis en train de faire comme une occasion 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 une nouvelle tournure à cette idée populaire. Montrez-nous dans les commentaires ce que vous avez fait de mieux pour utiliser la maçonnerie dans un thème WordPress..
 
Josh Pollock, un utilisateur WordPress polyvalent, écrit à propos de WordPress, développe des thèmes, est responsable de la communauté pour le cadre Pods et préconise des solutions open source pour une conception durable..