¿Desea cambiar el color de fondo del editor de bloques de WordPress para administradores?
A veces, cuando trabaja en un proyecto de cliente personalizado, es posible que desee cambiar el color de fondo del editor de Gutenberg en WordPress para que coincida con los colores de su marca.
En este artículo, le mostraremos cómo personalizar fácilmente el color de fondo del editor de bloques de WordPress para el área de administración.
Nota: Esta guía cubre cómo cambiar el color del editor en el administrador de WordPress. Si desea cambiar el color de fondo en el front-end de WordPress, consulte nuestro tutorial 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 usan el mismo color de fondo para el editor de bloques que el sitio web en vivo, incluidos Astra, OceanWP, GeneratePress y más.
Sin embargo, si su tema de WordPress no usa los mismos colores, entonces la apariencia de su publicación dentro del editor se verá bastante diferente de lo que verán sus usuarios en el sitio web en vivo.
Otra razón para cambiar el color de fondo podría ser una preferencia personal.
Por ejemplo, de forma predeterminada, el editor de bloques utiliza un fondo blanco liso. A algunos usuarios les puede resultar un poco estresante mirar la pantalla blanca durante largas horas. La fatiga visual puede ser un problema real para muchas personas, y el fondo blanco predeterminado no es agradable a la vista.
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
Puede cambiar fácilmente el color de fondo del editor de WordPress agregando un código personalizado al archivo functions.php de su tema.
Sin embargo, tenga en cuenta que incluso el error más pequeño en el código puede romper su sitio web y hacerlo inaccesible. Es por eso que recomendamos usar el Código WP enchufar. Es el mejor complemento de fragmentos de código de WordPress en el mercado y es la forma más fácil y segura de agregar código personalizado a su sitio web de WordPress.
En primer lugar, debe instalar y activar el Complemento WPCode gratuito. Para obtener más instrucciones, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Tras la activación, debe visitar el Fragmentos de código » + Agregar fragmentos página desde la barra lateral de administración.
Desde aquí, debe hacer clic en el botón ‘Usar fragmento’ en la opción ‘Agregar su código personalizado (nuevo fragmento)’.
Esto lo llevará a la página ‘Crear fragmento personalizado’ donde puede comenzar escribiendo un nombre para su fragmento de código. Esto es solo para usted y puede ser cualquier cosa que lo ayude a identificar el código.
A continuación, debe elegir ‘Fragmento de PHP’ como ‘Tipo de código’ en el menú desplegable de la derecha.
Después de eso, debe copiar y pegar 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
});
A continuación, debe buscar el siguiente código en el fragmento de PHP que acaba de pegar.
background-color: #bee0ec;
Luego, debe agregar el código hexadecimal de su color preferido junto a la opción de color de fondo. Si no quiere usar un código hexadecimal, puede usar algunos nombres de color básicos como ‘blanco’ o ‘azul’ en su lugar.
Después de eso, debe desplazarse hacia abajo hasta la sección ‘Inserción’ y elegir la opción ‘Inserción automática’.
A continuación, debe seleccionar la ‘Ubicación’ del fragmento de código como ‘Solo administrador’ en el menú desplegable.
Después de eso, debe desplazarse hacia atrás hasta la parte superior de la página y cambiar el interruptor ‘Inactivo’ a ‘Activo’.
Finalmente, no olvide hacer clic en el botón ‘Guardar fragmento’ para guardar sus cambios.
Ahora, ve a visitar 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 CSS.
Esperamos que este artículo le haya ayudado a aprender cómo cambiar fácilmente el color de fondo del editor de WordPress. Es posible que también desee ver nuestra guía definitiva sobre más de 85 atajos de WordPress que ahorran tiempo, o echar un vistazo a nuestras mejores opciones para los mejores complementos de creación de páginas de WordPress.
La publicación Cómo personalizar el color de fondo del editor de bloques de WordPress apareció por primera vez en AprenderWP.
Fuente: Cómo personalizar el color de fondo del editor de bloques de WordPress