• 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

Colores personalizados en la administración de WordPress

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

css dashboard

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

 

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Relación bidireccional entre diferentes tipos de contenido con ACFRelación bidireccional entre diferentes tipos de contenido con ACF
  • Creación dinámica de Custom Post Types en WordPressCreación dinámica de Custom Post Types en WordPress
  • Mostrar / ocultar bloques Gutenberg para usuarios registrados o visitantesMostrar / ocultar bloques Gutenberg para usuarios registrados o visitantes
  • Borrar tablas wp_actionscheduler_actions y wp_actionscheduler_logsBorrar tablas wp_actionscheduler_actions y wp_actionscheduler_logs
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

Presentación

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

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Cabecera fija en theme WordPress

Personalizar el mantenimiento programado de WordPress

Eliminar el selector de idioma en el acceso a WordPress

Cómo duplicar un Widget en WordPress con Javascript

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