{"id":29011,"date":"2021-06-02T17:32:00","date_gmt":"2021-06-02T14:32:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29011"},"modified":"2021-10-17T04:28:15","modified_gmt":"2021-10-17T01:28:15","slug":"hur-man-lagger-till-murlayoutlayout-i-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-lagger-till-murlayoutlayout-i-wordpress\/","title":{"rendered":"Hur man l\u00e4gger till murlayoutlayout i WordPress"},"content":{"rendered":"

Vill du l\u00e4gga till en layout f\u00f6r murverk p\u00e5 WordPress-webbplatsen? Du har f\u00f6rmodligen sett murverket p\u00e5 de flesta webbplatser via Internet. Ett av exemplen som anv\u00e4nder denna typ av rutn\u00e4tlayout \u00e4r Pinterest. I den h\u00e4r artikeln visar jag hur du l\u00e4gger till en murstenslayout p\u00e5 din WordPress-webbplats.<\/p>\n

Med murverk placeras v\u00e5ra HTML-element baserat p\u00e5 tillg\u00e4ngligt vertikalt utrymme. Det \u00e4r anv\u00e4ndbart eftersom HTML-elementen skulle anv\u00e4nda sk\u00e4rmen b\u00e4st. Dessutom ger det en b\u00e4ttre anv\u00e4ndarupplevelse p\u00e5 dina webbsidor.<\/p>\n

WordPress kommer med f\u00e5 jQuery-plugins i sin k\u00e4rna. N\u00e5gra av dem \u00e4r jQuery, jQuery UI, imgareaselect, thickbox, etc. Den levereras ocks\u00e5 med det h\u00e4r inbyggda murade plugin-programmet<\/a>. F\u00f6r att anv\u00e4nda detta murverk kan du ange dess JS-fil fr\u00e5n WordPress-k\u00e4rnan till temat.<\/p>\n

Om du \u00e4r nyfiken p\u00e5 v\u00e4gen f\u00f6r detta murverk JS s\u00e5 hittar du det p\u00e5 ’\/wp-include\/js\/masonry.min.js’.<\/p>\n

S\u00e5 utan vidare diskussion, l\u00e5t oss ta en titt p\u00e5 hur man l\u00e4gger till en murstenslayout i WordPress.<\/p>\n

Enqueue Masonry JS File<\/h3>\n

N\u00e4r det g\u00e4ller WordPress b\u00f6r man inte inkludera JS-fil med script<\/code>taggen direkt. Det \u00e4r en d\u00e5lig praxis f\u00f6r WordPress. WordPress ger sitt eget s\u00e4tt att inkludera JS- och CSS-filer<\/a> p\u00e5 webbplatsen. Du m\u00e5ste inkludera JS- och CSS-filer p\u00e5 samma s\u00e4tt.<\/p>\n

\u00d6ppna functions.php<\/code>filen och placera nedanst\u00e5ende kod i den som l\u00e4gger till JS-filerna p\u00e5 din webbplats.<\/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
H\u00e4r har jag inkluderat ett murverk js fr\u00e5n WordPress-k\u00e4rnan med hj\u00e4lp av uttalandet wp_enqueue_script('masonry');<\/code>. Detta uttalande inneh\u00e5ller en JS-fil av murverk direkt i din WordPress-milj\u00f6. Jag inkluderade ocks\u00e5 en script.js<\/code>fil, d\u00e4r jag kommer att skriva koden f\u00f6r att ringa och initiera murverkets rutn\u00e4t.<\/p>\n
Murverk Grid Layout i WordPress<\/h3>\n
I det h\u00e4r skedet \u00e4r vi klara med den grundl\u00e4ggande installation som kr\u00e4vs f\u00f6r integrering av murverk. D\u00e4refter m\u00e5ste vi l\u00e4gga till markering f\u00f6r v\u00e5ra HTML-element i rutn\u00e4tbeh\u00e5llaren. Anv\u00e4nd nedanst\u00e5ende HTML f\u00f6r det.<\/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
I ovanst\u00e5ende kod lade jag till en huvudgitterbeh\u00e5llare och lindade bilderna inuti den. Jag l\u00e4gger till en bild i varje beh\u00e5llare f\u00f6r rutn\u00e4t.<\/p>\n
Efter detta st\u00e4ller du in bredden f\u00f6r rutn\u00e4tobjekt med CSS-regeln nedan. Du kan \u00e4ndra denna breddmatchning med ditt krav.<\/p>\n
.grid-item { width: 400px; }<\/code><\/pre>\n
Slutligen m\u00e5ste vi initiera murverk med de metoder som tillhandah\u00e5lls av ett murplugg. \u00d6ppna script.js<\/code>filen och klistra in koden under den.<\/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
Den slutliga utdata kommer att se ut som nedan sk\u00e4rmdump:<\/p>\n
\"Hur<\/a><\/p>\n
Det \u00e4r allt! Det handlar om att l\u00e4gga till en murstenslayout p\u00e5 din WordPress-webbplats. Prova det i ditt WordPress-projekt och dela dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h4>\n