Tere kõigile! Täna tahaksin rääkida sellest, kuidas ilma pluginate ja skriptideta brick müüritise plokid(müüritööd. alates inglise keelt - telliskivi müüritise), st erinevate kõrguste plokid on üksteisele ilusti paigutatud ilma suurte tühjade taane. Jah! Kõiki seda saab teha CSS-iga väga kergesti.
CSS-il on kinnisvara, millega saate luua mitmevärvilist teksti või plokke. Nad kasutavad seda.
Vara kutsutakse veerud. See on universaalne vara, mis võimaldab teil kohe veeru laiuse ja arvu määrata. Lisateave selle kohta saate lugeda hea CSS. kataloogi.
Niisiis, kõik on tegelikult väga lihtne. Näiteks on meil 6 erineva kõrguste elementi, kuid sama laiusega. Hele näide on saitidel külgriba (külgmine kolonn). On kõik plokid sama laiuse, kuid erinevate kõrguste. Tavaliselt B. mobiilne versioon Saidiriba sait on pärast põhisisu, allosas saidi ja sisu ise teeb kogu laiuse ekraani. Loomulikult sait on irratsionaalne ühes veerus, sest seal on palju vaba ruumi külgedel, eriti kui te vaatate tableti.
Aga kui plokid määravad vara ekraan: Inline-BlockSiis nad automaatselt, kui konteineri laius on piisav, asub mitmes veerudes. Kuid kõik ei pruugi tunduda väga ilus:
Nõustu, need tallid plokkide vahel ei vaata üldse. Seetõttu tuleb see kiiresti fikseerida! Selle jaoks konteineri plokile,millistes plokkides asuvad, peate lisama vajalikud stiilid:
Moz-veerud: 300px auto; -Mebkit-veerud: 300px auto; Veerud: 300px auto;
Cross-brauseri jaoks kasutage Firefoxi ja Webkit brauseri omadusi (Chrome, Safari, Android). Näiteks oleme paigutatud plokkidega märgistatud nimekiri Seejärel näevad välja stiilid pildil näitena:
Ul (laius: 1050px; -Moz-veerud: 300px auto; -webkit-veerud: 300px auto; veerud: 300px auto;) li Polster: 10px; laius: 300px; marginaal-põhja: 30px; vertikaalne-align: top;)
Sellisel juhul asuvad plokid mitmes veerudes. minimaalne 300px laius ja veergude arv määrab brauseri automaatselt. Kohanemisvõime luua on mugav. Sisse sel juhul Seal on 3 veergu ja see näeb välja:
Laius konteineri (1050px) peab kiirenema, kui soovite vahemaa vertikaalsete plokkide vahel langes vahemaa horisontaalselt. Vastasel juhul paigaldatakse brauseri automaatselt kõlarite vaheline laius. Omama kinnisvara kolonn-vahemis seab veergude vahelise vahemaa. Kuid sel juhul ei tööta see soovi korral.
On veel üks võimalus: plokkide puhul peate seadistama laiuse vara: 100%. Ka siis, kui pakkimisomand on paigaldatud, nagu minu puhul peate määrata kasti suuruse vara: Border-Box. Nüüd saate veeru-lõhe vara turvaliselt lisada konteinerile veergude vahelise vahemaa seadmiseks. Seega töötab vastavalt vajadusele.
Nõustuge, tundub palju parem! Võite paigutada ka div "plokid div konteinerisse. Kui teil on vaja teksti levitada mitmetesse kolonnidesse, lihtsalt "P" sildil, näiteks tekstiklass lisab soovitud teksti ja selle klassi kirjutame vara veerud..
See on kõik! Nii lihtsalt ilma tarbetute skriptideta, saate plokke paigutada telliste või teksti kujul mitmetes veergudes. Kuid pange tähele, et sel juhul tundub see ilus, kui plokid on sama laiusega. Teises juhul jääb see veel ainult hea müüritise skripti kasutamiseks. Skript asetab automaatselt iga ploki. Aga see on teine \u200b\u200bteema ...
See on kõik! Kui mõned küsimused või kommentaarid ilmusid, jätke need kommentaaridesse. Edu!
Blogi sektsioonis. See foto wordPressi teema See on meie näide, kuid olete ilmselt näinud jquery müüritise ja teiste Wordpressi saitide kasutamist.
Mis on jquery Manory
Müürserit võib pidada CSS-i lisaks, millega saate elemendid horisontaalselt paigutada, pöörates vertikaalasendisse sõltuvalt monitori laiusest. Selle tulemusena minimeeritakse vertikaalsed lüngad erinevate kõrguste elementide vahel. Kui soovite ka teha cSS-i abiUskuge mind, et teil on palju peavalu.
Selles näites näete enne ja pärast kasutamist jquery müüritise töö põhimõtet:
Kuidas näete tulemust näol, kui kasutate CSS Float: vasakule, siis on tühjad intervallid, peate kasutama CSS-positsiooni, mis on üsna problemaatiline, saate, aga miks see aitab müüritises aidata.
Me kasutame WordPressi saitidel Jquery Mansory
Müüritrit saab kasutada kahel juhul. Esimene neist on siis, kui kõik teie blokendid on sama laiusega, sel juhul peate seda skripti tükki kasutama:
|
Kui teil on erinevad laiuse plokid, peate kasutama järgmist koodi:
|
Kus solumnwidth. See on võrkude laius (pikslites). Masonry järgib neid kahte reeglit:
- Elementide üldine laius (arvutatakse vastavalt käesolevale valemile) \u003d CSS laius + polsterdus-parempoolsed + polsterdamise vasak + piiri parempoolne laiuse + piirivaldava laius + marginaal-õigus + marginaal-vasakpoolne
- Kui kasutate kolonnwidth kõik elemendid peavad olema paigutatud horisontaalselt laius kolonnlaud (näiteks kolonnwidth: 200, esemed algavad 0 või 200 või 400 pikslit ja nii edasi). See ei pruugi olla täiesti selge, kuid selles pole midagi raske, vaatame pilti.
190px ja marginaal-parempoolse kogu laiuse esimene element: 0. Teise elemendi puhul on marginaal-vasakpoolne: 0, teoreetiliselt peavad need kaks elementi üksteist puudutama. Aga kuna kolonnwidthil on 200 korda väärtuse, hakkab teine \u200b\u200belement kuvama kaugus 200PX.
See protsess ei juhtu, kui meil ei ole skripti kolonnilaiuse väärtust ja kõik elemendid algavad üksteisega, mistõttu on vaja neid eraldada varu.
Nii imesid jquery müüritise ja Wordpress 3 ..
Nüüd kodeerin vähe. Kõigepealt ühendage vajalikud jquery ja müüritise raamatukogud Seader.php-failis. Jäta see kood SAAPER.PHP-sse (saate alla laadida väljapoole):
// ühendage jquery// ühendage müüritise
Veenduge, et WP_ENQUEUE_SCRECT seisab enne WP_headi. Müürseri skript asub minu teema JS kausta, teil võib olla erinev nimi.
< div id = "content_masonry" > < div class = "masonry_box" > < ! -- post content -- > < / div > < div class = "masonry_box" > < ! -- post content -- > < / div > . . . < / div > < ! -- #content_masonry--> |
Div ID \u003d "Content_Masonry" helistab müüritise skriptile ja Div Class \u003d "Masonry_box" kuvab meie postitused skripti abil. Nüüd CSS, saate teha sisu_maaasonry näiteks laius 100%, siis ei ole vaja ravida, kuid kui teete fikseeritud laius content_masonry, peate tegema vajalikud arvutused. Näiteks te teete 4 veergu postitustega, igaühel on laius + polsterdus 190px ja marginaal-õigus: 10px, siis sisu_maasonry konteineri sisu suurus on 200 x 4 \u003d 800px:
#Content_Masonry (laius: 800px;) #content_masonry .Masonry_box (laius: 170px; polsterdamine: 10px; marginaal-parempoolne: 10px; marginaali põhja: 10px;)
#Content_masonry ( laius: 800px; #Content_masonry .Masonry_box ( laius: 170px; polster: 10px; marginaal-õigus: 10px; market-Bottom: 10PX; |
Nüüd jääb PHP lisamisele, mis tekitab HTML-i, sel juhul kasutan WP_Query-d müüritise kategooria 20 postituse kuvamiseks näiteks lehekülje ekraanil (Page.php):
< div id = "content_masonry" > $ Linksposts \u003d uus wp_query (); $ LINKPOSTS -\u003e Päring ("Showposts \u003d 20 & Cat \u003d 10"); has_posts ()): $ linksposts -\u003e the_post (); ?\u003e < div class = "masonry_box" > < div class = "masonry_box_inner" > < h2 > < a href = " ID, "URL", TRUE)) ECHO GET_POST_META ($ Post -\u003e ID, URL, TRUE); Muidu the_permalink (); ?\u003e "> < / a > < / h2 > |
Hea päev kõigile! See on minu teine \u200b\u200bartikkel käesoleval aastal. Ma avaldasin esimese ikooni fondi kohta hiljuti ja mul on hea meel, et ma leidsin aega teise artikli kirjutamiseks sellise väikese varuga. Siiani on minu jaoks see väike lõhe, sest Sageli ei kirjuta enam võimalust, aga ma proovin. 😎 ja nüüd käsitleme nüüd, mida arutatakse käesolevas artiklis.
Võib-olla paljud teist on näinud saitidel elementide asukohta (pildid, artiklid, erinevad plokid) telliskivi mõju. Sa ütled - kas on võimalik teha CSS-i kaudu? Võib-olla on see võimalik, kuid ainult selline paindlikkus ei ole. Skript ise asetab elemendid leheküljele vertikaalse ruumi abil. Ka positsioneerimisplokkide korral lisab skript animatsiooni. Seda on võimalik seda süüdistada adaptiivses disainis, vähendades brauseri akna. Niisiis, see kõik saavutatakse väikese JavaScripti raamatukoguga - müüritisega. Seda skripti kasutatakse tänapäeva suundumuste kujundamisel väga laialdaselt. Ma ei tea, kuidas vene pagan, kuid ülehindamise interneti müüritise sai suur populaarsus.
Autor Mastary on USA-s David Desundro. Ma tahaksin talle öelda, et tänan teid väga hea skripti eest. See raamatukogu levitatakse täiesti tasuta, nii et saate selle oma veebisaidil turvaliselt kasutada.
Ma arvan, et paljud meeldisid. Tegelikult näeb kõik väga kena. Olgem tegeleme, kuidas töötada müüritisega, kuidas tuua meie plokid meie saidile telliskivi mõjuga?
Artikkel Artikkel
Esiteks peame minema skripti lehele - http://laasonry.dendandro.com ja laadige alla uusim versioon. Selle artikli kirjutamise ajal on see versioon 4.0. Ka sellel saidil leiate üksikasjaliku dokumentatsiooni inglise keeles. Viitan dokumentatsioonist peamiste punktide stsenaariumile - kuidas ühendada, millised valikud on kättesaadavad jne. Ma ei mõjuta kõike, sest Ma ise ei teinud seda mõnes punktis välja. Teie saidile tutvustada vajadust teha minimaalse tegevuse. Sa oled nüüd harjunud sellega.
Allalaadimise veebisaidil on skripti kaks versiooni - kokkusurutud (minimeeritud) ja tihendamata. Parem on kasutada täpselt - masonry.pkgd.min.js. Samuti saab raamatukogu laadida CDN-st:
tihendamata
kokkusurutud (minimeeritud)
Soovitan teil ühendada müüritise minimeeritud versiooni CDN-st. Nii vähendame tarbetute HTTP-taotluste arvu. Üldiselt, olenemata skripti, mida te ühendate, kui saate ühendada Mineeritud versiooni CDN-ga, seejärel ühendage see.
Müüritööde tööle peame looma vanema ploki ja pani selle elemendid.
Selguse huvides lõime demo-lehe erineva suurusega piltidega. Ma võtsin pildi elementide näitena, sest Neil on erinevad kõrgused, kuid piltide asemel võib olla ükskõik milline plokk: tekst, video jne. Proovige vähendada brauseri akna ja näed pilte sujuvalt muuta oma positsiooni.
Vaatame, mida HTML-kood näeb välja:
...
#Container (piir: 1px tahke #ccc; marginaal: 0 AUTO, polsterdamine: 50px 0; max-laius: 1170px;) / * võrgusilma element * / .element-kirje (piiri: 2, 0, 0, \\ t 0, 0,35); marginaal-alumine osa: 15px; polsterdamine: 1px; laius: 280px) / * / võrgusilma element * / h1 (tekst-align: keskus; marginaal: 0 50px)
Nagu näete, kasutatakse CSS-i siin minimaalselt.
Alustada müüritise pluginat
Seda saate teha mitmel viisil.
Masonry initsialiseerimine JavaScripti kaudu
Võite kasutada müüritise nagu jquery-plugin:
$ (Valija "). Masonry ();
Kuid pidage meeles, et selle meetodi puhul peate olema ühendatud JQuery raamatukoguga:
Demo leheküljel I alustasin müüritise nagu jquery-plugin, st Mul on järgmine lähtestamise kood:
JQuery (Document) .Veread ($) ($) ($) ($ ("elemendid-gride"). Müürsepad (// valikute esemed: ".element-kirje", kolonnwidth: 300));));
Kui te juhtisime "müüritise ()" meetodit, läksime kaks võimalust: esemed ja kolonnwidth. Need on vajalikud kaks võimalust. Arendaja sõnul on need skripti normaalseks tööks vajalikud. Kuid me räägime allpool toodud valikutest. Kõik, pärast neid tegevusi, peaksid töötama kõik.
Vanilla JavaScripti lähtestamine
Võite kasutada müüritise ka Vanilla JS:
Uus müüritööd (ELEM, valikud)
Müürseri () konstruktor võtab kaks argumenti: konteineri lapselement ja objekti valik. Initsialiseerimise kood on järgmine.
Var elem \u003d dokument.Queryselektor ("elemendid-gride"); var msnry \u003d uus müüritine (elem (// valikute üksusi: ".element-kirje", kolonnwidth: 200)); // Element argument võib olla valija string // üksikule elemendile var msnry \u003d uus müüritise (". Elemendid-gride", (// valikute));
Ausalt öeldes ma ei töötanud Vanilla JS-ga, mistõttu ei saa ma konkreetselt öelda, mis see on hea kui jquery. Lihtsalt tean, et selline meetod on olemas.
Initsialiseerimine HTML kaudu.
Saate alustada müüritri HTML-i kaudu ilma ühe rea JavaScripti koodi kirjutamata. Selleks peate lisama atribuudi "Data-müüritise" konteineri kõigile lastelementidele. Valikud saab üle kanda väärtusena.
Edastatud parameetrid peavad vastama JSON-vormingule. Ma tahan juhtida teie tähelepanu koodide hinnapakkumiste kasutamisele. Andmemängija atribuutide hinnapakkumised on ühekordsed ja edastatud valikute jaoks - kahekordne. Need. Nii näidatakse seda näitel.
Seda võimalust saab kasutada, kui te ei soovi saidil liigset JavaScripti kasutada. Näiteks ma ei saa kohe laeva jquery, kui ta ei kasutatud saidil.
Siin on selline raamatukogu. Ei ole midagi keerulist. Mis järgmiseks?
Elementide suurused
Mõõdud tütar elementide võib olla nii fikseeritud kui ka kummi. Fikseeritud suurusega (laius ja kõrgus) plokkide ploki laius ja disain on määratud CSS-stiilis failis. Kõrgus Ma tahan öelda, kui kasutate tühjade plokke, töödeldakse ploki kõrgust brauseriga, mis põhineb selle sisul. Minu puhul ma ei küsi kõrgust, sest Pildid on nii oma kõrgusega.
...
Kummist grid
Kummivõrguga seadistatakse elementide laius protsendina. Kummist võrku kasutatakse peamiselt adaptiivses disainis. Me räägime rohkem allpool toodud valikute kohta.
...
Piltide laadimine.
Mõnikord, kui leht on laaditud, võib juhtuda, et elemendid kattuvad üksteisega. Samal ajal lähevad nad kõikidesse ühes ühes ühes ja tundub kohutav. Nii saate selle probleemi lahendada väikese raamatukoguga - piltide laadimine.. Parim asi ilmnes minuga adaptiivse disainiga. See oli siis, kui avasin saidi mobiiltelefonist mobiiltelefoni võrk pilte, mida ma lähen ühesse vaiasse.
Ühendage pildid CDN-iga:
ImageLaaded elemendi kasutamine on leheküljele paigutatud alles pärast selle täielikku laadimist.
// init müüritise var $ grid \u003d $ (". Grid"). Masonry ((// Valikud ...)); // Paigutus müüritise pärast iga pildi laadimist $ grid.Ilageded (). Progress (funktsioon () ($ grid.maasonry ("paigutus"));)));));
Või alustamine müüritise esineb alles pärast kõigi piltide täielikku laadimist.
Var $ grid \u003d $ (". Grid"). Piltlaaditud (funktsiooni () (// // init müüritise pärast kõigi pilte on laadinud $ grid.Masonry ((// Valikud ...));)));
Valikud (valikud)
Nüüd omeme imestada, mida me võime läbida võimalusi müüritise ().
Kõik valikud on rühmitatud. Noh, see on tehtud nii, et neid oleks lihtsam navigeerida.
Nüüd vaatame, millised valikud on konkreetses rühmas.
esemed
See valik näitab, millised elemendid müüritise efekti rakendatakse. See on kasulik määrata see valik, sest me saame lõigata esemed, mis ei ole osa paigutusest. See parameeter on meile juba tuttav, kui me müüritise käivitamisel lahti võtame.
Üksused: ".element-kirje"
kolonnwidth.
Määrab paigutuse elementide laiuse. Kui see parameeter Omit müüritise võtab välise laiuse esimese elemendi. Arendaja soovitab alati täpsustada kõlarite laiust, kas see on fikseeritud või kummist elemendid.
Kolonnwidth: 80.
Elementide suurused (element suurus)
Kui me tahame muuta meie paigutuse kummist elementidega, näiteks adaptiivse disainiga, siis nendel eesmärkidel on parameeter, mis muudab meie kummivõrgustiku.
protseduur
Me demonteerisime ülaltoodud kummist võrgukoodi, kuid võimalused ei läinud üksikasjadesse.
...
Nagu me näeme, et aktiveerida kummist võrku, lisasime protsessi protsessi parameetri initsialiseerimise koodile Boolean väärtus " tõsi.". Ja laiusena märkis elemendi klass, mille ulatuses on protsentides laius CSS-is määratud.
vihmaveerennid.
Elementide vahel saate võimaluse abil määrata horisontaalse. vihmaveerennid., Numbri edastamine. Number vastab pikslite tagaile.
Vihmaveerenn: 15.
Elementide vertikaalsed taanded on seatud CSS-is.
Element-kirje (marginaal-Bottom: 15px;)
Tadente saab määrata protsendina, st. Need varieeruvad sõltuvalt brauseri akna suurusest.
...
Me lõime enne elementide loendit tühja div ploki.
Selle ploki CSS näitas laiuse protsenti. Ja initsialiseerimise koodi valikul vihmaveerennid. Me märkisime selle tühja elemendi klassi. Skript ise loob selle ploki laiuse põhjal protsentides.
tempel.
See valik saab määrata esemed, mis tembeldatakse müüritise võrku. Ülejäänud elemendid on allpool ja väidavad tembeldatud. Mõnikord võib see olla kasulik. Valikuvõimalused tempel. Me edastame tembeldatud elemendi klassi.
Templi: ".stamp"
Saate vaadata üksikasjalikumalt Codepenis, samuti vajadusel redigeerimiseks.
fitwidth.
Selle võimaluse olemus on see, et kui me selle vanem elemendi ploki aktiveerimisel aktiveerides, lisatakse fikseeritud laiuse pikslites. Veelgi enam, vanemploki laius on võrdne kõigi lasteelementide laiusega. Seega täpsustades CSS-i vanemate ploki reegel " marginaal: 0 Auto»Me võime keskuses asuda ploki müüritise elementidega.
Elemendid-gride (marginaal: 0 Auto;) isfitwidth: Tõsi
Tähelepanu! See võimalus ei tööta elementidega, mille laius on näidatud protsentides. Väärtus "kolonnwidth" valik peab olema määratletud pikslites, näiteks "kolonnwidth: 120". Vastasel juhul saab üksteisele elemente.
originaali.
Vaikimisi on kõik võrgusilma elemendid joondatud vasakule. Võimalusega originaali. Te saate muuta horisontaalset esemete voolu ja määrata joondamise paremale vasakule. See on piisav Boole'i \u200b\u200bväärtuse läbimiseks " fALSE. "
SYALLEFT: FALSE
origintop.
Samuti ja horisontaalselt on vaikevõrgu elemendid joondatud ülaservas. Võimalusega origintop. Saate muuta esemete voolu vertikaalselt ja määrata joondus alt üles, umbes nagu tetratis 🙂.
Origintop: FALSE.
Seadistamine (häälestus)
Minge seadete valikutesse.
konteineriväljak
See valik tühistab emakonteinerite elementide stiilid. Vaikimisi on vanem seatud asendisse: suhteline "reegel. Seda reeglit saab tühistada.
Containetyle: null
Muidugi oli võimalik alistada CSS-faili kaudu, kasutades "! Oluline", aga ma ei taha seda teha. Üldiselt arvan, et see on halva tooni reegel paigutusel. See on parem puhastada stiile, seda rohkem arendaja annab meile selle võimaluse.
Üleminekuperiood.
Ülemineku kestus, kui üksused muudavad nende asukohta. Vaikimisi aeg on seatud - 0,4 sekundit. Ajavorming on määratud CSS-aja vorminguna.
Üleminekukulu: "0,4S"
Siin on mõned näited aja seadistusest.
// Quick Animatsioon TransitionDuration: "0,2S" // Aeglane animatsioon TransitionDuration: "0,8S" // Animatsioon TranscalDuration: 0
suurust mööda muutma
Selle võimalusega saate tühistada vanemploki suuruse muutmise. Need. Vaikimisi, kui te ei täpsusta fikseeritud suurust vanemale, vähendades brauseri ekraani, meie lapsevõrgu elemendid muudavad oma asukohta, liigub alla, hõivavad vaba ruumi. Nii et "suuruse muutmise" valikuga saate üleminekuid tühistada.
Suuruse muutmine: FALSE
Ausalt, sama mõju saab saavutada, kui te küsite vanem lihtsalt fikseeritud suurusega. Siin ma ei mõista arendajat - kas ma valesti aru valesti või see valik toimub teatud juhtudel. CODEPEN-i näite kohta saate rohkem üksikasju näha. Püüdke muuta brauseri ekraani suurust. Seejärel muutke "Suurust: False" kohta "Suurust: Tõsi" Ja sa mõistad, mida me räägime.
initlayout
See valik aktiveerib skripti käivitamisel meie telliskivi võrku. Vaikimisi on see sisse lülitatud - "InitLayout: Tõsi". Aga saate tühistada.
Initlayout: vale
Enne võrgu aktiveerimist saate kasutada meetodeid ja sündmusi. Näiteks saate teha nii, et teie võrk aktiveeritakse konkreetse nupuga klõpsates. Noh, siis midagi sellist.
Käesolevas artiklis ma ei vabasta sündmusi ja meetodeid, sest Artikkel, nii et see osutus mahuruumi. Te saate neid arendaja veebisaidil iseseisvalt uurida. Samuti leiate rakendamise näiteid. Kõik on üsna arusaadav. Mitte alati kirjutatud skriptide autorite poolt selliseid juhiseid. Müüritööde arendaja juhiste jaoks paneksin kõvasti 5 . 🙂
Müüry puhas CSS
Samuti on võimalus rakendada puhas CSS-i telliskivid. Ma ei anna siin kõiki koode. Võite vaadata Codepen, pole midagi keerulist. Sellisel juhul on mugav asjaolu, et te ei pea ühendama täiendavaid JS-raamatukogusid ja mõistma pistikprogrammi valikuid.
Põhimõtteliselt on kõik, mis ma eespool ütlesin, on teie veebisaidile telliskivi mõju kasutamiseks piisav.
Ja see kõik. Tänan teid kõiki teie tähelepanu eest. Määrake kommentaaride küsimused, ma alati hea meelega aidata. Vaadake teid järgmistes artiklites. Kuni!
Ma ütlesin, kuidas muuta uut blogi disaini, uskuda naiivselt, et kõik olulised tööd olid juba tehtud. Aga nagu selgus, oli veel palju tööd. Lisaks ma lõin oma osa sellest. Aga kõigepealt kõigepealt. Selles postituses puudutan järgmisi küsimusi:
- kuidas tutvustada uusi WordPress kiibid registreerimisvormingute objektis;
- kuidas määrata plokkide positsioneerimisprobleemid müüritise skriptis;
- kuidas rakendada müüritise mis tahes saidile.
Niisiis, kuidas masons ja JavaScript? Selgub, et on olemas ühine kontaktpunkt! Loodan, et kõik teavad, kes on sellised masonid. Kui ei ole, siin on lühike määratlus:
Masonidvõi frank-Masons - "Tasuta Bricklayers" sõna otseses tõlkes, liikumine, mis tekkis XVIII sajandil suletud organisatsiooni kujul. Vabamüügistaja võtab selle päritolu vähe tuntud allikatest XVI lõpus - XVII sajandi alguses väidetavalt Masoni töökojad. Kõik mamonite tegevus on väga sümboolne, palju seostatakse arhitektuurilise sümboolikaga ja üks põhitegelased on kärbitud püramiid.
Olen väga huvitatud masonist ja kõik, mis on nendega seotud. See on väga huvitav. Tahaksin rääkida tõelise masoniga (kuid mitte sellisena, kes on lihtsalt Ponte pärast, helistage ise tasuta telliseks, nimelt tegeliku meistriga). Aga see ei ole nii. Ja asjaolu, et PINBINi disaini teemal kasutab skripti, mis põhjustab plokkide teateid dokumentide väljakuulutamisega tellistest. See on nüüd väga populaarne stiil, erinevaid viise kasutatakse sellise mõju rakendamiseks, kuid üks parimaid on kahtlemata JavaScript Müüritööd..
Selle JavaScripti ametlik veebisait on Masonry.Desandro.com, näitab, kuidas see toimib ja näitab, kuidas seda saidiga ühendada. Veelgi enam, see võib olla mis tahes sait, mitte tingimata WordPress, A ja DLE või üldiselt staatiline HTML. Kuid tasub öelda, et viimaste versioonide Wordpressis (alates 3.8-st, kui ma ei eksida) müüritise skript on juba põhipaketis juba kaasatud. Aga nagu juba mainitud - kõik korras.
Kuidas rakendada teema WordPressi toe toetusvorminguid?
Nii et protsessi täpsustamine, ma otsustasin lisada minu teema registreerimise funktsioone puuduvad funktsioonid selles nii, et peamine võiks avaldada staatuse, galerii, pildi või video, erinevate disain nende plokid. Ma räägin disaini arhiividesse ja leidsin selle funktsiooni toetavate selliste teemade väga väikese arvu.
Aga kui värskendate oma WordPressi, saab dokumentide vorminguid ellu viia objektis ja see on lihtne. Niisiis, kõigepealt avage fail functions.php.teie registreerimise teema ja lisage sellele järgmine kood:
Add_action ("after_setup_theme", "slug_post_formats"); Funktsioon Slug_post_formats () (postivormingud, massiiv ("kõrvale", "pilt", "video", "audio", "quote", "Link", "Galerii", "Chat", "STATUS", "STATUS",))); )
Seda koodi saab sisestada mis tahes faili asukohta. functions.php.Peaasi ei ole funktsiooni katkestada. Kui kõik on tehtud õigesti, siis uue rekordi loomisel peaksite saama uue formaadi ploki, kui mitte, seejärel avage menüü "Ekraani seaded" ülaosas ja märkige liigendatud plokk.
Aga see funktsioon ei tööta enne, kui spetsiaalsed failid ilmuvad kausta teemaga, koos tüüpi nimed sisu-midagi.Php. - nimi "Midagi" faili, see näitab malli, mille vormingu see fail on.
Nad võivad olla:
Formaadid ei ole vaja kasutada kõike, kuid saate määrata kood eespool ainult need, mida vaja näiteks, kui teil on vaja ainult video, üks pilt ja galerii, siis sisestage functions.php.selline kood:
Add_action ("after_setup_theme", "slug_post_formats"); Funktsioon Slug_post_formats () (postivormingud, massiiv ("pilt", "video", "galerii",)););
Noh, teil on vaja ainult faile, mis on loetletud joonis: sisu-Image.php, sisu-video.phpja sisu-Gallery.php. pluss content.php. Tavaliste dokumentide puhul. Kust need failid tulevad? Saate exhaone neid Twentyfurteeni (või mõnda muud tugivorminguid, näiteks Crate) teemast ja seejärel täpsustada. Lihtsalt alla laadige see teema arvutisse, võtke vajalikud failid ja täitke server oma disainiga kausta. Pärast seda ilmuvad nad konsooli sektsioonis Välimus -\u003e Toimetaja. Lisaks tuleb need failid esitada nõutavale vormingusse, peate ka failis stiilide looma style.css..
See on valuvaigistamise töö, kuid see maksab sajakordselt välja. Ma näitan selliste failide näiteid (umbes ma seda blogis kasutan):
Sisu-status.php-fail:
Sisu-video.php-failid ja sisu-galerii.php on täiesti sama:
Content.php-fail:
">
Veidi kaevamine, saate aru saada, mida teha oma mallide vormide vormide jaoks. Samal ajal ei tohiks te CSS-stiilide unustada. Aga siin ma ei saa anda mingit soovitusi, sest see on väga konkreetne küsimus ja sõltub konkreetse registreerimise teema.
Kui raskusi tekivad või midagi arusaamatut - saate kommentaare aidata kui ma saan.
Noh, dokumentide vormingud on varjatud ja töötavad suurepäraselt. Aga mitte midagi ... Nad töötavad hästi, kuid müüritise skriptiga ei tahtnud nad olla sõbrad. Näiteks, kui sisestades galerii sobiva salvestusvormingu abil, oli galerii all suur ruum, umbes sama laadi kohta, mis pärineb eelmisest postitusest, kus ma rääkisin kummaliste lüngade vahel teadete vahel Google'ist Fonte. Siin on need probleemid me õpivad otsustama allpool.
Kuidas määrata plokkide positsioneerimisprobleemid müüritise skripti
Lubage mul teile meelde tuletada probleemi olemust: Google'i fontide fondi kasutamisel müüritise skripti töös ilmusid probleemide erineva kõrguse kujul artiklite teatete vaheliste vaheaegade erineva kõrguse kujul. Sama mõju, vaid palju rohkem märgatavam ja rekordivormingute kasutamine, eelkõige plaaditud galerii galerii sisestamisel Jetpack pagin.
Nagu ma ütlesin: 'Ma kasutan oma blogis Jetpacki paketti, kus on suurepärane moes plaatide galeriide plugin, kuid sellise galerii sisestamisel suurel perioodil ilmusid:
Müürseri skript on süüdi, see on müüritise skript: veebide fontide kasutamisel toimib see varem kui fontide laadimine ja seetõttu on plokid täislehekülje koormuse lõpus veidi lamedamad. Võib esineda teist võimalust - kui plokid algselt muutuvad siledaks ja seejärel üksteisest jerk.
Galerii on umbes sama: kui hoone ilus plaaditud galerii plaaditud galerii Jetpack, skript, mis arvutab suurus pilte kulutab palju aega selle kohta (ja see teeb mitmes etapis) ja müüritises palju kiiremini ja Plokkide paigutamine kasutab esimesi sissetulevaid (vahepealset) andmeid, mis tagastab plaaditud galerii skripti. Seetõttu ilmub see vahe.
Selleks, et võidelda selle ametliku müüritise veebisaidil (vt eespool) On selgitusi: osad Piltlaaditud ja Web Fonte. Võite tutvuda ametlike meetoditega määratud linkidel. Aga lihtsustada tööd nende vigade parandamiseks, annan ma oma soovitused.
Masonry skripti parameetrite haldamiseks kasutan faili functions.js. Millises ma määran vajalikud juhised ja ühendage see malli. Esiteks määran animatsiooniparameetrid ja sisestan seejärel vea parandamise koodi. Ma annan selle faili sisu täielikult kommentaaridega, saate seda kasutada praktiliselt muutustega:
/ * Müüritise peamiste parameetrite määratlus * / jquery (Document) .Veread ($ ("Post-Area") Blokeerimise animatsiooni keelamiseks asetage FALSE * / Animatsioonoptid: (kestus: 500, / * Animatsioonikiirus millisekundites * / Lineaarne ", järjekord: False));)); / * Galerii probleemide parandamine * / / * Luba müüritise * / / * täitmisviivitus, kuni kõik pildid on koormatud * / / * Start * / (funktsioon (post-ala "); / * Märkus: Siin vajate ka Blokeeri ID * / $ konteineri täpsustamiseks (funktsiooni () () () ($ konteiner.Masonry ());)));)) (jquery); / * Lõpeta * / / * Fikseerimisprobleemide kinnitamine Web Fonte * / / * Start * / Funktsioon Triggermaasonry () (kui (! $ Konteiner) (tagastamine) $ konteiner.Masonry (());) $ (funktsioon () () $ konteiner \u003d $ (post-ala "); triggermaasonry ();))); Typekit.load ((aktiivne: triggermiasonry, mitteaktiivne: triggermasonry)); /* lõpp */
Valige, mida vajate ja kommentaarid ja tarbetu osa skripti saab kustutada näiteks kui teil on ainult probleem Web Fonte, viivitus pilte saab kustutada.
Ühendage see fail malliga. Objekti failis header.php.enne sulgemismärgis Lisa:
Muide, seda koodi saab ühendada otse leheküljel, enne sulgemismärki Lisa:
Mõju on umbes sama, kuigi JavaScript on faili õigesti ühendatud.
Muide, kui teil on WordPress, siis ühendage müüritise skript ise ja seadete fail on faili kaudu võimalik. functions.php.teie teemal lihtsalt lisage koodi lisamine:
Funktsioon Mason_Script () ("müüritise", "/ sisend j. / Faili / maasonry.pkgd.min.js"); wp_enqueue_Script ("MASONRY.Functions", "tee / to / faili / funktsioone.js"); Wp_encee_Script ("müüritise");) lisamine ("WP_ENQUEE_SCRIPTS", "MASON_Script");
Muidugi ei ole kõik täpsed juhised ja action, vaid ainult üldised soovitused, kuna iga juhtum on unikaalne ja universaalse juhendi loomine on peaaegu võimatu. Kui teil on küsimusi - küsi kommentaare.
Kuidas rakendada müüritise mis tahes kohas
Kujutage ette olukord, et meie sait ei ole CMS WordPress Viimane versioon, kuid ütleme edasi DLE (datalife mootor) Ja me tahame ka sellist ilusat plokkide asukohta müüritise abil.
Kõik päris lihtsad. Esiteks alla laadite ametliku veebisaidi müüritise faili alla mASONRY.PKGD.MIN.JS. . Valage see oma serverisse ja ühendage see malli. Teema faili DLE jaoks main.tpl sulgemismärgis Lisa:
Nüüd määratleme ploki struktuuri, mille jooksul müüritise töötab. Näiteks:
CSS-is peate määrama midagi:
MASON-Box (laius: 25%;) .Mason-kasti lai (laius: 50%;)
Nüüd peab leht skripti toimimise vormindama:
Nüüd ma näitan tõesti töötav näide:
1. Ühendage fail mASONRY.PKGD.MIN.JS. Nagu eespool näidatud.
2. Leheküljel HTML-i kaudu alustame skripti:
3. CSS-is registreeritud järgmine tekst:
Halflews-sisu (polsterdamine: 0 5px 5px 10px; marginaali põhja: 15px; piir: 1px tahke # E9E9E9; -webkit-box-vari: 0 1px #bbb; -Moz-kasti vari: 0 1px Box-vari: 0 0 1px #bbb; laius: 345px; / * Väga oluline objekt - seal on plokklaius * / / * Kui see on rohkem kui vajate, siis blokeerib või ei saa * / / * horisontaalselt või suletud Sõbral * / marginaal-vasak: 10px; / * See on plokkide vahel horisontaalselt seadistatud vahemaale * /)
Siin on selline lihtne disain Technotroni veebisaidi põhilehel (kus sisu asub kahes veerus).
See ongi see. Kui ma eksisin kusagil, ei olnud see eesmärk, vaid kiire postitus ja ma tahtsin palju, nii et vead ei välistata - kui midagi ei lähe või kusagil selge viga: palun mõista, leiame vigu ja õige. Vabandame kirjeldatud meetodite omavalitsuse.
Nii kaugel. Loodan, et see oli kasulik.
EPILOGA asemel:
Eduka äri saladused:
1. Ta teab teda.
2. Sam kuidagi tuli välja
Sildid:
Pisano 08/01/2014 
