Så här Customize du bakgrundsfärgen för WordPress Block Editor

Vill du customize bakgrundsfärgen i WordPress Block Editor för administratörer?

Ibland, när du arbetar med ett custom customer-projekt, kanske du vill ändra Gutenberg editor bakgrundsfärg i WordPress för att matcha deras varumärkesfärger.

I den här artikeln visar vi dig hur du enkelt customize bakgrundsfärgen i WordPress Block Editor för admin area.

Varför ändra bakgrundsfärgen för Block Editor i WordPress?

Det kan finnas flera anledningar till att du vill ändra bakgrundsfärgen i Block Editor i WordPress.

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

Men om ditt WordPress theme inte använder samma färger kommer utseendet på ditt post i editorn att se helt annorlunda ut än vad dina användare kommer att se på live website.

Ett annat skäl till att ändra bakgrundsfärgen kan vara personliga alternativ.

Som standard använder Block Editor till exempel en vit bakgrund. Vissa användare kan tycka att det är lite stressande att klistra på den vita vyn under långa timmar. Ögonbelastning kan vara en verklig issue för många människor, och den vita bakgrunden som är standard är inte lätt för ögonen.

Med detta sagt, låt oss se hur du enkelt kan ändra bakgrundsfärgen för WordPress editor.

Video Tutorial

Om du föredrar skriftliga instruktioner är det bara att fortsätta läsa.

Så här ändrar du bakgrundsfärgen för WordPress Editor

Du kan enkelt ändra bakgrundsfärgen för WordPress editor genom att lägga till customizer-kod i ditt temas functions.php-fil.

Men även det minsta error i koden kan knäcka din website och göra den otillgänglig.

Det är därför vi rekommenderar att du använder WPCode plugin. Det är det bästa WordPress code snippets plugin på marknaden och är det enklaste och säkraste sättet att lägga till custom code till din WordPress website.

Först måste du installera och aktivera pluginet WPCode. För mer instruktioner, vänligen se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Efter aktivering, besök Code Snippets ” +Add Snippet page från WordPress admin sidebar.

Härifrån klickar du på knappen ”Use Snippet” under alternativet ”Add Your Custom Code (New Snippet)”.

Detta tar dig till sidan ”Create Custom Snippet”, där du kan börja med att skriva ett namn för ditt code snippet. Detta är bara för you och kan vara vad som helst som hjälper dig att identifiera koden.

Välj sedan ”PHP Snippet” som ”Code Type” från dropdown-menyn i det högra hörnet av vyn.

Följ detta genom att copy and paste följande kod i boxen ”Code Preview”:

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

När du har gjort det måste du leta efter följande kod i PHP snippet som du just klistrade in:

background-color: #bee0ec;

Sedan måste du add to hex-koden för din önskade färg bredvid alternativet bakgrundsfärg. Om du inte vill använda en hex-kod kan du använda några grundläggande färgnamn som ”vit” eller ”blå” istället.

Därefter rullar du ner till sektionen ”Insertion” och väljer alternativet ”Auto Insert”.

Därefter måste du välja ”Location” för code snippet som ”Admin Only” från dropdown-menyn.

Därefter går du tillbaka högst upp på sidan och togglar omkopplaren ”Inaktiverad” till ”Aktiv”.

Slutligen, glöm inte att clicka på knappen ”Save Snippet” för att store dina ändringar.

Gå nu till block editor från admin sidebar.

Så här såg block editor ut på vår site efter att ha lagt till PHP code snippet.

Bonus: Ändra bakgrundsfärg i WordPress

Om du vill ändra bakgrundsfärgen på din webbplats front end, kan du göra det genom att besöka skärmen Appearance ” Customize från WordPress dashboard.

Detta kommer att starta theme customize där du måste click the ”Colors & Dark Mode” tabs i den vänstra colonnen. Tänk på att din customizer kan se annorlunda ut beroende på vilket theme du använder.

Detta öppnar en new panel i sidebaren där du måste clicka på alternativet ”Select Color”.

Color Picker kommer nu att öppnas på din vy och du kan välja den bakgrundsfärg du föredrar. När du är klar, glöm inte att klicka på knappen ”Publicera” högst upp för att store dina settings.

Du kan också ändra textfärgen, markeringsfärgen, färgen på knapparna och mer från temats customizer. Men om du använder ett block theme måste du göra dessa ändringar i hela Site Editor.

För mer detaljer om allt detta kan du se vår guide för nybörjare om hur du customize färger på din WordPress website.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt ändrar bakgrundsfärgen i WordPress Editor. Du kanske också vill se vår ultimata guide om de mest användbara och tidsbesparande genvägarna i WordPress eller ta en titt på våra toppval för de bästa pluginsen för page builders i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.