Cómo personalizar el color de fondo del editor de bloques de WordPress (Gutenberg)

Quieres cambiar el color de fondo del editor Gutenberg en WordPress para que coincida con los colores de la marca del sitio y mostrar la cultura del sitio. ¡Tutorial detallado hoy está aquí!

¿Por qué debo cambiar el color de fondo del editor de bloques en WordPress?

Hay muchas razones para querer cambiar el color de fondo. Sin embargo, la mayoríaTemas de WordPressTodos utilizan los mismos colores de fondo del editor de bloques que el sitio en vivo, incluyendoAstrayOceanWPyGenerarPrensaetc.

Sin embargo, si el tema de WordPress no utiliza los mismos colores, el aspecto de la entrada en el editor no será el mismo que el que ve el usuario en el sitio en vivo.

También puede modificarse a su gusto.

Por ejemplo, por defecto, el editor de bloques utiliza un fondo blanco liso. A algunos usuarios puede resultarles un poco estresante mirar fijamente a una pantalla blanca durante largos periodos de tiempo. La fatiga visual es incómoda para muchas personas, y el fondo blanco por defecto no es cómodo para los ojos.

Cómo cambiar el color de fondo del editor de WordPress

Esto puede hacerse enviando un mensaje a la dirección del sujetoarchivo functions.phpAñadir código personalizado para cambiar el color de fondo del editor de WordPress.

Sin embargo, las modificaciones que searchivo functions.phpCuidado, hasta el más mínimo error en el código puede hacer que un sitio web resulte inaccesible.

Por eso muchos de nuestros tutoriales recomiendan utilizarWPCodeLa razón del plugin. Es el mejor plugin de fragmentos de WordPress en el mercado hoy en día y la forma más fácil y segura de añadir código personalizado a su sitio de WordPress.

En primer lugar, instale y active el plugin WPCode.

Una vez activada, acceda a ella desde la barra lateral de administración de WordPressFragmento de código" + Página Añadir fragmento de código.

Desde aquí, haga clic en "Añadir código personalizado (nuevo fragmento de código)" en la opción "Uso de fragmentos de código"Botón

Esto irá en "Creación de fragmentos de código personalizados"donde puede introducir el nombre del fragmento de código. Puede ser cualquier cosa que ayude a identificar el código.

A continuación, en el menú desplegable de la esquina superior derecha de la pantalla, seleccione "Fragmento PHP"como"tipo de código".

A continuación, copie y pegue el siguiente código en el campo "Vista previa del código":

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

Cuando haya terminado, busque el siguiente código en el fragmento de código PHP que acaba de pegar:

	color de fondo: #bee0ec;

A continuación, debe añadirse el código hexadecimal del color preferido junto a la opción de color de fondo. Si no desea utilizar un código hexadecimal, entonces puede utilizar algún nombre de color básico como "fig. reaccionario"o"azul (color)".

Nota: El nombre del color añadido aquí debe estar en inglés.

Después, desplácese hasta "palo" y seleccione "Autoinserción"Opciones.

A continuación, en el menú desplegable, seleccione el fragmento de código "colocación"para"Sólo administradores".

Después, vuelva a la parte superior de la página y ponga "inactivo"El interruptor cambia a "función".

Por último, recuerda hacer clic en "Guardar fragmentos de código" para guardar los cambios.

Ahora se puede acceder al editor de bloques desde la barra lateral de administración.

Así es como aparece el editor de bloques en el sitio después de añadir el fragmento de código PHP.

Si desea cambiar el color de fondo del front-end de su sitio web, puede hacerlo accediendo al panel de control de WordPressLa pantalla de personalización del Aspecto para realizar cambios.

Esto iniciará el personalizador de temas, haga clic en "Modos de color y oscuridad". Nota: El personalizador puede variar en función del tema utilizado.

Se abrirá un nuevo panel en la barra lateral, en el que pulse "Elija un color"Opciones.

El selector de color se abrirá ahora en la pantalla y podrás seleccionar el color de fondo que prefieras. Una vez seleccionado, recuerde hacer clic en la parte superior "escriba a"Botón

También es posible cambiar el color del texto, el color de resaltado, el color de los botones, etc. desde el Personalizador de temas. Sin embargo, si utiliza el
entonces estos cambios deben hacerse en el editor del sitio completo.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres