{"id":25181,"date":"2021-06-02T17:41:00","date_gmt":"2021-06-02T14:41:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25181"},"modified":"2021-10-17T20:29:14","modified_gmt":"2021-10-17T17:29:14","slug":"kuinka-lisata-muurausristikon-asettelu-wordpressiin","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-lisata-muurausristikon-asettelu-wordpressiin\/","title":{"rendered":"Kuinka lis\u00e4t\u00e4 muurausristikon asettelu WordPressiin"},"content":{"rendered":"<p>Haluatko lis\u00e4t\u00e4 muuraruudukon asettelun WordPress-verkkosivustolle? Olet todenn\u00e4k\u00f6isesti n\u00e4hnyt muurausristikon useimmilla sivustoilla Internetin kautta. Yksi esimerkkej\u00e4 t\u00e4llaisesta ruudukkoasettelusta on Pinterest. T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4n, kuinka voit lis\u00e4t\u00e4 muuraruudukon asettelun WordPress-verkkosivustoosi.<\/p>\n<p>Muurausmenetelm\u00e4\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 HTML-elementtimme sijoitetaan k\u00e4ytett\u00e4viss\u00e4 olevan pystytilan perusteella. Se on hy\u00f6dyllinen, koska HTML-elementit tekisiv\u00e4t parhaan mahdollisen ruudun k\u00e4yt\u00f6n. Lis\u00e4ksi se lis\u00e4\u00e4 parempaa k\u00e4ytt\u00f6kokemusta verkkosivuillasi.<\/p>\n<p>WordPressin ytimess\u00e4 on muutama jQuery-laajennus. Jotkut niist\u00e4 ovat jQuery, jQuery UI, imgareaselect, thickbox jne. Se toimitetaan my\u00f6s t\u00e4m\u00e4n sis\u00e4\u00e4nrakennetun <a href=\"https:\/\/masonry.desandro.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">muurauslaajennuksen kanssa<\/a>. T\u00e4m\u00e4n muurausohjelman k\u00e4ytt\u00e4miseksi voit houkutella sen JS-tiedoston WordPress-ytimest\u00e4 teemaan.<\/p>\n<p>Jos olet kiinnostunut t\u00e4m\u00e4n muuraus JS: n polusta, l\u00f6yd\u00e4t sen osoitteesta &#8217;\/wp-include\/js\/masonry.min.js&#8217;.<\/p>\n<p>Joten ilman lis\u00e4keskusteluja, katsotaanpa, kuinka lis\u00e4t\u00e4 muuraruudukon asettelu WordPressiin.<\/p>\n<h3>Ota k\u00e4ytt\u00f6\u00f6n Muuraus JS-tiedosto<\/h3>\n<p>WordPressin suhteen ei pit\u00e4isi sis\u00e4llytt\u00e4\u00e4 JS-tiedostoa, joka k\u00e4ytt\u00e4\u00e4 <code>script<\/code>suoraan tagia. Se on huono k\u00e4yt\u00e4nt\u00f6 WordPressille. WordPress tarjoaa oman tapansa <a href=\"https:\/\/themewp.inform.click\/fi\/tavallinen-tapa-sisallyttaa-javascript-ja-css-wordpressiin\/\" title=\"sis\u00e4llytt\u00e4\u00e4 JS- ja CSS-tiedostot\">sis\u00e4llytt\u00e4\u00e4 JS- ja CSS-tiedostot<\/a> verkkosivustolle. Sinun on sis\u00e4llytett\u00e4v\u00e4 JS- ja CSS-tiedostot samalla tavalla.<\/p>\n<p>Avaa <code>functions.php<\/code>tiedosto ja aseta siihen alla oleva koodi, joka lis\u00e4\u00e4 JS-tiedostot verkkosivustoosi.<\/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>T\u00e4ss\u00e4 olen sis\u00e4llytt\u00e4nyt muurin js WordPress-ytimest\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 lausetta <code>wp_enqueue_script('masonry');<\/code>. T\u00e4m\u00e4 lausunto sis\u00e4lt\u00e4\u00e4 JS-muuraustiedoston suoraan WordPress-ymp\u00e4rist\u00f6\u00f6n. Lis\u00e4sin my\u00f6s <code>script.js<\/code>tiedoston, johon kirjoitan koodin soittamaan ja alustamaan muuraruudukon asettelun.<\/p>\n<h3>Muurausverkkoasettelu WordPressiss\u00e4<\/h3>\n<p>T\u00e4ss\u00e4 vaiheessa olemme valmiit muurausverkon integrointiin tarvittavilla perusasetuksilla. Seuraavaksi meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 HTML-elementtien merkinn\u00e4t ruudukkos\u00e4ili\u00f6\u00f6n. K\u00e4yt\u00e4 siihen alla olevaa HTML-koodia.<\/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>Lis\u00e4sin yll\u00e4 olevaan koodiin yhden p\u00e4\u00e4verkkos\u00e4ili\u00f6n ja k\u00e4\u00e4rin kuvat sen sis\u00e4lle. Lis\u00e4\u00e4n kuvan jokaiseen ruudukko-s\u00e4il\u00f6\u00f6n.<\/p>\n<p>T\u00e4m\u00e4n j\u00e4lkeen aseta ruudukkokohteiden leveys alla olevan CSS-s\u00e4\u00e4nn\u00f6n avulla. Voit muuttaa t\u00e4t\u00e4 leveyssovellusta vaatimuksesi mukaan.<\/p>\n<pre><code>.grid-item { width: 400px; }<\/code><\/pre>\n<p>Lopuksi meid\u00e4n on aloitettava muuraus muurauslaajennuksen tarjoamilla menetelmill\u00e4. Avaa <code>script.js<\/code>tiedosto ja liit\u00e4 siihen koodin alle.<\/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>Lopullinen tulos n\u00e4ytt\u00e4\u00e4 jotain alla olevasta kuvakaappauksesta:<\/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=\"Kuinka lis\u00e4t\u00e4 muurausristikon asettelu WordPressiin\" ><\/a><\/p>\n<p>Se siit\u00e4! Kyse on muurausristikon asettelun lis\u00e4\u00e4misest\u00e4 WordPress-verkkosivustollesi. Kokeile sit\u00e4 WordPress-projektissasi ja jaa ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n<h4>Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-luoda-mukautettu-elementti-widget\/\" title=\"Kuinka luoda mukautettu elementti-widget\">Kuinka luoda mukautettu elementti-widget<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-lisata-koodia-body-tagin-jalkeen-wordpressissa\/\" title=\"Kuinka lis\u00e4t\u00e4 koodia Body Tagin j\u00e4lkeen WordPressiss\u00e4\">Kuinka lis\u00e4t\u00e4 koodia Body Tagin j\u00e4lkeen WordPressiss\u00e4<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/mukautetun-kuvapainikkeen-lisaaminen-media-uploader-ohjelmalla-wordpressissa\/\" title=\"Mukautetun kuvapainikkeen lis\u00e4\u00e4minen Media Uploader -ohjelmalla WordPressiss\u00e4\">Mukautetun kuvapainikkeen lis\u00e4\u00e4minen Media Uploader -ohjelmalla WordPressiss\u00e4<\/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>Haluatko toteuttaa muuraruudukon asettelun WordPressiss\u00e4? T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4n, kuinka voit lis\u00e4t\u00e4 muuraruudukon asettelun WordPress-verkkosivustolle.<\/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":[314,610],"tags":[843],"class_list":["post-25181","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tietokanta","category-uncategorized-6","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/25181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=25181"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/25181\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/21663"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=25181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=25181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=25181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}