Hubo un tiempo en que cambiar los colores de fondo en WordPress significaba meterse en el código y esperar que nada se rompiera. Recordamos bien esos días. WordPress ha avanzado mucho desde entonces, y el editor de bloques ha hecho que la personalización sea más fácil que nunca.
Aun así, muchos propietarios de sitios web luchan por conseguir que los colores de fondo se vean exactamente como quieren.
Después de administrar múltiples sitios de WordPress y ayudar a miles de usuarios, hemos aprendido las formas más sencillas y confiables de manejar estos cambios.
En esta guía, te mostraremos exactamente cómo cambiar los colores de fondo en el editor de bloques de WordPress utilizando métodos que funcionan para cualquier tema y nivel de habilidad.
Nota: Para que estemos en la misma página, esta guía trata sobre cómo cambiar el color de fondo dentro del panel de administración de WordPress, donde escribes y editas publicaciones.
Si en realidad quieres cambiar el color de fondo en tu sitio web en vivo para que tus visitantes lo vean, no te preocupes. Tenemos una sección de bonificación sobre eso más adelante, o puedes ver nuestro tutorial completo sobre cómo cambiar el color de fondo en WordPress.
¿Por qué cambiar el color de fondo del editor de bloques en WordPress?
Es posible que desee cambiar el color de fondo del editor de bloques de WordPress por varias razones.
Por ejemplo, la mayoría de los temas modernos de WordPress utilizan el mismo color de fondo para el editor de bloques que para el sitio web en vivo, incluyendo OceanWP, GeneratePress y más.
Sin embargo, si tu tema de WordPress no usa los mismos colores, la apariencia de tu publicación dentro del editor se verá muy diferente de lo que tus usuarios verán en el sitio web en vivo.
Otra razón podría ser simplemente tu comodidad personal.
Si pasas muchas horas escribiendo, mirar una pantalla blanca brillante puede ser agotador para los ojos. Cambiar el fondo del editor a un color más suave puede hacer que tu tiempo de trabajo sea mucho más agradable.
Dicho esto, veamos cómo puedes cambiar fácilmente el color de fondo del editor de WordPress.
Cómo cambiar el color de fondo del editor de WordPress
Puedes cambiar el color de fondo del editor de WordPress agregando código personalizado al archivo functions.php de tu tema.
Sin embargo, incluso el error más pequeño en el código puede dañar tu sitio web y hacerlo inaccesible.
Es por eso que recomendamos usar el plugin WPCode.
Después de pruebas exhaustivas, hemos concluido que es la forma más fácil y segura de agregar código personalizado a tu sitio web de WordPress. Para obtener más información, consulta nuestra reseña de WPCode.
Primero, necesitas instalar y activar el plugin WPCode. Para más instrucciones, por favor consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Nota: WPCode también tiene un plan gratuito que puedes usar para este tutorial. Sin embargo, el plan premium te da acceso a más funciones, como una biblioteca de fragmentos de código y lógica condicional.
Después de la activación, visita la página Fragmentos de código » +Agregar fragmento desde la barra lateral de administración de WordPress.
Desde aquí, haz clic en el botón ‘Usar fragmento’ debajo de la opción ‘Agregar tu código personalizado (Nuevo fragmento)’.
Esto te llevará a la página ‘Crear fragmento personalizado’, donde puedes comenzar escribiendo un nombre para tu fragmento de código. Esto es solo para ti y puede ser cualquier cosa que te ayude a identificar el código.
A continuación, selecciona ‘Fragmento de PHP’ del aviso que aparece después de hacer clic en el menú ‘Tipo de código’ en la esquina superior derecha de la pantalla.
Después de eso, copia y pega el siguiente código en el cuadro ‘Vista previa del código’:
add_action( 'admin_footer', function() {
?>
<style>
.editor-styles-wrapper {
background-color: #bee0ec;
}
</style>
<?php
});
Este fragmento de código hace dos cosas simples. La parte add_action le dice a WordPress que agregue nuestro estilo personalizado al pie de página del área de administración.
Dentro de eso, el código CSS apunta al contenedor principal del editor de bloques (.editor-styles-wrapper) y establece su background-color a un nuevo código hexadecimal.
Una vez que hayas hecho eso, busca el siguiente código en el fragmento de PHP que acabas de pegar:
background-color: #bee0ec;
Luego, tienes que agregar el código hexadecimal de tu color preferido junto a la opción de color de fondo.
Si no quieres usar un código hexadecimal, puedes usar algunos nombres de colores básicos, como 'white' o 'blue' en su lugar.
Después de eso, desplázate hacia abajo hasta la sección ‘Inserción’ y elige la opción ‘Insertar automáticamente’.
A continuación, debes seleccionar la ‘Ubicación’ del fragmento de código como ‘Solo administrador’ en el menú desplegable.
Después de eso, regresa a la parte superior de la página y cambia el interruptor ‘Inactivo’ a ‘Activo’.
Finalmente, no olvides hacer clic en el botón ‘Guardar fragmento’ para almacenar tus cambios.
Ahora, visita el editor de bloques desde la barra lateral de administración.
Así es como se veía el editor de bloques en nuestro sitio después de agregar el fragmento de código PHP.
Tutorial en video
Si prefieres ver un video, consulta nuestro tutorial de YouTube sobre cómo personalizar el color de fondo del editor de bloques de WordPress:
Método Adicional: Cambiar el Color de Fondo en tu Sitio Web en Vivo
Si deseas cambiar el color de fondo que ven tus visitantes en tu sitio web en vivo, el método dependerá de tu tema de WordPress.
WordPress tiene dos tipos de temas: temas clásicos y temas de bloques más nuevos. Te mostraremos ambas formas.
Método 1: Usando el Personalizador de Temas (Para Temas Clásicos)
La mayoría de los temas clásicos utilizan el Personalizador de Temas para cambios de color. Puedes acceder a él navegando a Apariencia » Personalizar desde tu panel de WordPress.
Una vez que cargue el Personalizador, busca una sección etiquetada como 'Colores', 'Colores y Modo Oscuro' o algo similar. El nombre exacto y la ubicación de estas configuraciones pueden variar de un tema a otro.
En el interior, deberías encontrar una opción para ‘Color de fondo’ que te permitirá usar un selector de color para hacer tus cambios. Cuando estés satisfecho con el resultado, simplemente haz clic en el botón ‘Publicar’ para guardar.
Método 2: Usando el Editor de Sitio Completo (Para Temas de Bloques)
Si estás usando un tema de bloques moderno, harás estos cambios en el Editor de Sitio Completo. Para acceder a él, ve a Apariencia » Editor en la barra lateral de tu administrador.
En el editor, haz clic en el ícono de ‘Estilos’ en el lado derecho (parece un círculo medio lleno). Esto abrirá el panel de estilos globales.
Desde aquí, haz clic en ‘Colores’ y luego selecciona la opción ‘Fondo’.
Ahora puedes elegir un nuevo color de fondo para todo tu sitio. El editor te mostrará una vista previa en vivo, y puedes hacer clic en ‘Guardar’ cuando hayas terminado.
Para un tutorial más detallado sobre ambos métodos, puedes consultar nuestra guía para principiantes sobre cómo personalizar los colores en tu sitio web de WordPress.
Preguntas frecuentes sobre cómo cambiar el fondo del editor
Aquí tienes algunas preguntas que nuestros lectores hacen con frecuencia sobre cómo cambiar el color de fondo del editor de WordPress:
¿Este fragmento de código ralentizará mi sitio web?
No, este código específico no ralentizará tu sitio web. Como configuramos el fragmento de WPCode para que solo se cargue en el área 'Solo administrador', no añade código adicional al front-end de tu sitio. Solo se carga para los usuarios que han iniciado sesión y que están utilizando activamente el editor de bloques.
¿Puedo usar un degradado o una imagen para el fondo del editor en lugar de un color sólido?
Sí, puedes. Requiere un pequeño cambio en el código CSS. En lugar de background-color, usarías la propiedad background.
Por ejemplo, para añadir un degradado lineal simple, tu CSS dentro del fragmento podría verse así:
.editor-styles-wrapper { background: linear-gradient(to right, #e6dada, #274046); }
Puedes usar generadores de degradados CSS en línea para crear estilos más complejos.
El código no funcionó. ¿Qué debo revisar primero?
Si el color no cambia, primero revisa la configuración de tu fragmento de WPCode. Asegúrate de que el interruptor en la parte superior esté configurado en 'Activo' y que la ubicación de inserción esté configurada en 'Solo administrador'.
Además, revisa el código en sí en busca de errores tipográficos, especialmente en el selector CSS (.editor-styles-wrapper) y el código de color hexadecimal.
¿Cómo encuentro el código hexadecimal de un color específico que quiero usar?
La forma más fácil es usar una herramienta selectora de color en línea. Sitios web como el Selector de Color de Google, Códigos de Color HTML o Adobe Color te permiten seleccionar visualmente cualquier color. Te proporcionarán instantáneamente el código hexadecimal correcto (por ejemplo, #1a457c) para copiar y pegar en el fragmento de código.
Si actualizo mi tema, ¿perderé el cambio de color de fondo del editor de bloques?
No, no perderás el cambio. Esa es la mayor ventaja de usar un plugin como WPCode en lugar de editar directamente el archivo functions.php de tu tema. El fragmento de código se guarda independientemente de tu tema, por lo que seguirá funcionando incluso después de las actualizaciones del tema.
Esperamos que este artículo te haya ayudado a aprender cómo cambiar fácilmente el color de fondo del editor de WordPress. También es posible que desees ver nuestra guía definitiva sobre cómo deshabilitar el editor de pantalla completa en WordPress, o echar un vistazo a nuestras mejores selecciones de los mejores plugins de bloques de Gutenberg para WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dennis Muthomi
excelente publicación sobre cómo personalizar el color de fondo del editor de bloques de WordPress
Me preguntaba, sin embargo, ¿hay alguna forma de habilitar un modo oscuro para el editor de bloques? (como tal vez un código o un plugin)
A menudo trabajo en las entradas de mi blog tarde en la noche, y el fondo blanco brillante puede ser un poco duro para los ojos. Sería genial si hubiera una opción para cambiar a un esquema de colores más oscuro para esas sesiones de escritura nocturnas.
Soporte de WPBeginner
Para un modo oscuro, te recomendamos echar un vistazo a nuestra guía a continuación:
https://www.wpbeginner.com/plugins/how-to-add-dark-mode-to-your-wordpress-admin-dashboard/
Administrador
Jiří Vaněk
Gracias por preguntar sobre esto porque estoy en la misma situación que tú. Yo también trabajo hasta tarde en la noche, y la tensión en mis ojos es realmente notable. Cualquiera que tenga que cumplir plazos y, desafortunadamente, no tenga más remedio que ponerse al día por las noches, probablemente pueda identificarse. Me alegra que se haya planteado este tema y agradezco la respuesta con el artículo de WPBeginner porque yo también usaré con gusto la configuración de modo oscuro para darle un respiro a mis ojos.
Shawn
Esto me funciona mejor;
.editor-styles-wrapper, body.mce-content-body, .wp-block { background-color: ; color: ; }
Soporte de WPBeginner
Thank you for sharing what worked for you!
Administrador
Broc Hite
Esto fue genial, pero solo fue una solución incompleta para mí, ya que paso más tiempo en el editor de código que en el editor visual. Todavía estoy buscando en Google para averiguar cómo cambiar el color allí.
Soporte de WPBeginner
Si quisieras cambiar el color de fondo en el editor de texto/código, podrías en su lugar apuntar a .edit-post-text-editor en el código anterior.
Administrador