Come personalizzare il colore di sfondo dell'editor a blocchi di WordPress

C'è stato un tempo in cui cambiare i colori di sfondo in WordPress significava addentrarsi nel codice e sperare che nulla si rompesse. Ricordiamo bene quei giorni. WordPress ha fatto molta strada da allora e l'editor a blocchi ha reso la personalizzazione più facile che mai.

Tuttavia, molti proprietari di siti web faticano a ottenere i colori di sfondo giusti.

Dopo aver gestito numerosi siti WordPress e aver aiutato migliaia di utenti, abbiamo imparato i modi più semplici e affidabili per gestire queste modifiche.

In questa guida, ti mostreremo esattamente come cambiare i colori di sfondo nell'editor a blocchi di WordPress utilizzando metodi che funzionano per qualsiasi tema e livello di competenza.

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

Potresti voler cambiare il colore di sfondo dell'editor a 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 a blocchi del sito web live, inclusi OceanWP, GeneratePress e altri.

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

Un altro motivo potrebbe essere semplicemente il tuo comfort personale.

Se passi molte ore a scrivere, fissare uno schermo bianco brillante può essere faticoso per gli occhi. Cambiare lo sfondo dell'editor con un colore più tenue può rendere il tuo tempo di lavoro molto più piacevole.

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

Come cambiare il colore di sfondo dell'editor di WordPress

Puoi cambiare il colore dello sfondo dell'editor di WordPress aggiungendo codice personalizzato al file functions.php del tuo tema.

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

Ecco perché ti consigliamo di utilizzare il plugin WPCode.

Dopo un'attenta verifica, abbiamo concluso che è il modo più semplice e sicuro per aggiungere codice personalizzato al tuo sito web WordPress. Per saperne di più, consulta la nostra recensione di WPCode.

Innanzitutto, devi installare e attivare il plugin WPCode. Per ulteriori istruzioni, consulta la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l'attivazione, visita la pagina Snippet di codice » +Aggiungi snippet dalla barra laterale di amministrazione di WordPress.

Da qui, fai clic sul pulsante ‘Usa snippet’ sotto l'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’.

Questo ti porterà alla pagina ‘Crea snippet personalizzato’, dove puoi iniziare digitando un nome per il tuo snippet di codice. Questo è solo per te e può essere qualsiasi cosa che ti aiuti a identificare il codice.

Successivamente, seleziona ‘PHP Snippet’ dal menu che appare dopo aver cliccato sul menu ‘Tipo di codice’ nell'angolo in alto a destra dello schermo

Dopodiché, copia e incolla il seguente codice nella casella ‘Anteprima Codice’:

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

Questo snippet di codice fa due cose semplici. La parte add_action dice a WordPress di aggiungere il nostro stile personalizzato al footer dell'area di amministrazione.

All'interno, il codice CSS seleziona il contenitore principale dell'editor a blocchi (.editor-styles-wrapper) e imposta il suo background-color su un nuovo codice esadecimale.

Una volta fatto ciò, cerca il seguente codice nello snippet PHP che hai appena incollato:

background-color: #bee0ec;

Quindi, devi aggiungere il codice esadecimale del tuo colore preferito accanto all'opzione colore di sfondo.

Se non vuoi usare un codice esadecimale, puoi usare invece alcuni nomi di colori di base, come 'white' o 'blue'.

Dopodiché, scorri verso il basso fino alla sezione ‘Inserimento’ e scegli l'opzione ‘Inserimento automatico’.

Successivamente, devi selezionare la ‘Posizione’ dello snippet di codice come ‘Solo amministratori’ dal menu a discesa.

Dopodiché, torna in cima alla pagina e attiva l'interruttore ‘Inattivo’ su ‘Attivo’.

Infine, non dimenticare di fare clic sul pulsante ‘Salva snippet’ per memorizzare le tue modifiche.

Ora, visita l'editor a blocchi dalla barra laterale dell'amministratore.

Questo è l'aspetto dell'editor a blocchi sul nostro sito dopo aver aggiunto lo snippet di codice PHP.

Tutorial video

Se preferisci guardare un video, consulta il nostro tutorial su YouTube su come personalizzare il colore di sfondo dell'editor a blocchi di WordPress:

Metodo Bonus: Cambiare il Colore di Sfondo sul Tuo Sito Web Attivo

Se vuoi cambiare il colore di sfondo che i tuoi visitatori vedono sul tuo sito web attivo, il metodo dipenderà dal tuo tema WordPress.

WordPress ha due tipi di temi: temi classici e temi a blocchi più recenti. Ti mostreremo entrambi i modi.

Metodo 1: Utilizzo del Personalizzatore del Tema (Per Temi Classici)

La maggior parte dei temi classici utilizza il Personalizzatore del Tema per le modifiche ai colori. Puoi accedervi navigando su Aspetto » Personalizza dalla tua bacheca di WordPress.

Una volta caricato il Personalizzatore, cerca una sezione etichettata 'Colori', 'Colori & Modalità scura' o qualcosa di simile. Il nome esatto e la posizione di queste impostazioni possono variare da tema a tema.

All'interno, dovresti trovare un'opzione per 'Colore di sfondo' che ti permetterà di utilizzare un selettore di colori per apportare le tue modifiche. Quando sei soddisfatto del risultato, fai semplicemente clic sul pulsante 'Pubblica' per salvare.

Metodo 2: Utilizzo dell'Editor del sito completo (per temi a blocchi)

Se stai utilizzando un tema a blocchi moderno, apporterai queste modifiche nell'Editor del sito completo. Per accedervi, vai su Aspetto » Editor nella barra laterale di amministrazione.

Nell'editor, fai clic sull'icona 'Stili' sul lato destro (sembra un cerchio semivuoto). Questo aprirà il pannello degli stili globali.

Da qui, fai clic su 'Colori' e quindi seleziona l'opzione 'Sfondo'.

Ora puoi scegliere un nuovo colore di sfondo per l'intero sito. L'editor ti mostrerà un'anteprima dal vivo e potrai fare clic su 'Salva' quando hai finito.

Per una guida più dettagliata su entrambi i metodi, puoi consultare la nostra guida per principianti su come personalizzare i colori sul tuo sito web WordPress.

Domande frequenti sulla modifica dello sfondo dell'editor

Ecco alcune domande che i nostri lettori pongono frequentemente sulla modifica del colore di sfondo dell'editor di WordPress:

Questo snippet di codice rallenterà il mio sito web?

No, questo specifico codice non rallenterà il tuo sito web. Poiché abbiamo impostato lo snippet WPCode per caricarsi solo nell'area 'Solo amministratori', non aggiunge alcun codice aggiuntivo al front-end del tuo sito. Si carica solo per gli utenti connessi che stanno attivamente utilizzando l'editor a blocchi.

Posso usare un gradiente o un'immagine per lo sfondo dell'editor invece di un colore solido?

Sì, puoi. Richiede una piccola modifica al codice CSS. Invece di background-color, useresti la proprietà background.

Ad esempio, per aggiungere un semplice gradiente lineare, il tuo CSS all'interno dello snippet potrebbe apparire così:

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

Puoi utilizzare generatori di gradienti CSS online per creare stili più complessi.

Il codice non ha funzionato. Cosa dovrei controllare per prima cosa?

Se il colore non cambia, controlla prima le impostazioni del tuo snippet WPCode. Assicurati che l'interruttore in alto sia impostato su 'Attivo' e che la posizione di inserimento sia impostata su 'Solo amministratori'.

Inoltre, controlla il codice stesso per eventuali errori di battitura, specialmente nel selettore CSS (.editor-styles-wrapper) e nel codice colore esadecimale.

Come trovo il codice esadecimale per un colore specifico che voglio usare?

Il modo più semplice è utilizzare uno strumento online per la selezione dei colori. Siti web come Google Color Picker, HTML Color Codes o Adobe Color ti permettono di selezionare visivamente qualsiasi colore. Ti forniranno istantaneamente il codice esadecimale corretto (ad esempio, #1a457c) da copiare e incollare nello snippet di codice.

Se aggiorno il mio tema, perderò la modifica del colore di sfondo dell'editor a blocchi?

No, non perderai la modifica. Questo è il più grande vantaggio di utilizzare un plugin come WPCode invece di modificare direttamente il file functions.php del tuo tema. Lo snippet di codice viene salvato indipendentemente dal tuo tema, quindi continuerà a funzionare anche dopo gli aggiornamenti del tema.

Speriamo che questo articolo ti abbia aiutato a imparare come cambiare facilmente il colore di sfondo dell'editor di WordPress. Potresti anche voler consultare la nostra guida definitiva su come disabilitare l'editor a schermo intero in WordPress, o dare un'occhiata alle nostre migliori scelte per i migliori plugin per blocchi Gutenberg per WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.