Zdravo svima! Danas bih htio reći o tome kako bez dodataka i skripti blokovi za zidanje cigle(zidano. sa engleskog - Zida od opeke), odnosno blokovi različitih visina bit će lijepo raspoređeni jedna na drugu bez velikih praznih uvlaka. Da! Sve se to može učiniti vrlo lako sa CSS-om.
CSS ima svojstvo s kojom možete stvoriti višebojni tekst ili blokove. Oni ga koriste.
Imovina se zove stupci. Ovo je univerzalna nekretnina koja vam omogućava da odmah postavite širinu i broj stupaca. Više o tome možete čitati dobri CSS. Imenik.
Dakle, sve je zapravo vrlo jednostavno. Na primjer, imamo 6 elemenata različitih visina, ali iste širine. Svijetli primjer je bočna traka (bočni stupac) na web lokacijama. Postoje svi blokovi iste širine, ali različitih visina. Obično B. mobilna verzija SiteBar stranica ima nakon glavnog sadržaja, na dnu stranice, a sam sadržaj čini cijelu širinu ekrana. Naravno, stranica je također iracionalna u jednom stupcu, jer će na stranama biti puno slobodnog prostora, pogotovo ako pogledate iz tableta.
Ali ako blokovi postavljaju nekretninu prikaz: Inline-Block, a zatim automatski, ako ima dovoljno širine spremnika, bit će smješten u nekoliko stupaca. Međutim, sve možda ne izgleda vrlo lijepo:
Slažete se, ovi uvlake između blokova uopće ne gledaju. Stoga hitno treba popraviti! Za ovo u blok kontejnera,u kojim se blokovima nalaze, morate dodati potrebne stilove:
Moz-Stupci: 300px Auto; -Webkit-stubovi: 300px auto; Stupci: 300px Auto;
Za unakrsni preglednik koristite svojstva za preglednike Firefox i Webkit (Chrome, Safari, Android). Na primjer, mi smo stacionirani blokovima sa označena lista Tada će se stilovi za primjer na slici izgledati ovako:
Ul (širina: 1050px; -moz-stupci: -webk-stubovi: 300px auto; Stupci: 300px auto;) li (displej: inline-blok; 0 8px # 555; list-stil: nijedan ; Padding: 10px; širina: 300px; marža - dno: 30px; vertikalno-poravnanje: vrh;)
U ovom slučaju blokovi će biti smješteni u nekoliko stupaca. minimalan 300px širina i broj stupaca automatski će odrediti pretraživač. Povoljno je stvoriti prilagodljivost. U ovaj slučaj Bit će 3 stupca i tako će izgledati:
Širina spremnika (1050px) morat će pokupiti ako želite udaljenost između vertikalnih blokova poklopila se s daljinom vodoravno. Inače, širinu između zvučnika automatski će instalirati pretraživač. Imati nekretninu jaz u stupcu.koji postavlja udaljenost između zvučnika. Ali u ovom slučaju neće raditi kako želite.
Postoji još jedna opcija: za blokove morate postaviti svojstvo širine: 100%. Također, ako je nekretnina podmetanja instalirana, kao u mom slučaju, morate postaviti svojstvo veličine kutije: pogranični okvir. Sada možete sigurno dodati svojstvo stupca-GAP-a na posudu da biste postavili udaljenost između stupaca. Pa će raditi po potrebi.
Slažem se, izgleda mnogo bolje! Takođe možete postaviti blokove "Div" unutar DIV posude. Ili ako trebate distribuirati tekst u nekoliko stupaca, jednostavno u oznaci "P" sa, na primjer, tekstualni razred dodajte željeni tekst i za ovu klasu propisujete svojstvo stupci..
To je sve! Dakle, jednostavno bez nepotrebnih skripti, blokove možete postaviti u obliku opeke ili teksta u nekoliko stupaca. Ali imajte na umu da će u ovom slučaju izgledati samo lijepo ako su blokovi iste širine. U drugom slučaju, ostaje samo za korištenje dobrog zidanog skripta. Skripta automatski pozicionira svaki blok. Ali to je još jedna tema ...
To je sve! Ako se pojave neka pitanja ili komentari, ostavite ih u komentarima. Sretno!
U odjeljku blogova. Ova slika wordpress tema To će biti naš primjer, ali vjerovatno ste vidjeli upotrebu jQuery zida i na drugim WordPress web lokacijama.
Šta je jQuery Mansory
Zidarstvo se može smatrati dodatkom CSS-om, sa kojim se elementima možete pozicionirati vodoravno, pretvaranjem u vertikalni položaj ovisno o širini monitora. Kao rezultat toga, vertikalne razlike između elemenata različitih visina su minimizirane. Ako želite i vi cSS pomoć, Vjerujte mi da ćete imati puno glavobolje.
Na ovom primjeru možete vidjeti načelu jQuery zidanog radnog mjesta prije i nakon upotrebe:
Kako vidite rezultat na licu ako koristite CSS plovak: lijevo, tada postoje prazni intervali, morate koristiti CSS položaj, što je prilično problematično, ali zašto će u ovome pomoći da će pomoći zidovima pomoći.
Koristimo JQuery Mansory na WordPress web lokacijama
Zida se može koristiti u dva slučaja. Prvo je kada su svi vaši blokovi s informacijama iste širine, u ovom slučaju morate koristiti ovaj komad skripte:
|
Ako imate različite blokove širine, morate koristiti sljedeći kod:
|
Gde solumnyWidth. Ovo je širina rešetke (u pikselima). Zidarstvo će slijediti ova dva pravila:
- Ukupna širina elemenata (izračunata prema ovoj formuli) \u003d CSS širina + jastučića-desno + pogradina-lijeva + širina granice-desna + širina granice-lijeva + margin-desno + margin-lijevo
- Kada koristite stupac širine, svi elementi moraju biti raspoređeni vodoravnoj širini širine širine (na primjer, za stupac širine: 200, stavke će započeti sa 0 ili 200 ili 400 piksela i tako dalje. Možda nije potpuno jasno, ali u tome nema ništa teško, pogledamo sliku.
Prvi element ukupne širine 190px i margin-desno: 0. A drugi element je ulijevao marginu: 0, teoretski, ova dva elementa moraju se međusobno dodirnuti. No, jer ColumnWth ima vrijednost od 200px, a zatim drugi element počinje prikazati udaljenost od 200px.
Ovaj se proces neće dogoditi ako u skriptu nemamo vrijednost kolumne u skriptu i svi elementi počinju jedno s drugim, tako da ih je potrebno razdvojiti marginom.
Tako se čuda jQuery zida i wordpress 3 ..
Sada sam malo kodirao. Za početak povežite potrebne jQuery i zidanje u datoteci zaglavlja. Preskočite ovaj kod u zaglavlju.php (možete vas preuzeti na vanjmu):
// povezati jQuery// povezati zidanje
Provjerite je li wp_enqueue_script stoji prije wp_head. Zido skripta nalazi se u mapi JS moje teme, možda ćete imati drugačije ime.
< 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" će nazvati zidarski script i div class \u003d "masonry_box" prikazuje naše postove pomoću skripte. Sada CSS možete sadržavati sadržaj_maasonry na primjer širine 100%, a zatim ne trebate liječiti, ali ako napravite fiksnu širinu sadržaja_maSonry, morate izvršiti potrebne proračune. Na primjer, napravite 4 stupca s postovima, a svaka ima širinu + obloga 190px i margin-desno: 10px, a zatim će se nalazi u sadržaju sadržaj_maasonry Conteare 200 x 4 \u003d 800px:
#Content_maSonry (širina: 800px;) #content_masonry .masonry_box (širina: 170px; obloga: 10px; marža - desno: 10px;)
#Content_masonry ( Širina: 800px; #Content_maSonry .masonry_box ( Širina: 170px; padding: 10px; marža - desno: 10px; dno marže: 10px; |
Sada ostaje da dodaju PHP, koji će generirati HTML, u ovom slučaju koristit ću wp_query za prikaz 20 postova iz zidne kategorije, na primjer, na ekranu stranice (stranica.php):
< div id = "content_masonry" > $ LinksPosts \u003d Novi WP_Query (); $ LinksPosts -\u003e Upit ("showposts \u003d 20 & cat \u003d 10"); have_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); Else thepermalink (); ?\u003e "> < / a > < / h2 > |
Dobar dan svima! Ovo je moj drugi članak ove godine. Objavio sam prvu o ikonu Fontovo nedavno i drago mi je što sam našao vremena za pisanje drugog članka sa tako malom marginom. Za mene je za mene mali jaz, jer Češće ne pišite nikakvu priliku, ali pokušavam. 😎 I sada se bavimo onim što će se raspravljati u ovom članku.
Možda su mnogi od vas vidjeli na web lokacijama lokacije elemenata (slike, članke, raznih blokova) cigle efekt. Kažete - da li je moguće napraviti putem CSS-a? Možda je to moguće, ali samo takva fleksibilnost neće biti. Sam skripte stavlja stavke na stranici pomoću vertikalnog prostora. Također, prilikom postavljanja blokova, skripta dodaje animaciju. Moguće je kriviti u adaptivnom dizajnu, smanjujući prozor preglednika. Dakle, sve se postiže malom JavaScript bibliotekom - zidanom. Ova skripta se vrlo široko koristi u savremenim dizajnom trenda. Ne znam kako u ruskom paganu, ali u preveličnoj internetskoj zidu dobio je veliku popularnost.
Autorsko zidanje je David Desandro iz SAD-a. Želio bih mu reći zahvaliti vam puno na dobrom scenariju. Ova biblioteka se podijeli potpuno besplatno, tako da ga možete sigurno koristiti na svojoj web stranici.
Mislim da se mnogo svidelo. U stvari, sve izgleda vrlo lijepo. Da se bavimo kako da radimo sa zidom, kako dovesti naše blokove na našoj stranici s efektom od opeke?
Struktura članka
Prvo moramo ići na stranicu scenarij - http://maasonry.desandro.com i preuzmite najnoviju verziju. U vrijeme pisanja ovog članka ova verzija je 4.0. Takođe na ovoj stranici pronaći ćete detaljnu dokumentaciju na engleskom jeziku. Pogledajte scenarij glavnih tačaka iz dokumentacije - kako povezati, koje su opcije dostupne itd. Neću uticati na sve, jer Ja sam to nisam shvatio u nekim poenima. Da biste predstavili svoju web lokaciju, morate napraviti minimum akcije. Sada ste navikli na ovo.
Na web stranici za preuzimanje postoje dvije verzije skripte - komprimirane (minimizirane) i nekomprimirane. Bolje je precizno koristiti - masonry.pkgd.min.js. Takođe, biblioteka se može učitati sa CDN-a:
nekomprimiran
komprimirani (minimiziran)
Savjetujem vam da povežete minimizirana verzija zidana sa CDN-a. Dakle, smanjujemo broj nepotrebnih HTTP zahtjeva. Općenito, bez obzira na skriptu koju povežete ako možete povezati minizirana verzija sa CDN-om, a zatim ga povežite.
Da biste radili zidanje, moramo stvoriti roditeljski blok i staviti elemente u njega.
Za jasnoću, stvorio sam demo stranicu sa slikama različitih veličina. Slika sam uzeo kao primjer elemenata, jer Imaju različite visine, ali umjesto slika može biti bilo koji blok: tekst, video itd. Pokušajte smanjiti prozor preglednika i vidjet ćete da slike glatko promijene položaj.
Da vidimo kako će izgledati HTML kod:
...
#Container (obrub: 1px solid #ccc; margina: 0 automatsko podešavanje: 50px 0; maks-širina: 1170px;) / * mesh element * / .ement: 2px solid rgba (0, 0, 0, 0, 0,35); dno marže: 15px; obloga: 1px; širina: 280px) / * / mrežasti element * / h1 (tekst-poravnanje: centar; 0 50px)
Kao što vidite, CSS se ovdje koristi najmanje.
Inicijalizirajte zidni dodatak
To možete učiniti na više načina.
Zidarska inicijalizacija putem JavaScripta
Možete koristiti zidanje kao jQuery-dodatak:
$ ("Selektor"). Zidano ();
Ali imajte na umu da za ovu metodu morate biti povezani sa jQuery bibliotekom:
Na demonstraci sam inicijalizirano zidanje kao jQuery-dodatak, i.e. Imam sljedeći kôd za inicijalizaciju:
JQuery (dokument) .Iad ($) ($ ("elementi-gride"). Zidar (// Opcije predmetaElektor: ".Element-artikl", širina kolona: 300));
Ako ste nacrtali metodu "zido ()", prošli smo dvije mogućnosti: predmeti i stupac širine. To su potrebne dvije opcije. Prema programeru, oni su potrebni za normalan rad skripte. Međutim, razgovarat ćemo o opcijama odmah ispod. Sve, nakon ovih akcija, trebalo bi da radi sve.
Inicijalizacija sa vanilla JavaScript
Možete koristiti zidanje i sa Vanilla JS:
Novo zidarstvo (ELEM, opcije)
Konstruktor zida () poduzima dva argumenta: dječji element kontejnera i opciju objekta. Kod inicijalizacije će biti sljedeći.
Var elem \u003d dokument.queryselector (". Elementi-Gride"); var msnry \u003d novo zidarstvo (ELEM (// Opcije ItemElektor: ".Element-artikl", širina stupca: 200)); // argument elemenata može biti selektor // za pojedinačni element var msnry \u003d novi zidar (". Elementi-Gride", (// opcije));
Iskreno, nisam radio sa Vanillom JS, dakle, ne mogu konkretno reći šta je dobro od jquery. Samo znajte da postoji takva metoda.
Inicijalizacija putem HTML-a
Možete inicijalizirati zidanje putem HTML-a, bez pisanja JEDAScript koda za jednu liniju. Da biste to učinili, morat ćete dodati kontejner za atribut - "Podaci" na sve dječje elemente. Opcije se mogu prenijeti kao vrijednost.
Prenosni parametri moraju odgovarati json formatu. Želim vam skrenuti pažnju na upotrebu citata u kodu. Citati za atribut podataka-zidar su samci, a za prenosne opcije - dvostruko. Oni. Tako je prikazano na primjeru.
Ova se opcija može koristiti ako ne želite koristiti višak JavaScript na web mjestu. Na primjer, ne bih odmah poslao jQuery ako se ne koristi nigdje na mjestu.
Evo takve biblioteke. Ne postoji ništa komplikovano. Šta je sledeće?
Veličine elemenata
Dimenzije kćernih elemenata mogu biti i fiksna i guma. Sa fiksnom veličinom (širinom i visinom) širine blokova blokova i dizajna postavlja se u CSS styling datoteci. Visina Želim reći ako ne koristite prazne blokove, visina bloka tretirat će se pretraživaču na osnovu njenog sadržaja. U mom slučaju, ne pitam visinu, jer Slike tako imaju svoju visinu.
...
Gumena mreža
Sa gumenom mrežom, širina elemenata postavljena je kao postotak. Gumena mreža se uglavnom koristi u adaptivnom dizajnu. Razgovarat ćemo više o opcijama u nastavku.
...
Snimke uloženo.
Ponekad, kada se stranica učita, može se dogoditi da će se elementi preklapati jedno drugo. Istovremeno, oni će svi u jednom kvržicu i izgledaju užasno. Dakle, ovaj problem možete riješiti malom bibliotekom - snimke uloženo.. Najbolje je očitovati meni sa adaptivnim dizajnom. Bilo je kad sam otvorio web mjesto s mobilnog telefona mreža slika koje sam išao na jednu hrpu.
Povežite snimke Pread sa CDN-om:
Upotreba imagelaaded artikala postavljena je na stranici tek nakon punog opterećenja.
// init zidar var $ Grid \u003d $ (". rešetka"). zidanje ((// Opcije ...)); // zidary za zidanje nakon svake slike opterećuje $ rešetke .imagesload (). Napredak (funkcija () ($ Grid.MAASonry ("izgled");));
Ili inicijaliziranje zidanja događa se tek nakon potpunog učitavanja svih slika.
Var $ Grid \u003d $ (". Grid"). Smjesti prevođenje (funkcija (// init zidanje nakon što su sve slike učitale $ Grid.MaSonry ((// Opcije ...););
Opcije (opcije)
Sada se pitamo šta možemo proći metodu opcija zidarstvo ().
Sve opcije su grupirane. Pa, to se radi tako da je bilo lakše kretati se njima.
Sada da vidimo koje su opcije uključene u određenu grupu.
predmeti
Ova opcija ukazuje na koji elementi će se primijeniti zidarski efekt. Korisno je odrediti ovu opciju, jer možemo smanjiti predmete koji nisu dio izgleda. Ovaj parametar nam je već poznat kad rastavljamo inicijalizaciju zidanja.
Predmeti: ".element-artikl"
columnWidth.
Određuje širinu elemenata izgleda. Ako ovaj parametar izostavlja zidari će uzeti vanjsku širinu prvog elementa. Programer uvijek savjetuje da odredi širinu zvučnika, bilo da su fiksni ili gumeni elementi.
ColumnWidth: 80.
Veličine elemenata (veličine elemenata)
Ako želimo napraviti svoj izgled gumenim elementima, na primjer, s adaptivnim dizajnom, a zatim u ove svrhe postoji parametar koji čini našu gumenu mrežu.
quernceponion
Divali smo gornji kôd za gumenu mrežu, ali opcije nisu prelazile u detalje.
...
Kao što vidimo, da bismo aktivirali gumenu mrežu, dodali smo parametar za procenat na kôd za inicijalizaciju s boolejskim vrijednostima " tačno.". I kao širina naznačena je klasa elementa na kojoj je širina u procedu dodijeljena u CSS-u.
oluk.
Između elemenata možete postaviti indint horizontalno pomoću opcije. oluk., Prenoseći broj. Broj će odgovarati povlačenjem u pikselima.
Oluk: 15.
Vertikalni uvlaka između elemenata postavljeni su u CSS-u.
Element-artikl (dno marže: 15px;)
Indutenti se mogu postaviti kao postotak, I.E. Oni će varirati ovisno o veličini prozora preglednika.
...
Prije popisa predmeta stvorili smo prazan blok div.
CSS za ovaj blok ukazivali su na širinu u procentima. I u opciji inicijalizacije koda oluk. Naveli smo klasu ovog praznog elementa. Sam skripta stvorit će uvlačenje u postocima, na osnovu širine ovog bloka.
pečat.
Ova se opcija može dodijeliti predmeti koji će biti žigočeni u zidanoj mreži. Preostali elementi bit će u nastavku i izdržat će se žigosa. Ponekad može biti korisno. Opcije pečat. Prolazimo klasu žigosanog elementa.
Mark: ".Stamp"
Možete izgledati detaljnije na Codepenu, kao i uređivanje ako je potrebno.
fitwidth.
Suština ove opcije je da kada ga aktiviramo blokom roditeljskog elementa, dodaje se fiksna širina u pikselima. Štaviše, širina roditeljskog bloka jednaka je količini širine svih dječijih elemenata. Na taj način, navodeći u pravilu roditeljskog bloka CSS-a " marža: 0 auto»Možemo postaviti blok sa zidanim elementima u centru.
Elementi-Gride (margina: 0 auto;) IsfitWidth: TRUE
Pažnja! Ova opcija ne radi s elementima čija je širina naznačena u procentima. Vrijednost opcije "Columngwth" mora biti navedena u pikselima, na primjer, "Stupna širina: 120". U suprotnom, elementi se mogu preuzeti jedni drugima.
originleft.
Prema zadanim postavkama, svi mrežasti elementi su poravnani ulijevo. Sa opcijom originleft. Možete promijeniti vodoravni protok predmeta i postaviti poravnanje s desne lijeve strane. Dovoljno je proći boolean vrijednost " lažno. "
Originleft: FALSE
origintop.
Takođe, kao i vodoravno, zadani elementi rešetke usklađuju se na gornjoj ivici. Sa opcijom origintop. Struja predmeta možete promijeniti vertikalno i postaviti poravnanje s odozdo prema gore, otprilike kao u Tetrisu 🙂.
Origintop: FALSE.
Postavljanje (podešavanje)
Idite na opcije postavki.
kontejneriTyle
Ova opcija otkazuje stilove elemenata matičnih kontejnera. Prema zadanim postavkama, roditelj je postavljen na "Poziciju: relativno" pravilo. Ovo se pravilo može otkazati.
Kontejneri: null
Naravno, bilo je moguće prevladati putem CSS datoteke koristeći "! Važno", ali ne volim to raditi. Općenito, mislim da je ovo loše pravilo tona u izgledu. Bolje je očistiti stilove, to nam više programera daje ovu priliku.
prelaznost.
Trajanje tranzicije kada predmeti promijene svoju lokaciju. Postavljeno je zadano vrijeme - 0,4 sekunde. Format vremena postavljen je kao CSS vremenski format.
Prelaznost: "0,4s"
Evo nekoliko primjera postavke vremena.
// Brza animacija Prijelaz: "0,2s" // Polako animacija Tranzimatizacija: "0,8s" // NO Animacija Prelaz: 0
rezize
Uz ovu opciju možete otkazati promjenu veličine matičnog bloka. Oni. Prema zadanim postavkama, ako ne navedete fiksnu veličinu roditelju sa smanjenjem ekrana pregledača, naši elementi za djecu promijeniti će svoju lokaciju, preći će se dolje, zauzimajući slobodni prostor. Dakle, uz opciju "Resize" možete otkazati prijelaze.
Promijenite veličinu: FALSE
Iskreno, isti efekat se može postići ako molite roditelj samo fiksnu veličinu. Ovdje ne razumijem programera - Ili sam nešto pogrešno shvatio, ili se ova opcija odvija u određenim slučajevima. Više detalja možete vidjeti na primjeru u Codepenu. Pokušajte promijeniti veličinu ekrana pretraživača. Zatim se promijenite "Promijenite veličinu: FALSE" na "Promijenite veličinu: TRUE" A vi ćete shvatiti o čemu govorimo.
initLayout
Ova opcija aktivira našu rešetku za opeku prilikom inicijalizacije skripte. Po defaultu je uključeno - "InitLayout: TRUE". Ali možete otkazati.
Inicijalnout: FALSE
Prije aktiviranja mreže možete koristiti metode i događaje. Na primjer, možete učiniti da će se vaša mreža aktivirati klikom na određeni gumb. Pa, onda nešto takvo.
U ovom članku neću rastavljati događaje i metode, jer Članak pa je pokazalo da je to volumetrično. Možete ih samostalno istražiti na web stranici programera. Također će pronaći primjere implementacije. Sve je sasvim razumljivo. Ne uvijek su autori skripti pišu se takve upute. Za upute za zidanje programera, stavio bih naporno - 5 . 🙂
Zidarstvo na čistim CSS-om
Postoji i mogućnost implementacije opeke na čistim CSS-om. Ovdje neću dati sav kod. Možete pogledati Codepen, nema ništa komplikovano. U ovom slučaju prikladno je za činjenicu da ne trebate povezati dodatne biblioteke JS-a i razumjeti opcije utikača.
U principu, sve što sam gore navedeno je dovoljno za upotrebu cigle efekta na vašoj web lokaciji.
I na svemu. Hvala svima na pažnji. Navedite pitanja u komentarima, uvijek ću rado pomoći. Vidimo se u sljedećim člancima. Do!
Rekao sam kako izmijeniti novi dizajn bloga, naivno vjerovanje da je sve važan posao već napravljen. Ali, kako se ispostavilo, još je bilo puno posla. Štaviše, stvorio sam svoj dio toga. Ali prvo prve stvari. U ovom postu ću dodirnuti sljedeća pitanja:
- kako uvesti nove WordPress čipove u temu registracije - rekordnih formata;
- kako popraviti probleme sa blok pozicioniranjem u zidno skriptu;
- kako implementirati zidanje na bilo koju stranicu.
Pa, šta je sa masonima i javascript-om? Ispada da postoji zajednička tačka kontakta! Nadam se da svi znaju ko su takvi masoni. Ako ne, evo kratke definicije:
Masoniili frank-Masoni - U literalnom prijevozu "slobodnih zidara", pokret koji se pojavio u XVIII veku u obliku zatvorene organizacije. FreemaSonry preuzme svoje porijeklo iz malo poznatih izvora na kraju XVI - početkom XVII veka, navodno operativne radionice Mason. Sve aktivnosti masona su vrlo simbolične, puno je povezano sa arhitektonskim simbolizmom, a jedan od osnovnih znakova je skraćena piramida.
Jako me zanimaju masoni i sve što je povezano s njima. Vrlo je zanimljivo. Želio bih razgovarati s pravim masonom (ali ne s takvim, koji je samo zbog pontea, nazovite sebi besplatan zidar, naime, sa stvarnim gospodarom). Ali to nije slučaj. I u činjenici da u temi dizajna Pinbina koristi skriptu koja uzrokuje blokove sa najavama zapisa za postrojbu kao opeke. Sada je vrlo popularan stil, različiti načini koriste se za implementaciju takvog efekta, ali jedan od najboljih je nesumnjivo javascript Zidano..
Službena web stranica ovog JavaScripta je masonry.desandro.com, pokazuje kako funkcionira i pokazuje kako ga povezati sa web mjestom. Štaviše, to može biti bilo koje web lokacije, a ne nužno WordPress, A i DLE ili općenito statički HTML. Ali to vrijedi reći da u WordPress-u iz posljednje verzije (od 3.8, ako se ne varam) zidano pismo već je uključeno u osnovni paket. Ali kao što je već spomenuto - sve u redu.
Kako implementirati u temu Format podrške za podršku WordPress-u?
Dakle, u procesu profinjenja odlučio sam uključiti u svoju temu registracije funkcija koje nedostaju funkcije u njemu tako da bi na glavnom mogle objaviti status, galeriju, sliku ili video, s različitim dizajnom tih blokova. Provukao sam u arhivu dizajna i našao vrlo mali broj takvih tema koji podržavaju ovu funkciju.
Ali ako ažurirate svoj WordPress, formati zapisa mogu se implementirati u objektu, a ovo je lako. Dakle, prije svega otvorite datoteku funkcije.php.vaša tema registracije i dodajte sljedeći kôd:
Add_action ("after_setup_theme", "Slug_post_formats"); Funkcija Slug_post_formats () (post-formati, niz ("Polijede", "Image", "Video", "Citat", "GALERIJA", "CHAT", "STATUS", "CHAT", "STATUS", " )
Ovaj se kôd može umetnuti u bilo koju lokaciju datoteke. funkcije.php., Glavna stvar nije prekršiti nijednu funkciju. Ako se sve završi pravilno, onda prilikom kreiranja novog zapisa trebate imati novi blok formata, ako ne, a zatim otvorite izbornik "Postavke ekrana" na vrhu i označite zglobni blok.
Ali ova značajka neće raditi dok se u mapi ne pojave posebne datoteke s temom, s imenima vrste sadržaj-nešto.php. - U ime "Nešto" datoteku, ovo je naznaka obraza koji će formatirati ovu datoteku biti.
Mogu biti:
Formati nisu potrebni za upotrebu svega, ali možete navesti u kodu iznad onih koji su vam potrebni, ako vam treba samo video, jedna slika i galerija, a zatim ubacite u funkcije.php.takav kod:
Add_action ("after_setup_theme", "Slug_post_formats"); Funkcija Slug_post_formats () (post-formati, niz ("Image", "Video", "Galerija",));)
Pa, trebaju vam samo datoteke koje su navedene u liniji: sadržaj-image.php, sadržaj-video.phpi sadržaj-Galerija.php. plus sadržaj.php. Za obične zapise. Odakle dolaze ove datoteke? Možete ih iscrpiti sa teme dvadesetfurtena (ili bilo kojeg drugog pratećeg formata, na primjer, sanduke), a zatim pročistite. Samo preuzmite ovu temu na računar, uzmite datoteke koje su vam potrebne i ispunite na poslužitelj u mapu sa svojim dizajnom. Nakon toga će se pojaviti u konzoli u odjeljku Izgled -\u003e Urednik. Pored toga, ove datoteke trebaju biti dovedene u željeni format, također morate kreirati stilove u datoteci stil.css..
Ovo je mukotrpni posao, ali isplatit će stoguko. Pokazat ću primjere takvih datoteka (otprilike ga koristim na ovom blogu):
Sadržaj-Status.php datoteka:
Sadržaj-video.php datoteke i sadržaj-galerija.php je potpuno isti:
Sadržaj.php datoteka:
">
Malo kopanja, možete shvatiti šta da napravite svoje predloške za formatima zapisa. Istovremeno, ne biste trebali zaboraviti na CSS stilove. Ali ovdje ne mogu dati nikakve preporuke jer je ovo vrlo specifično pitanje i ovisi o specifičnoj temi registracije.
Ako nastane poteškoće, ili nešto nerazumljivo - možete pomoći u komentarima nego što mogu.
Pa, formati zapisa su ugrađeni i rade savršeno. Ali ne postoji nešto ... dobro rade, ali sa zidnim pismom nisu želeli da budu prijatelji. Na primjer, prilikom umetanja galerije pomoću odgovarajućeg filma za snimanje, postojao je ogroman prostor, približno istim prirodom, koji je iz prethodnog pošta, gdje sam razgovarao o čudnim prazninama između najava prilikom korištenja web fontova sa Googlea Fontovi. Evo ovih problema, naučit ćemo da odlučujemo u nastavku.
Kako popraviti probleme iz blokada u zidovima
Dopustite da vas podsetim na suštinu problema: Kada koristimo Google fontove fonta u radu zidane skripte, pojavili su se problemi u obliku različite visine prekida između najava članaka. Isti efekat, samo mnogo uočljiviji i upotreba formata zapisa, posebno kada ubacite galeriju popločane galerije iz jetpack pagena.
Kao što rekoh, koristim paket jetpack na svom blogu, u kojem se nalazi prekrasan dodatak modnih galerija pločica, ali kada se pojavilo takva galerija u velikoj mjeri:
Zidno skripta je kriv, to je zidana skripta: Kada koristite web fontove, radi ranije od fontova se učitavaju i stoga na kraju pune opterećenja stranice, blokovi su malo spljošteni. Može postojati još jedna opcija - kada blokovi u početku postanu glatki, a zatim se kreću jedni drugima.
Galerija je ista: Kada izgradite prekrasnu galeriju popločanu galeriju iz Jetpacka, skripta koja izračunava veličinu slika provodi puno vremena na tome (i čini se u nekoliko faza), a zidani radovi), a zidani radovi daleko su brže i za Pozicioniranje blokova koristi prvi dolazni (srednji) podaci koji vraćaju popločanu galeriju skriptu. Stoga se pojavljuje ovaj jaz.
Da biste se borili sa ovim na službenom web mjestu zida (vidi gore) Postoje objašnjenja: odjeljci Imagesloied i web fontovi. Možete se upoznati sa službenim metodama na navedenim vezama. Ali da biste pojednostavili posao da biste ispravili ove pogreške, dat ću svoje preporuke.
Da biste upravljali parametrima zidane skripte, koristim datoteku funkcije.js. U kojem propisujem potrebne upute i povežem ga u predlošku. Prvo, navedite parametre animacije, a zatim ubacite kôd koji ispravlja grešku. Sadržaj ove datoteke učit ću u potpunosti s komentarima, možete ga koristiti sa gotovo nikakvim promjenama:
/ * Definicija glavnih parametara zida * / jQuery (dokument) .Read ($ ("# post-area"). Zidanje (/ * navedite ID bloka na koji koristimo zidanje * / ISAMITED: TRUE: / * Da biste onemogućili blok animaciju, mjesto FALSE * / AnimationOptions: (Trajanje: 500, / * Brzina animacije u milisekundi * / ublažavajući: "linear", red:)); / * Ispravljanje problema sa galerijom * / / * Omogućite zidanje * / / / * Odgoda izvršenja dok se sve slike ne učitaju * / / * start * / (funkcija (# post-area "); / * Napomena: Evo i potrebna Da biste odredili blok ID * / $ spremnik .imagesload (funkcijner () ($ kontejner.MaSonry ();));)) (jQuery); / * END * / / * Problemi s pričvršćivanjem sa web fontovima * / / * start * / Function Triggermaasonry () (ako (! $ Kontejner) (povratak;) $ kontejner.) $ (funkcija () () () () () () () () () () () $ spremnik \u003d $ ("# post-area"); triggermaasonry ();)); TypeKit.load ((aktivno: TriggermaSonry, neaktivan: triggermaSonry)); / * kraj * /
Odaberite šta vam treba, a komentari i nepotrebni dio skripte mogu se izbrisati, na primjer, ako imate samo problem sa web fontovima, kašnjenju kada se mogu izbrisati utovarivanje slika.
Povežite ovu datoteku u predlošku. U predmetu zaglavlje.php.prije zatvaranja oznake Umetanje:
Usput, ovaj se kôd može povezati direktno na stranici, kao i prije zatvaranja oznake Umetanje:
Učinak će biti približno isti, iako je JavaScript ispravnije spojen na datoteku.
Usput, ako imate WordPress, potom povežite samu zidana skripta i datoteka postavki moguća je putem datoteke. funkcije.php.u vašoj temi, samo dodavanje kod u nju:
Funkcija mason_script () (wp_register_script ("zidarstvo", "/ ulaz j. / File / maasonry.pkgd.min.js"); wp_enqueue_script ("zidari" ", put / do / file / funkcije"); Wp_encue_script ("zidarstvo");) add_ation ("wp_enqueue_scripts", "mason_script");
Naravno, to nisu sve točne upute i vodič za djelovanje, već samo opće preporuke, jer je svaki slučaj jedinstven i stvarajući univerzalni vodič gotovo je nemoguć. Ako imate pitanja - pitajte u komentarima.
Kako implementirati zidanje na bilo kojoj web lokaciji
Sada zamislite situaciju da naša web lokacija nije uključena CMS WordPress zadnja verzija, ali recimo dalje Dle (Datalife motor) I želimo i tako prekrasnu lokaciju blokova pomoću zida.
Sve prilično jednostavno. Prvo preuzmite sa zvanične web stranice zidane datoteke masonry.pkgd.min.js. . Sipajte na svoj poslužitelj i povežite ga u predlošku. Za dle u datoteci teme main.tpl do zatvaranja oznake Umetanje:
Sada definiramo strukturu bloka, unutar kojeg će zidano raditi. Na primjer, pa:
U CSS-u morate odrediti nešto poput:
Masonska kutija (širina: 25%;) .Mozinska kutija široka (širina: 50%;)
Sada stranica treba inicijalizirati operaciju skripte:
Sada ću pokazati na zaista pokrenutim primjeru:
1. Povežite datoteku masonry.pkgd.min.js. Kao što je prikazano gore.
2. Na stranici putem HTML-a inicijalizirajte skriptu:
3. Sljedeće se bilježi u CSS-u:
Halfnews-sadržaj (obloga: 0 5px 5px 10px; brub-dno: 15px; obrub: 1px solid # e9e9e9; -webkit-box-sjena: 0 0 1px #bbb; -moz-box-sjena: 0 0 1px #bbb; Box-Senka: 0 0 1px #bbb; širina: 345px; / * Vrlo važna stavka - postoji širina bloka * / / * ako je više nego što vam treba, zatim blokira ili ne može se podijeliti horizontalno ili u prilogu Na prijatelju * / margin-lijevo: 10px; / * postavljen je na udaljenost vodoravno između blokova * /)
Ovdje je tako jednostavan dizajn na glavnoj stranici web stranice Technotron (gdje se sadržaj nalazi u dva stupca).
To je to. Da nisam pogriješio negdje, nije bio namerno, samo brz post i ja sam puno želio, pa se greške nisu isključene - ako nešto ne izlazi ili negdje jasna greška: Molim vas, shvatite, pronaći ćemo manu i tačno. Izvinite zbog opštine opisane metode.
Do sad. Nadam se da je bilo korisno.
Umjesto epiloge:
Tajne uspješnog poslovanja:
1. Heher ga poznaje.
2. Sam je nekako izašao
Oznake :,
Pisano 08/01/2014 
