Üdv mindenkinek! Ma szeretném elmondani, hogy nincs-e beépülő modulok és szkriptek tégla kőműves blokkok(kőművesség. angolról - Téglafalabot), vagyis a különböző magasságok blokkjai szépen el vannak távolítva, nagy üres francia bekezdés nélkül. Igen! Mindez nagyon könnyen elvégezhető a CSS-vel.
A CSS rendelkezik olyan tulajdonsággal, amellyel multicolong szöveget vagy blokkokat hozhat létre. Használják.
Az ingatlant hívják oszlopok. Ez egy univerzális tulajdonság, amely lehetővé teszi, hogy azonnal beállítsa az oszlopok szélességét és számát. Többet tudsz olvasni jó CSS. Könyvtár.
Tehát minden nagyon egyszerű. Például 6 különböző magasságú elemünk van, de ugyanolyan szélességű. A világos példa egy oldalsáv (oldalirányú oszlop) a webhelyeken. Vannak minden, azonos szélességű blokk, de különböző magasságok. Általában B. mobil verzió A SITEBAR webhely a fő tartalom után, a webhely alján található, és a tartalom maga a képernyő teljes szélességét teszi lehetővé. Természetesen az oldal egy oszlopban is irracionális, hiszen sok szabad hely lesz az oldalán, különösen, ha a tablettától nézel.
De ha a blokkok beállítják az ingatlant kijelző: Inline-Block, akkor automatikusan, ha elegendő a tartály szélessége, több oszlopban található. Mindazonáltal minden, ami nem tűnik nagyon szépnek:
Egyetértek, ezek a blokkok közötti francia bekezdések nem néznek ki. Ezért sürgősen rögzíteni kell! Ezért a tartályblokkhoz,melyik blokkban található, hozzá kell adnia a szükséges stílusokat:
Moz-oszlopok: 300px Auto; -Webkit-oszlopok: 300px Auto; Oszlopok: 300px Auto;
A böngésző számára a Firefox és a Webkit böngészők tulajdonságai (Chrome, Safari, Android). Például, blokkokkal vannak állomásozva jelzett lista Ezután a kép példájú stílusok jelennek meg:
UL (szélesség: 1050px; -moz-oszlopok: 300px auto; -WebKit-oszlopok: 300px auto; oszlopok: 300px auto;) Li (display: inline-block; Box-Shadow: 0 8 képpont # 555; list-style: Nincs ; Párnázás: 10px, szélesség: 300px; margó alsó: 30px; függőleges-igazítás: felső;)
Ebben az esetben a blokkok több oszlopban találhatók. minimális 300px szélességet, és az oszlopok számát automatikusan a böngésző határozza meg. Kényelmes alkalmazkodóképesség létrehozása. BAN BEN ez az eset 3 oszlop lesz, és így fog kinézni:
A tartály szélessége (1050px) fel kell venni, ha azt szeretné, hogy a függőleges blokkok közötti távolság egybeesett legyen a távolság vízszintesen. Ellenkező esetben a hangszórók közötti szélesség automatikusan telepíti a böngésző. Van egy ingatlan oszlop-rés.amely meghatározza a hangszórók közötti távolságot. De ebben az esetben nem fog működni, ahogy akarod.
Van egy másik lehetőség: A blokkokhoz be kell állítania a szélességi tulajdonságot: 100%. Továbbá, ha a padding tulajdonság van telepítve, mint az én esetemben, be kell állítania a doboz méretezését: Border Box. Most biztonságosan hozzáadhatja az oszlop-rés tulajdonságot a tartályba az oszlopok közötti távolság beállításához. Így szükség szerint fog működni.
Egyetértek, sokkal jobbnak tűnik! A "div" blokkokat a DIV konténerbe is elhelyezheti. Vagy, ha meg kell terjeszteni a szöveget több oszlopot, egyszerűen a „P” címkét, például a szöveg osztály hozzá a kívánt szöveget, és ezt az osztályt írunk egy ingatlan oszlopok..
Ez minden! Tehát egyszerűen szükségtelen szkript nélkül, a blokkokat téglafal vagy szöveg formájában több oszlopban helyezheti el. De vegye figyelembe, hogy ebben az esetben csak szépnek tűnik, ha a blokkok azonos szélességűek. Egy másik esetben csak egy jó kőműves szkript használata marad. A parancsfájl automatikusan pozícionál minden blokkot. De ez egy másik téma ...
Ez minden! Ha néhány kérdés vagy észrevétel megjelent, hagyja őket a megjegyzésekben. Sok szerencsét!
A Blog részben. Ez a kép wordPress téma Ez lesz példánk, de valószínűleg látta a jquery falazat és más Wordpress webhelyek használatát.
Mi a jquery mansezet
Kőműves lehet tekinteni kívül CSS, mellyel helyezze az elemeket vízszintesen fordult függőleges helyzetbe szélességétől függően a monitor. Ennek eredményeképpen a különböző magasságok elemei közötti függőleges rések minimalizálódnak. Ha akarsz is cSS Súgó, Higgy nekem, hogy sok fejfájás lesz.
Ebben a példában a használat előtt és után láthatja a JQuery Masonry Munka elvét:
Hogyan látja az eredményt az arcon, ha a CSS Float-ot használja: balra, akkor vannak üres időközönként, használni kell a CSS pozíciót, ami elég problémás, akkor is, de miért segít abban, hogy a falazat segítse.
JQuery Mansóriát használunk a WordPress webhelyeken
A falazat két esetben használható. Az első az, amikor az összes információval rendelkező blokkok azonos szélességűek, ebben az esetben ezt a darabot kell használni:
|
Ha különböző szélességű blokkok vannak, akkor a következő kódot kell használnia:
|
Hol solumnWidth. Ez a rács szélessége (pixelben). A falazat követi ezeket a két szabályt:
- A teljes szélessége az elemek (szerint számított ez a képlet) \u003d CSS Szélesség + padding-right + padding-left + Border-Right-szélesség + Border-Bal-szélesség + margin-right + margin-left
- Amikor columnwidth, az összes elemet kell elrendezni, vízszintesen per szélessége columnwidth (például, a columnwidth: 200, tételek kezdődik 0 vagy 200 vagy 400 pixel, és így tovább). Lehet, hogy nem teljesen világos, de ebben semmi nehéz ebben, megnézzük a képet.
Az 190px és a margó jobb szélességének első eleme: 0. És a második elem margó-balra van: 0, elméletileg, ezeknek a két elemnek meg kell érintenie egymást. De mivel az oszlopszélesség 200 mp-os értéke van, akkor a második elem 200 méter távolságra kezd.
Ez a folyamat nem fog megtörténni, ha nem rendelkezünk az oszlopos értékkel a forgatókönyvben, és az összes elem megkezdődik egymással, így szükség van a margóra.
Szóval csodák jquery kőműves és wordpress 3 ..
Most egy kicsit kódolok. Kezdjük, csatlakoztassa a szükséges jquery és kőműves könyvtárakat a header.php fájlban. Ugrás a kódot a fejlécben.php-ben (letöltheti Önt egy Off oldalon):
// csatlakoztassa a jquery-t// csatlakoztassa a falazatot
Győződjön meg róla, hogy a wp_enqueue_script a WP_head előtt áll. A Masonry Script a téma JS mappájában található, lehet más név.
< 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” hívja a Kőműves forgatókönyvet, div class \u003d „Masonry_Box” megjeleníti a bejegyzéseket a forgatókönyvet. Most CSS, megteheti content_maasonry például szélesség 100%, akkor nem kell kezelni, de ha egy fix szélességű Content_Masonry, meg kell tenni a szükséges számításokat. Például, meg hogy 4 oszlop üzenetét, mindegyik szélessége + padding 190px és margin-right: 10px, majd a tartalom mérete content_maasonry tartály lesz 200 x 4 \u003d 800px:
#Content_masonry (szélesség: 800px;) #content_masonry .masonry_box (szélesség: 170px, párnázás: 10px, margó jobb: 10px; margó-alsó: 10px;)
#Content_masonry ( szélesség: 800px; #Content_masonry .masonry_box ( szélesség: 170px; padding: 10px; margó-jobb: 10px; margó alsó: 10px; |
Most is hozzá PHP, ami generál HTML, ebben az esetben azt fogja használni WP_Query megjelenítéséhez 20 hozzászólás a Kőműves kategóriában, például a megjelenítés (page.php):
< div id = "content_masonry" > $ Linksposts \u003d új wp_query (); $ Linksposts -\u003e Lekérdezés ("Showposts \u003d 20 & Cat \u003d 10"); van_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); Egyébként a_permalink (); ?\u003e "> < / a > < / h2 > |
Jó nap mindenkinek! Ez az én második cikkem. A közelmúltban megjelentem az első betűtípusról, és örömmel találtam, hogy időt találtam egy második cikk írására egy ilyen kis margóval. Eddig nekem ez egy kis rés, mert Gyakrabban írjon semmit, de megpróbálom. 😎 És most foglalkozzunk azzal, amit ebben a cikkben tárgyalunk.
Talán sokan látták a helyszíneken az elemek helyét (képek, cikkek, különböző blokkok) téglahatás. Azt mondod - lehetséges-e a CSS-t? Lehet, hogy lehetséges, de csak ilyen rugalmasság nem lesz. A szkript maga a függőleges hely segítségével helyezi az oldalt az oldalra. A blokkok pozícionálásakor a script animációt ad. Lehetőség van arra, hogy az adaptív kialakításban hibáztassák, csökkentve a böngészőablakot. Tehát mindez egy kis JavaScript-könyvtárral érhető el - falazat. Ezt a parancsfájlt nagyon széles körben használják a modern trendtervekben. Nem tudom, hogy az orosz-pogányban, de az Overesztime Internet falazatban nagy népszerűségű volt.
A szerző falazat David Desandro az USA-ból. Szeretném elmondani neki, hogy nagyon köszönöm egy ilyen jó forgatókönyvet. Ez a könyvtár teljesen ingyenes, így biztonságosan használhatja a webhelyén.
Sok tetszett. Tény, hogy minden nagyon szépnek tűnik. Foglalkozzunk azzal, hogyan kell dolgozni a falazat, hogyan lehet a blokkok a webhelyünkön egy téglahatás?
A cikk felépítése
Először is el kell mennünk a Script oldalra - http://maasonry.desandro.com, és töltse le a legújabb verziót. A cikk írásakor ez a verzió 4.0. Ezen az oldalon is részletes dokumentációt talál angolul. A dokumentációból származó főbb pontok forgatókönyvére utalok - Hogyan lehet csatlakozni, mely lehetőségek állnak rendelkezésre stb. Nem fogok mindent érinteni, mert Én magam nem találtam ki néhány pontban. Ahhoz, hogy bemutassa a webhelyét, minimális cselekvést kell tennie. Most már hozzászoksz erre.
A letöltési weboldalon a script - tömörített (minimalizált) és tömörítetlen változat létezik. Jobb, ha pontosan használható - masonry.pkgd.min.js. A könyvtár is betölthető a CDN-től:
tömörítetlen
tömörített (minimalizált)
Azt tanácsolom, hogy csatlakoztassa a Masonry Minimalizált verzióját a CDN-ről. Tehát csökkentjük a felesleges HTTP-kérések számát. Általában bármilyen script csatlakozni tud-e csatlakozni a minized változat CDN, majd csatlakoztassa.
A falazat működéséhez egy szülőblokkot kell létrehoznunk, és az elemeket be kell tennünk.
Az egyértelműség érdekében létrehoztam egy demo oldalt különböző méretű képekkel. A képet az elemek példájaként vettem, mert Különböző magasságuk van, de a képek helyett bármilyen blokk: szöveg, videó stb. Próbálja meg csökkenteni a böngészőablakot, és látni fogja, hogy a képek zökkenőmentesen változtassák meg pozícióját.
Lássuk, mi lesz a HTML kód:
...
#Container (határ: 1px Solid #CCC; margó: 0 Auto, Padding: 50px 0; max-szélesség: 1170px;) / * hálós elem * / .element-tétel (Border: 2PX Solid RGBA (0, 0, 0, 0, 0,35); margó-alsó: 15px; Padding: 1px; Szélesség: 280px) / * / hálóelem * / h1 (szöveges igazítás: Központ, Margó: 0 50px)
Amint láthatja, a CSS-t minimálisra használják.
Inicializálja a falazat bővítményét
Ezt többféleképpen teheti meg.
Masonry inicializálása a JavaScript segítségével
A kőművességet JQuery-pluginként használhatja:
$ ("Választó"). Kőműves ();
De ne vegye figyelembe, hogy ehhez a módszerhez csatlakoztatni kell a jQuery könyvtárhoz:
A demo oldalon a kőművességet jquery-plugin, azaz én. A következő inicializálási kódom van:
Jquery (dokumentum). READY ($) ($ ("Elements-gride"). Masonrészet (// Options Elemekelektor: ".Element-tétel", oszlopszélesség: 300));););
Ha felhívta a "falazat ()" módszert, két lehetőséget teltünk át: Elemekelektor és oszlopszélesség. Ezek két lehetőségre van szükség. A fejlesztő szerint a szkript normál működéséhez szükségesek. Azonban az alábbi opciókról beszélünk. Mindent, ezek után az akciók, mindent meg kell dolgoznunk.
VANILLA JavaScript alkalmazásával
A Vanilla JS-vel is használhatja a falazatokat:
Új falazat (Elem, Opciók)
A falazat () konstruktor két argumentumot vesz igénybe: a tartály gyermek eleme és egy objektum opció. Az inicializálási kód a következő lesz.
Var Elem \u003d Document.QuerySelector ("Elements-gride"); vars msnry \u003d új falazat (Elem (// Options Elemekelektor: ".Element-tétel", oszlopszennyezés: 200); // elemes argumentum lehet választószelet // az egyes elemek VAR msnry \u003d új falazat (". Elements-gride", (// opciók));
Őszintén szólva, nem dolgoztam a Vanilla JS-vel, ezért nem mondhatom, hogy kifejezetten azt mondhatom, hogy jó, mint a jquery. Csak tudom, hogy van ilyen módszer.
Inicializálása html-en keresztül
Inicializálhatja Kőműves keresztül HTML, anélkül, hogy egyetlen sor JavaScript kódot. Ehhez hozzá kell adnia az attribútum- "Data-Masonry" tartályt minden gyermekelemhez. Az opciók értékként átkerülhetők.
A továbbított paramétereknek meg kell felelniük a JSON formátumnak. Szeretném felhívni a figyelmet az idézetek használatára a kódban. Idézetek az Adat-falazat attribútum egy-, illetve továbbított lehetőségek - dupla. Azok. Így jelenik meg a példában.
Ez az opció akkor használható, ha nem szeretné használni a felesleges JavaScriptet a webhelyen. Például nem lennék azonnal a jQuery-t, ha nem használtam bárhol a helyszínen.
Itt van egy ilyen könyvtár. Nincs semmi bonyolult. Mi a következő lépés?
Elemek méretei
A lányelemek méretei lehetnek rögzítettek és gumi. A blokkszélesség blokkszélességének rögzített méretével (szélessége és magassága), és a tervezés a CSS Styling fájlban van beállítva. Magasság Azt szeretném mondani, ha nem használ üres blokkokat, a blokkmagasságot a tartalmán alapuló böngészővel kezeljük. Az én esetemben nem kérem a magasságot, mert A képek, így a saját magasságod van.
...
Gumi rács
Gumi rács segítségével az elemek szélessége százalékban van beállítva. A gumi rácsot elsősorban adaptív kialakításban használják. Többet fogunk beszélni az alábbi lehetőségekről.
...
Képeket.
Néha, amikor az oldal betöltődik, előfordulhat, hogy az elemek átfedik egymást. Ugyanakkor mindannyian egy csomóba kerülnek, és szörnyűnek tűnnek. Tehát megoldhatja ezt a problémát egy kis könyvtárral - képeket.. A legjobb dolog az adaptív designnal megnyilvánult. Az volt, amikor kinyitottam a webhelyet egy mobiltelefonról A képek rácsja, amelyet egy halomra mentem.
Csatlakoztassa a CDN-hez:
Az ImageelAaded elem használata az oldalon csak a teljes terhelés után helyezkedik el.
// init Masonry VAR $ grid \u003d $ (". rács"). Masonry ((// Options ...)); // Elrendezés falazat minden egyes kép után $ Grid.imagesloaded (). Progress (funkció () ($ grid.maasonronry ("elrendezés");));
Vagy a falazat inicializálása csak az összes kép teljes terhelése után következik be.
VAR $ grid \u003d $ (". Rács"). Képeköltek (funkció () () (// init falazás után, miután az összes kép betöltötte a $ grid.masonry ((// Options ...));));
Opciók (opciók)
Most vajuk, mit tudunk átadni az opciók módszerét falazat ().
Minden opció csoportosított. Nos, ez megtörtént, hogy könnyebb navigálni őket.
Most nézzük meg, hogy milyen lehetőségeket tartalmaznak egy adott csoportban.
tételek
Ez az opció azt jelzi, hogy milyen elemeket alkalmaznak a kőműves hatás. Hasznos lehet ezt az opciót meghatározni, mert levághatjuk az elrendezés részét képező elemeket. Ez a paraméter már ismerős számunkra, amikor szétszereljük a kőműves inicializálást.
Elemekelektor: ".Element-tétel"
oszlop szélesség.
Meghatározza az elrendezési elemek szélességét. Ha ez a paraméter elhagyja a falazatot az első elem külső szélességét. A fejlesztő mindig azt tanácsolja, hogy meghatározza a hangszórók szélességét, függetlenül attól, hogy rögzített vagy gumi elemek.
Oszlopwidth: 80.
Elemi méretek (elemméret)
Ha azt akarjuk, hogy a mi elrendezés gumi elemek, például adaptív tervezése, majd erre a célra van egy paraméter, ami a mi gumi rács.
százalékos arány
A fenti gumi rácskódot szétszereltük, de a lehetőségek nem mentek be a részleteket.
...
Mint látjuk, hogy aktiválja a gumi rács, adtunk a PercentPosition paramétert a inicializáló kódot a logikai érték " igaz.". És mivel szélessége azt jelezte, hogy egy olyan elem osztálya, amelyhez a százalékos szélessége CSS-ben van hozzárendelve.
esővízcsatorna.
Az elemek között beállíthat egy franciaországi vízszintes beállításokat. esővízcsatorna., Átadja a számot. A szám megfelel a pixeles visszavonulásoknak.
Gutter: 15.
Az elemek közötti függőleges francia bekezdések CSS-ben vannak beállítva.
Elementelem (margó alsó: 15px;)
A francia bekezdések százalékos arányként állíthatók be, vagyis A böngészőablak méretétől függően változnak.
...
Létrehoztunk egy üres div blokkot az elemek listája előtt.
A blokk CSS százalékos szélességét jelezte. És az inicializálási kód opcióban esővízcsatorna. Jelzük az üres elem osztályát. A szkript magának a blokk szélességén alapul.
bélyeg.
Ez az opció hozzárendelhető azokat a tételeket, amelyeket a falazatrácsban bélyegeznek. A fennmaradó elemek alul lesznek, és meg fogják vitatni a bélyegzett. Néha hasznos lehet. Opciók bélyeg. Átadjuk a bélyegzett elem osztályát.
Bélyegző: ".stamp"
A CODEPEN-nél részletesebben, valamint szükség esetén szerkeszthet.
fitwidth.
Ennek a lehetőségnek az a lényege, hogy amikor aktiváljuk azt a szülőelem blokkával, hozzáadunk egy rögzített szélességet pixelben. Ezenkívül a szülőblokk szélessége megegyezik az összes gyermekelem szélességével. Így a CSS szülőblokk szabályainak meghatározása " margó: 0 Auto»Egy blokkot elhelyezhetünk falazatelemekkel a központban.
Elements-gride (Margin: 0 Auto,) isfitwidth: True
Figyelem! Ez az opció nem működik olyan elemekkel, amelyek szélességét százalékban jelzik. Az "Acélszélesség" opció értékét pixelben kell megadni, például "oszlopszennyezés: 120". Ellenkező esetben az elemeket egymáshoz lehet venni.
eredeti lent.
Alapértelmezés szerint az összes hálóelem balra van igazítva. Opcióval eredeti lent. Megváltoztathatja az elemek vízszintes áramlását, és az igazítást jobbra állítja. Elég ahhoz, hogy átadja a logikai értéket " hamis. "
Eredeti lapot: FALSE
eredmény.
Továbbá, valamint vízszintesen az alapértelmezett rácselemek a felső szélén vannak igazítva. Opcióval eredmény. A tételek áramát függőlegesen megváltoztathatja, és az igazítást az alulról felfelé állítja, körülbelül a Tetris 🙂-ban.
Eredmény: FALSE.
Beállítás (Setup)
Menjen a Beállítások beállításaira.
konténa
Ez az opció törli a szülő konténer elemeinek stílusát. Alapértelmezés szerint a szülő "pozíció: relatív" szabályra van állítva. Ez a szabály törölhető.
ContainerStyle: NULL
Természetesen lehetőség volt felülbírálni a CSS-fájl segítségével "! Fontos", de nem szeretem csinálni. Általánosságban elmondható, hogy ez egy rossz hangszabály az elrendezésben. Jobb tisztítani a stílusokat, annál inkább a fejlesztő ad nekünk ezt a lehetőséget.
Átmenet.
Az átmenet időtartama, amikor az elemek megváltoztatják a helyüket. Az alapértelmezett idő beállítása - 0,4 másodperc. Az időformátum CSS időformátumként van beállítva.
Átmeneti átmenet: "0.4s"
Íme néhány példa az időbeállításra.
// Quick Animation transziondiaturation: "0.2S" // lassú animációs átmenet: "0.8s" // nincs animációs átmenet: 0
átméretez
Ezzel az opcióval megszakíthatja a szülő blokk méretének módosítását. Azok. Alapértelmezés szerint, ha nem adja meg egy fix méretű a szülő csökken a böngésző képernyőn a gyermek rasztereiemeknek fogja változtatni a helyét, lefelé mozog, elfoglal szabad hely. Tehát a "átméretezés" opcióval törölheti az átmeneteket.
Átméretezés: FALSE
Őszintén szólva ugyanolyan hatás érhető el, ha a szülő csak egy fix méretű. Itt nem értem a fejlesztőt - vagy félreértettem valamit, vagy ez az opció bizonyos esetekben zajlik. További részleteket láthat a CODEPEN példájáról. Próbálja meg megváltoztatni a böngésző képernyők méretét. Ezután változtassa meg "Átméretezés: hamis" a "Átméretezés: igaz" És meg fogod érteni, hogy mit beszélünk.
initlayout
Ez az opció aktiválja téglahálónkat a szkript inicializálásakor. Alapértelmezés szerint be van kapcsolva - "Initlayout: True". De törölheti.
Initlayout: hamis
A rács aktiválása előtt módszereket és eseményeket használhat. Például megteheti, hogy a rács aktiválódjon egy adott gombra kattintva. Nos, akkor valami ilyesmi.
Ebben a cikkben nem fogok szétszedni az eseményeket és a módszereket, mert Cikk, így kiderült, térfogat. Ön önállóan feltárhatja őket a fejlesztő honlapján. A megvalósítás példái is találhatók. Minden meglehetősen érthető. A szkriptek szerzői nem mindig ilyen utasításokat írnak. A kőműves fejlesztő utasításaira keményen lennék - 5 . 🙂
Falazat a tiszta CSS-en
Lehetőség van arra is, hogy téglafalat hajtson végre a tiszta CSS-en. Itt nem adom meg az összes kódot. Megnézheti a Codepen-t, nincs semmi bonyolult. Ebben az esetben kényelmes az a tény, hogy nincs szükség extra JS könyvtárakkal, és megértenie a plug-in opciókat.
Elvileg mindaz, amit fent említettem, elegendő ahhoz, hogy a téglahatást használja a webhelyén.
És mindezen. Köszönjük mindent a figyelmedért. Adja meg a megjegyzések kérdéseit, mindig örömmel fogok segíteni. Találkozunk a következő cikkekben. Amíg!
Mondtam, hogy módosítsam egy új blog-designt, naiv módon hitt, hogy minden fontos munka már megtörtént. De, ahogy kiderült, még mindig sok munka volt. Sőt, létrehoztam a saját részemet. De először az első dolog. Ebben a hozzászólásban megérintem a következő kérdéseket:
- hogyan lehet bevezetni az új WordPress chipeket a regisztrációs formátumban;
- hogyan lehet rögzíteni a blokk pozícionálási problémáit a kőműves szkriptben;
- hogyan hajthatjuk végre a falazatot bármely webhelyre.
Szóval, mi a helyzet a kőművesek és a JavaScript? Kiderült, hogy van egy közös kapcsolat! Remélem, mindenki tudja, ki ilyen kőművesek. Ha nem, itt van egy rövid meghatározás:
Kőművesvagy frank-Matons - A "szabad kőművesek" szó szerinti fordításban a XVIII. Században kialakult mozgalom zárt szervezet formájában jelent meg. A Freemasonry a XVI. Század elején kevéssé ismert forrásokból származik, az XVII. A kőművesek minden tevékenysége nagyon szimbolikus, sok az építészeti szimbolizmushoz kapcsolódik, és az egyik alapvető karakter egy csonka piramis.
Nagyon érdekel a kőművesek és minden, ami összekapcsolódik velük. Ez nagyon érdekes. Szeretnék beszélni egy igazi kőműves (de nem ilyen, aki csak a Ponte kedvéért, hívja magát egy szabad kőművesnek, nevezetesen egy igazi mesterrel). De ez nem így van. És az a tény, hogy a téma a design Pinbin használja a forgatókönyvet, ami miatt blokkot bejelentések rekordok sorakoznak a téglák. Ez most nagyon népszerű stílus, különböző módon használják az ilyen hatás végrehajtására, de az egyik legjobb kétségtelenül JavaScript Kőművesség..
A JavaScript hivatalos honlapja a masonry.desandro.com, bemutatja, hogyan működik és megmutatja, hogyan kell összekötni a webhelyhez. Ráadásul bármely webhely lehet, nem feltétlenül WordPress, A és DLE vagy Általában statikus HTML. De érdemes azt mondja, hogy a WordPress az utolsó változat (3,8, ha nem tévedek) a Kőműves script már benne van az alap csomag. De ahogy már említettük - mindent rendben.
Hogyan lehet megvalósítani a téma WordPress támogatási támogatási formátumok rekordjait?
Így a folyamat finomítása, úgy döntöttek, hogy az én téma regisztrációs funkciók hiányoznak funkciók úgy, hogy a fő lehetett közzé állapotát, galéria, egy képet vagy videót, különböző tervezési ezeket a blokkokat. A design archívumában rémültem, és nagyon kevés ilyen témát találtam, amely támogatja ezt a funkciót.
De ha frissíti a WordPress-t, a rekordok formátuma megvalósítható a témában, és ez könnyű. Tehát először nyissa meg a fájlt funkciók.php.a regisztráció témája és hozzáadja a következő kódot:
Add_action ("After_setup_theme", "slug_post_formats"); Function slug_post_formats () (poszt-formátumok, tömb ("félre", "kép", "Videó", "Audio", "Quote", "Galéria", "Chat", "Status",); )
Ez a kód beilleszthető a fájl bármely helyére. funkciók.php., a legfontosabb dolog, hogy ne törje meg a funkciót. Ha minden rendben van, akkor új rekord létrehozásakor új formátumú blokk, ha nem, akkor nyissa meg a "Képernyőbeállítások" menüt a tetején, és jelölje meg a csuklós blokkot.
De ez a funkció nem fog működni, amíg a speciális fájlok jelennek meg a mappában a témával, a típus nevével tartalom - valami.php. - A "Valami" fájl nevében ez jelzi, hogy melyik formátumban ez a fájl lesz.
Lehetnek:
A formátumok nem szükségesek mindent használni, de a fenti kódban csak azokat lehet megadni, amelyekre szükség van például, ha csak videó, egy kép és galéria szükséges, akkor helyezze be funkciók.php.ilyen kód:
Add_action ("After_setup_theme", "slug_post_formats"); Function slug_post_formats () (poszt-formátumok, tömb ("kép", "Videó", "Galéria",);););
Nos, csak a sorban szereplő fájlok szükségesek: content-image.php, tartalom-video.phpés content-Gallery.php. egy plusz content.php. Rendes nyilvántartásokhoz. Hol származnak ezek a fájlok? A huszonfűtés (vagy bármely más támogató formátum, például a ládák) témájából kiszivárhatsz, majd finomíthatja. Csak töltse le ezt a témát a számítógépre, vigye a szükséges fájlokat, és töltse ki a kiszolgálót a tervezéssel. Ezután megjelenik a konzolban a szakaszban Megjelenés -\u003e Szerkesztő. Ezenkívül ezeket a fájlokat a szükséges formátumba kell hozni, szintén meg kell hoznia stílusokat a fájlban style.css..
Ez egy óvatos munka, de százszoros lesz. Megmutatom az ilyen fájlok példáit (kb. Ezen a blogon használom):
Content-Status.php fájl:
Tartalom-video.php fájlok és a tartalom-galéria.php teljesen azonos:
Content.php fájl:
">
Egy kis ásás, kitalálhatod, hogy mit kell tenni a saját sablonaidat a rekordok formátumaihoz. Ugyanakkor ne felejtse el a CSS stílusokat. De itt nem tudok ajánlást adni, mivel ez egy nagyon konkrét kérdés, és a regisztráció konkrét témájától függ.
Ha nehézségek merülnek fel, vagy valami érthetetlen - segíthet a megjegyzésekben, mint amit tudok.
Nos, a rekordok formátuma beágyazódik és tökéletesen működik. De nem volt valami ... jól működnek, de a kőműves szkript, amit nem akartak barátok lenni. Például, amikor behelyezi a galéria a megfelelő felvételi formátum, a galéria alatt volt egy hatalmas tér, körülbelül azonos jellegű, ami az előző bejegyzést, ahol beszélt idegen rések között a bejelentések, amikor a webes betűtípusok a Google Betűtípusok. Itt vannak ezek a problémák, amelyeket meg fogunk tanulni az alábbiakban.
Hogyan kell rögzíteni a blokk pozícionálási problémáit a kőműves szkriptben
Hadd emlékeztessem a probléma lényege: ha a Google Fonts betűtípust a munkát a Kőműves script, problémák jelentek meg a formáját a különböző magasságú közti szünetekben a bejelentések cikkeket. Ugyanez a hatás, csak sokkal észrevehetőbb és a rekordformátumok használata, különösen a Jetpack Paginból származó csempézett galéria galériájának beillesztésekor.
Amint azt mondtam, a jetpack csomagot a blogomon használom, amelyben csodálatos divatos csempe galériák van, de amikor egy ilyen galéria nagy idő alatt beillesztése megjelent:
A kőműves szkript hibás, ez a kőműves szkript: Ha webes betűtípusokat használ, akkor korábban működik, mint a betűtípusok betöltése, ezért a teljes oldalterhelés végén a blokkok enyhén laposak. Lehet, hogy lehet egy másik lehetőség - amikor a blokkok kezdetben simaak lettek, majd egymás mellé.
A galéria körülbelül ugyanaz: ha épít egy szép járólap Galéria csempézett galéria JetPack, egy script, amely kiszámítja a képek méretét tölt sok időt erre (és ez nem több lépcsőben), és Kőműves munkák sokkal gyorsabb és A blokkok elhelyezése az első bejövő (közbenső) adatokat használja, amelyek visszaadják a csempézett galéria parancsfájlt. Ezért jelenik meg ez a rés.
Ennek elleni küzdelem a hivatalos kőműves honlapon (lásd fent) Magyarázatok: A részek képek és web betűtípusok. Megismerheted a megadott hivatkozások hivatalos módszereit. De egyszerűsíteni a munkát, hogy korrigálja ezeket a hibákat, megadom ajánlásokat.
A kőműves szkript paramétereinek kezeléséhez használom a fájlt funkciók.js. Amelyben a szükséges utasításokat írom le, és csatlakozom a sablonba. Először is megadom az animációs paramétereket, majd helyezze be a hibát javító kódot. A fájl tartalmát teljesen megjegyzésekkel adom meg, használhatja gyakorlatilag nincs változással:
/ * Meghatározása a fő paraméterei a Kőműves * / jQuery (document) .ready ($ ( "# utáni terület"). Kőműves (/ * Jelölje meg a blokk-azonosító, amely az általunk használt Kőműves * / Isanimated: IGAZ, / * A blokk animáció letiltásához helyezze el a hamis * / animációs opciókat: (Időtartam: 500, / * animációs sebesség milliszekundumban * / lengyel: "lineáris", sor: FALSE));); / * A galériával kapcsolatos problémák kijavítása * / / * Engedélyezze a falazat * / / / * végrehajtási késleltetést, amíg az összes kép betöltése * / / * Start * / (funkció (# utáni terület "); / * Megjegyzés: Itt van szükséged A blokkazonosító * / $ container.imageStated (Funkció () ($ container.masonry ();)););));)); / * End * / / * Rögzítési problémák a web betűtípusokkal * / / * Start * / Funkció triggermaasononry () (ha (! $ Container) (visszatérés;) $ container.masonry (());) $ (()); $ Container \u003d $ ("# utáni terület"); triggermaasononry ();)); Typekit.load ((aktív: triggermasonrry, inaktív: triggermasononry)); / * End * /
Válassza ki, hogy mire van szüksége, és a parancsfájl megjegyzései és szükségtelen része törölhető például, ha csak akkor van probléma a webes betűtípusokkal, a képek betöltésének késedelme.
Csatlakoztassa ezt a fájlt a sablonba. A tárgyfájlban fejléc.php.a záró címke előtt Insert:
By the way, ez a kód közvetlenül csatlakoztatható az oldalra, valamint a záró címke előtt Insert:
A hatás körülbelül ugyanaz, bár a JavaScript helyesen van csatlakoztatva a fájlhoz.
By the way, ha van WordPress, akkor csatlakoztassa a Masonry parancsfájlot, és a beállítási fájl a fájlon keresztül lehetséges. funkciók.php.a témában csak a kód hozzáadása:
Funkció Mason_Script () (WP_Register_Script ("falazás", "/ bemenet j. / Fájl / maasonry.pkgd.min.js"); WP_enqueue_Script ("Masonry.funkciók", "Path / to / File / Founts.js"); Wp_enceue_script ("falazás");) add_action ("wp_enqueue_scripts", "mason_script");
Természetesen ez mind nem pontos utasítások és útmutatás, de csak általános ajánlásokat, mivel minden eset egyedi és megteremti az egyetemes kézikönyv szinte lehetetlen. Ha kérdése van - kérdezze meg a megjegyzéseket.
Hogyan kell végrehajtani a falazat bármely helyszínen
Most képzeljük el azt a helyzetet, hogy webhelyünk nincs bekapcsolva Cms wordpress Utolsó változat, de mondjuk tovább DLE (DATALIFE motor) És azt is szeretnénk ilyen gyönyörű helyet blokkok segítségével falazó.
Minden elég egyszerű. Először is letölti a hivatalos honlapjáratot masonry.pkgd.min.js. . Öntsük, és csatlakoztassa a sablonba. A témakörben fő.tpl A zárócímkéhez Insert:
Most meghatározzuk a blokk szerkezetét, amelyen belül a falazat fog működni. Például:
A CSS-ben meg kell adnia valamit, mint:
Mason-Box (szélesség: 25%,) .mason-box széles (szélesség: 50%;)
Most az oldalnak be kell inicializálnia a szkript műveletét:
Most megmutatom egy igazán futó példát:
1. Csatlakoztassa a fájlt masonry.pkgd.min.js. Amint fentebb látható.
2. Az oldalon HTML-en keresztül inicializálja a szkriptet:
3. A CSS-ben a következő szöveg kerül:
Halfwews-tartalom (Padding: 0 5px 5px 10px; margó-alsó: 15px; határ: 1px szilárd # E9E9E9; webkit-box-árnyék: 0 0 1px #bb; -moz-box-árnyék: 0 0 1px #bbb; Box-Shadow: 0 0 1px #BBB; Szélesség: 345px; / * Nagyon fontos elem - Van egy blokkszélesség * / / * Ha több, mint amennyire szüksége van, akkor blokkolja, vagy nem * / / * egyenesen vízszintesen vagy zárt Egy barátom * / margó-balra: 10px; / * A távolság vízszintes távolságra van állítva * /)
Itt van egy ilyen egyszerű kialakítás a technotron webhely főoldalán (ahol a tartalom két oszlopban található).
Ez az. Ha valahol tévedtem valahol, akkor nem volt cél, csak egy gyors hozzászólás, és sokat akartam, így a hibák nincsenek kizárva - ha valami nem megy ki, vagy valahol egyértelmű hiba: kérjük, értse meg, találunk egy hibát és helyes. Elnézést a leírt módszerek önkormányzásért.
Eddig. Remélem hasznos volt.
Epiloga helyett:
A sikeres vállalkozás titkai:
1. Heher ismeri őt.
2. Sam valahogy kijött
Címkék :,
Pisano 08/01/2014 
