Cum să stilați imaginile pe site-ul dvs. WordPress cu CSS

Sunt sigur că ai deja o idee despre cât de importante sunt imaginile pentru succesul site-ului tău.

Dar când vine vorba de creșterea angajamentului (și, în cele din urmă, rezultatul final), nu este vorba doar de includerea imaginilor pe site-ul dvs., ci este vorba despre imaginile pe care le includeți și cum le prezentați.

În această postare vreau să abordez o piesă importantă a acestui puzzle: prezentarea.

WordPress vine pre-ambalat cu mijloace simple de stilare a imaginilor cu CSS. Aveți puterea de a crea efecte diferite pentru diferitele clase CSS pe care WordPress le atribuie automat imaginilor de pe site-ul dvs. (Dacă se pare că am început să vorbesc într-o limbă străină, nu vă faceți griji, voi explica totul în detaliu mai târziu în articol.)

Voi începe prin a explora motivele pentru care imaginile sunt atât de importante pentru site-ul dvs., apoi voi trece la acoperirea claselor CSS implicite pe care WordPress le aplică imaginilor și, în sfârșit, voi demonstra cum puteți utiliza CSS pentru a aplica stiluri personalizate imaginilor dvs. .

• De ce imaginile sunt atât de importante pentru site-uri web
• Un curs intensiv CSS WordPress
• Cum să adăugați CSS personalizat la WordPress
• Clasele de imagini CSS implicite WordPress
• Stilizare simplă a imaginii cu WordPress
• Mai multe exemple de ceea ce puteți face cu CSS imagine în WordPress
• Dar stilurile existente?
• Cerul este limita

De ce imaginile sunt atât de importante pentru site-uri web

Ce modalitate mai bună de a explica cât de benefice sunt imaginile pentru bloguri decât demonstrându-l cu o imagine?

Lucrurile devin și mai interesante când treceți la biologia modului în care procesăm informațiile. Luați în considerare, de exemplu, că 90% din informațiile transmise creierului sunt vizuale, iar 40% dintre oameni răspund mai bine la informațiile vizuale decât la textul simplu (sursa: Zabisco).

Dar să fim sinceri: nu trebuie să vă arunc statistici pentru a-mi spune punctul. Știți din propriile obiceiuri că site-urile web și blogurile atractive din punct de vedere vizual sunt mult mai probabil să vă atragă atenția decât o masă de text. Imaginile adaugă culoare, atracție și intrigi. Ei declanșează o grămadă de reacții în creierul nostru chiar înainte de a avea ocazia să începem să citim.

Mai simplu spus, dacă nu includeți imagini convingătoare și relevante în postările de pe blog, nu sunteți nici pe departe aproape de a profita la maximum de conținutul dvs. A depune eforturi suplimentare atunci când vine vorba de a include imagini în postările de pe blog și de a le prezenta bine poate face toată diferența în ceea ce privește implicarea, traficul și vânzările.

Un curs intensiv CSS WordPress

Dezvoltatorii de bază WordPress sunt prea conștienți de importanța imaginilor pentru site-uri web, motiv pentru care le oferă dezvoltatorilor de teme (și modificatorilor de teme) o mare putere și flexibilitate în determinarea modului în care sunt prezentate imaginile.

Această putere și flexibilitate sunt oferite sub forma unui număr de clase CSS. Dar înainte de a merge mai departe, să ne acordăm un moment pentru a vă oferi o înțelegere a ce este CSS și cum îl puteți utiliza.

CSS înseamnă Cascading Style Sheets: un limbaj de marcare care este folosit pentru a determina cum arată paginile web. CSS este combinat cu HTML (Hyper Text Markup Language), care este limbajul de marcare folosit pentru a defini structura semantică a unui site web. Dacă acest lucru nu are prea mult sens pentru dvs., nu vă transpirați - sunt mai multe informații suplimentare decât este necesar.

CSS este un limbaj simplu, odată ce-l înțelegi. În ceea ce privește posibilitatea de a modifica aspectul și plasarea imaginilor, veți putea prelua și lucra cu codul pe care îl includ în acest articol cu ​​relativă ușurință.

Iată un exemplu de fragment de cod CSS referitor la aspectul unui anumit tip de imagine în WordPress:

 .alignright {
	chenar: 1px solid #c5c5c5;
	plutire: dreapta;
	marjă: 0 0 10px 10px;
	umplutură: 3px;
}

Textul .alignright este o clasă CSS (identificabilă ca o clasă prin punctul care precede numele). În acest caz, .alignright este o clasă pe care WordPress o atribuie oricărei imagini care este selectată în backend-ul WordPress pentru a fi aliniată la dreapta conținutului:

Diverse declarații (cum ar fi border și padding ) pot fi aplicate unei clase CSS, care sunt în cele din urmă aplicate oricărui element HTML căruia i-a fost alocată clasa în cauză.

În exemplul de mai sus, orice imagine din WordPress care a fost aliniată la dreapta (prin editorul de text) va avea clasa .alignright atribuită și astfel va moșteni stilul aplicat acelei clase. Imaginea va „pluti” la dreapta, va avea o mică marjă pentru a împiedica trecerea textului în ea, un chenar gri în jurul ei și o mică umplutură pentru a separa chenarul de marginea imaginii.

Toate acestea vor avea mult mai mult sens cu o reprezentare vizuală:

Există o mulțime de mai multe declarații care pot fi adăugate la o clasă CSS; ne vom distra puțin cu ei în curând.

Cum să adăugați CSS personalizat la WordPress

Temele WordPress vin cu propriile „fișe de stil” CSS, care sunt fișiere umplute cu marcaj CSS, ca în exemplul de mai sus. Deși există multe modalități de a adăuga propriul dvs. CSS personalizat pe site-ul dvs. web, editarea foii de stil CSS a unei teme existente nu este calea de urmat. Munca ta grea ar putea fi suprascrisă data viitoare când tema este actualizată.

Cea mai curată și mai sigură metodă este să vă creați propria „temă copil” WordPress simplă cu propria sa foaie de stil CSS. Foaia de stil CSS din directorul temei dumneavoastră copil va înlocui orice stil care se potrivește din foaia de stil a temei „părinte”.

Crearea unei teme pentru copii poate părea un exercițiu oarecum descurajantă, dar este destul de ușoară dacă sunteți familiarizat cu FTP. Dacă doriți să mergeți pe acest drum, consultați tutorialul despre WordPress Codex.

Dacă cauți ceva mai simplu, am două sugestii de plugin:

1. Modulul CSS personalizat din Jetpack: Ideal dacă utilizați deja Jetpack pe site-ul dvs.
2. CSS personalizat simplu: dacă nu utilizați deja Jetpack (și nu aveți nevoie de funcționalitatea sa variată), aceasta este o opțiune mai ușoară.

Indiferent de opțiunea pe care o alegeți, adăugarea CSS personalizate la WordPress va fi la fel de simplă ca și editarea fișierului CSS personalizat care a fost generat (de dvs. sau de unul dintre pluginuri).

Clasele de imagini CSS implicite WordPress

Cu toate acestea, să trecem la lucrurile suculente: clasele CSS de imagine implicite ale WordPress.

Există patru clase implicite pe care le puteți folosi pentru a schimba aspectul imaginilor în WordPress:

• .aligncenter
• .alignleft
• .alignright
• .alignnone

Sunt sigur că vă puteți da seama ce tipuri de imagini sunt alocate acestor clase.

Fiecare imagine pe care o adăugați pe site-ul dvs. prin intermediul editorului de text TinyMCE pe ecranele de postare/pagină va avea una dintre aceste clase atribuită acesteia, ceea ce înseamnă că aveți puterea de a stila toate aceste imagini după cum credeți de cuviință.

Pentru a stila un anumit tip de imagine, tot ce trebuie să faceți este să urmați formatul pe care l-ați văzut deja în exemplul de mai sus:

 .numele clasei {
	Valoarea proprietății;
	Valoarea proprietății;
	Valoarea proprietății;
}

Important: Când o imagine are o legendă, WordPress atribuie una dintre clasele de mai sus unui div care înconjoară imaginea, mai degrabă decât imaginea în sine. Abordarea acestei probleme particulare nu face obiectul acestei postări, dar este ceva de avut în vedere în timp ce experimentați. Vă recomand să testați efectele alese cu imagini subtitrate pentru a vedea cum arată lucrurile.

Acestea fiind spuse, să trecem la partea distractivă: stilizarea imaginilor!

Stilizare simplă a imaginii cu WordPress

Când vine vorba de adăugarea de efecte stilistice simple la imaginile dvs. în WordPress, există cinci proprietăți CSS comune:

1. background
2. border
3. float
4. margin
5. padding

Pentru a obține o înțelegere completă a modului în care aceste proprietăți afectează aspectul unei imagini (sau mai precis, aspectul „cadrului” în care este plasată imaginea), trebuie să luăm în considerare „modelul cutiei” CSS:

Când vine vorba de stilarea imaginilor, imaginea în sine este „conținutul”. Acea imagine este apoi înconjurată de umplutură, margini și margini; toate pe care le puteți defini. Imaginile pot fi, de asemenea, „plutitoare”, ceea ce în sensul acestui tutorial înseamnă pur și simplu aliniate. Opțiunile dvs. de „float” sunt stânga, dreapta și niciunul. (Centrarea unei imagini este puțin mai complicată; vom aborda asta în curând.)

Să luăm în considerare un exemplu simplu pentru a demonstra cum pot fi utilizate aceste proprietăți. În primul rând, iată o imagine cu clasa .alignright atribuită acesteia, fără nici un marcaj CSS:

Acum să adăugăm niște markup CSS simplu:

 .alignright {
	fundal: gri;
	chenar: 3px negru solid;
	plutire: dreapta;
	marja: 10px;
	umplutură: 3px;
}

Iată efectul final:

Probabil că puteți descifra ceea ce am făcut aici. Imaginea a fost acum „plutită” (adică aliniată) la dreapta, astfel încât textul să se înfășoare în jurul ei. Am adăugat un pic de umplutură, care a primit un fundal gri. Am aplicat un chenar negru gros care apare în jurul căptușelii. În cele din urmă, o marjă de 10 px creează un spațiu între imagine și text.

Există multe lucruri pe care le puteți face doar cu cele cinci selectoare de mai sus. Dacă doriți să le explorați mai departe, iată o resursă cuprinzătoare pentru fiecare:

• background
• border
• float
• margin
• padding

Am promis o soluție și pentru centrarea imaginilor. Din motive care depășesc domeniul de aplicare al acestui tutorial, CSS nu vă permite pur și simplu să utilizați float: center; (adică valoarea nu există). În schimb, trebuie să definiți imaginea ca element de bloc , aplicați margin: 0 auto; și definiți o lățime pentru imagine. Puteți citi mai multe despre această tehnică aici. (Voi oferi, de asemenea, un exemplu de marcaj folosit pentru a crea o imagine centrată mai jos.)

Mai multe exemple de ceea ce puteți face cu CSS imagine în WordPress

Acum aveți o mai bună înțelegere a celor mai comune proprietăți CSS pe care le puteți utiliza, iată câteva exemple pentru a vă inspira.

Să începem cu niște umplutură și un fundal gri pentru a oferi imaginilor noastre un cadru:

 .alinia la stânga {
	fundal: #dbdbdb;
	plutește la stânga;
	marjă: 0 10px 5px 0;
	umplutură: 5px;
}

Acest marcaj are ca rezultat:

Să explorăm ce s-a întâmplat aici:

• Am folosit o culoare HTML hex pentru fundal. Aceste coduri de culoare vă oferă o flexibilitate practic nelimitată în alegerea culorilor pentru site-ul dvs. web.
• Deoarece imaginea pe care am folosit-o este un PNG transparent, culoarea de background a umplut tot spațiul disponibil neutilizat în fișierul imagine.
• Am folosit patru valori în proprietatea margin pentru a seta marje diferite pentru fiecare parte a imaginii.

Să încercăm altceva. În loc să dăm imaginilor noastre o culoare de fundal, să le setăm într-un chenar simplu pentru a le delimita de conținut. Iată marcajul:

 .alignright {
	chenar: 1px solid #000099;
	plutire: dreapta;
	marjă: 0 0 10px 10px;
	umplutură: 3px;
}

După cum puteți vedea, ne-am jucat cu valorile proprietăților margin pentru a ține cont de alinierea imaginii, am redus umplutura și am adăugat un chenar solid de 1 px. Iată rezultatul final:

În cele din urmă, să creăm o imagine centrată și să îi dăm un chenar gri gros. Iată marcajul:

 .Aliniere la centru {
	chenar: 5px solid #dbdbdb;
	afisare: bloc;
	marja: 0 auto;
	latime: 300px;
}

Și rezultatul final:

După cum puteți vedea, este posibil să schimbați complet plasarea și aspectul unei imagini în WordPress folosind numai CSS.

În realitate, noi doar am zgâriat suprafața aici; poti face mult mai mult. (Dacă sunteți interesat să descoperiți mai multe, am furnizat câteva resurse utile pentru învățare ulterioară mai jos.)

Dar stilurile existente?

Dacă utilizați o temă WordPress de orice calitate reală, dezvoltatorul va fi adăugat deja stiluri la fiecare dintre clasele implicite de imagini WordPress. Cel puțin, ea va fi aliniat fiecare clasă de imagini în mod corespunzător.

Dincolo de asta, alegerile ei vor fi fost în întregime subiective, iar acum aveți puterea de a trece peste efectele lor de styling. Orice marcaj CSS pe care îl introduceți – fie pe foaia de stil a temei copilului, fie prin intermediul unui plugin – va avea prioritate față de CSS implicit al temei. Ești în control.

Cerul este limita

Citind acest articol, sper că sunteți inspirat să experimentați cu propriile stiluri CSS personalizate. Nu am vrut să aprofundez prea mult în selectoare mai avansate în acest tutorial, dar puteți face mult mai multe cu CSS decât am descris aici.

Dacă doriți să explorați efecte mai avansate (cum ar fi umbrele, rotunjirea și rotația), există un număr mare de resurse online gratuite care vă pot învăța mai multe despre CSS. Recomandările mele personale sunt:

• Rețeaua de dezvoltatori Mozilla: iubit în rândul comunității de dezvoltatori web.
• Școli W3: Urât de mulți dezvoltatori web „serioși”, dar nu se poate respinge profunzimea și amploarea informațiilor. Rețineți că este posibil să nu fie întotdeauna 100% corect și/sau actualizat.
• WordPress Codex: Aflați mai multe despre cum WordPress și CSS vin împreună.

Dacă aveți întrebări, vă rugăm să nu ezitați să trageți în secțiunea de comentarii de mai jos!

Credit foto: Simon Pow, PicJumbo.

• CSS
• imagini