Hur man anpassar bakgrundsfärgen för WordPress blockredigerare

Det fanns en tid då ändring av bakgrundsfärger i WordPress innebar att man grävde i kod och hoppades att inget skulle gå sönder. Vi minns de dagarna väl. WordPress har kommit långt sedan dess, och blockredigeraren har gjort anpassning enklare än någonsin.

Ändå kämpar många webbplatsägare för att få sina bakgrundsfärger att se precis rätt ut.

Efter att ha drivit flera WordPress-sajter och hjälpt tusentals användare har vi lärt oss de enklaste och mest pålitliga sätten att hantera dessa ändringar.

I den här guiden visar vi dig exakt hur du ändrar bakgrundsfärger i WordPress blockredigerare med metoder som fungerar för alla teman och alla kunskapsnivåer.

Varför ändra bakgrundsfärgen på blockredigeraren i WordPress?

Du kanske vill ändra bakgrundsfärgen på WordPress blockredigerare av flera skäl.

Till exempel använder de flesta moderna WordPress-teman samma bakgrundsfärg för blockredigeraren som för live-webbplatsen, inklusive OceanWP, GeneratePress, och mer.

Men om ditt WordPress-tema inte använder samma färger, kommer utseendet på ditt inlägg i redigeraren att se ganska annorlunda ut än vad dina användare kommer att se på den live webbplatsen.

En annan anledning kan helt enkelt vara din personliga komfort.

Om du tillbringar många timmar med att skriva kan det vara ansträngande för ögonen att titta på en stark vit skärm. Att ändra redigerarens bakgrund till en mjukare färg kan göra din arbetstid mycket trevligare.

Med det sagt, låt oss se hur du enkelt kan ändra bakgrundsfärgen i WordPress-redigeraren.

Hur man ändrar bakgrundsfärgen i WordPress-redigeraren

Du kan ändra bakgrundsfärgen i WordPress-redigeraren genom att lägga till anpassad kod i din temas functions.php-fil.

Men även det minsta fel i koden kan förstöra din webbplats och göra den otillgänglig.

Därför rekommenderar vi att du använder pluginet WPCode.

Efter noggranna tester har vi kommit fram till att det är det enklaste och säkraste sättet att lägga till anpassad kod på din WordPress-webbplats. För att lära dig mer, se vår WPCode-recension.

Först måste du installera och aktivera pluginet WPCode. För fler instruktioner, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, besök sidan Kodavsnitt » +Lägg till avsnitt från WordPress admin sidomeny.

Härifrån klickar du på knappen 'Använd kodavsnitt' under alternativet 'Lägg till din anpassade kod (nytt kodavsnitt)'.

Detta tar dig till sidan 'Skapa anpassad kodsnutt', där du kan börja med att skriva ett namn för din kodsnutt. Detta är bara för dig och kan vara vad som helst som hjälper dig att identifiera koden.

Välj sedan ‘PHP Snippet’ från prompten som visas efter att ha klickat på menyn ‘Code Type’ i det övre högra hörnet av skärmen

Kopiera och klistra sedan in följande kod i rutan 'Kodförhandsgranskning':

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

Den här kodsnutten gör två enkla saker. add_action-delen talar om för WordPress att lägga till vår anpassade stil till sidfoten i adminområdet.

Inuti det riktar CSS-koden sig till blockredigerarens huvudbehållare (.editor-styles-wrapper) och ställer in dess background-color till en ny hexkod.

När du har gjort det, leta efter följande kod i PHP-snutten du just klistrade in:

background-color: #bee0ec;

Sedan måste du lägga till hexkoden för din föredragna färg bredvid alternativet för bakgrundsfärg.

Om du inte vill använda en hexkod kan du istället använda några grundläggande färgnamn, som 'white' eller 'blue'.

Därefter, scrolla ner till sektionen ‘Insertion’ och välj alternativet ‘Auto Insert’.

Därefter måste du välja 'Plats' för kodavsnittet som 'Endast admin' från rullgardinsmenyn.

Gå sedan tillbaka till toppen av sidan och byt från ‘Inactive’ till ‘Active.’.

Glöm slutligen inte att klicka på knappen ‘Spara utkast’ för att spara dina ändringar.

Gå nu och besök blockredigeraren från admin-sidofältet.

Så här såg blockredigeraren ut på vår webbplats efter att ha lagt till PHP-kodavsnittet kodavsnitt.

Videohandledning

Om du hellre vill titta på en video, kolla in vår YouTube-handledning om hur du anpassar bakgrundsfärgen för WordPress blockredigerare:

Bonusmetod: Ändra bakgrundsfärgen på din live-webbplats

Om du vill ändra bakgrundsfärgen som dina besökare ser på din live-webbplats, beror metoden på ditt WordPress-tema.

WordPress har två typer av teman: klassiska teman och nyare blockteman. Vi visar dig båda sätten.

Metod 1: Använda temaanpassaren (för klassiska teman)

De flesta klassiska teman använder temaanpassaren för färgändringar. Du kan komma dit genom att navigera till Utseende » Anpassa från din WordPress-instrumentpanel.

När anpassaren laddas, leta efter en sektion märkt 'Färger', 'Färger & Mörkt läge' eller något liknande. Det exakta namnet och platsen för dessa inställningar kan variera från tema till tema.

Inuti bör du hitta ett alternativ för 'Bakgrundsfärg' som låter dig använda en färgväljare för att göra dina ändringar. När du är nöjd med resultatet, klicka bara på knappen 'Publicera' för att spara.

Metod 2: Använda Full Site Editor (för blockteman)

Om du använder ett modernt blocktema, gör du dessa ändringar i Full Site Editor. För att komma åt den, gå till Utseende » Redigerare i din admin-sidofält.

I redigeraren, klicka på ikonen 'Stilar' på höger sida (den ser ut som en cirkel som är halvfylld). Detta öppnar panelen för globala stilar.

Härifrån, klicka på 'Färger' och välj sedan alternativet 'Bakgrund'.

Du kan nu välja en ny bakgrundsfärg för hela din webbplats. Redigeraren visar en liveförhandsgranskning, och du kan klicka på 'Spara' när du är klar.

För en mer detaljerad genomgång av båda metoderna kan du se vår nybörjarguide om hur man anpassar färger på din WordPress-webbplats.

Vanliga frågor om att ändra bakgrunden i redigeraren

Här är några frågor som våra läsare ofta ställer om att ändra bakgrundsfärgen i WordPress-redigeraren:

Kommer detta kodavsnitt att sakta ner min webbplats?

Nej, den här specifika koden kommer inte att sakta ner din webbplats. Eftersom vi har ställt in WPCode-avsnittet att endast laddas i 'Endast admin'-området, lägger det inte till någon extra kod på webbplatsens framsida. Det laddas bara för inloggade användare som aktivt använder blockredigeraren.

Kan jag använda en gradient eller en bild för redigerarens bakgrund istället för en solid färg?

Ja, det kan du. Det kräver en liten ändring i CSS-koden. Istället för background-color skulle du använda egenskapen background.

Till exempel, för att lägga till en enkel linjär gradient, kan din CSS inuti avsnittet se ut så här:

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

Du kan använda online CSS-gradientgeneratorer för att skapa mer komplexa stilar.

Koden fungerade inte. Vad ska jag kontrollera först?

Om färgen inte ändras, dubbelkolla först inställningarna i ditt WPCode-avsnitt. Se till att reglaget högst upp är inställt på 'Aktiv' och att Infogningsplatsen är inställd på 'Endast admin'.

Kontrollera också själva koden för eventuella stavfel, särskilt i CSS-väljaren (.editor-styles-wrapper) och hex-färgkoden.

Hur hittar jag hex-koden för en specifik färg jag vill använda?

Det enklaste sättet är att använda ett online-verktyg för färgväljare. Webbplatser som Googles färgväljare, HTML Color Codes eller Adobe Color låter dig visuellt välja vilken färg som helst. De ger dig omedelbart den korrekta hex-koden (t.ex. #1a457c) att kopiera och klistra in i kodavsnittet.

Om jag uppdaterar mitt tema, kommer jag att förlora ändringen av blockredigerarens bakgrundsfärg?

Nej, du kommer inte att förlora ändringarna. Det är den största fördelen med att använda ett plugin som WPCode istället för att redigera din temas functions.php-fil direkt. Kodavsnittet sparas oberoende av ditt tema, så det kommer att fortsätta fungera även efter temauppdateringar.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt ändrar bakgrundsfärgen i WordPress-redigeraren. Du kanske också vill se vår ultimata guide om hur du inaktiverar helskärmsläget i WordPress, eller ta en titt på våra toppval för bästa Gutenberg-blockplugins för WordPress.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.