Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Creative Coding

Añadir temas personalizados de la interfaz de usuario a la administración de WordPress usando Sass

by
Read Time:6 minsLanguages:

Spanish (Español) translation by Esther (you can also view the original English article)

Con el lanzamiento de WordPress 3.8 tenemos ahora una nueva característica para los temas de la interfaz de usuario de administración. Esto significa que cada usuario puede cambiar el esquema de color de su administrador sin importar el tema que se esté usando en el front-end. Para cambiar el esquema de color de tu administrador, ve a Users > Your Profile (Usuarios > Tu Perfil).

user-profile-pageuser-profile-pageuser-profile-page

Aquí verás ocho temas predefinidos entre los que podrás elegir. Selecciona cualquier tema de estos temas y verás los cambios inmediatamente. Cuando termines de seleccionar el tema, haz clic en el botón "Actualizar perfil".

Pero eso no es todo, ¿y si quieres añadir tu propia combinación de colores a la administración? Lo veremos en este tutorial.

Nota: Necesitas tener Ruby y Sass instalados en tu sistema para seguir este tutorial. Puedes encontrar más instrucciones sobre cómo instalar Ruby y Sass aquí.


Estructura básica de los archivos:

Haremos nuestro propio plugin para añadir más combinaciones de colores a la interfaz de administración. De esta manera, nos ajustaremos a los estándares de WordPress para no mezclar la presentación con la funcionalidad.

Así que vayamos a nuestra carpeta de plugins y hagamos un nuevo directorio llamado "admin-color-themes". En ese directorio, haz tres directorios más para nuestros estilos, imágenes y javascript. También crearemos un archivo wordpress-admin-themes.php y añadiremos el siguiente código:

Ahora que hemos construido la estructura de archivos necesaria, empezaremos a añadir estilos para nuestros nuevos esquemas de IU.


Copiar los archivos necesarios:

Hay dos pasos que involucran la preparación de esquemas de color personalizados para agregar en tu administración:

  1. Haciendo la hoja de estilo de la combinación de colores
  2. Registrándolo con WordPress para que aparezca en tu página de perfil de usuario

WordPress 3.8 usa archivos Sass para manejar los esquemas de color. Estos archivos Sass se encuentran en wp-admin > css > colors. Al entrar en este directorio, encontrarás tres archivos Sass:

  1. _variables.scss
  2. _mixins.scss
  3. _admin.scss

También notarás que los esquemas de color predefinidos también residen en el mismo directorio.

Estos archivos de Sass contienen las mezclas y variables necesarias que podemos reutilizar para definir nuestros propios estilos. Así que copia estos tres archivos en plugins > admin-color-themes > css.

También necesitamos algunos estilos básicos que WordPress usa para su administración. Podemos encontrar estos estilos en wp-admin > css nombrando colors.css y colors-rtl.css. Como su nombre indica, el último es para las lenguajes de derecha a izquierda. Copia estos dos archivos en plugins > admin-color-themes > css.

Ahora que hemos copiado los archivos necesarios, estamos listos para personalizarlos para añadir temas de interfaz de usuario personalizados al administrador.


Personalizar los archivos de Sass:

Ve a tu carpeta de plugins > admin-color-themes > css y abre los siguientes archivos Sass usando tu editor de código:

  1. _variables.scss
  2. _mixins.scss
  3. _admin.scss

Esto es lo que hace cada uno de estos archivos:

  1. _variables.scss contiene variables Sass para varias propiedades como el color del texto, el color base, el color de realce y el color de notificación, etc. Podemos modificar estas propiedades aquí cambiando los valores de sus respectivas variables
  2. _mixins.scss contiene un mixin para crear un efecto de botón 3d basado en el color base que definimos en nuestro archivo _variables.scss.
  3. _admin.scss contiene estilos para varios elementos y sus estados de interacción. También importa los archivos _variables.scss y _mixin.scss. Es aquí donde todos esos estilos se aplican a los elementos que definimos en nuestros archivos de variables y mixins.

Necesitamos crear dos archivos más llamados color-scheme.scss y color-scheme-rtl.scss en la carpeta css. En el color-scheme.scss agrega el siguiente código:

Mientras que en color-scheme-rtl.scss, incluiremos estilos para el soporte rtl:

Ten en cuenta que no necesitamos especificar la extensión del archivo `.scss`. Además, hemos referenciado el archivo usando admin en lugar de _admin porque es un parcial. Si necesitas saber más sobre Sass `@import` y los parciales, puedes leer sobre cada uno de ellos en la documentación de Sass.

Así que, como puedes ver, generaremos dos archivos para cualquier esquema de color. Uno servirá para los lenguajes de izquierda a derecha, mientras que el otro servirá para el otro si se detecta una localización de derecha a izquierda.

Ahora abre el archivo _variable.scss y comienza a reemplazar los valores de las variables. Los nombres de las variables son bastante autodescriptivos, así que no tendremos problemas para personalizarlos. Cambia los valores como se muestra a continuación:

En la consola, navega a la carpeta css dentro de admin-color-themes y escribe el siguiente comando:

sass color-scheme.scss forest-afternoon.css

sass color-scheme-rtl.scss forest-afternoon-rtl.css

Aquí, hemos generado dos archivos css llamados forest-afternoon.css y forest-afternoon-rtl.css. Podemos abrir estos archivos y ver que Sass ha fusionado _variables.scss, _mixins.scss y _admin.scss en un solo archivo. Estos archivos css recién generados están usando la regla normal css @import para importar los archivos colors.css y colors-rtl.css.

Ahora, necesitamos registrar estas hojas de estilo con WordPress para que aparezcan como una opción en la página de User Profile (Perfil de Usuario).


Registro de hojas de estilo con WordPress

En el index.php primero definiremos una constante para el path:

Ahora definiremos una función que se ejecutará cada vez que un usuario acceda al administrador:

Dentro de la función add_custom_admin_themes, registraremos nuestros nuevos estilos generados usando la función wp_admin_css_color:

El `wp_admin_css_color` acepta cinco parámetros para la clave, el nombre, la URL, los colores y los colores de los iconos. Los tres primeros son obligatorios y los otros dos son opcionales.

Estos parámetros se definen a continuación:

  • Una clave es la clave única del tema. No hay dos temas que puedan tener la misma clave.
  • El nombre es lo que aparece en la página de perfil/
  • La URL es la ruta de la hoja de estilo.
  • Colores se refiere a un conjunto de valores hexadecimales de color. Se utiliza para dar a los usuarios una sensación sobre el tema

También tenemos que tener en cuenta el apoyo a la RTL. Así que en la parte superior de la declaración de la función agrega el siguiente código:

Y cambia el parámetro de la ruta en la llamada de la función wp_admin_css_color a lo siguiente:

Este bit comprobará si la localización actual es un lenguaje de derecha a izquierda. Si es así, se cargará la hoja de estilos con el sufijo -rtl.

El código final debería ser algo como esto:

En este punto, hemos registrado con éxito el nuevo estilo de administración, podemos comprobarlo yendo a Users (Usuarios) > Your Profile (Tu Perfil) (asegúrate de activar el plugin primero):

user-profile-page-addeduser-profile-page-addeduser-profile-page-added

Activa el nuevo estilo seleccionándolo y pulsando el botón Update Profile (Actualizar perfil).

Puedes crear tantos estilos como quieras con solo alterar los valores en el archivo _variables.scss y luego registrarlos en tu index.php. Puedes obtener rápidamente algunas combinaciones de colores geniales usando Adobe Kuler. El tema que usamos en este tutorial es Forest Afternoon (Tarde de bosque).

Puedes descargar el plugin completo aquí.


Conclusión

En este tutorial vimos cómo podemos crear y añadir algunas combinaciones de colores más al administrador de WordPress usando el preprocesador Sass.

Si quieres saber más sobre Sass, abajo encontrarás los recursos:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.