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.

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

S-ar putea să doriți să schimbați culoarea de fundal a editorului de blocuri WordPress pentru o serie de motive.

De exemplu, majoritatea temelor moderne WordPress folosesc aceeași culoare de fundal pentru editorul de blocuri ca și site-ul live, inclusiv OceanWP, GeneratePress și altele.

Cu toate acestea, dacă tema dvs. WordPress nu folosește aceleași culori, atunci aspectul postării dvs. în editor va arăta destul de diferit de ceea ce vor vedea utilizatorii dvs. pe site-ul live.

Un alt motiv ar putea fi pur și simplu confortul personal.

Dacă petreceți multe ore scriind, privirea la un ecran alb strălucitor poate fi obositoare pentru ochi. Schimbarea fundalului editorului într-o culoare mai blândă poate face timpul de lucru mult mai plăcut.

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

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

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 dvs. WordPress. Pentru a afla mai multe, consultați recenzia noastră despre WPCode.

Mai întâi, trebuie să instalați și să activați pluginul WPCode. Pentru mai multe instrucțiuni, vă rugăm să consultați ghidul nostru pas cu pas despre cum să instalați 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ă adăugați codul hexazecimal al culorii preferate lângă opțiunea de culoare de fundal.

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 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 de temă pentru modificări de culoare. Puteț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ă utilizați o temă bloc modernă, veți face aceste modificări în editorul complet de site. Pentru a-l accesa, mergeți 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, puteți consulta ghidul nostru pentru începători despre cum să personalizați culorile pe site-ul dvs. 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 v-a ajutat să învățați cum să schimbați ușor culoarea de fundal a editorului WordPress. De asemenea, ați putea dori să vedeți ghidul nostru complet despre cum să dezactivați editorul pe ecran complet în WordPress, sau să aruncați o privire la selecțiile noastre de top pentru cele mai bune plugin-uri de blocuri Gutenberg pentru 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.