• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Colores personalizados en la administración de WordPress

Colores personalizados en la administración de WordPress

[ 21 septiembre 2021 ] [ Autor: Jhon Marreros Guzmán ][ Core - Básico] [ ]

css dashboard

Suscríbete a DecodeCMS:  

WordPress por defecto tiene algunos esquemas de colores que puedes usar para personalizar la administración del sitio, sin embargo en este artículo veremos cómo agregar esquemas personalizados adicionales.

 

Resultado Final

Al final lo que queremos obtener será un nuevo esquema de colores que el usuario pueda elegir para personalizar el backend del sitio.

Nuevo esquema de colores

 

Generando un nuevo Esquema de Color

El sitio que usaremos para generar un nuevo esquema de color es WordPress Admin Colors

WordPress Admin colors sitio

 

Seleccionaremos la opción de Start Creating, luego podremos elegir un nombre, un identificador y seleccionar los colores para el nuevo esquema.

Esquema de color selección de nombre y colores

 

Podrás ver los cambios directamente en el mismo sitio web, una vez culminado podrás generar el esquema de color

Generación nuevo esquema de color

 

Aparecerá una pantalla en la cual se distinguen dos pasos:

  • El primero de ellos indica el código CSS como parte de un archivo que hay que descargar y copiar a la carpeta de tu tema activo.
  • El segundo paso es usar un código PHP que debes copiar como parte del archivo functions.php de tu tema o en algún plugin de Snippets.

 

Esquema de colores generación y pasos a realizar

 

Usando el código CSS generado

Tras descargar el archivo puedes copiarlo como parte de los archivos de tu tema. El archivo tendrá el nombre que definiste en el campo de identificador de esquema.

En nuestro ejemplo estamos usando un tema hijo del tema StoreFront, por lo que el archivo tenemos que copiarlo en la siguiente ruta:

wp-content/themes/store-front-child/

Copiar archivo CSS generado al tema

 

Usando el código PHP

El generador de colores de esquemas también nos brinda un código PHP, este código esta preparado para hacer referencia al archivo .css que hemos copiado. Este código permite ver de manera visual el nuevo esquema en el perfil del usuario.

Sin embargo el código, al menos de momento, tiene un bug y no funciona con temas hijo, por lo que haremos un pequeño cambio.

Cambia la función get_template_directory_uri() por get_stylesheet_directory_uri(), el código quedaría:

$theme_dir = get_stylesheet_directory_uri();

 

Conclusión

No siempre los esquemas de colores que vienen por defecto en WordPress se adaptan a los colores corporativos de tu sitio, en este artículo hemos visto cómo generar nuevos esquemas de colores y personalizar de esta forma los colores de la administración de WordPress.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Quitar el menú de WooComerce en la administración de WordPress para ciertos usuariosQuitar el menú de WooComerce en la administración de WordPress para ciertos usuarios
  • Eliminar automáticamente las imágenes al borrar una entradaEliminar automáticamente las imágenes al borrar una entrada
  • Ocultar precios de productos a usuarios visitantesOcultar precios de productos a visitantes en WooCommerce
  • Deshabilitar Información de Usuarios de la REST API de WordPressDeshabilitar Información de Usuarios de la REST API de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Omnisend
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad SEO social woocommerce

Populares

Cómo agregar un menú personalizado a la barra de administración de WordPress

Modificar el mensaje de notificación de comentarios en WordPress

Habilitar comentarios en el inicio de WordPress

Agregar imagen a categorías usando ACF en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2026 Todos los derechos reservados