Cum să personalizezi culoarea de fundal a editorului de blocuri WordPress

A existat o vreme când schimbarea culorilor de fundal în WordPress însemna să sapi în cod și să speri că nimic nu se va strica. Ne amintim bine acele zile. WordPress a evoluat mult de atunci, iar editorul de blocuri a făcut personalizarea mai ușoară ca niciodată.

Cu toate acestea, mulți proprietari de site-uri web se luptă să obțină culorile de fundal așa cum își doresc.

După ce am gestionat mai multe site-uri WordPress și am ajutat mii de utilizatori, am învățat cele mai simple și mai fiabile moduri de a gestiona aceste modificări.

În acest ghid, vă vom arăta exact cum să schimbați culorile de fundal în editorul de blocuri WordPress folosind metode care funcționează pentru orice temă și nivel de abilitate.

📍Notă: Doar ca să fim pe aceeași lungime de undă, acest ghid se referă la schimbarea culorii de fundal a zonei de conținut din editorul de blocuri WordPress.

Dacă doriți, de fapt, să schimbați culoarea de fundal pe site-ul dvs. live, pentru ca vizitatorii să o vadă, nu vă faceți griji. Avem o secțiune bonus despre asta mai jos, sau puteți vedea tutorialul nostru complet despre cum să schimbați culoarea de fundal în WordPress

De ce să schimbați culoarea de fundal a editorului de blocuri în WordPress?

Schimbarea culorii de fundal a editorului de blocuri poate face experiența dvs. de scriere mai confortabilă și mai ușor de gestionat.

• Îmbunătățiți lizibilitatea și reduceți oboseala ochilor: Dacă petreceți mult timp în tabloul de bord WordPress, un ecran alb strălucitor poate fi obositor. Un fundal mai moale sau mai închis poate face sesiunile lungi de scriere mai ușoare pentru ochii dvs.
• Mențineți consistența designului: Unele teme, cum ar fi OceanWP, încearcă să potrivească editorul cu site-ul dvs. live, dar multe nu o fac. Ajustarea fundalului vă ajută să vedeți mai bine cum va arăta conținutul dvs. atunci când este publicat.
• Accesibilitate mai bună: O culoare de fundal diferită poate ajuta utilizatorii cu sensibilitate la lumină sau cu provocări vizuale. Un contrast mai mare poate face editorul mai ușor de utilizat.
• Lucrați așa cum preferați: Fiecare scrie diferit. Personalizarea editorului vă ajută să creați un spațiu de lucru care se simte mai confortabil și mai productiv.

Acestea fiind spuse, să vedem cum puteți schimba cu ușurință culoarea de fundal a editorului WordPress.

Cum să schimbați culoarea de fundal a editorului WordPress

Poți schimba culoarea de fundal a editorului WordPress adăugând cod personalizat în fișierul functions.php al temei tale.

Cu toate acestea, chiar și cea mai mică eroare în cod vă poate defecta site-ul web și îl poate face inaccesibil.

De aceea recomandăm utilizarea pluginului WPCode.

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

Mai întâi, trebuie să instalezi și să activezi pluginul WPCode. Pentru mai multe instrucțiuni, te rugăm să vezi ghidul nostru pas cu pas despre cum să instalezi un plugin WordPress.

După activare, vizitați pagina Code Snippets » +Add Snippet din bara laterală de administrare WordPress.

De aici, faceți clic pe butonul „Utilizați fragmentul” sub opțiunea „Adăugați codul personalizat (Fragment nou)”.

Acest lucru vă va duce la pagina „Creare fragment de cod personalizat”, unde puteți începe prin a introduce un nume pentru fragmentul dvs. de cod. Acesta este doar pentru dvs. și poate fi orice vă ajută să identificați codul.

În continuare, selectați „Fragment PHP” din meniul care apare după ce faceți clic pe meniul „Tip cod” din colțul din dreapta sus al ecranului

După aceea, copiați și lipiți următorul cod în caseta „Previzualizare cod”:

add_action( 'admin_footer', function() {
	?>
	<style>
		.editor-styles-wrapper {
			background-color: #bee0ec;
		}
	</style>
	<?php
});

Acest fragment de cod face două lucruri simple. Partea add_action spune WordPress-ului să adauge stilizarea noastră personalizată în subsolul zonei de administrare.

În interiorul acestuia, codul CSS vizează containerul principal al editorului de blocuri (.editor-styles-wrapper) și îi setează background-color la un nou cod hex.

Odată ce ați făcut acest lucru, căutați următorul cod în fragmentul PHP pe care tocmai l-ați lipit:

background-color: #bee0ec;

Apoi, trebuie să înlocuiți codul hexazecimal existent cu culoarea dvs. preferată.

Dacă nu doriți să utilizați un cod hexazecimal, puteți folosi în schimb nume de culori de bază, cum ar fi „alb” sau „albastru”.

După aceea, derulați în jos la secțiunea „Inserare” și alegeți opțiunea „Inserare automată”.

Apoi, trebuie să selectați „Locația” fragmentului de cod ca „Doar pentru administrator” din meniul derulant.

După aceea, reveniți în partea de sus a paginii și comutați comutatorul „Inactiv” la „Activ”.

În cele din urmă, nu uitați să faceți clic pe butonul „Salvează fragmentul” pentru a vă stoca modificările.

Acum, vizitați editorul de blocuri din bara laterală de administrare.

Așa arăta editorul de blocuri pe site-ul nostru după adăugarea fragmentului de cod PHP.

Tutorial video

Dacă preferați să vizionați un videoclip, consultați tutorialul nostru de pe YouTube despre cum să personalizați culoarea de fundal a editorului de blocuri WordPress:

Metodă bonus: Schimbați culoarea de fundal pe site-ul dvs. live

Dacă doriți să schimbați culoarea de fundal pe care vizitatorii dvs. o văd pe site-ul dvs. live, metoda va depinde de tema dvs. WordPress.

WordPress are două tipuri de teme: teme clasice și teme bloc mai noi. Vă vom arăta ambele modalități.

Metoda 1: Utilizarea personalizatorului de temă (pentru teme clasice)

Majoritatea temelor clasice folosesc Personalizatorul temei pentru modificări de culori. Poți ajunge acolo navigând la Aspect » Personalizare din tabloul de bord WordPress.

Odată ce personalizatorul se încarcă, căutați o secțiune etichetată „Culori”, „Culori și mod întunecat” sau ceva similar. Numele exact și locația acestor setări pot varia de la o temă la alta.

În interior, ar trebui să găsiți o opțiune pentru „Culoare de fundal” care vă va permite să utilizați un selector de culori pentru a face modificările. Când sunteți mulțumit de rezultat, faceți clic pe butonul „Publicare” pentru a salva.

Metoda 2: Utilizarea editorului complet de site (pentru teme bloc)

Dacă folosești o temă modernă de blocuri, vei face aceste modificări în Editorul Complet al Site-ului. Pentru a-l accesa, mergi la Aspect » Editor în bara laterală de administrare.

În editor, faceți clic pe pictograma „Stiluri” din partea dreaptă (arată ca un cerc pe jumătate umplut). Aceasta va deschide panoul de stiluri globale.

De aici, faceți clic pe „Culori” și apoi selectați opțiunea „Fundal”.

Acum puteți alege o nouă culoare de fundal pentru întregul site. Editorul vă va afișa o previzualizare în timp real și puteți face clic pe „Salvare” când ați terminat.

Pentru un ghid mai detaliat despre ambele metode, poți vedea ghidul nostru pentru începători despre cum să personalizezi culorile pe site-ul tău WordPress.

Întrebări frecvente despre schimbarea fundalului editorului

Iată câteva întrebări pe care cititorii noștri le pun frecvent despre schimbarea culorii de fundal a editorului WordPress:

Va încetini acest fragment de cod site-ul meu?

Nu, acest cod specific nu va încetini site-ul dvs. Deoarece am setat fragmentul WPCode să se încarce doar în zona „Doar administrator”, acesta nu adaugă niciun cod suplimentar pe partea frontală a site-ului dvs. Se încarcă doar pentru utilizatorii conectați care folosesc activ editorul de blocuri.

Pot folosi un gradient sau o imagine pentru fundalul editorului în loc de o culoare solidă?

Da, puteți. Necesită o mică modificare a codului CSS. În loc de background-color, ați folosi proprietatea background.

De exemplu, pentru a adăuga un gradient liniar simplu, CSS-ul dvs. din fragment ar putea arăta astfel:

.editor-styles-wrapper { background: linear-gradient(to right, #e6dada, #274046); }

Puteți folosi generatoare online de gradienți CSS pentru a crea stiluri mai complexe.

Codul nu a funcționat. Ce ar trebui să verific mai întâi?

Dacă culoarea nu se schimbă, verificați mai întâi setările din fragmentul dvs. WPCode. Asigurați-vă că comutatorul din partea de sus este setat la „Activ” și că locația de inserare este setată la „Doar administrator”.

De asemenea, verificați codul în sine pentru eventuale greșeli de scriere, în special în selectorul CSS (.editor-styles-wrapper) și codul hexazecimal al culorii.

Cum găsesc codul hexazecimal pentru o anumită culoare pe care vreau să o folosesc?

Cel mai simplu mod este să folosești un instrument online de selectare a culorilor. Site-uri web precum Google’s Color Picker, HTML Color Codes sau Adobe Color îți permit să selectezi vizual orice culoare. Acestea îți vor oferi instantaneu codul hexazecimal corect (de exemplu, #1a457c) pe care să îl copiezi și să îl inserezi în fragmentul de cod.

Dacă îmi actualizez tema, voi pierde modificarea culorii de fundal a editorului de blocuri?

Nu, nu vei pierde modificarea. Acesta este cel mai mare avantaj al utilizării unui plugin precum WPCode în locul editării directe a fișierului functions.php al temei tale. Fragmentul de cod este salvat independent de tema ta, deci va continua să funcționeze chiar și după actualizările temei.

Sperăm că acest articol te-a ajutat să înveți cum să schimbi ușor culoarea de fundal a editorului WordPress. Poate dorești, de asemenea, să vezi ghidul nostru suprem despre cum să dezactivezi editorul pe tot ecranul în WordPress, sau să arunci o privire la selecțiile noastre de top pentru cele mai bune pluginuri de blocuri Gutenberg pentru 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.