Utilizarea jQuery Masonry pentru Pinterest-Like Posting

Odată cu includerea jQuery Masonry în biblioteca de bază WordPress 3.5, nu a fost niciodată mai ușor să modificați aspectul unui șablon pentru postarea recentă.

Servirea conținutului dvs. într-un aspect de zidărie poate face partea blog a site-ului dvs. mai vizibil interesant pentru cititorii dvs. Cu jQuery Masonry, nu contează lungimea extrasului dvs. post (în mod evident), se va ajusta pentru a umple fiecare spațiu. Acest tutorial va explora ideea din spatele folosirii bibliotecii jQuery Masonry nou adăugate cu WordPres 3.5.

Ce este un aspect de zidarie?

Dacă ați auzit despre un zid "zidărie" (gândiți-vă la un zid de cărămidă), atunci aveți o imagine bună despre ceea ce ar putea să arate un aspect de zidărie pe site-ul dvs. Dacă sunteți în continuare confuz, vizitați Pinterest și verificați modul în care acestea au stabilit fiecare "PIN" pe site-ul lor. Totul este aranjat vertical, umplând tot spațiul disponibil. Este important să notați termenul "vertical" în ultima teză. Puteți obține același tip de efect de zidărie utilizând plutitoarele CSS, însă este posibil să întâmpinați probleme de distanțare. Acest lucru se întâmplă deoarece, spre deosebire de jQuery Masonry, plutitoarele CSS vor aranja elementele orizontale mai întâi, apoi pe verticală. Acest lucru poate face diferențe foarte incoerente și uneori nedorite de spațiu în aspectul dvs. Utilizarea jQuery Masonry poate ajuta la rezolvarea acestei probleme.

Exemplu de plutire CSS

Observați cum există discrepanțe între posturile de înălțimi diferite când folosiți plutitoare CSS.

jQuery Masonry Exemplu

Cu jQuery Masonry fiecare post se potrivește frumos în loc, lăsând goluri incomode.

Acum, că știm ce este aspectul Masoneriei, să începem să creăm o schemă simplă de masonerie jQuery pentru posturile noastre recente.

Pasul 1 Utilizarea `wp_enqueue_script` pentru a încărca biblioteca

Înainte de a începe să construim zidul, trebuie să încărcăm scenariul potrivit. Va trebui să adăugați următorul cod la dvs. functions.php fişier.

 funcția mason_script () wp_enqueue_script ("jquery-zidărie");  add_action ('wp_enqueue_scripts', 'mason_script');

Pasul 2 Setarea grila

Pentru structura de zidărie de bază, voi implementa următorul cod HTML în buclă (sau șablon personalizat - ori de câte ori intenționați să vă construiți peretele). Mai întâi, voi pune containerul pentru peretele de zidărie și apoi voi stabili containerul pentru fiecare post în perete.

Configurarea CSS-ului

Va trebui să definiți lățimea recipientului și lățimea postului pentru a obține efectul actual de zidărie. Pentru demo-ul meu, mi-am stabilit containerul la o lățime de 960 de pixeli și vreau să am 4 coloane de postări. Deci, trebuie să fac niște matematici simple pentru a găsi ce lățime de dimensiune trebuie să fie fiecare post pe peretele meu.

Lățimea cărămizii = 960px / 4 posturi = 240 pixeli fiecare.

Cu acest număr în minte, pot să-mi fixez aspectul în foaia de stil:

 #container width: 960px; // lățimea întregului container pentru perete .brick width: 220px; // lățimea fiecărei cărămizi mai puțin de umplutura inbetween padding: 0px 10px 15px 10px;

Pasul 3 Configurați funcția

Apoi, trebuie să setăm funcția de zidărie, astfel încât containerele noastre div toate să se îmbine în perete. Utilizați următorul cod pentru a face acest lucru:

 jQuery (document) .ready (funcția ($) $ ('#container') .masonry (columnWidth: 220););

Concluzie

Masoneria vine cu o mulțime de opțiuni încorporate care fac foarte atractivă utilizarea cu WordPress. De exemplu, puteți aplica opțiunea de animație pentru a "anima" aranjamentele dvs. de postare, pentru a adăuga elemente suplimentare pe perete (excelent pentru machetele de portofoliu) sau pentru a le încorpora împreună cu parintele Infinet Scroll al lui Paul Irish. Indiferent de modul în care intenționați să utilizați scriptul jQuery Masonry, este o adăugare binevenită în WordPress 3.5.

Notă marginală: Atingerea aceluiași efect în CSS3 este posibilă. Cu toate acestea, trebuie să utilizați noua funcționalitate "coloane", care nu este încă acceptată în fiecare browser.

Cod