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.
Note: Den här guiden täcker att ändra färgen på Editor i WordPress admin. Om du vill ändra bakgrundsfärgen i WordPress front-end, kan du rulla ner till bonus-sektionen eller se vår tutorial om hur du ändrar bakgrundsfärg i WordPress.
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.
Note : WPCode har också en gratis plan som du kan använda för denna tutorial. Men om du använder premiumpaketet får du tillgång till fler funktioner som code snippet bibliotek, villkorlig logik och mer.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dennis Muthomi says
great post on customizing the WordPress block editor’s background color
I was wondering, though – is there a way to enable a dark mode for the block editor? (like maybe a code or a plugin)
I often work on my blog posts late at night, and the bright white background can be a bit tough on the eyes. It would be really cool if there was an option to switch to a darker color scheme for those late-night writing sessions
WPBeginner Support says
For a dark mode we would recommend taking a look at our guide below:
https://www.wpbeginner.com/plugins/how-to-add-dark-mode-to-your-wordpress-admin-dashboard/
Administratör
Shawn says
This works better for me;
.editor-styles-wrapper, body.mce-content-body, .wp-block {
background-color: ;
color: ;
}
WPBeginner Support says
Thank you for sharing what worked for you!
Administratör
Broc Hite says
This was great, but it was only an incomplete solution for me since I spend more time in the code editor vs the visual editor. I’m still Googling trying to figure out how to change the color there.
WPBeginner Support says
If you wanted to change the background color in the text/code editor, you could instead target .edit-post-text-editor in the code above.
Administratör