Cum să afișezi imagini la dimensiune completă în WordPress (4 moduri ușoare)

Ai încărcat vreodată o fotografie uimitoare, de înaltă rezoluție pe site-ul tău WordPress, doar pentru a constata că arată dezamăgitor de mică sau neclară? Este o experiență frustrantă, mai ales când trebuie să prezinți lucrări detaliate precum fotografie, artă sau imagini de produs.

Începând cu versiunea 5.3, WordPress micșorează automat imaginile mari pentru a ajuta la viteza site-ului, ceea ce este o caracteristică excelentă. Cu toate acestea, poate părea un obstacol atunci când calitatea imaginii este esențială pentru portofoliul sau magazinul dvs. online.

La WPBeginner, ne-am confruntat cu exact această problemă în propriile noastre proiecte. Am învățat că nu trebuie să alegeți între imagini frumoase și un site web rapid.

În acest ghid, vă vom prezenta patru moduri simple de a afișa imagini la dimensiune completă în WordPress fără a încetini site-ul dvs.

Când ar trebui să afișezi imagini la dimensiune completă în WordPress?

Un exemplu de situație în care ar putea fi necesar să afișați imagini la dimensiune completă în WordPress este dacă aveți un portofoliu de fotografie sau un magazin de design grafic. Dacă vindeți munca dvs. ca descărcări digitale, atunci ați putea dori să afișați imagini mari pentru a arăta clienților potențiali calitatea lor reală.

Chiar dacă aveți un magazin WooCommerce pentru produse fizice eCommerce, este posibil să fie necesar să afișați imagini la dimensiune completă. Puteți folosi o imagine miniaturală a produsului, pe care utilizatorii o pot apoi accesa pentru a vedea dimensiunea originală a imaginii și pentru a mări detaliile articolului.

Acestea fiind spuse, imaginile mari pot cauza o mulțime de probleme. Ele pot încetini site-ul tău web, ceea ce poate afecta negativ optimizarea pentru motoarele de căutare (SEO).

Din acest motiv, WordPress redimensionează acum automat imaginile mari atunci când le încărcați. Dacă o imagine este mai mare de 2560 de pixeli în înălțime și/sau lățime, WordPress o va scala proporțional la o dimensiune mai mică, menținând dimensiunile originale ale imaginii.

Majoritatea furnizorilor de hosting WordPress limitează, de asemenea, dimensiunea fișierului pe care îl puteți încărca în biblioteca media. Acest lucru poate fi un obstacol dacă aveți multe imagini mari de afișat.

Dacă doriți să modificați limita de dimensiune, atunci puteți citi ghidul nostru despre cum să creșteți dimensiunea maximă de încărcare a fișierelor în WordPress.

Acum, să vedem cum poți afișa imagini la dimensiune completă pe site-ul tău WordPress. Avem 4 metode pentru a face acest lucru. Unele pot funcționa mai bine pentru imagini individuale, în timp ce altele sunt mai bune pentru mai multe. Pur și simplu folosește linkurile de mai jos pentru a sări direct la metoda preferată:

• Metoda 1: Utilizați URL-ul imaginii de dimensiune completă (cel mai bun pentru imagini unice)
• Metoda 2: Dezactivarea scalării imaginilor în WordPress (Recomandat pentru fișiere multiple)
• Metoda 3: Dezactivați scalarea imaginilor cu un plugin (pentru începători complet)
• Metoda 4: Deschide imagini WordPress pe lățime completă într-un Lightbox (Cel mai bun pentru galerii)
• Întrebări frecvente despre imaginile la dimensiune completă
• Bonus: Optimizează-ți imaginile pentru viteză și SEO mai bune

Metoda 1: Utilizați URL-ul imaginii de dimensiune completă (cel mai bun pentru imagini unice)

Dacă doriți să afișați doar una sau două imagini mari pe site-ul dvs. web, atunci le puteți adăuga pur și simplu folosind URL-urile originale ale imaginilor.

Când încărcați o imagine care depășește dimensiunile maxime, WordPress va scala acea imagine pentru a crea o versiune mai mică. Cu toate acestea, imaginea originală, mai mare, rămâne intactă.

Mai întâi, accesați Media » Bibliotecă din tabloul de bord WordPress. Asigurați-vă că schimbați vizualizarea la vizualizarea „Listă”.

După aceea, plasați cursorul mouse-ului peste imaginea mare. Căutați-o pe cea al cărei nume de fișier are la sfârșit „-scaled”.

Când apare butonul „Copiază URL”, faceți clic pe el.

Cu asta făcut, puteți lipi URL-ul imaginii în bara de adrese a browserului și ștergeți „-scaled….” de la sfârșitul URL-ului imaginii. Aveți grijă să nu eliminați formatul imaginii (.png, .jpg, .gif și așa mai departe).

Deci, dacă URL-ul imaginii scalate este http://example-website.local/wp-content/uploads/2024/03/example-image-scaled.jpg, atunci URL-ul imaginii originale este http://example-website.local/wp-content/uploads/2024/03/example-image.jpg.

Când vizitezi acel URL, vei vedea imaginea în dimensiunile sale originale.

Acum, puteți adăuga imaginea oriunde pe site-ul dvs. web. Deoarece adăugăm imaginea folosind un link, va trebui să o încorporați, mai degrabă decât să o selectați din biblioteca media.

Pentru a face acest lucru, deschideți editorul de blocuri Gutenberg pentru postarea sau pagina unde doriți să utilizați imaginea. Apoi faceți clic pe pictograma „+ Adaugă bloc” pentru a adăuga un nou bloc. Aici, puteți selecta blocul Imagine.

Cu asta făcut, faceți clic pe „Insert from URL”.

Puteți apoi pur și simplu să lipiți URL-ul imaginii la dimensiune completă sau imaginii mari în câmp, și apăsați tasta „Enter” de pe tastatură.

Când sunteți gata să publicați, faceți clic pe „Publică” sau „Actualizează”. Acum puteți vizita această pagină sau postare pentru a vedea imaginea la dimensiune completă în acțiune.

Pentru a adăuga mai multe imagini la dimensiune completă, pur și simplu repetați același proces descris mai sus.

Metoda 2: Dezactivarea scalării imaginilor în WordPress (Recomandat pentru fișiere multiple)

Dacă intenționați să afișați mai multe imagini mari, dezactivarea funcției de scalare automată este cea mai bună abordare. Deși puteți face acest lucru editând fișierul functions.php al temei dvs., această metodă poate fi riscantă și poate defecta site-ul dvs. dacă faceți o greșeală.

De aceea recomandăm să folosești în schimb pluginul gratuit WPCode. Așa cum explicăm în recenzia noastră completă despre WPCode, este cea mai sigură modalitate de a adăuga fragmente de cod, iar acestea nu vor fi șterse la actualizarea temei.

Mai întâi, va trebui să instalezi și să activezi pluginul. Pentru această metodă, versiunea gratuită a WPCode este tot ce ai nevoie.

Odată activat, accesați Code Snippets » Add Snippet. Aici, selectați „Add Your Custom Code (New Snippet)” și faceți clic pe „Use snippet”.

Acum, introduceți un titlu pentru fragmentul de cod personalizat. Acesta este doar pentru referința dvs. După aceea, deschideți meniul derulant „Tip cod” și selectați „Fragment PHP”.

În editorul de cod, adăugați următorul fragment de cod:

add_filter( 'big_image_size_threshold', '__return_false' );

În continuare, derulați în jos la secțiunea „Inserare”. Asigurați-vă că locația este setată la „Rulează peste tot” pentru ca codul să funcționeze pe întregul site web.

Când sunteți gata, derulați în partea de sus a ecranului și faceți clic pe comutatorul „Inactiv” pentru a-l schimba în „Activ”. În cele din urmă, faceți clic pe „Salvare fragment” pentru a face codul live.

De acum înainte, WordPress va folosi dimensiunile originale pentru orice imagine mare pe care o încărcați, oferindu-vă acces la versiunea la dimensiune completă.

Metoda 3: Dezactivați scalarea imaginilor cu un plugin (pentru începători complet)

Dacă găsiți metoda codului prea intimidantă, atunci puteți dezactiva scalarea imaginilor folosind Perfect Images. Acest plugin gratuit vă permite să creați dimensiuni suplimentare pentru imagini în WordPress, să actualizați metadatele media și multe altele.

Mai întâi, va trebui să instalați și să activați pluginul Perfect Images. Pentru mai multe detalii despre instalarea unui plugin, consultați ghidul nostru pas cu pas despre cum să instalezi un plugin WordPress.

După activare, accesați Meow Apps » Perfect Images și bifați caseta Dezactivare de lângă „Pragul imaginii”.

WordPress nu va mai adăuga atributul ‘-scaled’ la nicio imagine, astfel încât puteți încărca fișiere media mari și WordPress le va afișa la dimensiunea completă implicit.

Metoda 4: Deschide imagini WordPress pe lățime completă într-un Lightbox (Cel mai bun pentru galerii)

Ultima opțiune este adăugarea unei lightbox pentru imagini la dimensiune completă pe site-ul dvs. Acest lucru este perfect dacă creați o galerie de imagini, un slider sau un portofoliu foto.

Această metodă vă permite să afișați imagini miniaturale mai mici atunci când pagina se încarcă inițial. Vizitatorii pot apoi face clic pe orice imagine miniaturală pentru a vedea imaginea completă într-o fereastră pop-up.

Doar fiți conștient că trebuie să dezactivați scalarea imaginilor în prealabil, folosind una dintre metodele de mai sus. Dacă nu o faceți, lightbox-ul dvs. va afișa doar versiunea redusă a imaginilor dvs.

După ce ați dezactivat scalarea, este timpul să creați o galerie. Vă recomandăm să folosiți Envira Gallery. Așa cum explicăm în recenzia noastră completă despre Envira Gallery, este cel mai bun plugin de galerie foto pentru WordPress datorită puterii și ușurinței sale în utilizare.

După instalarea și activarea Envira, puteți urma tutorialul nostru pas cu pas despre cum să adaugi o galerie cu efect de lightbox în WordPress.

O altă opțiune excelentă este NextGEN Gallery. Am constatat că acest plugin este excelent pentru fotografi profesioniști sau artiști care au nevoie de funcții avansate pentru a-și afișa și vinde munca în mod profesional.

Întrebări frecvente despre imaginile la dimensiune completă

La WPBeginner, primim frecvent întrebări despre gestionarea imaginilor în WordPress. Iată câteva dintre cele mai comune despre afișarea lor la dimensiune completă.

Va încetini site-ul meu web afișarea imaginilor la dimensiune completă?

Da, fișierele mari de imagini pot crește timpii de încărcare a paginii, ceea ce poate afecta experiența utilizatorului și SEO. Acesta este motivul pentru care este foarte important să optimizați imaginile pentru web înainte de a le încărca, chiar și atunci când le afișați la dimensiune completă.

Care este cea mai ușoară modalitate de a afișa o singură imagine la dimensiune completă?

Cea mai simplă metodă este să utilizați URL-ul direct al imaginii originale. Când WordPress creează o versiune scalată, păstrează fișierul original, pe care îl puteți apoi încorpora utilizând blocul Imagine.

Este mai bine să folosiți un plugin sau cod pentru a dezactiva scalarea imaginilor?

Pentru majoritatea utilizatorilor, în special pentru începători, utilizarea unui plugin precum WPCode este cea mai sigură opțiune. Adăugarea de cod direct în fișierele temei dvs. poate defecta site-ul dacă nu este făcută corect, în timp ce un plugin o gestionează într-un mediu sigur.

Pot afișa o miniatură care deschide imaginea la dimensiune completă la click?

Absolut. Utilizarea unui plugin de galerie lightbox precum Envira Gallery este cea mai bună modalitate de a face acest lucru. Vizitatorii văd miniaturi mai mici, cu încărcare rapidă și pot face clic pentru a vizualiza versiunea de înaltă rezoluție într-un popup.

Bonus: Optimizează-ți imaginile pentru viteză și SEO mai bune

Afișarea imaginilor la dimensiune completă poate fi excelentă pentru a vă prezenta munca, dar graficele mari pot încetini timpii de încărcare ai site-ului dvs. web și pot afecta negativ SEO-ul.

Din acest motiv, recomandăm cu tărie optimizarea imaginilor pentru performanță. Un plugin precum EWWW Image Optimizer poate ajuta prin comprimarea fișierelor pentru a le face mai mici și mai rapide la încărcare.

Sperăm că acest articol v-a ajutat să învățați cum să afișați imagini la dimensiune completă în WordPress. Pentru mai multe sfaturi despre gestionarea fișierelor media și îmbunătățirea site-ului dvs., puteți explora ghidurile noastre suplimentare:

• Cum să optimizați ușor fișierele imagine pentru web fără a pierde calitatea
• Ghidul începătorului pentru SEO-ul imaginilor – optimizați imaginile pentru motoarele de căutare
• Cum să încarci imagini leneș în WordPress cu ușurință
• Modalități de a preveni furtul de imagini în WordPress
• Cum să adaugi text peste o imagine în WordPress
• Cele mai bune pluginuri WordPress pentru gestionarea imaginilor (actualizat)

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.