Cum să schimbați culoarea implicită de selecție a textului în WordPress

Ai observat cum arată textul atunci când vizitatorii îl selectează pe site-ul tău? Uneori trebuie să actualizăm culoarea de selecție a textului pe site-urile pe care lucrăm pentru a se potrivi cu culorile brandului, iar mulți utilizatori au întrebat cum se face acest lucru.

Vestea bună este că este mai ușor decât ați crede să personalizați acest element de design adesea trecut cu vederea. Fie că doriți să se potrivească cu culorile mărcii dumneavoastră sau să îmbunătățiți lizibilitatea, schimbarea culorii selecției textului poate îmbunătăți experiența utilizatorului site-ului dumneavoastră.

În acest ghid, îți vom arăta exact cum să schimbi culoarea implicită a selecției textului în WordPress.

De ce să schimbi culoarea implicită de selecție a textului în WordPress?

Culoarea de selecție a textului se referă la culoarea fontului în WordPress care apare atunci când evidențiați o bucată de text dintr-un conținut. Ca aceasta:

În unele cazuri, este posibil să doriți să schimbați această culoare deoarece nu se potrivește bine cu designul site-ului dvs. WordPress. Schema de culori joacă un rol important în a face site-ul dvs. să arate bine și în a menține o experiență de brand consecventă.

Dacă aveți un blog WordPress, atunci s-ar putea să doriți să schimbați culoarea implicită de selecție a textului dacă considerați că nu iese suficient în evidență față de restul conținutului, făcându-l greu de citit.

Acestea fiind spuse, să vedem cum puteți schimba culoarea fontului pentru selecția de text în WordPress. Pur și simplu folosiți linkurile de mai jos pentru a sări la metoda pe care doriți să o utilizați:

• Metoda 1: Utilizarea codului pentru a schimba culoarea selecției textului (funcționează cu toate temele)
• Method 2: Using the WordPress Theme Settings (Varies by the Classic Theme)

Metoda 1: Utilizarea codului pentru a schimba culoarea selecției textului (funcționează cu toate temele)

Unele teme WordPress oferă o funcționalitate încorporată pentru a schimba culoarea selecției textului, dar nu toate. De aceea, recomandăm utilizarea codului CSS personalizat, deoarece metoda este mult mai universală.

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

Cea mai mare problemă este că chiar și o mică greșeală în fragmentul de cod poate bloca complet site-ul dumneavoastră WordPress. Fără a mai menționa că veți pierde tot codul personalizat atunci când actualizați tema WordPress.

Aici intervine WPCode. Acest plugin pentru fragmente de cod facilitează adăugarea de cod personalizat în WordPress fără a provoca erori sau a face site-ul dvs. inaccesibil.

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 se instalează un plugin WordPress.

După activare, accesați Fragmente de cod » Adăugare fragment în tabloul de bord de administrare WordPress.

Aici, pur și simplu plasează cursorul mouse-ului peste „Adaugă propriul cod personalizat (Fragment nou)”.

Când apare, faceți clic pe butonul „+ Adăugați un fragment personalizat”.

Apoi, trebuie să alegeți un tip de cod din lista de opțiuni care apar pe ecran.

Pentru acest tutorial, selectați „Fragment CSS”.

Pe pagina următoare, introduceți un titlu pentru fragmentul de cod personalizat.

Acesta poate fi orice lucru care te ajută să identifici fragmentul în tabloul de bord WordPress mai târziu, cum ar fi „Schimbă culoarea selecției textului”.

Puteți apoi adăuga următorul CSS în caseta de previzualizare a codului:

/* Customizing text selection for Firefox */
::-moz-selection {
    /* Background color when text is selected in Firefox */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in Firefox */
    color: #fff;
}

/* Customizing text selection for other browsers */
::selection {
    /* Background color when text is selected in other browsers */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in other browsers */
    color: #fff;
}

Observați că am adăugat două stiluri. Selectorul CSS ::moz-selection funcționează cu browserul Firefox, iar selectorul CSS ::selection funcționează cu alte browsere populare precum Google Chrome, Safari, IE9+ și Opera.

În exemplul de mai sus, codul hexazecimal # va schimba culoarea linkului în verde, deci va trebui să schimbați background-color: #008000 în culoarea pe care doriți să o utilizați pentru textul evidențiat.

Dacă nu ești sigur ce cod hex să folosești, poți explora diferite culori și obține codurile lor pe site-ul HTML Color Codes .

Când ești mulțumit de cum arată codul tău, pur și simplu apasă pe comutatorul „Inactiv” pentru a afișa „Activ” în schimb.

Apoi, faceți clic pe „Salvare fragment” pentru a face fragmentul CSS live.

Acum puteți vizita site-ul dvs. web pentru a vedea modificările în acțiune.

Așa arăta pe site-ul nostru demo.

Metoda 2: Utilizarea setărilor temei WordPress (Variază în funcție de tema clasică)

Unele teme WordPress vă permit să modificați setările pentru tipografie și fonturi, inclusiv culoarea textului selectat. Pentru a verifica dacă acesta este cazul pentru tema dumneavoastră, trebuie să accesați Aspect » Personalizare.

Notă: Această metodă nu este aplicabilă pentru temele bloc.

Căutați aici orice setări etichetate „Culori”.

Dacă vedeți o filă „General”, „Global” sau similară, aceasta conține adesea setările de culoare ale temei.

De exemplu, dacă utilizați tema WordPress Astra, atunci va trebui să selectați fila „Global”.

După aceea, faceți clic pe „Culori” pentru a vedea toate culorile diferite care compun această temă WordPress.

Apoi, trebuie să dai clic pe „Accent”.

Aceasta deschide un selector de culori unde poți alege o nouă culoare pentru selecția textului.

Acum puteți urmări cum se schimbă culoarea fontului, deoarece previzualizarea live se va actualiza automat. Astfel, puteți încerca diferite setări pentru a vedea ce arată cel mai bine pentru site-ul dvs. WordPress.

Când ești mulțumit de modificările tale, pur și simplu apasă pe „Publică” pentru a le face live.

După aceea, vei vedea noua culoare a selecției textului live pe blogul sau site-ul tău WordPress.

Chiar dacă nu vedeți nicio setare de culoare în personalizatorul de teme WordPress, merită totuși să verificați documentația temei dvs. pentru a vedea dacă există o modalitate de a schimba culoarea implicită de selecție a textului.

Puteți chiar să contactați dezvoltatorul temei pentru ajutor. Pentru mai multe informații, vă rugăm să consultați ghidul nostru despre cum să ceri corect suport WordPress și să-l obții.

Descoperiți mai multe sfaturi și trucuri de tipografie WordPress

Doriți să personalizați fonturile pe site-ul dvs. WordPress, dar nu știți cum? Consultați aceste ghiduri pentru a începe:

• Cele mai bune pluginuri de tipografie WordPress pentru a-ți îmbunătăți designul
• Cum să schimbi ușor dimensiunea fontului în WordPress
• Ce este un font sigur pentru web + Cele mai bune fonturi sigure pentru web (Ghid pentru începători)
• Cum să adăugați cu ușurință fonturi cu pictograme în tema dumneavoastră WordPress
• Cum să adaugi litere mari la începutul paragrafelor în postările WordPress

Sperăm că acest tutorial te-a ajutat să înveți cum să schimbi culoarea implicită a selecției textului în WordPress. De asemenea, s-ar putea să vrei să vezi ghidul nostru despre cei mai buni constructori de pagini drag-and-drop pentru WordPress și cum să vinzi fonturi online cu WordPress.

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.