Comment ajouter une disposition de grille de maçonnerie dans WordPress

Souhaitez-vous ajouter une disposition de grille de maçonnerie sur le site WordPress? Vous avez probablement vu la grille de maçonnerie sur la plupart des sites sur Internet. L’un des exemples utilisant ce type de disposition en grille est Pinterest. Dans cet article, je vous montre comment ajouter une disposition de grille de maçonnerie à votre site Web WordPress.

En utilisant la maçonnerie, nos éléments HTML sont placés en fonction de l’espace vertical disponible. C’est utile parce que les éléments HTML feraient le meilleur usage de l’écran. De plus, il ajoute une meilleure expérience utilisateur sur vos pages Web.

WordPress est livré avec quelques plugins jQuery dans son noyau. Certains d’entre eux sont jQuery, jQuery UI, imgaraselect, Thickbox, etc. Il est également livré avec ce plugin de maçonnerie intégré. Pour utiliser cette maçonnerie, vous pouvez mettre en file d’attente son fichier JS du noyau WordPress vers le thème.

Si vous êtes curieux de connaître le chemin de ce JS de maçonnerie, vous le trouverez dans ‘/wp-include/js/masonry.min.js’.

Alors, sans autre discussion, examinons comment ajouter une disposition de grille de maçonnerie dans WordPress.

Mettre en file d’attente le fichier JS de maçonnerie

En ce qui concerne WordPress, il ne faut pas inclure de fichier JS en utilisant scriptdirectement la balise. C’est une mauvaise pratique pour WordPress. WordPress fournit leur propre moyen d’ inclure des fichiers JS et CSS dans le site Web. Vous devez inclure les fichiers JS et CSS de la même manière.

Ouvrez le functions.phpfichier et placez-y le code ci-dessous qui ajoute les fichiers JS à votre site Web.

add_action( 'wp_enqueue_scripts', 'site_scripts' );
 
function site_scripts() {
    wp_enqueue_script('masonry');
    wp_enqueue_script( 'site-js', get_stylesheet_directory_uri(). '/js/script.js', array(), false, true );
}

Ici, j’ai inclus un maçonnerie js du noyau WordPress en utilisant la déclaration wp_enqueue_script('masonry');. Cette déclaration comprend un fichier JS de maçonnerie directement dans votre environnement WordPress. J’ai également inclus un script.jsfichier dans lequel j’écrirai le code pour appeler et initialiser la disposition de la grille de maçonnerie.

Disposition de la grille de maçonnerie dans WordPress

À ce stade, nous avons terminé avec la configuration de base requise pour l’intégration du réseau de maçonnerie. Ensuite, nous devons ajouter un balisage pour nos éléments HTML dans le conteneur de grille. Utilisez le code HTML ci-dessous pour cela.

<div class="grid">
    <div class="grid-item">
        <img src="<?php echo get_stylesheet_directory_uri().'/images/image-1.jpg'; ?>">
    </div>
    <div class="grid-item">
        <img src="<?php echo get_stylesheet_directory_uri().'/images/image-2.jpg'; ?>">
    </div>
    <div class="grid-item">
        <img src="<?php echo get_stylesheet_directory_uri().'/images/image-3.jpg'; ?>">
    </div>
    <div class="grid-item">
        <img src="<?php echo get_stylesheet_directory_uri().'/images/image-4.jpg'; ?>">
    </div>
    <div class="grid-item">
        <img src="<?php echo get_stylesheet_directory_uri().'/images/image-5.jpg'; ?>">
    </div>
</div>

Dans le code ci-dessus, j’ai ajouté un conteneur de grille principal et j’ai enveloppé les images à l’intérieur. J’ajoute une image à chaque conteneur d’éléments de grille.

Après cela, définissez la largeur des éléments de la grille à l’aide de la règle CSS ci-dessous. Vous pouvez modifier cette largeur en fonction de vos besoins.

.grid-item { width: 400px; }

Enfin, nous devons initialiser la maçonnerie avec les méthodes fournies par un plugin maçonnerie. Ouvrez le script.jsfichier et collez-y le code ci-dessous.

jQuery(function($) {
    // init Masonry
    var $grid = $('.grid').masonry({
        // options
        itemSelector: '.grid-item',
        columnWidth: 400
    });
    // layout Masonry after each image loads
    $grid.imagesLoaded().progress( function() {
        $grid.masonry('layout');
    });
});

La sortie finale ressemblera à la capture d’écran ci-dessous :

C’est ça! Il s’agit d’ajouter une disposition de grille de maçonnerie sur votre site Web WordPress. Essayez-le dans votre projet WordPress et partagez vos réflexions et suggestions dans la section commentaires ci-dessous.

Articles Liés

• Comment créer un widget Elementor personnalisé
• Comment ajouter du code après la balise Body dans WordPress
• Ajout d’un bouton d’image personnalisé avec Media Uploader dans WordPress