{"id":25649,"date":"2021-06-02T18:10:00","date_gmt":"2021-06-02T15:10:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25649"},"modified":"2021-10-17T18:31:34","modified_gmt":"2021-10-17T15:31:34","slug":"kuidas-lisada-muuritise-vore-paigutust-wordpressis","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/kuidas-lisada-muuritise-vore-paigutust-wordpressis\/","title":{"rendered":"Kuidas lisada m\u00fc\u00fcritise v\u00f5re paigutust WordPressis"},"content":{"rendered":"<p>Kas soovite lisada m\u00fc\u00fcritise v\u00f5re paigutuse WordPressi veebisaidile? Ilmselt olete m\u00fc\u00fcritisev\u00f5rku n\u00e4inud enamikul saitidel Interneti kaudu. \u00dcks sellistest v\u00f5rgupaigutustest kasutatav n\u00e4ide on Pinterest. Selles artiklis n\u00e4itan teile, kuidas lisada m\u00fc\u00fcritise v\u00f5re paigutus oma WordPressi veebisaidile.<\/p>\n<p>M\u00fc\u00fcritise abil paigutatakse meie HTML-elemendid olemasoleva vertikaalse ruumi p\u00f5hjal. See on kasulik, kuna HTML-elemendid kasutaksid ekraani k\u00f5ige paremini. Lisaks lisab see teie veebilehtedele parema kasutuskogemuse.<\/p>\n<p>WordPressi tuum sisaldab v\u00e4heseid jQuery pistikprogramme. M\u00f5ned neist on jQuery, jQuery kasutajaliides, imgareaselect, thickbox jne. Samuti tarnitakse selle sisseehitatud <a href=\"https:\/\/masonry.desandro.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">m\u00fc\u00fcritise pistikprogrammiga<\/a>. Selle m\u00fc\u00fcritise kasutamiseks saate selle JS-faili meelitada WordPressi tuumast teemani.<\/p>\n<p>Kui olete huvitatud selle m\u00fc\u00fcritise JS teest, siis leiate selle aadressilt &#8216;\/wp-include\/js\/masonry.min.js&#8217;.<\/p>\n<p>Nii et ilma pikema aruteluta vaatame, kuidas lisada m\u00fc\u00fcritise v\u00f5re paigutus WordPressis.<\/p>\n<h3>V\u00f5imaldage m\u00fc\u00fcritise JS-fail<\/h3>\n<p>WordPressi osas ei tohiks JS-faili lisada <code>script<\/code>otse silti kasutades. See on WordPressi jaoks halb tava. WordPress pakub oma viisi <a href=\"https:\/\/themewp.inform.click\/et\/tavaline-viis-javascripti-ja-css-i-kaasamiseks-wordpressi\/\" title=\"JS- ja CSS-failide\">JS- ja CSS-failide<\/a> lisamiseks veebisaidile. JS- ja CSS-failid peate lisama samamoodi.<\/p>\n<p>Avage <code>functions.php<\/code>fail ja asetage sellesse allolev kood, mis lisab JS-failid teie veebisaidile.<\/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>Siia lisasin avalduse abil WordPressi tuumast m\u00fc\u00fcritise js <code>wp_enqueue_script('masonry');<\/code>. See avaldus sisaldab m\u00fc\u00fcritise JS-faili otse teie WordPressi keskkonda. Lisasin ka <code>script.js<\/code>faili, kuhu kirjutan koodi, et helistada ja initsialiseerida m\u00fc\u00fcritise v\u00f5re paigutus.<\/p>\n<h3>M\u00fc\u00fcriruudustiku paigutus WordPressis<\/h3>\n<p>Selles etapis oleme valmis m\u00fc\u00fcritise v\u00f5rgu integreerimiseks vajaliku p\u00f5hiseadistusega. J\u00e4rgmisena peame lisama oma HTML-elementide m\u00e4rgistuse ruudustikukonteinerisse. Selleks kasutage allolevat HTML-i.<\/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>\u00dclalolevas koodis lisasin \u00fche peamise v\u00f5rgukonteineri ja m\u00e4ssisin pildid selle sisse. Lisan igasse ruudustiku\u00fcksuse konteinerisse pildi.<\/p>\n<p>P\u00e4rast seda m\u00e4\u00e4rake ruudustiku\u00fcksuste laius, kasutades allpool olevat CSS-reeglit. Saate seda laiust sobitada oma n\u00f5udega.<\/p>\n<pre><code>.grid-item { width: 400px; }<\/code><\/pre>\n<p>L\u00f5puks peame m\u00fc\u00fcritise initsialiseerima m\u00fc\u00fcritise pistikprogrammi pakutavate meetoditega. Avage <code>script.js<\/code>fail ja kleepige see koodi alla.<\/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>L\u00f5plik v\u00e4ljund n\u00e4eb v\u00e4lja nagu ekraanipildi allpool:<\/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=\"Kuidas lisada m\u00fc\u00fcritise v\u00f5re paigutust WordPressis\" ><\/a><\/p>\n<p>See selleks! See k\u00f5ik on seotud m\u00fc\u00fcritise v\u00f5re paigutuse lisamisega oma WordPressi veebisaidile. Proovige seda oma WordPressi projektis ja jagage oma m\u00f5tteid ja ettepanekuid allpool olevas kommentaaride jaotises.<\/p>\n<h4>seotud artiklid<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/kuidas-luua-kohandatud-elemendi-vidinat\/\" title=\"Kuidas luua kohandatud elemendi vidinat\">Kuidas luua kohandatud elemendi vidinat<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/kuidas-lisada-koodi-parast-kehamarki-wordpressis\/\" title=\"Kuidas lisada koodi p\u00e4rast keham\u00e4rki WordPressis\">Kuidas lisada koodi p\u00e4rast keham\u00e4rki WordPressis<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/kohandatud-pildinupu-lisamine-meediumide-uleslaadijaga-wordpressis\/\" title=\"Kohandatud pildinupu lisamine meediumide \u00fcleslaadijaga WordPressis\">Kohandatud pildinupu lisamine meediumide \u00fcleslaadijaga WordPressis<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kas soovite rakendada WordPressis m\u00fc\u00fcritise v\u00f5re paigutust? Selles artiklis n\u00e4itan teile, kuidas lisada m\u00fc\u00fcritise v\u00f5re paigutust WordPressi veebisaidil.<\/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":[313,609],"tags":[842],"class_list":["post-25649","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-andmebaas","category-uncategorized-5","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/25649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/comments?post=25649"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/25649\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media\/21663"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media?parent=25649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/categories?post=25649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/tags?post=25649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}