Cum se utilizează Masonry pentru a adăuga Pinterest Style Post Grid în WordPress

Acesta este un post de oaspete de Josh Pollock

Display-ul de posturi de tip Pinterest a fost un design popular pentru paginile indexului blogului WordPress pentru o vreme. Este popular nu numai pentru că mimează aspectul site-ului social media popular, ci și pentru că folosește cel mai bine spațiul pe ecran. Pe un index blog WordPress, permite fiecărei previzualizări să fie dimensiunea pe care trebuie să o aibă natural, fără a lăsa spațiu suplimentar.

În acest tutorial, vă voi arăta cum să utilizați popularul Bibliotecă JavaScript Masonry pentru a crea machete de rețea în cascadă pentru indexul blogului dvs., precum și pagini de arhivare pentru tema dvs. Voi aborda câteva probleme pe care trebuie să le luați în considerare pentru optimizarea mobilă și cum să le rezolvați.

Notă: Acesta este un tutorial la nivel avansat pentru cei care se simt confortabil de editare a temelor WordPress și au suficientă cunoștințe HTML / CSS.

Pasul 1: Adăugați bibliotecile necesare pentru tema dvs.

Actualizați: WordPress 3.9 include acum cea mai recentă versiune a Masonry.

Mai întâi trebuie să încărcați Masoneria în tema dvs., folosind acest cod:

 dacă (! function_exists ('slug_scripts_masonry')): if (! is_admin ()): funcția slug_scripts_masonry () wp_enqueue_script ('zidărie'); wp_enqueue_style ('zidărie', get_template_directory_uri () '/ css /');  add_action ('wp_enqueue_scripts', 'slug_scripts_masonry'); endif; //! is_admin () endif; //! slug_scripts_masonry există 

Acest cod pur și simplu încarcă zidăria și îl pune la dispoziția fișierelor de șablon ale temei (consultați ghidul nostru despre cum să adăugați corect JavaScripts și stiluri în WordPress). De asemenea, rețineți că nu adăugăm jQuery ca dependență pentru nici una. Unul dintre avantajele lui Masonry 3 este că nu necesită jQuery, dar poate fi folosit cu acesta. Din experiența mea, inițializarea Masoneriei fără jQuery este mai fiabilă și deschide posibilitatea de a sări peste jQuery, ceea ce poate ajuta atât la încărcarea paginilor, cât și la problemele de compatibilitate.

Pasul 2: Inițializați Javascriptul

Următoarea funcție stabilește Masoneria, definește containerele care vor fi utilizate cu ea și, de asemenea, se asigură că totul se întâmplă în ordinea corectă. Masoneria trebuie să calculeze mărimea fiecărui element din pagină pentru a putea să-și planifice din grilă dinamic. O problemă cu care am întâlnit-o cu Masoneria în multe browsere este că Masoneria va calcula în mod greșit înălțimea articolelor cu imagini cu încărcare lentă, ceea ce duce la suprapunerea elementelor. Soluția este de a folosi imaginileLoate pentru a împiedica Masonerul să calculeze aspectul până când toate imaginile sunt încărcate. Acest lucru asigură dimensionarea corectă.

Aceasta este funcția și acțiunea care vor scoate scriptul de inițializare în subsolul paginii:

 if (function_exists ('slug_masonry_init')): funcția slug_masonry_init () ?> // setați containerul pe care Masoneria se află în interior într-un var var container = document.querySelector ('# masonry-loop'); // crează empty var msnry var msnry; // initialize Masoneria dupa ce toate imaginile au incarcat imaginileLoaded (container, function () msnry = Masoneria noua (container, itemSelector: '.masonry-entry'););   
Funcția este explicată pas cu pas cu comentarii inline. Ceea ce face funcția Javascript este să-i spuneți lui Masonry să privească în interiorul unui container cu id "masonry-loop" pentru articolele cu clasa "masonry-entry" și să calculeze grila numai după încărcarea imaginilor. Am setat containerul exterior cu querySelector și elementul interior cu itemSelector.
 
Pasul 2: Creați o bucla de zidărie
 
În loc să adăugăm marcajul HTML pentru Masoner direct la un șablon, vom crea o parte separată a șablonului pentru aceasta. Creați un nou fișier numit "content-masonry.php" și adăugați-l la tema dvs. Acest lucru vă va permite să adăugați bucla Masonry la cât mai multe șabloane diferite pe care le doriți.
 
În noul fișier veți adăuga codul afișat mai jos. Marcajul este similar cu cel pe care l-ați vedea în mod normal pentru orice previzualizare a conținutului. Puteți modifica oricum ai nevoie, doar asigurați-vă că elementul exterior are clasa "zidăriei-intrare" pe care am setat-o ​​ca itemSelector în ultimul pas.
 
 
             
 
Acest marcaj conține clase pentru fiecare parte, astfel încât să puteți adăuga un marcaj pentru a se potrivi cu tema. Îmi place să adaug un chenar frumos, ușor rotunjit la intrarea în zidărie. O altă opțiune frumoasă nu este o frontieră pentru intrarea în masonerie, ci o ușoară umbră. Acest lucru pare deosebit de bun atunci când miniatura postului se extinde până la limita containerului, ceea ce se poate realiza prin acordarea de margini de miniatură și miniaturi de 0 în toate direcțiile. Veți dori să adăugați toate aceste stiluri într-un fișier numit masonry.css în directorul css al temei.
 
Pasul 3: Adăugați buclă de zidărie la șabloane
 
Acum, că avem partea noastră de șablon, o puteți folosi în orice șablon din tema pe care o doriți. S-ar putea să îl adăugați la index.php, dar nu și la categoria.php dacă nu doriți să fie folosit pentru arhive de categorii. Dacă doriți doar să fie folosit pe pagina principală a temei dvs., atunci când este setată să afișeze postări de blog, le-ați utiliza în home.php. Oriunde alegeți tot ce trebuie să faceți este să înfășurați bucla într-un container cu id "bucla de zidărie" și să adăugați partea șablonului în bucla folosind get_template_part (). Asigurați-vă că ați pornit containerul cu buclă de zidărie în timp ce (have_posts ()).
 
De exemplu, aici este principala buclă de la index.php de douăzeci și opt de ani:
 
          
 
Și aici este modificat pentru a utiliza buclele noastre de Masonerie:
 
            
 
Pasul 4: Setați lățimile receptoare ale elementelor de zidărie
 
Există mai multe moduri în care puteți seta lățimea fiecărui element Masonerie. Puteți seta lățimea utilizând un număr de pixeli când inițializați Masoneria. Nu sunt un fan de a face asta, deoarece folosesc teme receptive și necesită unele interogări media complexe pentru a face lucrurile pe ecrane mici. Pentru modelele receptive, am descoperit că cel mai bun lucru pe care trebuie să-l faceți este să setați o valoare de lățime pentru .masonry-entry cu un procentaj, bazat pe câte elemente doriți pe rând și lăsând Masonry să facă restul matematică pentru tine.
 
Toate acestea necesită împărțirea numărului de 100 de elemente pe care doriți să le setați procentual într-o simplă intrare în stilul.css al temei. De exemplu, dacă doriți patru elemente în fiecare rând, puteți face acest lucru în fișierul masonry.css:
 
.zidărie-intrare width: 25%
 
Pasul 5: Optimizarea mobilă
 
Am putea să ne oprim aici, dar nu cred că rezultatul final funcționează incredibil de bine pe ecrane mici de telefon. Odată ce sunteți mulțumit de modul în care arată tema dvs. cu noua rețea de masonerie de pe desktop, verificați-o pe telefon. Dacă nu sunteți mulțumit de modul în care arată pe telefonul dvs., atunci va trebui să faceți o treabă mică.
 
Nu cred că este suficient spațiu pe ecranul telefonului pentru tot ce am adăugat la partea noastră de conținut-șablon de zidărie. Două soluții bune pe care le aveți la dispoziție sunt să scurtați fragmentul pentru telefoane sau să îl ignorați complet. Aici este o funcție suplimentară pe care o puteți adăuga în funcțiile temei. Deoarece nu cred că aceste probleme reprezintă o problemă pentru tablete, folosesc un plug-in foarte bun Mobble în toate exemplele din această secțiune pentru a face schimbări numai pe telefoane, nu pe tablete. De asemenea, am verificat dacă Mobble este activ înainte de al utiliza și, dacă este necesar, să revină la funcția de detectare mobilă mai generală wp_is_mobile, care este încorporată în WordPress. 
 
 dacă (! function_exists ('slug_custom_excerpt_length')): funcția slug_custom_excerpt_length ($ lungime) // setați lungimea mai scurtă o dată $ short = 10; // setați lungimea lungă o dată $ long = 55; // daca se poate seta doar un fragment scurt pentru telefoane, altfel scurt pentru toate dispozitivele mobile daca (function_exists ('is_phone') if (is_phone ()) return $ short; altceva return $ long; else if (wp_is_mobile ()) return $ scurtă; altceva return $ long; add_filter ('excerpt_length', 'slug_custom_excerpt_length', 999); endif; //! slug_custom_excerpt_length 
 
După cum puteți vedea, începem prin stocarea lungimii extrasei lungi și a lungimii scurte a fragmentelor în variabile, deoarece vom folosi aceste valori de două ori și dorim să le putem schimba dintr-un loc dacă trebuie mai târziu. De acolo testăm dacă putem utiliza is_phone () de la Mobble. Dacă este cazul, am setat scurta extras pentru telefoane și lungul extras dacă nu suntem. După aceea, facem același lucru de bază, dar folosind wp_is_mobile, care va afecta toate dispozitivele mobile, dacă is_phone () nu poate fi utilizat. Sperăm că partea de altă parte a acestei funcții nu va fi niciodată utilizată, dar este bine să aveți o copie de rezervă doar pentru fiecare caz în parte. Odată ce logica lungimii extrasei este setată, se ajunge doar la cuplarea funcției la filtrul excerpt_length.
 
Scurtarea fragmentului este o opțiune, dar putem, de asemenea, să o îndepărtăm în întregime printr-un proces simplu. Aici este o nouă versiune a conținutului-zidărie, cu întreaga parte excerpt omitată pe telefoane:
 
 
           
 
De data aceasta avem de testat pentru a vedea dacă nu suntem pe un telefon / dispozitiv mobil și, dacă este așa, vom returna partea excerpt a bucla noastră. Dacă suntem pe un telefon / dispozitiv mobil nu facem nimic.
 
Un alt lucru pe care ar trebui să-l faceți este să măriți lățimea elementelor de zidărie, ceea ce reduce numărul pe rând, pe dispozitivele mobile. Pentru a face acest lucru, vom adăuga un alt stil inline în antet bazat pe detectarea dispozitivului. Deoarece această funcție folosește wp_add_inline_styles, va fi dependentă de o foaie de stil specifică. În acest caz, folosesc masonry.css, pe care le-ați putea dori, pentru păstrarea stilurilor dvs. de zidărie separate. Dacă nu reușiți să utilizați acest lucru, puteți utiliza mânerul dintr-o altă foaie de stil deja înregistrată.
 
 dacă (! function_exists ('slug_masonry_styles')): funcția slug_masonry_styles () // setați lățimea largă $ wide = '25% '; // set lățime îngustă $ narrow = '50% '; / ** Determina valoarea pentru lățimea $ ** / // dacă putem seta doar îngust pentru telefoane, altfel îngustă pentru toate dispozitivele mobile dacă (funcția_există ('is_phone') if (is_phone ()) $ width = $ narrow;  altceva $ width = $ wide; altceva $ width = $ wide; altceva if (wp_is_mobile ()) $ width = $ narrow; ** / $ custom_css = ".masonry-entry width: $ width;"; // trebuie să utilizați mânerul unei foi de stiluri deja întoarse wp_add_inline_style ('masonry', $ custom_css); add_action (' wp_enqueue_scripts ',' slug_masonry_styles '); endif; //! slug_masonry_styles există 
 
Această funcție eneșează foaia de stil personalizată și apoi stabilește o valoare pentru lățime utilizând ceea ce ar trebui acum să fie o logică foarte familiară. După aceea, creăm variabila $ custom_css trecând valoarea pentru lățime într-un bit de CSS cu aspect normal, cu $ width. Apoi vom folosi wp_add_inline_style pentru a le spune WordPress să imprime stilurile noastre inline în antet ori de câte ori se folosește foaia de stil Masonry și apoi vom prinde întreaga funcție în wp_enqueue_scripts și am terminat.
 
Dacă ați ales să combinați stilurile dvs. Masonare într-o foaie de stil existentă, asigurați-vă că utilizați mânerul foii de stil cu wp_add_inline_style sau că stilurile dvs. inline nu vor fi incluse. Îmi place să folosesc wp_add_inline_style pentru că, în general, înfășurați cârligul de acțiune pentru a încorpora Masoneria într-o condiționată, astfel încât să fie adăugată numai când este necesar. De exemplu, dacă folosesc doar Masoneria pe indexul blogului meu și în paginile de arhivă, aș face acest lucru:
 
 dacă is_home () || is_archive ()) add_action ('wp_enqueue_scripts', 'slug_scripts_masonry');  
 
Aceste câteva exemple ar trebui să deschidă câteva alte idei în creier. De exemplu, ați putea folosi o logică similară pentru a ignora în totalitate zidăriile pe un dispozitiv mobil. De asemenea, wp_add_inline_style () este o funcție mai puțin folosită, dar foarte utilă, deoarece vă permite să setați programatic diferite stiluri bazate pe orice tip de condițional. Vă poate permite să schimbați radical stilul oricărui element bazat nu numai pe detectarea dispozitivului, dar schimbările ar putea fi, de asemenea, bazate pe șablonul utilizat sau chiar dacă utilizatorul este conectat sau nu.
 
Sper că vedeți aceste schimbări diferite pe care le fac ca o oportunitate de a deveni creativi. Masoneria și sistemele asemănătoare de cascadă au fost populare de ceva vreme, deci este timpul pentru câteva răsturnări pe această idee populară. Arătați-ne în comentarii ce moduri reci au venit cu utilizarea Masonry într-o temă WordPress.
 
Un tip de WordPress cu scop multiplu, Josh Pollock scrie despre WordPress, nu dezvolta tema, serveste ca manager comunitar pentru Pods Framework si pledeaza pentru solutii open source pentru design durabil.