{"id":25214,"date":"2021-06-02T18:01:00","date_gmt":"2021-06-02T15:01:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25214"},"modified":"2021-10-18T02:09:36","modified_gmt":"2021-10-17T23:09:36","slug":"comment-ajouter-une-disposition-de-grille-de-maconnerie-dans-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-ajouter-une-disposition-de-grille-de-maconnerie-dans-wordpress\/","title":{"rendered":"Comment ajouter une disposition de grille de ma\u00e7onnerie dans WordPress"},"content":{"rendered":"

Souhaitez-vous ajouter une disposition de grille de ma\u00e7onnerie sur le site WordPress? Vous avez probablement vu la grille de ma\u00e7onnerie 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\u00e7onnerie \u00e0 votre site Web WordPress.<\/p>\n

En utilisant la ma\u00e7onnerie, nos \u00e9l\u00e9ments HTML sont plac\u00e9s en fonction de l’espace vertical disponible. C’est utile parce que les \u00e9l\u00e9ments HTML feraient le meilleur usage de l’\u00e9cran. De plus, il ajoute une meilleure exp\u00e9rience utilisateur sur vos pages Web.<\/p>\n

WordPress est livr\u00e9 avec quelques plugins jQuery dans son noyau. Certains d’entre eux sont jQuery, jQuery UI, imgaraselect, Thickbox, etc. Il est \u00e9galement livr\u00e9 avec ce plugin de ma\u00e7onnerie<\/a> int\u00e9gr\u00e9. Pour utiliser cette ma\u00e7onnerie, vous pouvez mettre en file d’attente son fichier JS du noyau WordPress vers le th\u00e8me.<\/p>\n

Si vous \u00eates curieux de conna\u00eetre le chemin de ce JS de ma\u00e7onnerie, vous le trouverez dans ‘\/wp-include\/js\/masonry.min.js’.<\/p>\n

Alors, sans autre discussion, examinons comment ajouter une disposition de grille de ma\u00e7onnerie dans WordPress.<\/p>\n

Mettre en file d’attente le fichier JS de ma\u00e7onnerie<\/h3>\n

En ce qui concerne WordPress, il ne faut pas inclure de fichier JS en utilisant script<\/code>directement la balise. C’est une mauvaise pratique pour WordPress. WordPress fournit leur propre moyen d’ inclure des fichiers JS et CSS<\/a> dans le site Web. Vous devez inclure les fichiers JS et CSS de la m\u00eame mani\u00e8re.<\/p>\n

Ouvrez le functions.php<\/code>fichier et placez-y le code ci-dessous qui ajoute les fichiers JS \u00e0 votre site Web.<\/p>\n

add_action( 'wp_enqueue_scripts', 'site_scripts' );\n\u00a0\nfunction site_scripts() {\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script('masonry');\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'site-js', get_stylesheet_directory_uri(). '\/js\/script.js', array(), false, true );\n}<\/code><\/pre>\n
Ici, j’ai inclus un ma\u00e7onnerie js du noyau WordPress en utilisant la d\u00e9claration wp_enqueue_script('masonry');<\/code>. Cette d\u00e9claration comprend un fichier JS de ma\u00e7onnerie directement dans votre environnement WordPress. J’ai \u00e9galement inclus un script.js<\/code>fichier dans lequel j’\u00e9crirai le code pour appeler et initialiser la disposition de la grille de ma\u00e7onnerie.<\/p>\n
Disposition de la grille de ma\u00e7onnerie dans WordPress<\/h3>\n
\u00c0 ce stade, nous avons termin\u00e9 avec la configuration de base requise pour l’int\u00e9gration du r\u00e9seau de ma\u00e7onnerie. Ensuite, nous devons ajouter un balisage pour nos \u00e9l\u00e9ments HTML dans le conteneur de grille. Utilisez le code HTML ci-dessous pour cela.<\/p>\n
<div class=\"grid\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"grid-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"<?php echo get_stylesheet_directory_uri().'\/images\/image-1.jpg'; ?>\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<div class=\"grid-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"<?php echo get_stylesheet_directory_uri().'\/images\/image-2.jpg'; ?>\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<div class=\"grid-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"<?php echo get_stylesheet_directory_uri().'\/images\/image-3.jpg'; ?>\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<div class=\"grid-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"<?php echo get_stylesheet_directory_uri().'\/images\/image-4.jpg'; ?>\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<div class=\"grid-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"<?php echo get_stylesheet_directory_uri().'\/images\/image-5.jpg'; ?>\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div><\/code><\/pre>\n
Dans le code ci-dessus, j’ai ajout\u00e9 un conteneur de grille principal et j’ai envelopp\u00e9 les images \u00e0 l’int\u00e9rieur. J’ajoute une image \u00e0 chaque conteneur d’\u00e9l\u00e9ments de grille.<\/p>\n
Apr\u00e8s cela, d\u00e9finissez la largeur des \u00e9l\u00e9ments de la grille \u00e0 l’aide de la r\u00e8gle CSS ci-dessous. Vous pouvez modifier cette largeur en fonction de vos besoins.<\/p>\n
.grid-item { width: 400px; }<\/code><\/pre>\n
Enfin, nous devons initialiser la ma\u00e7onnerie avec les m\u00e9thodes fournies par un plugin ma\u00e7onnerie. Ouvrez le script.js<\/code>fichier et collez-y le code ci-dessous.<\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0\/\/ init Masonry\n\u00a0\u00a0\u00a0\u00a0var $grid = $('.grid').masonry({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ options\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0itemSelector: '.grid-item',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0columnWidth: 400\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\/\/ layout Masonry after each image loads\n\u00a0\u00a0\u00a0\u00a0$grid.imagesLoaded().progress( function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$grid.masonry('layout');\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
La sortie finale ressemblera \u00e0 la capture d’\u00e9cran ci-dessous\u00a0:<\/p>\n
\"Comment<\/a><\/p>\n
C’est \u00e7a! Il s’agit d’ajouter une disposition de grille de ma\u00e7onnerie sur votre site Web WordPress. Essayez-le dans votre projet WordPress et partagez vos r\u00e9flexions et suggestions dans la section commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n