{"id":28844,"date":"2021-06-02T17:24:00","date_gmt":"2021-06-02T14:24:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28844"},"modified":"2021-10-17T16:30:44","modified_gmt":"2021-10-17T13:30:44","slug":"como-agregar-diseno-de-cuadricula-de-mamposteria-en-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-agregar-diseno-de-cuadricula-de-mamposteria-en-wordpress\/","title":{"rendered":"C\u00f3mo agregar dise\u00f1o de cuadr\u00edcula de mamposter\u00eda en WordPress"},"content":{"rendered":"<p>\u00bfDesea agregar un dise\u00f1o de cuadr\u00edcula de mamposter\u00eda en el sitio web de WordPress? Probablemente haya visto la cuadr\u00edcula de mamposter\u00eda en la mayor\u00eda de los sitios de Internet. Uno de los ejemplos que utiliza este tipo de dise\u00f1o de cuadr\u00edcula es Pinterest. En este art\u00edculo, le muestro c\u00f3mo agregar un dise\u00f1o de cuadr\u00edcula de mamposter\u00eda a su sitio web de WordPress.<\/p>\n<p>Usando mamposter\u00eda, nuestros elementos HTML se colocan seg\u00fan el espacio vertical disponible. Es \u00fatil porque los elementos HTML har\u00edan el mejor uso de la pantalla. Adem\u00e1s, agrega una mejor experiencia de usuario en sus p\u00e1ginas web.<\/p>\n<p>WordPress viene con algunos complementos de jQuery en su n\u00facleo. Algunos de ellos son jQuery, jQuery UI, imgareaselect, thickbox, etc. Tambi\u00e9n se env\u00eda con este <a href=\"https:\/\/masonry.desandro.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">complemento de alba\u00f1iler\u00eda<\/a> incorporado. Para usar esta mamposter\u00eda, puede poner en cola su archivo JS desde el n\u00facleo de WordPress al tema.<\/p>\n<p>Si tiene curiosidad sobre la ruta de este JS de mamposter\u00eda, lo encontrar\u00e1 en &#8216;\/wp-include\/js\/masonry.min.js&#8217;.<\/p>\n<p>Entonces, sin m\u00e1s discusi\u00f3n, echemos un vistazo a c\u00f3mo agregar un dise\u00f1o de cuadr\u00edcula de mamposter\u00eda en WordPress.<\/p>\n<h3>Enqueue Masonry JS File<\/h3>\n<p>Cuando se trata de WordPress, no se debe incluir un archivo JS usando la <code>script<\/code>etiqueta directamente. Es una mala pr\u00e1ctica para WordPress. WordPress proporciona su propia forma de <a href=\"https:\/\/themewp.inform.click\/es\/forma-estandar-de-incluir-javascript-y-css-en-wordpress\/\" title=\"incluir archivos JS y CSS\">incluir archivos JS y CSS<\/a> en el sitio web. Debes incluir los archivos JS y CSS de la misma forma.<\/p>\n<p>Abra el <code>functions.php<\/code>archivo y coloque el siguiente c\u00f3digo que agrega los archivos JS a su sitio web.<\/p>\n<pre><code>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<p>Aqu\u00ed, he incluido un js de mamposter\u00eda del n\u00facleo de WordPress usando la declaraci\u00f3n <code>wp_enqueue_script('masonry');<\/code>. Esta declaraci\u00f3n incluye un archivo JS de mamposter\u00eda directamente en su entorno de WordPress. Tambi\u00e9n inclu\u00ed un <code>script.js<\/code>archivo, donde escribir\u00e9 el c\u00f3digo para llamar e inicializar el dise\u00f1o de la cuadr\u00edcula de mamposter\u00eda.<\/p>\n<h3>Dise\u00f1o de cuadr\u00edcula de mamposter\u00eda en WordPress<\/h3>\n<p>En esta etapa, hemos terminado con la configuraci\u00f3n b\u00e1sica requerida para la integraci\u00f3n de la red de mamposter\u00eda. A continuaci\u00f3n, necesitamos agregar marcado para nuestros elementos HTML en el contenedor de la cuadr\u00edcula. Utilice el siguiente HTML para ello.<\/p>\n<pre><code>&lt;div class=\"grid\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"grid-item\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"&lt;?php echo get_stylesheet_directory_uri().'\/images\/image-1.jpg'; ?&gt;\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"grid-item\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"&lt;?php echo get_stylesheet_directory_uri().'\/images\/image-2.jpg'; ?&gt;\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"grid-item\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"&lt;?php echo get_stylesheet_directory_uri().'\/images\/image-3.jpg'; ?&gt;\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"grid-item\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"&lt;?php echo get_stylesheet_directory_uri().'\/images\/image-4.jpg'; ?&gt;\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"grid-item\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=\"&lt;?php echo get_stylesheet_directory_uri().'\/images\/image-5.jpg'; ?&gt;\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>En el c\u00f3digo anterior, agregu\u00e9 un contenedor de cuadr\u00edcula principal y envolv\u00ed las im\u00e1genes dentro de \u00e9l. Estoy agregando una imagen a cada contenedor de elementos de cuadr\u00edcula.<\/p>\n<p>Despu\u00e9s de esto, establezca el ancho de los elementos de la cuadr\u00edcula utilizando la siguiente regla CSS. Puede cambiar este ancho de acuerdo con sus necesidades.<\/p>\n<pre><code>.grid-item { width: 400px; }<\/code><\/pre>\n<p>Finalmente, necesitamos inicializar la mamposter\u00eda con los m\u00e9todos proporcionados por un complemento de mamposter\u00eda. Abra el <code>script.js<\/code>archivo y pegue el siguiente c\u00f3digo en \u00e9l.<\/p>\n<pre><code>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<p>La salida final se ver\u00e1 como la siguiente captura de pantalla:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20379-6081e849a1527.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20379-6081e849a1527.png\" alt=\"C\u00f3mo agregar dise\u00f1o de cuadr\u00edcula de mamposter\u00eda en WordPress\" ><\/a><\/p>\n<p>\u00a1Eso es! Se trata de agregar un dise\u00f1o de cuadr\u00edcula de mamposter\u00eda en su sitio web de WordPress. Pru\u00e9belo en su proyecto de WordPress y comparta sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n<h4>Art\u00edculos relacionados<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/como-construir-un-widget-elementor-personalizado\/\" title=\"C\u00f3mo construir un widget Elementor personalizado\">C\u00f3mo construir un widget Elementor personalizado<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/como-agregar-codigo-despues-de-la-etiqueta-del-cuerpo-en-wordpress\/\" title=\"C\u00f3mo agregar c\u00f3digo despu\u00e9s de la etiqueta del cuerpo en WordPress\">C\u00f3mo agregar c\u00f3digo despu\u00e9s de la etiqueta del cuerpo en WordPress<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/agregar-un-boton-de-imagen-personalizado-con-el-cargador-de-medios-en-wordpress\/\" title=\"Agregar un bot\u00f3n de imagen personalizado con el cargador de medios en WordPress\">Agregar un bot\u00f3n de imagen personalizado con el cargador de medios en WordPress<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfDesea implementar el dise\u00f1o de cuadr\u00edcula de mamposter\u00eda en WordPress? En este art\u00edculo, le muestro c\u00f3mo agregar un dise\u00f1o de cuadr\u00edcula de mamposter\u00eda en el sitio web de WordPress.<\/p>\n","protected":false},"author":1,"featured_media":21663,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[310,606],"tags":[849],"class_list":["post-28844","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-base-de-datos","category-uncategorized-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/28844","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=28844"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/28844\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/21663"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=28844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=28844"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=28844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}