Cum să schimbați dimensiunile imaginilor prezentate în WordPress

Imaginile prezentate sunt utilizate în WordPress într-un număr de moduri diferite, în funcție de tema pe care o utilizați. Majoritatea temelor folosesc imagini prezentate ca o previzualizare în miniatură a uneia dintre imaginile dintr-o postare sau o pagină care este de obicei afișată pe pagina principală și pe paginile de arhivă.

Această funcționalitate a fost introdusă cu WordPress 2.9 și a fost cunoscută inițial ca „post miniaturi”. Majoritatea temelor WordPress (inclusiv a noastră) folosesc acum imaginile prezentate în multe alte scopuri, cum ar fi în galerii de imagini, glisoare de caracteristici și imagini de antet de pagină. De exemplu, în tema noastră Full Frame, imaginea prezentată devine imaginea de fundal a postării.

Imaginile prezentate sunt, desigur, foarte importante pentru creativ și oricine creează un site WordPress care conține o mulțime de imagini. Pentru a utiliza imaginile prezentate în orice temă Graph Paper Press, tot ce trebuie să faceți este să selectați o imagine prezentată din linkul din partea dreaptă a ecranului în editorul de postări.

Dacă dimensiunea implicită a imaginii prezentate care este setată în tema dvs. funcționează pentru scopurile dvs., grozav. Dacă nu, este posibil să schimbați dimensiunea cu o mică editare a codului.

De ce ați dori să schimbați dimensiunea imaginii prezentate? În afară de a face galeriile de miniaturi mai mari sau mai mici, poate doriți să modificați raportul de aspect al dimensiunilor. Să presupunem, de exemplu, că ești fotograf de peisaj și portofoliul tău este format din panorame spectaculoase. În acest caz, dacă imaginea prezentată implicită a temei este pătrată, aceasta va sfârși prin a tăia cea mai mare parte a imaginii tale. Puteți remedia acest lucru ajustând dimensiunile manual la ceva mai potrivit.

Modificarea dimensiunii imaginii prezentate în functions.php

Pentru a edita dimensiunile imaginilor prezentate din valorile implicite, va trebui să modificați un cod din fișierul functions.php . Acest fișier poate fi accesat fie prin FTP, fie îl puteți edita direct în tabloul de bord WordPress sub Aspect > Editor. Aș recomanda întotdeauna prima abordare față de cea din urmă.

Înainte de a face modificări acestui fișier, merită întotdeauna să vă asigurați că aveți o copie de rezervă a versiunii originale în cazul în care ceva nu merge bine. Dacă nu aveți deja fișierele teme originale pe computer, asigurați-vă că descărcați cel puțin fișierul functions.php și îl salvați într-un folder de rezervă.

Există două moduri diferite de a redimensiona o imagine prezentată. Pentru a o redimensiona proporțional (adică pentru a evita întinderea sau comprimarea imaginii) utilizați următorul cod:

 set_post_thumbnail_size( 50, 50 ); // 50 pixeli lățime pe 50 pixeli înălțime, modul redimensionare

De asemenea, puteți alege să redimensionați imaginea decupând-o cu acest cod:

 set_post_thumbnail_size( 50, 50, true ); // 50 pixeli lățime pe 50 pixeli înălțime, mod decupare

Aceasta setează dimensiunea implicită a imaginilor prezentate.

Adăugarea de dimensiuni suplimentare de imagine

De asemenea, este posibil să adăugați câte dimensiuni suplimentare de imagine aveți nevoie, adăugând o linie suplimentară de cod pentru fiecare dimensiune de imagine:

 add_image_size('category-thumb', 300, 9999); // 300 de pixeli lățime (și înălțime nelimitată)

Puteți utiliza apoi această nouă dimensiune în șablonul de temă cu următorul cod:

 <?php the_post_thumbnail( 'category-thumb'); ?>

Această funcție este utilă dacă doriți să afișați imaginile prezentate în mai multe moduri diferite. De exemplu, poate doriți să setați o dimensiune pentru miniatură pentru galeriile dvs. de imagini și o dimensiune mai mare pentru antetul postării.

Rețineți că imaginile pe care le încărcați trebuie să fie cel puțin la fel de mari ca dimensiunile pe care le-ați setat pentru imaginile prezentate. Dacă încărcați imagini mai mici, acestea vor fi mărite și vor ajunge să arate pixelate și neclare.

Reconstruirea imaginilor prezentate

Modificarea dimensiunii imaginii prezentate va afecta numai încărcările din momentul în care codul este schimbat. Toate încărcările anterioare vor fi salvate la dimensiunile originale, așa că va trebui să le generați din nou.

Dacă aveți doar câteva imagini de redimensionat, le puteți încărca din nou manual. Dacă aveți mai mult de o mână, cel mai bine este să utilizați un plugin precum Regenerate Thumbnails pentru a face toată munca grea pentru tine. Acest plugin poate fi accesat prin meniul Instrumente și va redimensiona una sau mai multe imagini din galeria media pe care o selectați.

Prevăzuți-vă editările pentru viitor cu o temă pentru copii

Problema cu editarea directă a fișierului functions.php este că acestea se vor pierde dacă este lansată o nouă versiune a temei și trebuie să o actualizați. Puteți nota codul pe care l-ați adăugat și îl puteți introduce în noul fișier functions.php , dar acest lucru poate deveni plictisitor, mai ales dacă faceți multe editări sau există versiuni noi ale temei care apar frecvent.

Utilizarea unei teme copil rezolvă această problemă, deoarece atunci când tema părinte este actualizată, tema copil rămâne intactă. Dacă efectuați modificări la codul unei teme, fie în fișierul functions.php , fie în foile de stil sau în orice alte fișiere, este întotdeauna cea mai bună practică să utilizați o temă copil.

Avem deja un ghid complet pentru crearea unei teme pentru copii pe blog, dar iată ce trebuie să știți pentru scopurile noastre.

Pentru a crea o temă copil, conectați-vă la site-ul dvs. prin FTP și creați un dosar nou în /wp-content/themes/ pentru noua temă copil. Este o practică obișnuită să numiți folderul la fel ca tema pe care doriți să o editați, cu „-child” atașat. De exemplu: „awesome-child” dacă creați o temă copil din tema Awesome.

Trebuie să creați o foaie de stil în folderul cu tema copilului, chiar dacă nu intenționați să editați CSS. Creați un fișier nou numit style.css și inserați următorul cod:

 /*
Numele temei: Copil minunat
URI temei: http://example.com/awesome-child/
Descriere: Temă minunată pentru copii
Autor: Graph Paper Press
URI autor: http://example.com
Șablon: Minunat
Versiune: 1.0.0
Etichete: lumină, întuneric, responsive-layout, accesibilitate-gata
Domeniu text: minunat-copil
*/

@import url("../awesome/style.css");

/* =Personalizarea temei începe aici
-------------------------------------------------- ------------ */

Schimbați numele temei și alte detalii după caz.

Pentru a adăuga funcționalitatea de a schimba imaginea prezentată în tema copilului, va trebui să creați un nou fișier functions.php , așa că mergeți mai departe și faceți acest lucru în directorul temei copil. Acest fișier va fi încărcat în plus față de funcțiile temei părinte.php .

Șablonul pentru functions.php arată astfel:

 <?php //Deschiderea etichetei PHP

// funcții

?> // Închiderea etichetei PHP

Puteți adăuga apoi codul de redimensionare a imaginii între etichetele PHP, astfel încât veți ajunge la ceva de genul acesta:

 <?php // Deschiderea etichetei PHP

dacă ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-miniaturi');
set_post_thumbnail_size( 150, 150, true ); // Dimensiunile implicite ale postării miniaturii (decupate)

// dimensiuni suplimentare ale imaginii
// ștergeți următoarea linie dacă nu aveți nevoie de dimensiuni suplimentare de imagine
add_image_size('category-thumb', 300, 9999); //300 pixeli lățime (și înălțime nelimitată)
}

?> // Închiderea etichetei PHP

După ce ați terminat de creat codul temei pentru copil, va trebui să îl activați. Puteți face acest lucru prin intermediul tabloului de bord al site-ului, sub Panouri de administrare > Aspect > Teme . Găsiți tema copilului în listă și faceți clic pe Activare.

Admirați noile imagini prezentate redimensionate

Schimbarea dimensiunii imaginilor prezentate și adăugarea de noi dimensiuni ale imaginilor este o sarcină destul de simplă, dar necesită o anumită editare a codului. Din acest motiv, unii utilizatori preferă să folosească un plugin pentru a gestiona redimensionarea imaginii, dar adăugarea de pluginuri suplimentare reprezintă întotdeauna un risc de securitate. Trecerea sub capotă și efectuarea unor modificări simple la codul de acest fel vă poate ajuta cu adevărat să vă construiți încrederea în utilizarea WordPress și vă va face mai ușor să personalizați temele și să le faceți propriile dvs.