M谩s

    C贸mo personalizar el color de fondo del editor de bloques de WordPress

    - Advertisement -

    驴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.

    Editor de bloques por defecto

    Dicho esto, veamos c贸mo puedes cambiar f谩cilmente el color de fondo del editor de WordPress.

    鉂 Tambi茅n te interesa:How to Protect Your WooCommerce Store from FraudC贸mo proteger su tienda WooCommerce del fraude

    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)’.

    Agregar 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.

    Elija la opci贸n PHP Snippet como tipo de c贸digo para cambiar el color de fondo del editor

    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.

    鉂 Tambi茅n te interesa:馃摲 Como crear y administrar archivos Adstxt en WordPress FacilC贸mo crear y administrar archivos Ads.txt en WordPress (F谩cil)

    Pegue el fragmento de c贸digo para cambiar el color de fondo del editor

    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.

    Elija el m茅todo de inserci贸n y la ubicaci贸n del fragmento de c贸digo

    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.

    Guarde el fragmento de c贸digo para cambiar el color de fondo

    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.

    Vista previa del color del editor

    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

    鉂 Tambi茅n te interesa:How to Write Good WordPress Meta DescriptionsC贸mo escribir buenas meta descripciones de WordPress

    Populares

    M谩s de esta categor铆a

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!
    Por favor ingrese su nombre aqu铆

    Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.