{"id":28876,"date":"2021-06-02T18:07:00","date_gmt":"2021-06-02T15:07:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28876"},"modified":"2021-10-18T03:37:52","modified_gmt":"2021-10-18T00:37:52","slug":"jak-dodac-uklad-siatki-murowanej-w-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-dodac-uklad-siatki-murowanej-w-wordpress\/","title":{"rendered":"Jak doda\u0107 uk\u0142ad siatki murowanej w WordPress"},"content":{"rendered":"

Czy chcesz doda\u0107 uk\u0142ad siatki murowanej na stronie WordPress? Prawdopodobnie widzia\u0142e\u015b siatk\u0119 murowan\u0105 na wi\u0119kszo\u015bci stron internetowych. Jednym z przyk\u0142ad\u00f3w wykorzystuj\u0105cych tego rodzaju uk\u0142ad siatki jest Pinterest. W tym artykule poka\u017c\u0119, jak doda\u0107 uk\u0142ad siatki murowanej do witryny WordPress.<\/p>\n

U\u017cywaj\u0105c muru, nasze elementy HTML s\u0105 umieszczane w oparciu o dost\u0119pn\u0105 przestrze\u0144 pionow\u0105. Jest to przydatne, poniewa\u017c elementy HTML najlepiej wykorzystaj\u0105 ekran. Ponadto zapewnia lepsze wra\u017cenia u\u017cytkownika na stronach internetowych.<\/p>\n

WordPress zawiera kilka wtyczek jQuery w swoim rdzeniu. Niekt\u00f3re z nich to jQuery, jQuery UI, imgareaselect, thickbox itp. Jest r\u00f3wnie\u017c dostarczany z wbudowan\u0105 wtyczk\u0105 masonry<\/a>. Aby u\u017cy\u0107 tego muru, mo\u017cesz umie\u015bci\u0107 w kolejce plik JS z rdzenia WordPressa do motywu.<\/p>\n

Je\u015bli jeste\u015b ciekaw \u015bcie\u017cki tego murarskiego JS, znajdziesz go w '\/wp-include\/js\/masonry.min.js’.<\/p>\n

Wi\u0119c bez dalszej dyskusji przyjrzyjmy si\u0119, jak doda\u0107 uk\u0142ad siatki murowanej w WordPress.<\/p>\n

Enqueue Masonry JS File<\/h3>\n

Je\u015bli chodzi o WordPress, nie nale\u017cy do\u0142\u0105cza\u0107 pliku JS script<\/code>bezpo\u015brednio za pomoc\u0105 tagu. To z\u0142a praktyka dla WordPressa. WordPress zapewnia w\u0142asny spos\u00f3b umieszczania plik\u00f3w JS i CSS<\/a> na stronie. Musisz do\u0142\u0105czy\u0107 pliki JS i CSS w ten sam spos\u00f3b.<\/p>\n

Otw\u00f3rz functions.php<\/code>plik i umie\u015b\u0107 w nim poni\u017cszy kod, kt\u00f3ry doda pliki JS do Twojej witryny.<\/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
Tutaj do\u0142\u0105czy\u0142em masonry js z rdzenia WordPressa za pomoc\u0105 instrukcji wp_enqueue_script('masonry');<\/code>. To o\u015bwiadczenie zawiera plik JS masonry bezpo\u015brednio do \u015brodowiska WordPress. Do\u0142\u0105czy\u0142em r\u00f3wnie\u017c script.js<\/code>plik, w kt\u00f3rym napisz\u0119 kod do wywo\u0142ania i zainicjowania uk\u0142adu siatki murowanej.<\/p>\n
Uk\u0142ad siatki murowanej w WordPress<\/h3>\n
Na tym etapie ko\u0144czymy podstawow\u0105 konfiguracj\u0119 wymagan\u0105 do integracji siatki murowanej. Nast\u0119pnie musimy doda\u0107 znaczniki dla naszych element\u00f3w HTML w kontenerze siatki. U\u017cyj do tego poni\u017cszego kodu HTML.<\/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
W powy\u017cszym kodzie doda\u0142em jeden g\u0142\u00f3wny kontener siatki i zawin\u0105\u0142em w niego obrazy. Dodaj\u0119 obraz do ka\u017cdego kontenera elementu siatki.<\/p>\n
Nast\u0119pnie ustaw szeroko\u015b\u0107 element\u00f3w siatki, korzystaj\u0105c z poni\u017cszej regu\u0142y CSS. Mo\u017cesz zmieni\u0107 t\u0119 szeroko\u015b\u0107, dopasowuj\u0105c j\u0105 do swoich wymaga\u0144.<\/p>\n
.grid-item { width: 400px; }<\/code><\/pre>\n
Na koniec musimy zainicjowa\u0107 masonry metodami dostarczonymi przez wtyczk\u0119 masonry. Otw\u00f3rz script.js<\/code>plik i wklej do niego poni\u017cszy kod.<\/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
Ostateczny wynik b\u0119dzie wygl\u0105da\u0142 jak na poni\u017cszym zrzucie ekranu:<\/p>\n
\"Jak<\/a><\/p>\n
Ot\u00f3\u017c \u200b\u200bto! Wszystko sprowadza si\u0119 do dodania uk\u0142adu siatki murowanej w witrynie WordPress. Wypr\u00f3buj go w swoim projekcie WordPress i podziel si\u0119 swoimi przemy\u015bleniami i sugestiami w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n