Sveiki visiem! Šodien es gribētu pastāstīt par to, kā bez spraudņiem un skriptiem darīt Ķieģeļu mūra bloki(mūra. no angļu valodas - Ķieģeļu mūra), tas ir, dažādu augstumu bloki būs skaisti izvietoti viens otram bez lieliem tukšiem ievilkumiem. Jā! Tas viss var tikt darīts ļoti viegli ar CSS.
CSS ir īpašums, ar kuru jūs varat izveidot multicolong tekstu vai blokus. Viņi to izmanto.
Īpašumu sauc kolonnas. Tas ir universāls īpašums, kas ļauj jums nekavējoties iestatīt kolonnu platumu un skaitu. Vairāk par to jūs varat lasīt labi CSS. direktoriju.
Tātad, viss ir ļoti vienkāršs. Piemēram, mums ir 6 elementi dažādu augstumu, bet tas pats platums. Spilgts piemērs ir sānjosla (sānu kolonna) vietnēs. Ir visi tāda paša platuma bloki, bet dažādi augstumi. Parasti B. mobilā versija SiteBar vietne ir pēc galvenā satura, apakšā uz vietas, un pats saturs padara visu platumu ekrāna. Protams, vietne ir arī neracionāla vienā kolonnā, jo tur būs daudz brīvas vietas uz sāniem, it īpaši, ja paskatās no tabletes.
Bet, ja bloki nosaka īpašumu displejs: inline-bloks, tad tie automātiski, ja ir pietiekami daudz platuma konteinera, atradīsies vairākās kolonnās. Tomēr viss var nebūt ļoti skaists:
Piekrītu, šie ievilkumi starp blokiem neuzskata par visiem. Tāpēc tas steidzami ir jānosaka! Priekš šī uz konteinera bloku,kurās bloki atrodas, jums ir nepieciešams pievienot nepieciešamos stilus:
MOZ-kolonnas: 300px auto; -Webkit kolonnas: 300px auto; Kolonnas: 300px auto;
Pārrobežu pārlūkprogrammai izmantojiet Firefox un Webkit pārlūkprogrammu īpašības (Chrome, Safari, Android). Piemēram, mēs esam izvietoti ar blokiem ar atzīmēts saraksts Tad stili piemērs attēlā izskatīsies šādi:
UL (platums: 1050px; -Moz-kolonnas: 300px auto; -webkit-kolonnas: 300px auto; kolonnas: 300px auto;) li (displejs: inline bloks; kastes ēna: 0 8px # 555; saraksta stils: nav ; Polsterējums: 10px; platums: 300px; margin-bottom: 30px; vertikālā sakārtošana: augšā;)
Šādā gadījumā bloki atradīsies vairākās kolonnās. minimāls 300px platums, un kolonnu skaits automātiski nosaka pārlūks. Tas ir ērti izveidot pielāgošanās spējas. Iebildums Šis gadījums Būs 3 kolonnas, un tas izskatās:
Konteinera platumam (1050px) būs jāuzņem uz augšu, ja vēlaties, lai attālums starp vertikālajiem blokiem sakrita ar attālumu horizontāli. Pretējā gadījumā pārlūkprogramma automātiski uzstādīs platums starp skaļruņiem. Ir īpašums kolonnas plaisa.kas nosaka attālumu starp skaļruņiem. Bet šajā gadījumā tas nedarbosies, kā jūs vēlaties.
Ir vēl viena iespēja: blokiem, kas nepieciešami, lai iestatītu platuma īpašumu: 100%. Arī tad, ja ir instalēta polsterēšanas īpašums, tāpat kā manā gadījumā, jums ir nepieciešams uzstādīt kastes izmēra īpašumu: pierobežas kaste. Tagad jūs varat droši pievienot konteineram kolonnas spraugu, lai iestatītu attālumu starp kolonnām. Tātad tas darbosies pēc vajadzības.
Piekrītu, tas izskatās daudz labāk! Varat arī ievietot "div" blokus DIV konteinerā. Vai nu, ja jums ir nepieciešams, lai izplatītu tekstu vairākās kolonnās, vienkārši "p" tag ar, piemēram, teksta klase pievieno vēlamo tekstu un šīs klases mēs izrakstīt īpašumu kolonnas..
Tas ir viss! Tātad vienkārši bez nevajadzīgiem skriptiem, jūs varat novietot blokus ķieģeļu vai teksta veidā vairākās kolonnās. Bet ņemiet vērā, ka šajā gadījumā tas izskatīsies tikai skaists, ja bloki ir vienādi platums. Citā gadījumā, tas paliek tikai izmantot labu mūra skriptu. Skripts automātiski novieto katru bloku. Bet tas ir vēl viens temats ...
Tas ir viss! Ja parādījās daži jautājumi vai komentāri, atstājiet tos komentāros. Veiksmi!
In emuāra sadaļā. Šī bilde wordPress tēma Tas būs mūsu piemērs, bet jūs, iespējams, esat redzējuši jquery mūra un citu WordPress vietnēs izmantošanu.
Kas ir jQuery Mansory
Mūra var uzskatīt par papildinājumu CSS, ar kuru jūs varat novietot elementus horizontāli, pagriežot vertikālu stāvokli atkarībā no platuma monitora. Tā rezultātā vertikālās nepilnības starp dažādu augstumu elementiem tiek samazināts līdz minimumam. Ja vēlaties to darīt cSS palīdzība, Ticiet man, jums būs daudz galvassāpju.
Šajā piemērā jūs varat redzēt jQuery mūra darba principu pirms un pēc lietošanas:
Kā jūs redzat rezultātu uz sejas, ja jūs izmantojat CSS Float: pa kreisi, tad ir tukši intervāli, jums ir nepieciešams izmantot CSS pozīciju, kas ir diezgan problemātiska, jūs varat, bet kāpēc, jo šajā palīdzēs mūra palīdzēs.
Mēs izmantojam jQuery Mansory par WordPress vietās
Mūra var izmantot divos gadījumos. Pirmais ir tad, kad visi jūsu bloki ar informāciju ir vienādi platums, šajā gadījumā jums ir nepieciešams izmantot šo skriptu gabalu:
|
Ja jums ir dažādi platuma bloki, jums ir jāizmanto šāds kods:
|
Kur solumnidth. Tas ir režģa platums (pikseļos). Mūrnieks sekos šiem diviem noteikumiem:
- Elementu kopējais platums (aprēķināts saskaņā ar šo formulu) \u003d CSS platums + polsterējums-pa labi + polsterējums-pa kreisi + robežas labais platums + robežas kreisais platums + margin-labo + margin-pa kreisi
- Lietojot Columnwidth, visi elementi ir jānorāda horizontāli uz kolonnas platumu (piemēram, Columnwidth: 200, vienumi sāksies ar 0 vai 200 vai 400 pikseļiem un tā tālāk). Tas var nebūt pilnīgi skaidrs, bet šajā gadījumā nav nekas grūti, mēs skatāmies uz attēlu.
190px kopējā platuma pirmais elements: 0. un otrajam elementam ir margin-left: 0, teorētiski, šiem diviem elementiem ir jāpieskaras viens otram. Bet, tā kā Columnwidth ir 200px vērtība, tad otrais elements sāk parādīt attālumu no 200px.
Šis process nenotiks, ja mums nav kolonnu vērtības skriptā, un visi elementi sākas viens ar otru, tāpēc ir nepieciešams tos atdalīt ar rezervi.
Tātad brīnumi jquery mūra un WordPress 3 ..
Tagad es nedaudz kodēju. Lai sāktu ar, savienot nepieciešamās jQuery un mūra bibliotēkas header.php failu. Izlaist šo kodu Header.php (jūs varat lejupielādēt jūs uz vietas):
// savienot jquery// savienot mūra.
Pārliecinieties, vai wp_enqueue_script stendi pirms WP_head. Mūra skripts atrodas JS mapē manu tēmu, jums var būt cits nosaukums.
< 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" izsauks mūra skriptu un DIV klase \u003d "Masonry_box" parādīs mūsu ziņas, izmantojot skriptu. Tagad CSS, jūs varat darīt Content_maasonry, piemēram, platums 100%, tad jums nav nepieciešams, lai būtu jāārstē, bet, ja jūs veicat fiksētu platumu Content_Masonry, jums ir nepieciešams veikt nepieciešamos aprēķinus. Piemēram, jūs veicat 4 kolonnas ar ziņām, katram ir platums + polsterējums 190px un margas tiesības: 10px, tad satura lielums Content_maasonry konteiners būs 200 x 4 \u003d 800px:
#Content_masonry (platums: 800px;) #content_masonry .masonry_box (Platums: 170px; polsterējums: 10px; Margin-Right: 10px; Margin-dibens: 10px;)
#Content_masonry ( platums: 800px; #Content_masonry .masonry_box ( platums: 170px; polsterējums: 10px; margin-Right: 10px; margin-dibens: 10px; |
Tagad tas joprojām ir pievienot PHP, kas radīs HTML, šajā gadījumā es izmantošu WP_Query, lai parādītu 20 ziņojumus no mūra kategorijas, piemēram, lapas displejā (Page.PHP):
< div id = "content_masonry" > $ Linksposts \u003d jauns wp_query (); $ LinkSposts -\u003e Vaicājums ("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); Citādi the_permalink (); \u003e "> < / a > < / h2 > |
Laba diena ikvienam! Šis ir mans otrais raksts šogad. Es publicēju pirmo par ikonu fontu pavisam nesen, un es esmu gandarīts, ka es atklāju laiku rakstot otru rakstu ar tik nelielu rezervi. Līdz šim tas ir neliels trūkums, jo Biežāk nerakstiet iespēju, bet es cenšos. 😎 Un tagad aplūkosim to, kas tiks apspriests šajā rakstā.
Iespējams, daudzi no jums ir redzējuši vietnes elementu atrašanās vietu (attēlus, rakstus, dažādus blokus) ķieģeļu efektu. Jūs sakāt - vai ir iespējams darīt, izmantojot CSS? Varbūt tas ir iespējams, bet tikai šāda elastība nebūs. Script pati izvieto preces uz lapas, izmantojot vertikālo telpu. Arī tad, kad pozicionēšanas bloki, skripts pievieno animāciju. Tas ir iespējams vainot to adaptīvajā dizainā, samazinot pārlūkprogrammas logu. Tātad, tas viss ir sasniegts ar nelielu JavaScript bibliotēku - mūra. Šis skripts ir ļoti plaši izmantots mūsdienu tendenču dizainā. Es nezinu, kā krievu-pagānu, bet pārvērtētajā interneta mūra ieguva lielu popularitāti.
Autora mūra ir David Desandro no ASV. Es vēlos viņam pateikties jums liels par tik labu skriptu. Šī bibliotēka tiek izplatīta pilnīgi bez maksas, lai jūs varētu droši izmantot to savā tīmekļa vietnē.
Es domāju, ka daudziem patika. Patiesībā viss izskatās ļoti jauki. Darīsimies ar to, kā strādāt ar mūra, kā dot mūsu blokus mūsu vietnē ar ķieģeļu efektu?
Raksta struktūra
Pirmkārt, mums ir jādodas uz skriptu lapu - http://maaSonry.desandro.com un lejupielādēt jaunāko versiju. Laikā, kad rakstāt šo rakstu, šī versija ir 4.0. Arī šajā vietnē jūs atradīsiet detalizētu dokumentāciju angļu valodā. Es atsaucos uz galveno punktu scenāriju no dokumentācijas - kā izveidot savienojumu, kuras iespējas ir pieejamas utt. Es neietekmē visu, jo Es pats to neizprot dažos punktos. Lai ieviestu jūsu vietni, jums ir jāveic vismaz rīcība. Tagad jūs pieradāt pie tā.
Lejupielādes vietnē ir divas skripta versijas - saspiests (minimizēts) un nesaspiests. Labāk ir izmantot precīzi - meonry.pkgd.min.js. Arī bibliotēku var ielādēt no CDN:
nesaspiests
saspiests (minimizēts)
Es ieteiktu jums pieslēgt minimizētu mūra versiju no CDN. Tāpēc mēs samazinām nevajadzīgo HTTP pieprasījumu skaitu. Kopumā neatkarīgi no skripta savienojuma, ja jūs varat savienot minēto versiju ar CDN, tad pievienojiet to.
Lai strādātu mūra, mums ir jāizveido mātes bloks un ievietot elementus tajā.
Skaidrības labad es izveidoju demo lapu ar dažādiem izmēriem. Es ņēma attēlu kā elementu piemēru, jo Viņiem ir dažādi augstumi, bet attēli var būt jebkurš bloks: teksts, video utt. Mēģiniet samazināt pārlūkprogrammas logu, un jūs redzēsiet, ka attēli vienmērīgi mainīs savu pozīciju.
Redzēsim, ko HTML kods izskatīsies:
...
#Container (robeža: 1px cietā #ccc; rezerve: 0 Auto; polsterējums: 50px 0; Maksimālais platums: 1170px;) / * acu elements * / .element-postenis (robeža: 2px cietā RGBA (0, 0, 0, 0, 0.35); Margin-bottom: 15px; polsterējums: 1px; Platums: 280px) / * / acu elements * / H1 (Teksta saskaņošana: centrs; Margin: 0 50px)
Kā redzat, CSS šeit izmanto minimāli.
Inicializēt mūra spraudni
To var izdarīt vairākos veidos.
Mūra inicializācija, izmantojot JavaScript
Jūs varat izmantot mūra kā jQuery spraudni:
$ ("Selektors"). Mūra ();
Bet paturiet prātā, ka šai metodei ir jābūt savienotam ar jQuery bibliotēku:
Par demo lapu i inicializēts mūra kā jquery-spraudnis, t.i. Man ir šāds inicializācijas kods:
JQuery (dokuments) .ready ($) ($ ("Elements-Gride"). Mūra (// opcijas Iestatījumi): ".element-postenis", Columnwidth: 300));));
Ja jūs pievērsīsiet "mūra () metodi, mēs nokārtojām divas iespējas: priekšmetus un kolonnu platumu. Tiem ir nepieciešamas divas iespējas. Saskaņā ar attīstītāju, tie ir nepieciešami normālai darbībai skriptu. Tomēr mēs runājam par iespējām tieši zemāk. Viss, pēc šīm darbībām, vajadzētu strādāt visu.
Inicializācija ar vaniļas JavaScript
Jūs varat izmantot mūra arī ar vaniļas JS:
Jauns mūra (elem, opcijas)
Mūra () konstruktors veic divus argumentus: konteinera bērna elementu un opciju objektu. Inicializācijas kods būs šāds.
Var elem \u003d docum.queryselector (". Elements-gride"); VAR MSNRY \u003d New Mūra (ELEM (// opcijas Iestatījumi: ".element-postenis", Columnwidth: 200)); // elementu arguments var būt selektora virkne // atsevišķam elementam VAR MSNRY \u003d jaunā mūra (". Elements-gride", (// iespējas));
Godīgi, es nestrādāju ar vaniļas JS, tāpēc es nevaru īpaši pateikt, kas tas ir labs nekā jQuery. Tikai zināt, ka ir šāda metode.
Inicializācija, izmantojot HTML.
Jūs varat inicializēt mūra caur HTML, nerakstot vienu līniju JavaScript kodu. Lai to izdarītu, jums būs nepieciešams pievienot atribūtu - "datu mūra" konteineru visiem bērnu elementiem. Iespējas var pārsūtīt kā vērtību.
Pārvadātajiem parametriem jāatbilst JSON formātā. Es vēlos pievērst jūsu uzmanību uz citātu izmantošanu kodā. Datu mūra atribūta cenas ir vienotas, un nosūtītajām iespējām - dubultā. Tiem. Tādā veidā tas tiek parādīts piemērā.
Šo opciju var izmantot, ja nevēlaties izmantot lieko JavaScript vietnē. Piemēram, es nebūtu nekavējoties kuģu jQuery, ja viņš netika izmantots jebkurā vietā uz vietas.
Šeit ir šāda bibliotēka. Nav nekas sarežģīts. Ko tālāk?
Elementu izmēri
Meitu elementu izmēri var būt gan fiksēti, gan gumijas. Ar fiksētu izmēru (platumu un augstumu) bloka platuma bloku un dizains ir iestatīts CSS stila failā. Augstums Es vēlos teikt, ja neizmantojat ne tukšus blokus, bloka augstums tiks apstrādāts ar pārlūkprogrammu, pamatojoties uz tās saturu. Manā gadījumā es neprasu augstumu, jo Attēli ir savs augstums.
...
Gumijas režģis
Ar gumijas režģi elementu platums ir iestatīts procentos. Gumijas režģis galvenokārt tiek izmantots adaptīvā dizainā. Mēs vairāk runāsim par turpmākajām iespējām.
...
Attēlus.
Dažreiz, kad lapa ir ielādēta, var gadīties, ka elementi pārklājas viens otru. Tajā pašā laikā viņi dodas uz visiem vienreizējiem un izskatās briesmīgi. Lai jūs varētu atrisināt šo problēmu ar nelielu bibliotēku - attēlus.. Labākais bija izpaužas ar mani ar adaptīvo dizainu. Tas bija tad, kad es atvēru vietni no mobilā tālruņa režģa attēlus es devos uz vienu kaudzi.
Pievienojiet attēlu, kas ielādēts ar CDN:
Imagelaaded vienuma lietošana ir novietota lapā tikai pēc pilnīgas iekraušanas.
// init mūra var $ grid \u003d $ (". Grid"). Mūra (// iespējas ...); // izkārtojuma mūra pēc katras attēla slodzes $ grid.Imagageed (). Progress (funkcija () ($ grid.maasonry ("izkārtojums");));
Vai mūra inicializēšana notiek tikai pēc visu attēlu pilnas iekraušanas.
Var $ grid \u003d $ (". GRID"). Image Slodze (funkcija () (// init mūra pēc visiem attēliem ir ielādēti $ grid.Masonry ((// opcijas ...));));
Iespējas (opcijas)
Tagad pieņemsim brīnums, ko mēs varam nodot opciju metodi mūra ().
Visas iespējas ir sagrupētas. Nu, tas tiek darīts, lai tas būtu vieglāk to pārvietoties.
Tagad pieņemsim redzēt, kādas iespējas ir iekļautas konkrētā grupā.
priekšmetiElektors
Šī opcija norāda, kādi elementi tiks piemērots mūra efekts. Ir lietderīgi norādīt šo iespēju, jo mēs varam samazināt priekšmetus, kas nav izkārtojuma daļa. Šis parametrs mums jau ir pazīstams, kad mēs izjaucam mūra inicializāciju.
IstabasElektors: ".element-postenis"
columnwidth.
Norāda izkārtojuma elementu platumu. Ja šis parametrs izlaist mūra veiks ārējo platumu pirmā elementa. Izstrādātājs vienmēr iesaka norādīt skaļruņu platumu, vai tas ir fiksēts vai gumijas elementi.
Columnwidth: 80.
Elementu izmēri (elementu izmēri)
Ja mēs vēlamies padarīt mūsu izkārtojumu ar gumijas elementiem, piemēram, ar adaptīvo dizainu, tad šiem mērķiem ir parametrs, kas padara mūsu gumijas režģi.
procentu procents
Mēs izjaucām iepriekš minēto gumijas režģa kodu, bet iespējas nav iet sīkāk.
...
Kā mēs redzam, lai aktivizētu gumijas režģi, mēs pievienojām procentuālo parametru inicializācijas kodam ar Būla vērtību " taisnība.". Un kā platums norādīja klasi elementa, uz kuru platums procentos ir piešķirts CSS.
notekas.
Starp elementiem varat iestatīt ievilkumu horizontālu, izmantojot iespēju. notekas., Nododot numuru. Numurs atbilst atkāpšanās pikseļos.
Notekas: 15.
Vertikālie ievilkumi starp elementiem ir noteikti CSS.
Elementu vienums (margin-bottom: 15px;)
Indikatorus var iestatīt procentos, t.i. Tie mainīsies atkarībā no pārlūka loga lieluma.
...
Pirms priekšmetu saraksta mēs izveidojām tukšu DIV bloku.
Šim blokam CSS norādīja platumu procentos. Un inicializācijas koda opcijā notekas. Mēs norādījām šo tukšo elementu klasi. Skripts pati radīs atkāpi procentos, pamatojoties uz platumu šī bloka.
zīmogs.
Šo opciju var piešķirt priekšmetus, kas tiks apzīmogoti mūra tīklā. Atlikušie elementi būs zemāk un prasīs apzīmogotu. Dažreiz tas var būt noderīgi. Opcijas zīmogs. Mēs nododam zīmoga elementa klasi.
Zīmogs: ".stamp"
Ja nepieciešams, varat izskatīt detalizētākus Codepen, kā arī rediģēt.
fitwidth.
Šīs opcijas būtība ir tā, ka, aktivizējot to ar mātes elementa bloku, pievieno fiksētu platumu pikseļos. Turklāt mātes bloka platums ir vienāds ar visu bērnu elementu platuma apjomu. Tādējādi, norādot CSS vecāku bloka noteikumu " margin: 0 Auto»Centrs var novietot bloku ar mūra elementiem.
Elementi-gride (rezerve: 0 auto;) isfitwidth: TRUE
Uzmanību! Šī opcija nedarbojas ar elementiem, kuru platums ir norādīts procentos. "Columnwidth" opcijas vērtība jānorāda pikseļos, piemēram, "Columnwidth: 120". Pretējā gadījumā elementus var pārņemt viens otram.
oriģināls.
Pēc noklusējuma visi acu elementi ir izlīdzināti pa kreisi. Ar iespēju oriģināls. Jūs varat mainīt horizontālo plūsmu priekšmetu un iestatīt izlīdzināšanu pa labi pa kreisi. Tas ir pietiekami, lai izietu būla vērtību " nepatiess. "
Oriģināls: False
origintop.
Arī, kā arī horizontāli noklusējuma režģa elementi ir izlīdzināti augšējā malā. Ar iespēju origintop. Jūs varat mainīt priekšmetu plūsmu vertikāli un iestatīt izlīdzināšanu no apakšas uz augšu, aptuveni tetrs 🙂.
Origintop: False.
Uzstādīšana (iestatīšana)
Dodieties uz iestatījumu iespējām.
containerstyle
Šī opcija atceļ vecāku konteineru elementu stilus. Pēc noklusējuma vecāks ir iestatīts uz "pozīciju: relatīvo" noteikumu. Šo noteikumu var atcelt.
Konteinerstyle: null
Protams, bija iespējams ignorēt CSS failu, izmantojot "! Svarīgi", bet man nepatīk to darīt. Kopumā es domāju, ka tas ir slikts tonis noteikums izkārtojumā. Labāk ir tīrīt stilus, jo vairāk attīstītājs dod mums šo iespēju.
pārejas periods.
Pārejas ilgums, kad vienumi maina to atrašanās vietu. Noklusējuma laiks ir iestatīts - 0,4 sekundes. Laika formāts ir iestatīts kā CSS laika formāts.
Treitionduration: "0.4s"
Šeit ir daži laika iestatījuma piemēri.
// Ātrā animācijas pāreja: "0.2s" // Lēna animācijas pāreja: "0.8s" // Nav animācijas pārejas: 0
izmērīt izmērus
Ar šo iespēju, jūs varat atcelt pārmaiņas lieluma mātes bloka. Tiem. Pēc noklusējuma, ja jūs nenosakiet fiksētu izmēru vecākiem ar samazinājumu pārlūkprogrammas ekrānā, mūsu bērnu tīkla elementi mainīs to atrašanās vietu, virzīsies uz leju, aizņem brīvu vietu. Tātad ar opciju "Resize", varat atcelt pārejas.
Resize: False
Godīgi sakot, to pašu efektu var sasniegt, ja jūs lūdzat vecāku tikai fiksētu izmēru. Šeit es nesaprotu attīstītāju - vai nu es nepareizi sapratu, vai šī iespēja notiek noteiktos gadījumos. Jūs varat redzēt sīkāku informāciju par piemēru kodētnē. Mēģiniet mainīt pārlūkprogrammas ekrānu izmēru. Tad mainiet "Resize: False" uz "Resize: True" Un jūs sapratīsiet, par ko mēs runājam.
initlayuut
Šī opcija aktivizē mūsu ķieģeļu režģi, inicializējot skriptu. Pēc noklusējuma tas ir ieslēgts - "Initlayout: TRUE". Bet jūs varat atcelt.
Initlayout: False
Jūs varat izmantot metodes un notikumus pirms tīkla aktivizēšanas. Piemēram, jūs varat to darīt, lai jūsu tīkls tiks aktivizēts, noklikšķinot uz konkrētas pogas. Nu, tad kaut kas tamlīdzīgs.
Šajā rakstā es neizjauktu notikumus un metodes, jo Tā izrādījās tilpums. Jūs varat patstāvīgi izpētīt tos Izstrādātāja tīmekļa vietnē. Tur atradīs arī īstenošanas piemērus. Viss ir diezgan saprotams. Ne vienmēr autori skriptu ir rakstīts šādas instrukcijas. Par instrukcijas mūra attīstītājs, es varētu likt grūti - 5 . 🙂
Mūra tīra CSS
Ir arī iespēja īstenot ķieģeļu ķieģeļu tīros CSS. Es šeit nedosīšu visu kodu. Jūs varat apskatīt Codepen, nekas nav sarežģīts. Šādā gadījumā ir ērti, ka jums nav nepieciešams savienot papildu JS bibliotēkas un saprast spraudņus.
Principā viss, ko es iepriekš norādīju, ir pietiekami, lai izmantotu ķieģeļu efektu savā tīmekļa vietnē.
Un par to visu. Paldies visiem par jūsu uzmanību. Norādiet jautājumus komentāros, es vienmēr priecājos palīdzēt. Jūs redzēsiet šādos pantos. Līdz!
Es teicu, kā modificēt jaunu emuāru dizainu, naivi, uzskatot, ka viss svarīgais darbs jau bija veikts. Bet, kā izrādījās, joprojām bija daudz darba. Turklāt es izveidoju savu daļu no tā. Bet vispirms vispirms. Šajā amatā es pieskaršu šādus jautājumus:
- kā ieviest jaunus WordPress mikroshēmas reģistrācijas formātus;
- kā noteikt bloku pozicionēšanas problēmas mūra skriptā;
- kā īstenot mūra uz jebkuru vietni.
Tātad, ko par masons un JavaScript? Izrādās, ka ir kopīgs kontaktpunkts! Es ceru, ka visi zina, kas ir šādi mūrnieki. Ja nē, šeit ir īsa definīcija:
Mūrniekivai frank-Mūrnieki - "Bezmaksas mūrnieku" burtiskā tulkojumā, kustībā, kas parādījās XVIII gadsimtā slēgtās organizācijas veidā. Freemasonry iegūst savu izcelsmi no maz pazīstamu avotiem beigās XVI - sākumā XVII gadsimtā, iespējams, operatīvo semināri Mason. Visas mūrnieku darbība ir ļoti simboliska, daudz ir saistīta ar arhitektūras simboliku, un viena no galvenajām rakstzīmēm ir saīsināta piramīda.
Es esmu ļoti ieinteresēts mūrīšiem un viss, kas ir saistīts ar tiem. Tas ir ļoti interesanti. Es gribētu runāt ar īstu masonu (bet ne ar tādiem, kas ir tikai Ponte labā, zvaniet par brīvu mūrnieku, proti, ar reālu meistaru). Bet tas tā nav. Un tas, ka tēmā dizaina Pinbin izmanto skriptu, kas izraisa blokus ar paziņojumiem ierakstu rindā kā ķieģeļi. Tagad tas ir ļoti populārs stils, dažādi veidi tiek izmantoti, lai īstenotu šādu efektu, bet viens no labākajiem ir neapšaubāmi JavaScript Mūra..
Šī JavaScript oficiālā tīmekļa vietne ir Mazonry.desandro.com, parāda, kā tas darbojas un parāda, kā to savienot ar vietni. Turklāt tas var būt jebkura vieta, kas ne vienmēr ir WordPress, A un DLE vai parasti statiska HTML. Bet ir vērts teikt, ka WordPress no pēdējām versijām (no 3.8, ja es neesmu kļūdaini) mūra skripts jau ir iekļauts pamata paketē. Bet kā jau minēts - viss kārtībā.
Kā īstenot tēmu WordPress atbalsta atbalsta formātu ierakstus?
Tātad izsmalcinātības procesā es nolēmu iekļaut savā tēmā reģistrēt funkcijas, kas trūkst funkcijas tajā, lai uz galvenā varētu publicēt statusu, galeriju, attēlu vai video, ar atšķirīgu dizainu šiem blokiem. Es ienācu dizaina arhīvos un atradu ļoti nelielu šādu tēmu skaitu, kas atbalsta šo funkciju.
Bet, ja atjaunināt savu WordPress, ierakstu formātus var īstenot objektā, un tas ir viegli. Tātad, vispirms atveriet failu funkcijas.php.jūsu reģistrācijas tēmu un pievienojiet šādu kodu:
Add_action ("pēc_setup_theme", "slug_post_formats"); Funkcija slug_post_formats () (pēcformas, masīvs ("malā", "attēls", "video", "audio", "citāts", "saite", "galerija", "tērzēšana", "statuss")); )
Šo kodu var ievietot jebkurā faila atrašanās vietā. funkcijas.php., galvenais ir neizraisīt jebkuru funkciju. Ja viss tiek darīts pareizi, tad izveidojot jaunu ierakstu, jums vajadzētu būt jaunam formāta blokam, ja ne, tad atveriet izvēlni "Ekrāna uzstādījumi" augšpusē un atzīmējiet šarnīrveida bloku.
Bet šī funkcija nedarbosies, kamēr mapē ar tēmu parādīsies īpašie faili ar tipa nosaukumiem saturs - kaut kas.php. - Nosaukumā "kaut kas" fails, tas ir norāde par veidni, kura formātā šis fails būs.
Tie var būt:
Formāti nav nepieciešami, lai izmantotu visu, bet jūs varat norādīt kodā, kas ir iepriekš minētie tikai tie, kas jums ir nepieciešams, piemēram, ja jums ir nepieciešams tikai video, viens attēls un galerija, pēc tam ievietojiet funkcijas.php.Šāds kods:
Add_action ("pēc_setup_theme", "slug_post_formats"); Funkcija slug_post_formats () (pēcformāti, masīvs ("attēls", "video", "galerija")););
Nu, jums ir nepieciešams tikai failus, kas ir uzskaitīti līnijā: satura-image.php, satura-video.phpun saturs-galerija.php. plus content.php. Parastiem ierakstiem. Kur šie faili nāk no? Jūs varat tos parādīt no twentyfurteen tēmas (vai jebkuriem citiem atbalsta formātiem, piemēram, kastēm) un pēc tam precizējiet. Vienkārši lejupielādējiet šo tēmu datorā, ņemiet nepieciešamos failus un aizpildiet serveri uz mapi ar savu dizainu. Pēc tam tie parādīsies sadaļā konsolē Izskats -\u003e redaktors. Turklāt šie faili ir jānosaka vajadzīgajā formātā, jums ir jāizveido arī stili failā style.css..
Tas ir cītīgs darbs, bet tas atmaksās simts reizes. Es parādīšu šādu failu piemērus (aptuveni es to izmantoju šajā emuārā):
Satura-statuss.php fails:
Satura-video.php failus un satura galerija.php ir pilnīgi vienāds:
Content.php fails:
">
Neliels rakšana, jūs varat noskaidrot, ko izveidot savas veidnes ierakstu formātiem. Tajā pašā laikā, jums nevajadzētu aizmirst par CSS stiliem. Bet šeit es nevaru sniegt nekādus ieteikumus, jo tas ir ļoti konkrēts jautājums, un ir atkarīgs no īpašās reģistrācijas tēmas.
Ja rodas grūtības vai kaut kas nesaprotams - jūs varat palīdzēt komentāros, nekā es varu.
Nu, ierakstu formāti ir iestrādāti un darbojas perfekti. Bet ne tur bija kaut kas ... viņi strādā labi, bet ar mūra skriptu viņi negribēja būt draugi. Piemēram, ievietojot galeriju, izmantojot atbilstošu ierakstīšanas formātu, zem galerijas bija milzīga telpa, par to pašu dabu, kas ir no iepriekšējās ziņas, kur es runāju par dīvainām nepilnībām starp paziņojumiem, izmantojot tīmekļa fontus no Google Fonti. Šeit ir šīs problēmas, mēs iemācīsimies izlemt zemāk.
Kā noteikt bloku pozicionēšanas problēmas mūra skriptā
Ļaujiet man atgādināt jums par problēmas būtību: ja izmantojat Google fontu fontu mūra skripta darbā, problēmas parādījās atšķirīgā pārtraukumu augstumā starp rakstu paziņojumiem. Tas pats efekts, tikai daudz vairāk pamanāma un ierakstu formātu izmantošana, jo īpaši, ievietojot flīžu galerijas galeriju no jetpack pagin.
Kā jau teicu, es izmantoju jetpack paketi manā emuārā, kurā ir brīnišķīgs modes flīžu galeriju spraudnis, bet, ievietojot šādu galeriju, parādījās:
Mūra skripts ir vainojams, tas ir mūra skripts: lietojot tīmekļa fontus, tas darbojas agrāk nekā fonti ir ielādēti un tādējādi pilnas lapas slodzes beigās bloki ir nedaudz saplacināti. Var būt vēl viena iespēja - kad bloki sākotnēji kļūst gludi, un tad paraut viens otru.
Galerija ir aptuveni tāds pats: veidojot skaistu flīžu galeriju flīžu galeriju no jetpack, skripts, kas aprēķina attēlu lielumu pavada daudz laika uz šo (un tas notiek vairākos posmos), un mūra darbojas daudz ātrāk un Bloku novietošana izmanto pirmo ienākošo (starpposma) datus, kas atgriež flīžu galeriju skriptu. Tāpēc parādās šī plaisa.
Lai to cīnītos par oficiālo mūra tīmekļa vietni (skatīt iepriekš) Ir paskaidrojumi: sadaļas Image Sloķētas un tīmekļa fonti. Jūs varat iepazīties ar oficiālajām metodēm noteiktās saitēs. Bet, lai vienkāršotu darbu, lai labotu šīs kļūdas, es sniegšu savus ieteikumus.
Lai pārvaldītu mūra skripta parametrus, izmantoju failu funkcijas.js. Kurā es norādīju nepieciešamos norādījumus un pievienojiet to veidnē. Pirmkārt, es norādīju animācijas parametrus un pēc tam ievietojiet kodu, kas labo kļūdu. Es pilnībā nosūtīšu šo failu saturu ar komentāriem, to var izmantot ar praktiski nekādu izmaiņu:
/ * Mūra galveno parametru definīcija * / jQuery (dokuments). Ready ($ ("# pēc apgabals). Mūra (/ * Norādiet bloka ID, kuram mēs izmantojam mūra * / isanimated: True, / * Lai atspējotu bloka animāciju, ievietojiet viltus * / animalizācijas pakalpojumus: (Ilgums: 500, / * Animācijas ātrums milisekundēs * / atvieglošana: "Linear", rinda: nepatiesa))));)); / * Problēmu korekcija ar galeriju * \u200b\u200b/ / * Iespējot mūra * / / / * izpildes aizkavēšanās, līdz visi attēli ir ielādēti * / / * Start * / (funkcija (# pēcapstrāde "); / * Piezīme: šeit jums ir nepieciešams arī Lai norādītu bloka ID * / $ konteineru.Imagesloaded (funkcionētājs () ($ konteineru) (jQuery);)) (jquery); / * END * / / * Nosakot problēmas ar Web Fonti * / / * Start * / Funkcija Triggermaasonry () (ja (! $ Konteiners) (atgriešanās;) $ konteiners.Masonija (());) $ (funkcija () () () () () $ konteiners \u003d $ ("# pēcapstrāde"); triggermaazonry ();); Tipkit.load ((aktīvs: triggermasonry, neaktīvs: triggermasonry)); / * beigas * /
Izvēlieties to, kas jums nepieciešams, un komentārus un nevajadzīgu skripta daļu var izdzēst, piemēram, ja jums ir tikai problēma ar tīmekļa fontiem, aizkavēšanos, kad ielādējot attēlus var izdzēst.
Pievienojiet šo failu veidnē. Tēmas failā header.php.pirms aizvēršanas atzīmes Ievietojiet:
Starp citu, šo kodu var savienot tieši lapā, kā arī pirms aizvēršanas taga Ievietojiet:
Ietekme būs aptuveni vienāda, lai gan JavaScript ir pareizāk savienots ar failu.
Starp citu, ja jums ir WordPress, pēc tam pievienojiet pati mūra skriptu un iestatījumu fails ir iespējams, izmantojot failu. funkcijas.php.jūsu tēmā, tikai pievienojot kodu tajā:
Funkcija MASON_Script () (wp_register_script ("mūra", "/ ievade j. / File / Maasonry.pkgd.min.js"); wp_enqueue_script ("mūra.Functions", "ceļš / uz / failu / funkcijām.JS"); Wp_enceue_script ("mūra");) add_action ("wp_enque_scripts", "mason_script");
Protams, tas viss nav precīzi norādījumi un rokasgrāmata darbībai, bet tikai vispārīgi ieteikumi, jo katrs gadījums ir unikāls un universāla rokasgrāmata ir gandrīz neiespējama. Ja jums ir jautājumi - jautājiet komentāros.
Kā ieviest mūra jebkuru vietni
Tagad iedomājieties, ka mūsu vietne nav ieslēgta CMS WordPress Pēdējā versija, bet teiksim Dle (Datalife dzinējs) Un mēs arī vēlamies tik skaistu bloku atrašanās vietu, izmantojot mūra.
Visi diezgan vienkārši. Pirmkārt, jūs lejupielādējat no oficiālā tīmekļa vietnes mūra faila meonry.pkgd.min.js. . Ielejiet to serverim un pievienojiet to veidnē. DLE tēmas failā main.tpl aizvēršanas tagā Ievietojiet:
Tagad mēs definējam bloka struktūru, kurā darbosies mūra. Piemēram, tā:
CSS jums ir nepieciešams norādīt kaut ko līdzīgu:
Mason-lodziņš (platums: 25%;) .masons platums (platums: 50%;)
Tagad lapai ir nepieciešams inicializēt skriptu darbību:
Tagad es parādīsies patiešām īstermiņā:
1. Pievienojiet failu meonry.pkgd.min.js. Kā parādīts iepriekš.
2. Lapā, izmantojot HTML, inicializējiet skriptu:
3. CSS ieraksta: \\ t
HalfNews-Content (polsterējums: 0 5px 5px 10px; Margin-bottom: 15px; robeža: 1px Solid # E9e9e9; -webkit-Box-Shadow: 0 0 1px #bbb; -Moz-Box-Shadow: 0 0 1px #bbb; Box-Shadow: 0 0 1px #bbb; Platums: 345px; / * Ļoti svarīgs elements - ir bloka platums * / / * Ja tas ir vairāk, nekā nepieciešams, bloķē vai nevar * / / * saskaņot horizontāli vai pievienot Uz drauga * / margin-left: 10px; / * tas ir iestatīts uz attālumu horizontāli starp blokiem * /)
Šeit ir tik vienkāršs dizains galvenajā lapā Technotron mājas (ja saturs atrodas divās kolonnās).
Tieši tā. Ja es kaut kur nebūtu nepareizi, tas nebija nolūks, tikai ātra ziņa, un es vēlējos daudz, tāpēc kļūdas netiek izslēgtas - ja kaut kas nav iziet vai kaut kur skaidrā kļūda: lūdzu, saprotiet, mēs atradīsim trūkumu un pareizi. Atvainojiet par aprakstīto metožu pašvaldību.
Tik tālu. Es ceru, ka tas bija noderīgs.
Epiloga vietā:
Veiksmīgas uzņēmējdarbības noslēpumi:
1. Hans zina viņu.
2. Sam kaut kā iznāca
Tagi:,
Pisano 08/01/2014 
