Come personalizzare il colore di sfondo dell’editor di blocchi di WordPress

Volete personalizzare il colore di sfondo dell’editor di blocchi di WordPress per gli amministratori?

A volte, quando si lavora su un progetto personalizzato di un cliente, si potrebbe voler cambiare il colore di sfondo dell’editor di Gutenberg in WordPress per adattarlo ai colori del suo marchio.

In questo articolo vi mostreremo come personalizzare facilmente il colore di sfondo dell’editor di blocchi di WordPress per l’area di amministrazione.

Perché cambiare il colore di sfondo dell’editor di blocchi in WordPress?

È possibile che si voglia cambiare il colore di sfondo dell’editor di blocchi di WordPress per una serie di motivi.

Ad esempio, la maggior parte dei temi WordPress moderni utilizza lo stesso colore di sfondo per l’editor di blocchi del sito web live, come Astra, OceanWP, GeneratePress e altri.

Tuttavia, se il vostro tema WordPress non utilizza gli stessi colori, l’aspetto del vostro post all’interno dell’editor sarà molto diverso da quello che gli utenti vedranno sul sito web.

Un altro motivo per cambiare il colore dello sfondo potrebbe essere la preferenza personale.

Ad esempio, per impostazione predefinita, l’editor di blocchi utilizza uno sfondo bianco. Alcuni utenti potrebbero trovare un po’ stressante guardare lo schermo bianco per molte ore. L’affaticamento degli occhi può essere un problema reale per molte persone e lo sfondo bianco predefinito non è facile da vedere.

Detto questo, vediamo come cambiare facilmente il colore di sfondo dell’editor di WordPress.

Video tutorial

Se preferite le istruzioni scritte, continuate a leggere.

Come cambiare il colore di sfondo dell’editor di WordPress

È possibile modificare facilmente il colore di sfondo dell’editor di WordPress aggiungendo un codice personalizzato al file functions.php del tema.

Tuttavia, anche il più piccolo errore nel codice può rompere il vostro sito web e renderlo inaccessibile.

Ecco perché vi consigliamo di utilizzare il plugin WPCode . È il miglior plugin per gli snippet di codice di WordPress sul mercato ed è il modo più semplice e sicuro per aggiungere codice personalizzato al vostro sito WordPress.

Per prima cosa, è necessario installare e attivare il plugin WPCode. Per ulteriori istruzioni, consultare la nostra guida passo-passo su come installare un plugin di WordPress.

Dopo l’attivazione, visitare la pagina Code Snippets ” +Add Snippet dalla barra laterale dell’amministrazione di WordPress.

Da qui, fare clic sul pulsante “Usa snippet” sotto l’opzione “Aggiungi il tuo codice personalizzato (nuovo snippet)”.

Si accede così alla pagina “Crea snippet personalizzato”, dove si può iniziare a digitare un nome per il proprio snippet di codice. Questo nome è solo per voi e può essere qualsiasi cosa che vi aiuti a identificare il codice.

Quindi, scegliere “Snippet PHP” come “Tipo di codice” dal menu a discesa nell’angolo destro dello schermo.

Successivamente, copiare e incollare il seguente codice nella casella “Anteprima codice”:

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

Una volta fatto questo, bisogna cercare il seguente codice nello snippet PHP appena incollato:

background-color: #bee0ec;

Quindi, è necessario aggiungere il codice esadecimale del colore preferito accanto all’opzione del colore di sfondo. Se non si desidera utilizzare un codice esadecimale, è possibile utilizzare alcuni nomi di colori di base, come “bianco” o “blu”.

Quindi, scorrere fino alla sezione “Inserimento” e scegliere l’opzione “Inserimento automatico”.

Successivamente, è necessario selezionare la ‘Posizione’ dello snippet di codice come ‘Solo amministratore’ dal menu a discesa.

Quindi, tornare all’inizio della pagina e spostare l’interruttore “Inattivo” su “Attivo”.

Infine, non dimenticate di fare clic sul pulsante “Salva frammento” per memorizzare le modifiche.

Ora, visitare l’editor dei blocchi dalla barra laterale dell’amministrazione.

Ecco come si presentava l’editor di blocchi sul nostro sito dopo l’aggiunta dello snippet di codice PHP.

Bonus: Cambiare il colore di sfondo in WordPress

Se volete cambiare il colore di sfondo del front-end del vostro sito web, potete farlo visitando la schermata Aspetto ” Personalizzazione dalla dashboard di WordPress.

Si aprirà il personalizzatore del tema, dove si dovrà fare clic sulla scheda “Colori e modalità scura” nella colonna di sinistra. Tenete presente che il vostro customizer potrebbe avere un aspetto diverso a seconda del tema che state utilizzando.

Si aprirà un nuovo pannello nella barra laterale dove si dovrà fare clic sull’opzione “Seleziona colore”.

Sullo schermo si aprirà il Color Picker e si potrà scegliere il colore di sfondo preferito. Una volta terminato, non dimenticate di fare clic sul pulsante ‘Pubblica’ in alto per salvare le impostazioni.

È inoltre possibile modificare il colore del testo, il colore dell’evidenziazione, il colore dei pulsanti e altro ancora dal personalizzatore del tema. Tuttavia, se si utilizza un tema a blocchi, è necessario apportare queste modifiche nell’editor completo del sito.

Per maggiori dettagli su tutto questo, potete consultare la nostra guida per principianti su come personalizzare i colori sul vostro sito WordPress.

Speriamo che questo articolo vi abbia aiutato a capire come cambiare facilmente il colore di sfondo dell’editor di WordPress. Potreste anche voler consultare la nostra guida definitiva sulle scorciatoie di WordPress più utili e che fanno risparmiare tempo o dare un’occhiata alla nostra classifica dei migliori plugin per il page builder di WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.