Cum să schimbi culoarea linkului în WordPress (Ghid pentru începători)

„Cum schimb culoarea linkului în WordPress?” Aceasta este o întrebare pe care o auzim în mod regulat de la cititorii noștri WPBeginner.

Deși ar putea părea un detaliu minor, culorile linkurilor joacă un rol important în utilizabilitatea și ratele de conversie ale site-ului dvs. web. Acesta este motivul pentru care folosim culoarea portocalie pentru linkuri la WPBeginner.

Vestea bună este că schimbarea culorilor linkurilor în WordPress a devenit mult mai ușoară decât era înainte. Nu aveți nevoie să fiți un expert CSS sau să angajați un dezvoltator – există acum soluții simple pe care oricine le poate folosi, indiferent de abilitățile lor tehnice.

În acest ghid, vă vom prezenta pașii exacți pentru a vă schimba culorile linkurilor în WordPress.

De ce să schimbi culoarea linkurilor în WordPress?

Principalele motive pentru a schimba culorile linkurilor în WordPress sunt potrivirea cu identitatea brandului tău și îmbunătățirea lizibilității conținutului tău. Prin personalizarea acestor culori, ghidezi atenția vizitatorilor către cele mai importante părți ale paginii tale.

Iată câteva beneficii specifice ale personalizării culorilor linkurilor dvs.:

• Accesibilitate îmbunătățită: Utilizarea unui contrast de culori suficient face linkurile mai ușor de citit și de identificat, în special pentru vizitatorii cu deficiențe de vedere. Ca regulă generală, ghidurile WCAG recomandă un raport de contrast de cel puțin 4,5:1 pentru textul de dimensiuni normale. Înainte de a alege o nouă culoare pentru linkuri, o puteți testa cu WebAIM Contrast Checker pentru a vă asigura că rămâne ușor de citit.
• Consistență a brandului: Poți alinia linkurile tale cu logo-ul și schema generală de culori pentru un aspect profesional.
• Rate de clic mai mari: Utilizarea unei culori distincte pentru linkuri (cum ar fi butoanele sau apelurile la acțiune) încurajează vizitatorii să dea clic, crescând conversiile.

Acestea fiind spuse, să vedem cum să schimbăm culoarea linkurilor pe site-ul dvs. WordPress. Pur și simplu utilizați linkurile rapide de mai jos pentru a sări direct la metoda preferată:

Cum să schimbați culoarea linkului în temele clasice WordPress

Unele teme clasice WordPress includ setări încorporate pentru schimbarea culorilor linkurilor. Pentru a verifica, accesați Aspect » Personalizare și căutați o secțiune numită Culori, Tipografie sau ceva similar.

Teme populare precum Astra, GeneratePress și OceanWP includ adesea controale pentru culoarea linkurilor în aceste setări.

Dacă nu vedeți o opțiune dedicată „Culoarea linkului”, căutați „Culoarea de accent” sau „Culoarea principală”, deoarece aceste setări controlează frecvent culorile linkurilor pe întregul site web.

De exemplu, în tema Sydney, aceste opțiuni sunt localizate în secțiunea „Culori”.

Apoi, găsiți o setare care vă permite să schimbați culorile linkurilor.

Sydney face această operațiune simplă cu opțiuni de „Culoare link” atât pentru stările implicite, cât și pentru cele la hover.

Culoarea la hover pentru link este cea care apare atunci când un vizitator își plasează mouse-ul peste un link, deci este o modalitate excelentă de a le atrage atenția și de a îmbunătăți rata de clic.

Apoi puteți face clic pe „Publicare” pentru a salva modificările.

Rețineți că unele teme nu au setări directe pentru culoarea linkurilor. În schimb, culoarea linkului poate fi legată global de culorile primare sau secundare ale temei dvs.

Dacă tema ta nu oferă personalizarea directă a culorii linkurilor, nu-ți face griji! Poți merge la a patra metodă, unde îți vom arăta cum să-ți schimbi culoarea linkului folosind cod.

Cum să schimbați culoarea linkurilor în temele bloc WordPress

Dacă folosești o temă bloc, atunci va trebui să folosești editorul complet al site-ului pentru a personaliza culorile linkurilor tale.

Accesați Aspect » Editor din tabloul de bord WordPress.

Veți vedea toate meniurile pentru a personaliza aspectul site-ului dvs.

Aici, faceți clic pe „Stiluri”.

Vei vedea stilurile implicite ale temei tale afișate.

Caută și apasă pe butonul de editare cu creionul pentru a începe personalizarea.

Editorul pentru întregul site se va deschide cu o bară laterală pentru editarea stilurilor temei tale.

Faceți clic pe „Culori” în această bară laterală pentru a accesa opțiunile de personalizare a culorilor.

Găsește opțiunea Link și apasă pe ea pentru a afișa setările de culoare atât pentru stările implicite, cât și pentru cele la hover. Ar trebui să alegi o culoare care se potrivește cu designul site-ului tău.

Cu toate acestea, este, de asemenea, important să vă asigurați că există un contrast ridicat între fundal și culoarea linkului. Conform ghidurilor WCAG 2.1, linkurile text ar trebui să aibă un raport de contrast de cel puțin 4,5:1 față de fundal.

Puteți testa alegerile de culori folosind instrumente gratuite precum WebAIM’s Contrast Checker pentru a vă asigura că linkurile dvs. sunt lizibile pentru vizitatorii cu deficiențe de vedere. 

Odată ce sunteți mulțumit de modificările dvs., pur și simplu faceți clic pe „Salvare” pentru a le face live pe site-ul dvs.

Cum să schimbați culorile individuale ale linkurilor în editorul pe blocuri

Uneori, s-ar putea să vrei să schimbi culoarea linkurilor individuale. De exemplu, s-ar putea să vrei să atragi atenția vizitatorului către apelul la acțiune de pe o pagină de destinație.

Pentru a face acest lucru, pur și simplu evidențiați linkul specific pe care doriți să îl personalizați.

Apoi, faceți clic pe pictograma săgeată din bara de instrumente și selectați „Evidențiere” din meniul derulant.

Apoi, faceți clic pe fila „Text”. Acum puteți selecta culoarea pentru acel link specific.

După ce ați terminat, selectați culoarea pe care doriți să o utilizați.

Pentru a personaliza mai multe linkuri, pur și simplu repetați acești pași.

Când ești mulțumit de cum arată linkurile, apasă pe „Salvează” pentru a face modificările tale publice.

Cum să schimbați culoarea linkurilor în WordPress cu cod (toate temele)

Dacă tema ta nu oferă opțiunea de a-ți schimba culoarea linkului, atunci cea mai ușoară metodă este să aduagi CSS personalizat pe site-ul tău WordPress.

Adesea, veți găsi fragmente de cod în tutorialele WordPress cu instrucțiuni de a le adăuga în fișierul functions.php al temei dvs.

Cea mai mare problemă este că chiar și o mică greșeală în fragmentul de cod personalizat poate defecta site-ul dvs. WordPress și îl poate face inaccesibil. De asemenea, veți pierde toate personalizările dvs. data viitoare când actualizați tema WordPress.

Aici intervine WPCode. Cu peste 3 milioane de instalări, este conceput special pentru începătorii în WordPress care au nevoie să adauge cod personalizat fără a atinge fișierele temei.

Acest lucru elimină riscul de a vă strica site-ul cu o singură greșeală de scriere sau de a pierde personalizările în timpul actualizărilor temei.

După testări amănunțite, am ajuns la concluzia că este cea mai sigură și mai ușoară metodă de a adăuga cod personalizat pe site-ul tău. Pentru detalii, vezi recenzia noastră despre WPCode.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul gratuit WPCode. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, accesați Fragmente de cod » Adăugare fragment.

Aici, pur și simplu plasați cursorul mouse-ului peste „Add Your Custom Code (New Snippet)”.

Apoi, faceți clic pe butonul „+ Adaugă fragment personalizat” atunci când apare.

Apoi, trebuie să selectați „Fragment de cod CSS” ca tip de cod din lista de opțiuni afișate pe ecran.

După aceea, introduceți un titlu pentru fragmentul de cod personalizat. Acesta poate fi orice ajută la identificarea fragmentului în tabloul de bord WordPress.

Acum puteți adăuga un fragment CSS personalizat în caseta de cod. Să analizăm câteva dintre diferitele fragmente pe care le puteți utiliza.

Schimbă culoarea linkurilor pe întregul site WordPress

Pentru început, s-ar putea să doriți să personalizați culoarea generală a linkurilor. Aceasta este culoarea pe care vizitatorii o vor vedea înainte de a face clic pe un link.

Pentru a schimba culoarea linkului în întregul conținut al site-ului dvs. web, utilizați acest fragment de cod CSS:

a {
     color: #FFA500;
}

Notă: Acest cod CSS modifică culoarea linkurilor pentru întregul dvs. site web. Aceasta include meniurile de navigare, butoanele și linkurile din subsol.

În exemplul de mai sus, codul hex # va schimba culoarea linkului în portocaliu, deci va trebui să schimbați #FFA500 cu culoarea pe care doriți să o utilizați.

Dacă nu sunteți sigur ce cod hexazecimal să utilizați, puteți explora diferite culori și puteți obține codurile lor pe site-ul HTML Color Codes. Alternativ, puteți utiliza un instrument online gratuit precum selectorul de culori Google pentru a găsi nuanța perfectă.

Când sunteți mulțumit de cum arată codul dvs., faceți clic pe comutatorul „Inactiv” pentru ca acesta să afișeze „Activ” în schimb. În final, faceți clic pe „Salvare fragment” pentru a face fragmentul CSS live.

Acum, dacă vizitați site-ul dumneavoastră WordPress, veți vedea noua culoare a linkului în acțiune.

Schimbarea culorii linkului la trecerea cu mouse-ul în WordPress

Pentru a schimba culoarea de hover a linkului, pur și simplu lipiți următorul fragment în editorul WPCode:

a:hover {
     color: #FF0000;
     text-decoration: underline;
}

Codul de mai sus va schimba culoarea linkului în roșu și va sublinia textul atunci când vizitatorii trec cu mouse-ul peste el. Ca și înainte, puteți schimba codul hexazecimal #FF0000 cu orice culoare doriți să utilizați.

Când sunteți gata să publicați, puteți publica fragmentul de cod urmând același proces descris mai sus.

Schimbarea culorii linkului după vizitare în WordPress

Apoi, s-ar putea să vrei să schimbi culoarea linkului după ce un utilizator a făcut clic pe link. Acest lucru poate ajuta vizitatorii să se orienteze pe blogul tău WordPress, arătându-le ce linkuri au deja accesate.

Puteți utiliza codul CSS de mai jos pentru a schimba culoarea linkurilor vizitate:

a:visited {
     color: #0000FF;
}

Ca întotdeauna, asigurați-vă că schimbați codul hexazecimal albastru #0000FF cu culoarea pe care doriți să o utilizați în linkurile dvs.

După ce ați terminat, faceți clic pe comutatorul „Inactiv” pentru ca acesta să se schimbe în „Activ”. Apoi, pur și simplu faceți clic pe „Salvare fragment” pentru a face codul activ pe site-ul, blogul sau magazinul dvs. online.

Schimbarea culorilor linkurilor pentru pagini specifice în WordPress

Dacă doriți să schimbați culorile linkurilor doar pe pagini specifice (de exemplu, o pagină de destinație sau o pagină de contact), puteți utiliza selectoare CSS specifice paginii.

Fiecare pagină WordPress are o clasă body unică precum .page-id-123. Puteți viza linkurile de pe acea pagină specifică utilizând acest CSS:

.page-id-123 .entry-content a {
     color: #FF6600;
}

Înlocuiește 123 cu ID-ul real al paginii tale (îl poți găsi în URL-ul editorului de pagini).

Alternativ, dacă folosești WPCode Pro, poți utiliza funcția de logică condițională pentru a aplica fragmente CSS doar pe pagini specifice, fără a avea nevoie de selectoare personalizate.

Care este cea mai bună culoare pentru linkurile de pe un site web?

Cea mai bună culoare pentru linkuri depinde de brandul tău și de designul site-ului web, dar există cele mai bune practici dovedite de urmat:

• Albastrul este standardul: Majoritatea utilizatorilor se așteaptă ca linkurile să fie albastre (#0000FF sau nuanțe similare), deoarece aceasta este convenția implicită pe web. Linkurile albastre sunt recunoscute instantaneu.
• Contrastul ridicat este esențial: Culoarea linkului tău ar trebui să aibă un raport de contrast de cel puțin 4,5:1 față de fundal pentru accesibilitate (conformitate WCAG AA).
• Evită roșu și verde: Aceste culori pot fi dificil de distins pentru utilizatorii cu daltonism (afectând aproximativ 8% dintre bărbați și 0,5% dintre femei).
• Folosește subliniere: Sublinierea linkurilor (în special la hover) ajută utilizatorii cu deficiențe vizuale și îmbunătățește utilizabilitatea generală.
• Potrivește-ți brandul: Dacă brandul tău folosește o paletă de culori specifică, alege o culoare pentru linkuri care se potrivește, menținând în același timp un contrast suficient.

La WPBeginner, folosim portocaliu (#FFA500) pentru linkuri, deoarece se potrivește brandului nostru și iese clar în evidență pe fundalul nostru alb.

Tutorial video

Dacă nu vă plac instrucțiunile scrise, puteți viziona tutorialul nostru video în schimb:

Întrebări frecvente despre schimbarea culorii linkurilor în WordPress

Iată câteva întrebări pe care cititorii noștri le-au adresat frecvent cu privire la schimbarea culorilor linkurilor pe site-ul lor:

Pot schimba culoarea unui hyperlink?

Da, majoritatea temelor WordPress vă permit să schimbați culorile hyperlinkurilor la nivel global prin setările de Aspect sau Editorul de site. De asemenea, puteți schimba culoarea linkurilor individuale direct în editorul de postări, evidențiind linkul și selectând o culoare din bara de instrumente.

Cum personalizez un link în WordPress?

Puteți personaliza un link selectându-l în editorul de blocuri și utilizând opțiunile din bara de instrumente. Acest lucru vă permite să schimbați URL-ul de destinație, să-l setați să se deschidă într-o filă nouă sau să ajustați setările de culoare și stil în bara laterală din dreapta.

Cum îmi personalizez linkul URL?

Pentru a schimba textul URL-ului în sine (slug-ul), accesați setările „Postare” din bara laterală din dreapta și căutați secțiunea „URL”. Dacă doriți să schimbați aspectul vizual al linkului, cum ar fi fontul sau culoarea, utilizați setările „Stil” din editorul de blocuri.

Pentru mai multe detalii, vezi tutorialul nostru despre cum să-ți schimbi URL-urile site-ului WordPress.

Cum schimbi linkurile în WordPress?

Pur și simplu faceți clic pe textul existent al linkului în editorul de conținut și selectați butonul „Editare” (pictograma creion) din bara de instrumente plutitoare. De acolo, puteți lipi un URL nou sau puteți modifica textul pe care doriți să îl afișați vizitatorilor.

Cum pot schimba linkul paginii mele?

Puteți schimba un link de pagină editând slug-ul permalink-ului în bara laterală a setărilor paginii, sub secțiunea „URL”. Dacă pagina este deja publicată, recomandăm configurarea unei redirecționări 301, astfel încât vizitatorii care folosesc link-ul vechi să fie trimiși la pagina corectă nouă.

Care este cea mai bună culoare pentru linkurile de pe un site web?

Albastrul este cea mai recunoscută culoare pentru linkuri, dar cea mai bună alegere depinde de brandul și designul tău. Asigură un raport de contrast de 4,5:1 pentru accesibilitate, evită roșu/verde pentru utilizatorii daltoniști și folosește subliniere la hover pentru claritate. Potrivește culorile brandului tău, menținând în același timp lizibilitatea.

Cum să schimbi pictograma linkului în WordPress?

WordPress nu are o setare implicită pentru a adăuga sau schimba pictogramele de link, așa că, de obicei, va trebui să folosiți un plugin. Plugin-uri precum External Links pot adăuga automat pictograme la link-urile externe, sau puteți adăuga manual pictograme folosind FontAwesome și CSS personalizat.

Sperăm că acest articol v-a ajutat să învățați cum să schimbați culoarea link-ului în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să schimbați culoarea textului în WordPress sau ghidul nostru complet despre cele mai eficiente elemente de design WordPress.

Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.