{"id":25511,"date":"2021-06-02T17:35:00","date_gmt":"2021-06-02T14:35:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25511"},"modified":"2021-10-18T03:06:14","modified_gmt":"2021-10-18T00:06:14","slug":"come-aggiungere-il-layout-della-griglia-in-muratura-in-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-aggiungere-il-layout-della-griglia-in-muratura-in-wordpress\/","title":{"rendered":"Come aggiungere il layout della griglia in muratura in WordPress"},"content":{"rendered":"

Vuoi aggiungere un layout di griglia in muratura sul sito WordPress? Probabilmente hai visto la griglia in muratura sulla maggior parte dei siti su Internet. Uno degli esempi che utilizzano questo tipo di layout della griglia \u00e8 Pinterest. In questo articolo, ti mostro come aggiungere un layout di griglia in muratura al tuo sito Web WordPress.<\/p>\n

Utilizzando la muratura, i nostri elementi HTML vengono posizionati in base allo spazio verticale disponibile. \u00c8 utile perch\u00e9 gli elementi HTML farebbero il miglior uso dello schermo. Inoltre, aggiunge una migliore esperienza utente alle tue pagine web.<\/p>\n

WordPress viene fornito con alcuni plugin jQuery nel suo nucleo. Alcuni di questi sono jQuery, jQuery UI, imgareaselect, thickbox, ecc. Viene fornito anche con questo plug<\/a> -in di muratura<\/a> integrato. Per utilizzare questa muratura puoi accodare il suo file JS dal core di WordPress al tema.<\/p>\n

Se sei curioso del percorso di questo JS in muratura, lo troverai in ‘\/wp-include\/js\/masonry.min.js’.<\/p>\n

Quindi, senza ulteriori discussioni, diamo un’occhiata a come aggiungere un layout di griglia in muratura in WordPress.<\/p>\n

Accoda file JS in muratura<\/h3>\n

Quando si tratta di WordPress, non si dovrebbe includere il file JS utilizzando script<\/code>direttamente il tag. \u00c8 una cattiva pratica per WordPress. WordPress fornisce il proprio modo per includere file JS e CSS<\/a> nel sito web. \u00c8 necessario includere i file JS e CSS seguendo lo stesso modo.<\/p>\n

Apri il functions.php<\/code>file e inserisci il codice sottostante che aggiunge i file JS al tuo sito 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
Qui, ho incluso un js in muratura dal core di WordPress usando l’istruzione wp_enqueue_script('masonry');<\/code>. Questa dichiarazione include un file JS di muratura direttamente nel tuo ambiente WordPress. Ho incluso anche un script.js<\/code>file, dove scriver\u00f2 il codice per chiamare e inizializzare il layout della griglia in muratura.<\/p>\n
Layout della griglia in muratura in WordPress<\/h3>\n
A questo punto, abbiamo finito con la configurazione di base necessaria per l’integrazione della rete in muratura. Successivamente, dobbiamo aggiungere il markup per i nostri elementi HTML nel contenitore della griglia. Usa l’HTML qui sotto per questo.<\/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
Nel codice sopra, ho aggiunto un contenitore di griglia principale e ho avvolto le immagini al suo interno. Sto aggiungendo un’immagine a ciascun contenitore di elementi della griglia.<\/p>\n
Successivamente, imposta la larghezza per gli elementi della griglia utilizzando la seguente regola CSS. Puoi modificare questa larghezza in base alle tue esigenze.<\/p>\n
.grid-item { width: 400px; }<\/code><\/pre>\n
Infine, abbiamo bisogno di inizializzare la muratura con i metodi forniti da un plugin per muratura. Apri il script.js<\/code>file e incolla il codice sottostante.<\/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
L’output finale sar\u00e0 simile allo screenshot seguente:<\/p>\n
\"Come<\/a><\/p>\n
Questo \u00e8 tutto! Si tratta di aggiungere un layout di griglia in muratura sul tuo sito Web WordPress. Provalo nel tuo progetto WordPress e condividi i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.<\/p>\n
articoli Correlati<\/h4>\n