Adăugarea pictogramelor Social Media la WordPress cu Sprites CSS

Deși există multe plugin-uri care vă pot ajuta să adăugați pictograme de rețele sociale pe site-ul dvs., nu toate sunt create egale. Unele dintre ele ar putea fi o scurgere pentru serverul dvs., ca să nu mai vorbim și mai puțin personalizabile.

Din fericire, există o alternativă care vă poate ajuta să vă mențineți site-ul rapid: sprite-urile CSS.

De obicei, imagini separate sunt adăugate la un site pentru fiecare link de social media. Deși aceasta ar fi considerată codare de sunet, înseamnă solicitări suplimentare de server pentru fiecare imagine atunci când un vizitator încarcă pagina. Și, desigur, cu cât mai multe solicitări de server are o pagină, cu atât timpul de încărcare este mai lung.

Frumusețea sprite-urilor CSS constă în faptul că pot conține toate imaginile pentru pictogramele tale de rețele sociale, în timp ce cartografiază în mod corespunzător toate linkurile corespunzătoare. Acest lucru se traduce prin mai puține solicitări de server, economisind lățime de bandă și încărcare rapidă a paginilor. O situație câștig-câștig!

În acest tutorial, vă voi arăta cum să utilizați CSS pentru a vă crea propriile pictograme de rețele sociale complet personalizabile pentru site-ul dvs. WordPress, inclusiv cod pentru a vă economisi ceva timp și pentru a face acest proiect mai ușor de finalizat.

Continuați să citiți sau treceți înainte folosind aceste link-uri:

• Crearea imaginii dvs
• Adăugarea linkurilor și imaginii pe site-ul dvs
• Adăugați pictogramele și stilurile dvs

Crearea imaginii dvs

Primul pas pentru a vă crea propriul sprite CSS este să creați o imagine cu pictogramele rețelelor sociale pe care doriți să le utilizați. Ar trebui să aibă două straturi strânse stivuite:

• Strat superior – Pictogramele care vor fi vizibile pe pagină
• Strat de jos – Pictogramele care vor fi vizibile la trecerea mouse-ului

Iată un exemplu despre cum ar trebui să arate pictogramele dvs.:

Rețineți că nu am folosit un fundal transparent pentru această imagine pentru a le afișa clar pentru acest tutorial. În mod ideal, fundalul imaginii dvs. ar trebui să fie transparent, astfel încât să puteți utiliza pictogramele chiar dacă schimbați stilurile temei și culoarea de fundal.

De asemenea, nu trebuie să adăugați spațiu între fiecare imagine, deoarece poate fi adăugată cu CSS mai târziu. Depinde complet de tine.

În acest exemplu, pictogramele vor apărea gri pe site, dar când mouse-ul trece peste el, vor fi afișate versiunile colorate ale acestora.

Odată ce ați creat propriul set de pictograme pentru rețelele sociale, sunteți gata să treceți la pasul următor.

Va trebui să cunoașteți lățimea și înălțimea fiecărui simbol în pixeli înainte de a continua, așa că asigurați-vă că notați-l. Un program de editare a imaginilor vă poate ajuta să identificați această informație.

Adăugarea linkurilor și imaginii pe site-ul dvs

Încărcați imaginea pe site-ul dvs. și notați locul în care se află imaginea, astfel încât să o puteți apela în codul dvs. mai târziu.

Apoi, trebuie să adăugați linkurile de rețele sociale pe site-ul dvs. pentru ca aceste pictograme să-și facă treaba. Puteți face acest lucru cu HTML:

Aceasta este structura de bază de care veți avea nevoie pentru link-urile dvs. Adăugați numele real al site-ului la care doriți să vă conectați prin înlocuirea instanțelor de socialSite și Name of Social Media Site din exemplul de mai sus. De asemenea, asigurați-vă că înlocuiți și adresa URL.

Repetați rândul doi din codul de mai sus pentru fiecare pictogramă din linia de sus a imaginii pe care ați creat-o, înlocuind textul fals pe parcurs. De asemenea, puteți alege să schimbați numele div id -ului cu ceva mai potrivit pentru nevoile dvs.

Cel mai bun loc pentru a pune acest cod este direct în fișierele temei dvs., unde doriți să apară pictogramele. De exemplu, puteți adăuga link-uri către fișierele dvs. sidebar.php , footer.php , header.php sau șablon de pagină.

Nici nu fi timid. Simțiți-vă liber să adăugați text de antet cu un titlu descriptiv sau orice alt cod dorit. Nu uitați să salvați când ați terminat.

Când ați terminat, nu veți vedea nicio diferență pentru site-ul dvs., dar este în regulă, deoarece vom adăuga imaginile în continuare. Vă puteți face griji pentru stil, umplutură și spațiere și mai târziu.

Am adăugat titluri la linkurile de pe site-ul meu de testare pentru a vă arăta unde ar fi altfel linkurile.

Adăugați pictogramele și stilurile dvs

Este timpul să adăugați pictogramele dvs. cu CSS. Puteți adăuga codul în fișierul style.css al temei sau printr-un plugin CSS personalizat, dacă doriți.

Iată codul pe care trebuie să-l adaugi:

Înlocuiți clasele cu propriile dvs., împreună cu căile de imagine. Hashtag-urile pot fi înlocuite cu valorile corecte în funcție de fișierul dvs., dar nu modificați zerourile - trebuie să rămână intacte pentru ca pictogramele să se afișeze corect.

De asemenea, puteți copia și lipi clasa socialSiteTwo pentru fiecare pictogramă suplimentară de socializare pe care doriți să o adăugați. De asemenea, puteți modifica poziția, marginea, umplutura și partea superioară pentru a se potrivi nevoilor dvs. specifice de stil.

Iată o detaliere a acestui exemplu CSS pentru referire rapidă:

• #social a.social {height:#px;} – Înlocuiește hashtag-ul cu înălțimea fiecărei pictograme și nu cu înălțimea totală a imaginii.
• #social a.socialSiteOne {left:0px;} – Aici începe primul simbol din partea stângă a imaginii.
• #social a.socialSiteOne {width:#px;} – Aceasta este lățimea primei pictograme de rețele sociale. Acest număr ar trebui să fie același pentru toate celelalte pictograme.
• #social a.socialSiteOne {background:url('your-image.png') 0 0;} – Imaginea este apelată și poziția este setată la zero pixeli atât pentru pozițiile din stânga, cât și de sus.
• #social a.socialSiteTwo {left:#px;} – Înlocuiți hashtag-ul cu valoarea pixelului poziției în care începe a doua pictogramă din imagine. Dacă prima pictogramă are o lățime de 50 de pixeli, atunci această valoare ar fi de 51 de pixeli.
• #social a.socialSiteTwo {background:url('your-image.png') -#px 0;} – Înlocuiește hashtag-ul cu numărul de pixeli în care al doilea simbol începe să conteze din extrema stângă a imaginii.

Dacă ați inclus spațiere între pictogramele din imaginea pe care ați creat-o, selectoarele de poziție din stânga și de fundal vor fi aceleași. Dacă nu ați adăugat spațiere inițial, selectoarele din stânga ar trebui să fie mai mari decât selectoarele de poziție de fundal, deoarece va trebui să țineți cont de spațierea adăugată pe care doriți să o adăugați în pixeli.

Acum puteți adăuga imaginile care vor fi afișate la hover. Puteți adăuga următorul cod sub exemplul de mai sus, așa cum am făcut aici, de dragul simplității, sau le puteți amesteca:

Înlocuiți hashtag-urile cu valoarea corectă, așa cum am făcut în exemplul anterior. Prima valoare este numărul de pixeli pe care pictograma este poziționată din stânga, iar al doilea număr contează de sus.

După ce ați terminat, salvați fișierul și vizualizați rezultatele.

Concluzie

Poate fi necesar să faceți câteva modificări suplimentare ale foii de stil CSS pentru a obține aspectul dorit, dar ați început excelent cu codul prezentat aici.

Dacă doriți să aflați mai multe despre CSS pentru a vă ajuta să vă stilați pictogramele, consultați una dintre postările noastre De la începător la profesionist cu WordPress: peste 200 de resurse pentru stimularea carierei și peste 35 de resurse pentru a deveni un dezvoltator WordPress Kick Ass.

Dacă sunteți interesat să vă îmbunătățiți partajarea socială a site-ului sau a rețelei, consultați câteva dintre celelalte postări ale noastre: Creșteți-vă cotele cu aceste 5 pluginuri gratuite pentru rețelele de socializare WordPress, 50 de cele mai bune plugin-uri pentru rețelele de socializare WordPress (2020).

Nota editorului: Această postare a fost actualizată pentru acuratețe și relevanță.
[Publicat inițial: mai 2015 / Revizuit: aprilie 2022]

• CSS
• social media