Mise en page avec Masonry & WordPress

Simple à mettre en place, ce plugin jQuery appelé « Masonry » permet de disposer des DIV comme une mosaïque et donc sans la perte d’espace que provoque la propriété CSS : float.

Exemple en image tiré du site de l’auteur David Desandro :
Différence Masonry / css

Démarche sous WordPress

  • Première étape :

Télécharger le fichier JavaScript à déposer sur le serveur appelé jquery.masonry.min.js .

  • Deuxième et dernière étape :

Il faut repérer la disposition des DIV.

Ici le conteneur de l’ensemble s’appelle « cblanc » et chaque élément : « cgris ». Les couleurs sont en référence à l’image ci dessus.

<?php wp_enqueue_script('jquery'); ?>

<?php wp_head(); ?>

<script language="javascript"
type="text/javascript"
src="<?php echo home_url( '/' ); ?>jquery.masonry.min.js">
</script>

<script type="text/javascript">
jQuery(document).ready(function($){
 $('#cblanc').masonry({ singleMode: true, itemSelector: '.cgris' });
});
</script>

Repérez ensuite la ligne wp_head et placez y juste avant la déclaration enqueue.

Et juste aprés cette même ligne, on appelle le fichier .js

« src= » correspond donc à l’adresse du fichier.

Dans cet exemple le fichier est placé à la racine du serveur donc src= URL du site / nom du fichier.js

Le dernier /script à coller à la suite se sert de la bibliothèque jQuery installée. Nous sommes dans le cas où toutes les DIV cgris ont la même largeur (singleMode).

L’application de Masonry est exploitée sur le site The Visuals. & cet article est basé sur le tutoriel anglais de wplover.com.