Utilisation de jQuery Masonry pour l’affichage de type Pinterest

Avec l’inclusion de jQuery Masonry dans la bibliothèque principale de WordPress 3.5, il n’a jamais été aussi facile de modifier la présentation d’un modèle pour une publication récente..

Servir votre contenu dans une mise en page en maçonnerie peut rendre la partie blog de votre site Web plus intéressante visuellement pour vos lecteurs. Avec jQuery Masonry, peu importe la longueur de votre extrait de message (dans des limites raisonnables, bien sûr), il s’ajustera pour occuper tout l’espace disponible. Ce didacticiel va explorer l’idée derrière l’utilisation de la bibliothèque jQuery Masonry nouvellement incluse avec WordPres 3.5..

Qu'est-ce qu'une structure de maçonnerie?

Si vous avez entendu parler d'un mur de "maçonnerie" (pensez à un mur de briques), vous avez alors une assez bonne image mentale de ce à quoi une disposition de maçonnerie de votre site Web pourrait ressembler. Si vous êtes toujours confus, visitez Pinterest et découvrez comment ils ont placé chaque "épingle" sur leur site Web. Tout est disposé verticalement, remplissant tout l'espace disponible. Il est important de noter le terme "vertical" dans cette dernière phrase. Vous pouvez obtenir le même type d'effet de maçonnerie en utilisant des flottants CSS, mais vous pouvez rencontrer des problèmes d'espacement. Cela est dû au fait que, contrairement à jQuery Masonry, les flottants CSS organisent les éléments horizontalement en premier, puis verticalement. Cela peut créer des espaces très disparates et parfois indésirables dans votre mise en page. Utiliser jQuery Masonry peut aider à résoudre ce problème.

Exemple de flottement CSS

Notez qu'il existe des écarts entre les messages de différentes hauteurs lorsque vous utilisez des flottants CSS.

Exemple de maçonnerie jQuery

Avec jQuery Masonry, chaque poteau se met bien en place, ne laissant aucun espace gênant.

Maintenant que nous savons ce qu'est une mise en page de maçonnerie, commençons par créer une disposition simple en maçonnerie jQuery pour nos publications récentes..

Étape 1 Utilisation `wp_enqueue_script` charger la bibliothèque

Avant de pouvoir commencer à construire notre mur, nous devons charger le script approprié. Vous devrez ajouter le code suivant à votre functions.php fichier.

 function mason_script () wp_enqueue_script ('jquery-maonry');  add_action ('wp_enqueue_scripts', 'mason_script');

Étape 2: Configuration de la grille

Pour ma structure de maçonnerie de base, je vais implémenter le code HTML suivant dans ma boucle (ou un modèle personnalisé - où que vous prévoyiez de construire votre mur). Tout d'abord, je vais définir le conteneur pour le mur en maçonnerie, puis le configurer pour chaque poteau à l'intérieur du mur..

Configurer votre CSS

Vous aurez besoin de définir la largeur de votre conteneur et la largeur de votre poteau pour obtenir l’effet réel de maçonnerie. Pour ma démo, j'ai défini mon conteneur à une largeur de 960 pixels et je souhaite avoir 4 colonnes de messages. Je dois donc faire quelques calculs simples pour trouver la largeur de chaque poteau sur mon mur..

Largeur de brique = 960px / 4 messages = 240 pixels chacun.

Avec ce chiffre en tête, je peux configurer ma mise en page dans ma feuille de style:

 #container width: 960px; // largeur du conteneur entier pour le mur .brick width: 220px; // largeur de chaque brique moins le remplissage entre les remplissages: 0px 10px 15px 10px;

Étape 3 Configurer la fonction

Ensuite, nous devons configurer la fonction de maçonnerie de sorte que nos conteneurs div s’engrènent ensemble dans le mur. Utilisez le code suivant pour cela:

 jQuery (document) .ready (function ($) $ ('#container') .masonry (columnWidth: 220););

Conclusion

La maçonnerie comporte de nombreuses options intégrées qui la rendent très attrayante à utiliser avec WordPress. Par exemple, vous pouvez appliquer l'option d'animation pour "animer" vos arrangements de publication, ajouter des éléments supplémentaires au mur (idéal pour les présentations de portefeuille) ou l'intégrer à l'Infinte Scroll de Paul Irish. Quelle que soit la manière dont vous envisagez d’utiliser le script jQuery Masonry, c’est une addition bienvenue à WordPress 3.5..

Note latérale: Atteindre ce même effet en CSS3 est possible. Cependant, vous devez utiliser la nouvelle fonctionnalité «colonnes», qui n'est pas encore prise en charge par tous les navigateurs.

Code