{"id":28103,"date":"2021-06-02T18:00:00","date_gmt":"2021-06-02T15:00:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28103"},"modified":"2021-10-18T04:05:12","modified_gmt":"2021-10-18T01:05:12","slug":"como-adicionar-layout-de-grade-de-alvenaria-no-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-adicionar-layout-de-grade-de-alvenaria-no-wordpress\/","title":{"rendered":"Como adicionar layout de grade de alvenaria no WordPress"},"content":{"rendered":"

Quer adicionar um layout de grade de alvenaria no site WordPress? Voc\u00ea provavelmente j\u00e1 viu a grade de alvenaria na maioria dos sites da Internet. Um dos exemplos que usa esse tipo de layout de grade \u00e9 o Pinterest. Neste artigo, mostrarei como adicionar um layout de grade de alvenaria ao seu site WordPress.<\/p>\n

Usando alvenaria, nossos elementos HTML s\u00e3o colocados com base no espa\u00e7o vertical dispon\u00edvel. \u00c9 \u00fatil porque os elementos HTML fariam o melhor uso da tela. Al\u00e9m disso, adiciona uma melhor experi\u00eancia do usu\u00e1rio \u00e0s suas p\u00e1ginas da web.<\/p>\n

O WordPress vem com alguns plug-ins jQuery em seu n\u00facleo. Alguns deles s\u00e3o jQuery, jQuery UI, imgareaselect, thickbox, etc. Ele tamb\u00e9m vem com este plugin de alvenaria<\/a> embutido. Para usar esta alvenaria, voc\u00ea pode enfileirar seu arquivo JS do n\u00facleo do WordPress para o tema.<\/p>\n

Se voc\u00ea est\u00e1 curioso sobre o caminho deste JS de alvenaria, voc\u00ea o encontrar\u00e1 em ‘\/wp-include\/js\/masonry.min.js’.<\/p>\n

Portanto, sem mais discuss\u00e3o, vamos dar uma olhada em como adicionar um layout de grade de alvenaria no WordPress.<\/p>\n

Arquivo JS Enqueue Masonry<\/h3>\n

Quando se trata de WordPress, n\u00e3o se deve incluir o arquivo JS usando a script<\/code>tag diretamente. \u00c9 uma pr\u00e1tica ruim para WordPress. O WordPress fornece sua pr\u00f3pria maneira de incluir arquivos JS e CSS<\/a> no site. Voc\u00ea deve incluir os arquivos JS e CSS da mesma maneira.<\/p>\n

Abra o functions.php<\/code>arquivo e coloque o c\u00f3digo abaixo nele, que adiciona os arquivos JS ao seu site.<\/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
Aqui, inclu\u00ed um js de alvenaria do n\u00facleo do WordPress usando a instru\u00e7\u00e3o wp_enqueue_script('masonry');<\/code>. Esta declara\u00e7\u00e3o inclui um arquivo JS de alvenaria diretamente em seu ambiente WordPress. Tamb\u00e9m inclu\u00ed um script.js<\/code>arquivo, onde escreverei o c\u00f3digo para chamar e inicializar o layout da grade de alvenaria.<\/p>\n
Layout de grade de alvenaria em WordPress<\/h3>\n
Nesta fase, conclu\u00edmos a configura\u00e7\u00e3o b\u00e1sica necess\u00e1ria para a integra\u00e7\u00e3o da grelha de alvenaria. Em seguida, precisamos adicionar marca\u00e7\u00e3o para nossos elementos HTML no cont\u00eainer de grade. Use o HTML abaixo para isso.<\/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
No c\u00f3digo acima, adicionei um cont\u00eainer de grade principal e envolvi as imagens dentro dele. Estou adicionando uma imagem a cada cont\u00eainer de item de grade.<\/p>\n
Depois disso, defina a largura dos itens da grade usando a regra CSS abaixo. Voc\u00ea pode alterar essa largura de acordo com seus requisitos.<\/p>\n
.grid-item { width: 400px; }<\/code><\/pre>\n
Finalmente, precisamos inicializar a alvenaria com os m\u00e9todos fornecidos por um plugin de alvenaria. Abra o script.js<\/code>arquivo e cole o c\u00f3digo abaixo nele.<\/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
O resultado final ser\u00e1 parecido com a imagem abaixo:<\/p>\n
\"Como<\/a><\/p>\n
\u00c9 isso! \u00c9 tudo sobre como adicionar um layout de grade de alvenaria em seu site WordPress. Experimente em seu projeto WordPress e compartilhe suas id\u00e9ias e sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n