Salutare tuturor! Astăzi aș dori să spun despre cum fără pluginuri și scripturi să facă blocuri de zidărie de cărămidă(zidărie. din engleza - zidărie de cărămidă), care este, blocurile de diferite înălțimi vor fi frumos distanțate unul la altul fără linii mari goale. Da! Toate acestea se pot face foarte ușor cu CSS.
CSS are o proprietate cu care puteți crea text sau blocuri multicolon. Ei o folosesc.
Proprietatea este numită coloane. Aceasta este o proprietate universală care vă permite să setați imediat lățimea și numărul de coloane. Mai multe despre el puteți citi bun css. Directory.
Deci, totul este de fapt foarte simplu. De exemplu, avem 6 elemente de înălțimi diferite, dar aceeași lățime. Un exemplu luminos este o bara laterală (coloană laterală) pe situsuri. Există toate blocurile de aceeași lățime, dar de înălțimi diferite. De obicei B. versiune mobila Site-ul Sitebar are după conținutul principal, în partea de jos a site-ului, iar conținutul însuși face întreaga lățime a ecranului. În mod natural, site-ul este, de asemenea, irațional într-o singură coloană, deoarece va fi o mulțime de spațiu liber pe laturi, mai ales dacă vă uitați de la tabletă.
Dar dacă blocurile au stabilit proprietatea afișaj: Inline-bloc, apoi ei automat, dacă există suficientă lățimea recipientului, va fi localizată în mai multe coloane. Cu toate acestea, totul nu poate arăta foarte frumos:
Sunt de acord, aceste liniste între blocuri nu seamănă deloc. Prin urmare, trebuie să fie rezolvată urgent! Pentru aceasta la blocul de containere,În ce blocuri sunt localizate, trebuie să adăugați stilurile necesare:
Moz-coloane: 300px auto; -Webkit-coloane: 300px auto; Coloane: 300px auto;
Pentru browser-ul încrucișat, utilizați proprietăți pentru browserele Firefox și Webkit (Chrome, Safari, Android). De exemplu, suntem staționați cu blocuri cu listă marcată Apoi stilurile pentru un exemplu în imagine vor arăta astfel:
Ul (lățime: 1050px; -Moz-coloane: 300px auto; -Webkit-coloane: 300px auto; coloane: 300px auto;) Li (afișaj: bloc-bloc; Box-umbra: 0 8px # 555; Stilul de listă: None ; Padding: 10px; lățime: 300px; margine-fund: 30px; vertical-align: sus;)
În acest caz, blocurile vor fi amplasate în mai multe coloane. minim 300px lățime, iar numărul de coloane va fi determinat automat de browser. Este convenabil să se creeze adaptabilitate. ÎN acest caz Vor fi 3 coloane, și așa va arăta:
Lățimea recipientului (1050px) va trebui să se ridice dacă doriți ca distanța dintre blocurile verticale să coincidă cu distanța orizontală. În caz contrar, lățimea dintre difuzoare va fi instalată automat de browser. Au o proprietate coloana-Gap.care stabilește distanța dintre coloane. Dar în acest caz nu va funcționa așa cum doriți.
Există o altă opțiune: Pentru blocurile trebuie să setați proprietatea lățimii: 100%. De asemenea, dacă proprietatea de umplere este instalată, ca în cazul meu, trebuie să setați proprietatea de dimensionare a casetei: Border-cutia. Acum puteți adăuga în siguranță proprietatea coloanei-decalaj la container pentru a seta distanța dintre coloane. Așa că va funcționa după cum este necesar.
Sunt de acord, pare mult mai bun! De asemenea, puteți plasa blocurile "div" în interiorul containerului DIV. Fie, dacă aveți nevoie să distribuiți textul în mai multe coloane, pur și simplu în eticheta "P" cu, de exemplu, clasa de text Adăugați textul dorit și pentru această clasă prescriem o proprietate coloane..
Asta e tot! Deci, pur și simplu fără scripturi inutile, puteți poziționa blocurile sub formă de zidărie sau text în mai multe coloane. Dar, rețineți că, în acest caz, acesta va arăta doar frumos dacă blocurile sunt la aceeași lățime. Într-un alt caz, rămâne doar să folosiți un script de zidărie. Scriptul poziționează automat fiecare bloc. Dar acesta este un alt subiect ...
Asta e tot! Dacă au apărut câteva întrebări sau comentarii, lăsați-le în comentarii. Noroc!
În secțiunea blog. Aceasta fotografie tema WordPress. Acesta va fi exemplul nostru, dar probabil ați văzut utilizarea de zidărie jQuery și pe alte site-uri WordPress.
Ce este Media JQuery
Masoneria poate fi considerată o adăugare la CSS, cu care puteți poziționa elementele orizontal, transformându-se într-o poziție verticală, în funcție de lățimea monitorului. Ca rezultat, decalajele verticale între elementele de diferite înălțimi sunt minimizate. Dacă vrei să faci și tu ajutor CSS, Credeți-mă că veți avea o mulțime de dureri de cap.
Pe acest exemplu, puteți vedea principiul lucrărilor de zidărie jQuery înainte și după utilizare:
Cum vedeți rezultatul pe față dacă utilizați Float CSS: stânga, atunci există intervale goale, trebuie să utilizați poziția CSS, ceea ce este destul de problematic, puteți, dar de ce, în acest lucru va ajuta Masoneria să ajute.
Folosim Mansory JQuery pe site-urile WordPress
Masoneria poate fi utilizată în două cazuri. Primul este atunci când toate blocurile dvs. cu informații sunt aceeași lățime, în acest caz trebuie să utilizați această piesă de script:
|
Dacă aveți blocuri de lățime diferite, trebuie să utilizați următorul cod:
|
Unde solumnwidth. Aceasta este lățimea grilajului (în pixeli). Masoneria va urma aceste două reguli:
- Lățimea totală a elementelor (calculată în conformitate cu această formulă) \u003d lățimea CSS + căptușeală-dreapta + padding-stânga + lățimea de margine-lățime + margine-stânga-lățime + margine-dreapta + margine-stânga
- Atunci când se utilizează cântărire, toate elementele trebuie să fie aranjate orizontal pe lățimea de culoare de culoare (de exemplu, pentru coloana de culoare: 200, elementele vor începe cu 0 sau 200 sau 400 de pixeli și așa mai departe). Este posibil să nu fie complet clar, dar nu este nimic dificil în acest lucru, ne uităm la imagine.
Primul element al lățimii totale de 190px și marginea dreaptă: 0. Și cel de-al doilea element are marja stânga: 0, în teorie, aceste două elemente trebuie să se atingă reciproc. Dar din moment ce Collewidth are o valoare de 200px, atunci al doilea element începe să afișeze o distanță de 200px.
Acest proces nu se va întâmpla dacă nu avem valoarea cântării în scenariu și toate elementele încep între ele, deci este necesar să le separați cu marginea.
Deci, se întreabă zidărie jquery și WordPress 3 ..
Acum codifică puțin. Pentru a începe cu, conectați bibliotecile de jquery și zidărie necesare în fișierul antet.php. Skip acest cod în Header.php (vă puteți descărca pe un site OFF):
// conectați jQuery.// Conectați zidărie.
Asigurați-vă că wp_enqueue_script este înainte de wp_head. Scriptul de zidărie este situat în dosarul JS al subiectului meu, este posibil să aveți un nume diferit.
< 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_masonerie" va apela scriptul de zidărie, iar DIV Class \u003d "Masonry_box" va afișa posturile noastre folosind scenariul. Acum CSS, puteți face mulțumiri_masoarry, de exemplu, lățimea de 100%, atunci nu trebuie să fiți tratați, dar dacă faceți o lățime fixă \u200b\u200ba conținutului_masonerie, trebuie să faceți calculele necesare. De exemplu, faceți 4 coloane cu posturi, fiecare are lățime + padding 190px și margine-dreapta: 10px, apoi dimensiunea conținutului containerului content_masonerie va fi de 200 x 4 \u003d 800px:
#Content_masonerie (lățime: 800px;) #content_masonerie .masonerie_box (lățime: 170px, padding: 10px, margine-dreapta: 10px, margine-fund: 10px;)
#Content_masonerie ( lățime: 800px; #Content_masonerie .masonry_box ( lățime: 170px; padding: 10px; marja-dreapta: 10px; marja de jos: 10px; |
Acum rămâne să adăugați PHP, care va genera HTML, în acest caz voi folosi WP_Query pentru a afișa 20 de posturi din categoria de zidărie, de exemplu, pe afișajul paginii (pagina.php):
< div id = "content_masonry" > $ Linksposts \u003d New wp_query (); $ Linksposts -\u003e interogare ("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); Altfel the_permalink (); ?\u003e "> < / a > < / h2 > |
O zi bună pentru toată lumea! Acesta este al doilea articol al meu în acest an. Am publicat prima dată despre fontul iconului destul de recent și sunt încântat că am găsit timp pentru a scrie un al doilea articol cu \u200b\u200bo marjă atât de mică. Până acum, pentru mine este un mic decalaj, pentru că Mai des nu scrie nici o ocazie, dar incerc. 😎 Și acum să ne ocupăm de ceea ce va fi discutat în acest articol.
Poate că mulți dintre voi ați văzut pe site-urile localizarea elementelor (imagini, articole, diferite blocuri) din caramida. Spui - este posibil să faci prin CSS? Poate că este posibil, dar numai o astfel de flexibilitate nu va fi. Scriptul însăși plasează elementele de pe pagină utilizând spațiul vertical. De asemenea, atunci când poziționarea blocurilor, scriptul adaugă animație. Este posibil să îl învinuiți în design adaptiv, reducând fereastra browserului. Deci, totul este realizat cu o mică bibliotecă JavaScript - zidărie. Acest script este foarte utilizat în modelele moderne de trend. Nu știu cum în păgânul rus, dar în supraestimarea pe Internet Masoneria a avut o mare popularitate.
Autorul zidăriei este David Desandro din SUA. Aș dori să-i spun mulțumesc foarte mult pentru un astfel de scenariu bun. Această bibliotecă este distribuită complet gratuită, astfel încât să îl puteți utiliza în siguranță pe site-ul dvs. web.
Cred că mulți îi plac. De fapt, totul arată foarte frumos. Să ne ocupăm de cum să lucrăm cu zidărie, cum să aducem blocurile pe site-ul nostru cu un efect de cărămidă?
Structura articolului
În primul rând, trebuie să mergem la pagina script-http://masonicy.desandro.com și să descărcați cea mai recentă versiune. La momentul scrierii acestui articol, această versiune este de 4,0. De asemenea, pe acest site veți găsi o documentație detaliată în limba engleză. Mă refer la scenariul punctelor principale din documentație - cum să vă conectați, ce opțiuni sunt disponibile etc. Nu voi afecta totul, pentru că Eu însumi nu mi-am dat seama în unele puncte. Pentru a introduce site-ul dvs., trebuie să faceți un minim de acțiune. Acum sunteți obișnuiți cu asta.
Pe site-ul de descărcare există două versiuni ale scriptului - comprimate (minimizate) și necomprimate. Este mai bine să utilizați precis - Masonry.pkgd.min.js. De asemenea, biblioteca poate fi încărcată de la CDN:
necomprimat
comprimat (minimizat)
Vă sfătuiesc să conectați versiunea minimizată a zidăriei de la CDN. Deci, reducem numărul de solicitări http inutile. În general, indiferent de scriptul pe care îl conectați dacă puteți conecta versiunea minizată cu CDN, apoi conectați-o.
Pentru a lucra zidărie, trebuie să creăm un bloc parental și să punem elementele în ea.
Pentru claritate, am creat o pagină demo cu imagini de diferite dimensiuni. Am luat imaginea ca un exemplu de elemente, pentru că Ei au înălțimi diferite, dar în loc de imagini pot fi orice bloc: text, video, etc. Încercați să reduceți fereastra browserului și veți vedea că imaginile schimbă fără probleme poziția.
Să vedem ce va arăta codul HTML:
...
#Container (granița: 1px solid #CCC; margine: 0 auto; padding: 50px 0; max-lățime: 1170px;) / * element de plasă * / element de bază (granița: 2px solid RGBA (0, 0, 0, 0, 0, 0, 0,35); Margin-Bottom: 15px; Padding: 1px; Lățime: 280px) / * / Element mesh * / H1 (aliniere text: centru; Margin: 0 50px)
După cum puteți vedea, CSS este folosit aici la un nivel minim.
Inițializați pluginul de zidărie
Puteți face acest lucru în mai multe moduri.
Inițializarea zidăriei prin JavaScript
Puteți utiliza zidărie ca jquery-plugin:
$ ("Selector"). Zidărie ();
Dar țineți cont de faptul că pentru această metodă trebuie să fiți conectat (ă) la Biblioteca JQuery:
Pe pagina demoică am inițializat zidărie ca jquery-plugin, adică Am următorul cod de inițializare:
Jquery (document). ($) ($) ($ ("Elemente-gride"). Masonerie (// Options ElectSelector: "element-element", ColoanaWidth: 300));)););
Dacă ați tras metoda "Masonerry ()", am trecut două opțiuni: articole de identificare și cântărire. Acestea sunt necesare două opțiuni. Potrivit dezvoltatorului, acestea sunt necesare pentru funcționarea normală a scenariului. Cu toate acestea, vom vorbi despre opțiunile de mai jos. Totul, după aceste acțiuni, ar trebui să lucreze totul.
Inițializarea cu Vanilla JavaScript
Puteți folosi zidăria și cu Vanilla JS:
Noua zidărie (Elem, Opțiuni)
Constructorul de zidărie () ia două argumente: un element copil al containerului și o opțiune de obiect. Codul de inițializare va fi următorul.
Var elem \u003d document.querySelector ("elemente-gride"); VAR MSNRY \u003d Masoneria Noua (Elem (// Options ElectSelector: "Element-element", Columnwidth: 200)); // argumentul elementului poate fi un șir de selector // pentru un element individual var msnry \u003d noua zidărie ("elemente-gride", (// opțiuni));
Sincer, nu am lucrat cu Vanilla JS, prin urmare, nu pot spune în mod specific ce este bun decât jquery. Știi doar că există o astfel de metodă.
Inițializare prin HTML.
Puteți inițializa zidăria prin HTML, fără a scrie un cod JavaScript unic. Pentru a face acest lucru, va trebui să adăugați atributul - containerul "de date-zidărie" la toate elementele copilului. Opțiunile pot fi transferate ca valoare.
Parametrii transmisați trebuie să se potrivească cu formatul JSON. Vreau să vă atrag atenția asupra utilizării citatelor din cod. Citatele pentru atributul de date-zidărie sunt single și pentru opțiunile transmise - dublu. Acestea. Așa este arătată pe exemplu.
Această opțiune poate fi utilizată dacă nu doriți să utilizați excesul JavaScript pe site. De exemplu, nu aș trimite imediat jQuery dacă nu a fost folosit oriunde pe site.
Aici este o astfel de bibliotecă. Nu este nimic complicat. Ce urmeaza?
Dimensiuni ale elementelor
Dimensiunile elementelor fiice pot fi ambele fixe și cauciuc. Cu o dimensiune fixă \u200b\u200b(lățime și înălțime) a lățimii blocului blocurilor și a designului este setată în fișierul CSS Styling. Înălțime Vreau să spun dacă utilizați blocuri goale, înălțimea blocului va fi tratată cu un browser bazat pe conținutul său. În cazul meu, nu întreb înălțimea, pentru că Imagini, astfel încât să aveți propria înălțime.
...
Grila de cauciuc.
Cu o grilă de cauciuc, lățimea elementelor este stabilită ca procent. Grila de cauciuc este folosită în principal în designul adaptiv. Vom vorbi mai multe despre opțiunile de mai jos.
...
Imagesed.
Uneori, când pagina este încărcată, se poate întâmpla ca elementele să se suprapună reciproc. În același timp, se duc la toți într-o singură bucată și arată teribil. Astfel încât să puteți rezolva această problemă cu o mică bibliotecă - imagesed.. Cel mai bun lucru a fost manifestat cu mine cu design adaptiv. A fost când am deschis site-ul de la un telefon mobil o rețea de imagini pe care am ajuns la o grămadă.
Conectați-vă imagini încărcate cu CDN:
Utilizarea elementului ImageLaAdate este poziționată pe pagină numai după încărcarea completă.
// init zidarie vary grid \u003d $ ("grila"). zidarie ((// optiuni ...)); // zidărie layout după fiecare imagine încarcă $ grilă.IMagesloaded (). Progres (funcția () ($ grilă.masonerie ("aspect");));
Sau inițializarea zidăriei are loc numai după încărcarea completă a tuturor imaginilor.
Var $ grid \u003d $ (". Grila"). Imagini de încărcare (funcția () (// init zidărie după ce toate imaginile au încărcat $ grilă.masonerie ((// opțiuni ...));));
Opțiuni (opțiuni)
Acum, să ne întrebăm ce putem trece metoda de opțiuni zidărie ().
Toate opțiunile sunt grupate. Ei bine, se face astfel încât să fie mai ușor să le navigați.
Acum, să vedem ce opțiuni sunt incluse într-un anumit grup.
itemstelector
Această opțiune indică ce elemente se va aplica efectul de zidărie. Este util să specificați această opțiune, deoarece putem tăia elementele care nu fac parte din aspect. Acest parametru este deja familiar pentru noi când dezasamblează inițializarea zidăriei.
Itemsector: "Element-element"
lățimea coloanei.
Specifică lățimea elementelor de aspect. Dacă acest parametru omite zidărie va lua lățimea externă a primului element. Dezvoltatorul vă recomandă întotdeauna să specificați lățimea difuzoarelor, fie că este fixă \u200b\u200bsau elemente de cauciuc.
ColoanaWidth: 80.
Dimensiuni elemente (dimensionare element)
Dacă vrem să facem aspectul nostru cu elemente de cauciuc, de exemplu, cu design adaptiv, atunci în aceste scopuri există un parametru care face rețeaua noastră de cauciuc.
procentaj
Am dezasamblat codul rețelei de cauciuc de mai sus, dar opțiunile nu au intrat în detalii.
...
După cum vedem, pentru a activa grila de cauciuc, am adăugat parametrul procurat la codul de inițializare cu valoarea booleană " adevărat.". Și ca o lățime a indicat clasa unui element la care lățimea în procente este atribuită în CSS.
jgheab.
Între elemente, puteți seta o liniuță orizontală utilizând opțiunea. jgheab., Trecând numărul. Numărul va corespunde retragerilor din pixeli.
Jgheab: 15.
Indicele verticale dintre elemente sunt setate în CSS.
Element-element (margine-fund: 15px;)
Indicele pot fi stabilite ca procent, adică Acestea vor varia în funcție de dimensiunea ferestrei browserului.
...
Am creat un bloc Div gol înainte de lista de articole.
CSS pentru acest bloc a indicat lățimea în procente. Și în opțiunea Cod de inițializare jgheab. Am indicat clasa acestui element gol. Scriptul în sine va crea indentare în procente, pe baza lățimii acestui bloc.
timbru.
Această opțiune poate fi atribuită elementele care vor fi ștampilate în grila de zidărie. Elementele rămase vor fi mai jos și vor susține ștampilarea. Uneori poate fi utilă. Opțiuni timbru. Trecem clasa elementului ștampilat.
Ștampila: ".stamp"
Puteți arăta mai detaliat la CodePen, precum și editați dacă este necesar.
fitwidth.
Esența acestei opțiuni este că atunci când o activăm de blocul elementului părinte, se adaugă o lățime fixă \u200b\u200bîn pixeli. În plus, lățimea blocului părinte este egală cu cantitatea de lățime a tuturor elementelor copilului. Astfel, specificând în regula blocului părinte CSS " marja: 0 Auto»Putem pozitiona un bloc cu elemente de zidarie in centru.
Elemente-gride (margine: 0 auto;) ISFitwidth: Adevărat
Atenţie! Această opțiune nu funcționează cu elementele a căror lățime este indicată în procente. Valoarea opțiunii "Columnwidth" trebuie să fie specificată în pixeli, de exemplu, "Columnwidth: 120". În caz contrar, elementele pot fi luate între ele.
originil.
Implicit, toate elementele de plasă sunt aliniate la stânga. Cu opțiunea originil. Puteți schimba fluxul orizontal al elementelor și puteți seta alinierea spre stânga spre stânga. Este suficient să treceți valoarea booleană " fals. "
OriginTleft: FALSE.
origin.
De asemenea, precum și orizontal, elementele de rețea implicite sunt aliniate la marginea superioară. Cu opțiunea origin. Puteți schimba fluxul de elemente vertical și setați alinierea de jos, aproximativ ca în Tetris 🙂.
Origin: false.
Configurare (Setup)
Accesați opțiunile de setări.
containerstyle.
Această opțiune anulează stilurile elementelor containerului părinte. În mod implicit, părintele este setat la regula "Poziție: relativă". Această regulă poate fi anulată.
Containerstyle: Null.
Desigur, a fost posibilă suprascrierea prin fișierul CSS folosind "! IMPORTANT", dar nu-mi place să o fac. În general, cred că aceasta este o regulă de ton rău în aspect. Este mai bine să curățați stilurile, cu atât mai mult dezvoltatorul ne oferă această ocazie.
dURATA TRANZIȚIEI.
Durata tranziției atunci când elementele își schimbă locația. Timpul implicit este setat - 0,4 secunde. Formatul de timp este setat ca format de timp CSS.
Tranditioniation: "0.4s"
Iată câteva exemple ale setării timpului.
// tranziție rapidă de animație: "0,2s" // tranziție de animație lentă: "0.8s" // nici o tranziție de animație: 0
redimensionați
Cu această opțiune, puteți anula modificarea dimensiunii blocului părinte. Acestea. În mod implicit, dacă nu specificați o dimensiune fixă \u200b\u200bpărintelui cu o reducere a ecranului browserului, elementele noastre de rețea pentru copii își vor schimba locația, se vor deplasa în jos, ocupând spațiu liber. Deci, cu opțiunea "Redimensionați", puteți anula tranzițiile.
Redimensionați: falsă
Sincer, același efect poate fi realizat dacă cereți părintelui doar o dimensiune fixă. Aici nu înțeleg dezvoltatorul - fie am înțeles greșit ceva, fie că această opțiune are loc în anumite cazuri. Puteți vedea mai multe detalii despre exemplul din CodePen. Încercați să modificați dimensiunea ecranelor browserului. Apoi schimbați "Redimensionați: FALSE" pe "Redimensionați: adevărat" Și veți înțelege despre ce vorbim.
initlayout.
Această opțiune activează grila noastră de cărămidă atunci când inițializând scriptul. În mod implicit, acesta este activat - "Initlayout: true". Dar puteți anula.
Initlayout: FALSE.
Puteți utiliza metode și evenimente înainte de a activa grila. De exemplu, puteți face astfel încât grila dvs. să fie activată făcând clic pe un anumit buton. Ei bine, atunci ceva de genul asta.
În acest articol, nu voi dezasambla evenimente și metode, deoarece Articol, astfel încât sa dovedit volumetric. Puteți să le explorați independent pe site-ul dezvoltatorului. De asemenea, vor găsi exemple de implementare. Totul este destul de ușor de înțeles. Nu întotdeauna de către autorii scripturilor sunt scrise astfel de instrucțiuni. Pentru instrucțiunile dezvoltatorului de zidărie, aș pune greu - 5 . 🙂
Zidărie pe CSS pură
Există, de asemenea, o opțiune de a implementa zidărie pe CSS pur. Nu voi da tot codul aici. Poti sa te uiti la codePen, nu este nimic complicat. În acest caz, este convenabil pentru faptul că nu este nevoie să conectați bibliotecile suplimentare JS și să înțelegeți opțiunile plug-in.
În principiu, tot ceea ce am arătat mai sus este suficient pentru a utiliza efectul de cărămidă pe site-ul dvs. web.
Și în acest sens. Vă mulțumesc tuturor pentru atenția dvs. Specificați întrebările din comentarii, voi fi întotdeauna fericit să vă ajut. Ne vedem în următoarele articole. Pana cand!
I-am spus cum să modific un design nou al blogului, crezând naiv că toate lucrările importante au fost deja făcute. Dar, așa cum sa dovedit, erau încă multe lucruri. Mai mult, am creat propria mea parte din ea. Dar mai întâi lucrurile mai întâi. În acest post, voi atinge următoarele întrebări:
- cum se introduce noi chips-uri WordPress în subiectul formatelor de înregistrare - înregistrare;
- cum de a repara problemele de poziționare a blocului în scriptul de zidărie;
- cum să implementați zidăria pe orice site.
Deci, cum rămâne cu Masonii și JavaScript? Se pare că există un punct comun de contact! Sper că toată lumea știe cine sunt atât de masoni. Dacă nu, iată o definiție scurtă:
Masoniisau frank-Masons - În traducerea literală a "brichetelor libere", mișcarea care a apărut în secolul al XVIII-lea sub forma unei organizații închise. Francmasoneria își ia originea din surse puțin cunoscute la sfârșitul XVI - începutul secolului al XVII-lea, presupus atelierele operaționale ale lui Mason. Toate activitățile masonilor sunt foarte simbolice, foarte mult este asociat cu simbolismul arhitectural și unul dintre personajele de bază este o piramidă trunchiată.
Sunt foarte interesat de masoni și tot ce este legat de ei. Este foarte interesant. Aș dori să vorbesc cu un adevărat zidar (dar nu cu așa, care este doar de dragul lui Ponte, sună-se un zidar gratuit, și anume, cu un adevărat maestru). Dar acest lucru nu este cazul. Și în faptul că, în subiectul designului Pinbin, folosește scriptul care cauzează blocuri cu anunțuri de înregistrări pentru a se alinia ca cărămizi. Acum este un stil foarte popular, diferite modalități sunt folosite pentru a pune în aplicare un astfel de efect, dar unul dintre cele mai bune este, fără îndoială, JavaScript Zidărie..
Site-ul oficial al acestui JavaScript este Masonry.Desandro.com, demonstrează modul în care funcționează și arată cum să îl conectați la site. Mai mult decât atât, poate fi orice site, nu neapărat WordPress, A și Dle sau, în general, HTML static. Dar merită să spunem că în WordPress din ultimele versiuni (de la 3,8, dacă nu sunt înșelat), scriptul de zidărie este deja inclus în pachetul de bază. Dar așa cum am menționat deja - totul în ordine.
Cum se implementează în subiectul WordPress Support Support Records Records?
Deci, în procesul de rafinare, am decis să includem în tema mea de înregistrare funcțiile lipsă funcții în el, astfel încât pe cea principală să publice starea, galeria, o imagine sau un videoclip, cu design diferit al acestor blocuri. Am risipit în arhivele designului și am găsit un număr foarte mic de astfel de subiecte care susțin această funcție.
Dar dacă actualizați cuvântul dvs. WordPress, formatele de înregistrări pot fi implementate în subiect și acest lucru este ușor. Deci, în primul rând deschideți fișierul funcții.php.tema înregistrării și adăugați următorul cod:
Add_action ("post_setup_heme", "slug_post_formats"); Funcție Slug_post_formats () (post-formate, matrice ("deoparte", "imagine", "video", "Audio", "Quote", "Link", "galerie", "chat", "Status",)); )
Acest cod poate fi introdus în orice locație a fișierului. funcții.php., principalul lucru nu este de a sparge nicio funcție. Dacă totul se face corect, atunci când creați o înregistrare nouă, trebuie să aveți un nou bloc de format, dacă nu, apoi deschideți meniul "Setări ecran" din partea de sus și marcați blocul articulat.
Dar această caracteristică nu va funcționa până când fișierele speciale nu apar în dosar cu tema, cu numele tipului conținut-ceva.php. - În numele "Ceva", aceasta este o indicație a șablonului care va fi formatul acestui fișier.
Ei pot fi:
Formatele nu sunt necesare pentru a utiliza totul, dar puteți specifica în codul de mai sus numai cele pe care aveți nevoie, de exemplu, dacă aveți nevoie doar de un videoclip, o imagine și galerie, apoi introduceți în funcții.php.un astfel de cod:
Add_action ("post_setup_heme", "slug_post_formats"); Funcție Slug_post_formats () (post-formate, matrice ("imagine", "video", "galerie",));)
Ei bine, aveți nevoie doar de fișierele care sunt enumerate în linie: conținut-imagine.php, conținut-video.phpși conținut-galerie.php. un plus content.php. Pentru înregistrările obișnuite. De unde provin aceste fișiere? Puteți să le expiră din subiectul a douăzeci de ani (sau orice alte formate de susținere, de exemplu, cutii) și apoi rafinați. Doar descărcați acest subiect pe computer, luați fișierele de care aveți nevoie și completați serverul în dosarul cu designul dvs. După aceasta, vor apărea în consola din secțiune Aspect -\u003e Editor. În plus, aceste fișiere trebuie să fie aduse la formatul dorit, de asemenea, trebuie să creați stiluri în fișier stil.css..
Aceasta este o treabă minuțioasă, dar va plăti o sută de ori. Voi afișa exemple de astfel de fișiere (aproximativ o folosesc pe acest blog):
Conținut-Status.Php Fișier:
Content-video.php Fișiere și conținutul-galerie.php este complet același lucru:
Content.php Fișier:
">
Un pic de săpat, puteți să vă dați seama ce să faceți propriile șabloane pentru formatele de înregistrări. În același timp, nu trebuie să uitați de stilurile CSS. Dar aici nu pot da nici o recomandare, deoarece aceasta este o întrebare foarte specifică și depinde de subiectul specific al înregistrării.
Dacă apar dificultăți, sau ceva incomprehensibil - puteți ajuta în comentarii decât pot.
Ei bine, formatele de înregistrări sunt încorporate și funcționează perfect. Dar nu a fost ceva ... ei funcționează bine, dar cu scriptul de zidărie nu au vrut să fie prieteni. De exemplu, atunci când introduceți o galerie utilizând formatul de înregistrare adecvat, sub galerie a existat un spațiu imens, despre aceeași natură, care este din postul anterior, unde am vorbit despre goluri ciudate între anunțuri atunci când folosesc fonturile web de la Google Fonturi. Iată aceste probleme pe care le vom învăța să le decidem mai jos.
Cum se fixează problemele de poziționare a blocului în scriptul de zidărie
Permiteți-mi să vă reamintesc despre esența problemei: când utilizați fontul Google Fonts în lucrarea scriptului de zidărie, problemele au apărut sub formă de înălțime diferită între anunțurile articolelor. Același efect, doar mult mai vizibil și utilizarea formatelor de înregistrare, în special atunci când introduceți galeria galeriei de la JetPack Pagin.
Așa cum am spus, folosesc pachetul JetPack pe blogul meu, în care există un plugin minunat de galerii de plăci la modă, dar când a apărut o astfel de galerie sub o perioadă mare:
Scriptul de zidărie este de vină, este scriptul de zidărie: Când utilizați fonturile web, funcționează mai devreme decât fonturile sunt încărcate și, prin urmare, la sfârșitul încărcării complete a paginii, blocurile sunt ușor aplatizuale. Este posibil să existe o altă opțiune - când blocurile inițial devin netede și apoi se târăsc unul pe celălalt.
Galeria este cam aceeași: Când construiți o galerie frumoasă cu gresie de la Jetpack, un script care calculează dimensiunea imaginilor petrece mult timp pe acest (și se întâmplă în mai multe etape), iar zidăria funcționează mult mai repede și pentru Poziționarea blocurilor utilizează primele date primite (intermediare) care returnează scriptul galeriei cu gresie. Prin urmare, apare acest decalaj.
Pentru a lupta cu acest lucru pe site-ul oficial al zidăriei (vezi mai sus) există explicații: Secțiuni izolate și fonturile web. Vă puteți familiariza cu metodele oficiale la linkurile specificate. Dar pentru a simplifica munca pentru a corecta aceste erori, voi da recomandările mele.
Pentru a gestiona parametrii scriptului de zidărie, folosesc fișierul funcții. În care prescriu instrucțiunile necesare și le conectați în șablon. În primul rând, specificați parametrii de animație și apoi introduceți codul care corectează eroarea. Voi da conținutul acestui fișier complet cu comentarii, îl puteți folosi cu practic nici o schimbare:
/ * Definiția principalilor parametri ai zidăriei * / jQuery (document) .Redy ($ ("# post-zonă"). Masoneria (/ * indică ID-ul blocului la care folosim zidărie * / Isanimat: Adevărat, / * Pentru a dezactiva animația bloc, plasați False * / Animationopțiuni: (Durata: 500, / * Viteza de animație în milisecunde * / relaxare: "liniar", coadă: false)));)); / * Corectarea problemelor cu galeria * / / * Activarea întârzierilor de execuție * / / / * până când toate imaginile sunt încărcate * / / * Start * / (funcție (# post-zonă "); / * Notă: Aici aveți nevoie și de nevoie Pentru a specifica ID-ul blocului * / $ container.IMagesloaded (funcționar () ($ container.masonerie ();));)) (jQuery); / * End * / / * Fixarea problemelor cu fonturile web * / / * Start * / Funcție triggeasonerie () (dacă (! $ Recipient) (retur;) $ container.masonerie (());) $ (Funcție () ( $ container \u003d $ ("# post-zone"); triggerii ();)); TypeKit.load ((activ: Triggermasonerie, Inactiv: Triggermasonerie)); /* Sfârșit */
Selectați ceea ce aveți nevoie și comentariile și o parte inutilă a scriptului pot fi șterse, de exemplu, dacă aveți doar o problemă cu fonturile web, întârzierea la încărcarea imaginilor pot fi șterse.
Conectați acest fișier în șablon. În dosarul subiectului header.php.Înainte de eticheta de închidere Introduce:
Apropo, acest cod poate fi conectat direct pe pagină, precum și înainte de eticheta de închidere Introduce:
Efectul va fi aproximativ același, deși JavaScript este conectat mai corect la fișier.
Apropo, dacă aveți WordPress, atunci conectați scriptul de zidărie în sine și fișierul de setări este posibil prin fișier. funcții.php.În subiectul dvs., adăugați codul în el:
Funcția mason_script () (wp_register_script ("zidărie", "/ intrare j. / Fișier / maasonerie.pkgd.min.js"); wp_enqueue_script ("zidărie.funcționalitate", "calea / / fișier / funcții.js"); Wp_enseu_script ("zidărie");) add_action ("wp_enqueue_scripts", "mason_script");
Bineînțeles, toate instrucțiunile și ghidul exact al acțiunii, ci doar recomandări generale, deoarece fiecare caz este unic și crearea unui ghid universal este aproape imposibil. Dacă aveți întrebări - întrebați în comentarii.
Cum să implementați zidărie la orice site
Acum imaginați-vă situația pe care site-ul nostru nu este activat CMS WordPress. ultima versiune, dar hai să spunem Dle (motor Datalife) Și dorim, de asemenea, o astfel de locație frumoasă a blocurilor folosind zidărie.
Toate destul de simple. În primul rând, descărcați de pe site-ul oficial de zidărie masonry.pkgd.min.js. . Se potrivește pe serverul dvs. și conectați-l în șablon. Pentru dle în fișierul de subiect main.tpl. la eticheta de închidere Introduce:
Acum definim structura blocului, în care va funcționa zidăria. De exemplu, deci:
În CSS trebuie să specificați ceva de genul:
Mason-cutie (lățime: 25%;). Țară-cutie largă (lățime: 50%;)
Acum, pagina trebuie să inițieze funcționarea scriptului:
Acum voi arăta un exemplu de funcționare cu adevărat:
1. Conectați fișierul masonry.pkgd.min.js. După cum se arată mai sus.
2. Pe pagină prin HTML, inițializați scriptul:
3. Următoarele sunt înregistrate în CSS:
HalfNews-Content (padding: 0 5px 5px 10px, margine-fund: 15px; margine: 1px solid # E9E9E9; -Webkit-Box-umbra: 0 0 1px #bbb; -moz-box-umbra: 0 0 1px #bbb; Box-umbra: 0 0 1px #bbb; Lățime: 345px; / * Element foarte important - există o lățime a blocului * / / * dacă este mai mult decât aveți nevoie, apoi blochează sau nu poate * / / * alinierea orizontală sau închisă Pe un prieten * / margine-stânga: 10px; / * este setat la distanța orizontală între blocuri * /)
Aici este un design atât de simplu pe pagina principală a site-ului Techotron (unde conținutul este situat în două coloane).
Asta este. Dacă am greșit undeva, nu a fost în scop, doar un post rapid și am vrut foarte mult, astfel încât erorile nu sunt excluse - dacă ceva nu iese sau undeva o greșeală clară: Vă rugăm să înțelegeți, vom găsi un defect și corect. Ne pare rău pentru municipalitatea metodelor descrise.
Până acum. Sper că a fost util.
În loc de epiloga:
Secretele de afaceri de succes:
1. Heher îl cunoaște.
2. Sam a ieșit cumva
Etichete:,
Pisano 08/01/2014. 
