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

Personalización del administrador de WordPress - Añadir estilos

Read Time: 8 mins
This post is part of a series called Customizing the WordPress Admin.
Customizing the WordPress Admin - Listings Screens

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

En las primeras cinco partes de esta serie, te mostré cómo personalizar el administrador de WordPress de varias maneras, incluyendo la personalización de la pantalla de inicio de sesión, el escritorio y la pantalla de edición de entradas.

En este tutorial aprenderás a añadir un poco de estilo e identidad de marca a tus pantallas de administración. Concretamente, aprenderás a hacer lo siguiente:

  • personalizar el pie de página de la pantalla de administración y cómo aplicarle estilo
  • aplicar estilo a los menús de administración
  • aplicar estilo a los enlaces y botones

Para conseguir todo esto voy a crear un plugin, si ya has creado un plugin después de seguir las partes 1 a 5 de esta serie es posible que prefieras añadir el código de este tutorial a ese plugin, los que te acabará proporcionando un plugin con todas tus personalizaciones para el área de administración.


Lo que necesitarás para completar este tutorial

Para completar este tutorial necesitarás:

  • Una instalación de WordPress
  • Acceso a la carpeta de plugins de tu sitio para añadir tu plugin
  • Un editor de texto para crear tu plugin

Configuración del plugin

Como voy a incluir imágenes y hojas de estilo con este plugin, estoy creando una carpeta propia para él en lugar de crear un único archivo PHP. Dentro de esa carpeta voy a crear un archivo PHP que contendrá las funciones principales en mi plugin.

Esto significa que tengo una carpeta llamada wptutsplus-customizing-admin6-styling, en la que tengo dos carpetas, images (imágenes) y css, y un archivo PHP.

Al principio de ese archivo, estoy añadiendo las siguientes líneas:


El escritorio de inicio

Dado que ya he realizado algunas modificaciones en el escritorio de WordPress durante las partes anteriores de esta serie, no tiene el mismo aspecto que el panel estándar. La captura de pantalla siguiente muestra cuál es mi punto de partida:

customizing-the-wordpress-admin-part6-starting-dashboardcustomizing-the-wordpress-admin-part6-starting-dashboardcustomizing-the-wordpress-admin-part6-starting-dashboard

En este tutorial voy a añadir un poco de estilo para incorporar diferentes colores, lo que podría ser utilizado para reflejar tu propia identidad de marca.


1. Configuración de la hoja de estilo

Antes de hacer cualquier otra cosa voy a configurar la hoja de estilo correctamente. En lugar de usar el gancho de wp_enqueue_scripts como harías si añadieras una hoja de estilo para usarla en el front-end de tu sitio web, utiliza admin_enqueue_scripts en su lugar.

Por lo tanto, en tu plugin, añade lo siguiente:

También necesitarás crear una hoja de estilo en el directorio /css en la carpeta del plugin, que es donde añadirás estilo más adelante en este tutorial.


2. Modificar el texto del pie de página

El texto de pie de página predeterminado en WordPress dice 'Gracias por crear con WordPress'. Si estás administrando una instalación multisitio o desarrollando para clientes, es posible que en su lugar, aquí desees hacer referencia a tu propia marca. Por suerte, esto se puede hacer usando el filtro de admin_footer_text.

Voy a cambiar el texto y a añadir también un logotipo, así que voy a crear un directorio /images en la carpeta de mi plugin y añadiré mi logotipo a eso.

En el archivo principal de tu plugin añade lo siguiente:

Esto añade la nueva imagen y el texto del pie de página tal y como se muestra en la captura de pantalla:

customizing-the-wordpress-admin-part6-new-footercustomizing-the-wordpress-admin-part6-new-footercustomizing-the-wordpress-admin-part6-new-footer

Sin embargo, la imagen es un poco grande, a pesar de que la que he subido es pequeña. También está demasiado cerca del texto. Para corregir eso, añade un poco de estilo a la hoja de estilos que ya has registrado.

En la hoja de estilo que has creado para tu plugin, añade lo siguiente:

Ahora la imagen tiene el tamaño correcto:

customizing-the-wordpress-admin-part6-new-footer-styledcustomizing-the-wordpress-admin-part6-new-footer-styledcustomizing-the-wordpress-admin-part6-new-footer-styled

3. Aplicar estilo al menú de administración

En la Parte 3 de esta serie, te mostré cómo personalizar el contenido del menú de administración, ahora demostraré cómo personalizar su estilo. Voy a cambiar los colores bastante drásticamente, puede o no gustar el resultado, ¡pero muestra cómo hacerlo!

En la hoja de estilos que has creado, añade lo siguiente:

Esto da como resultado algunos colores muy diferentes para el menú de administración:

  • el fondo es gris oscuro
  • los submenús son blancos con texto gris
  • los enlaces son blancos
  • la página activa tiene un fondo rojo

El elemento más complicados para cambiar el estilo es la flecha que apunta a la página actual o a un submenú, esto se aplica con el elemento .wp-menu-arrow y el elemento div .wp-menu-arrow dentro de ella. Lo bueno es que WordPress utiliza CSS puro para crear esta flecha y no una imagen, por lo que una vez que hayas identificado los elementos a los que te debes dirigir, puedes cambiar tu color usando CSS.

El panel ahora tiene este aspecto:

customizing-the-wordpress-admin-part6-restyled-dashboardcustomizing-the-wordpress-admin-part6-restyled-dashboardcustomizing-the-wordpress-admin-part6-restyled-dashboard

4. Aplicar estilo a los enlaces

Quiero que mis enlaces reflejen los colores de marca que he utilizado para el menú del escritorio, en particular quiero cambiar el tono de rojo utilizado cuando se coloca el ratón sobre los enlaces o cuando están activos.

En la hoja de estilos, añade lo siguiente:

Esto ajusta el rojo de mis enlaces como se muestra en la siguiente captura de pantalla:

customizing-the-wordpress-admin-part6-link-colorscustomizing-the-wordpress-admin-part6-link-colorscustomizing-the-wordpress-admin-part6-link-colors

5. Aplicar estilo a los botones

El último cambio de estilo que quiero realizar es a los botones. Voy a cambiar el color de los botones en las pantallas de administración, tanto cuando están activos como inactivos. Esto lo hago para llamar la atención hacia ellos y también para que mantengan la coherencia con los colores del menú.

En la hoja de estilo, añade el código siguiente:

Esto cambia los colores de fondo y borde de los botones tanto en su estado predeterminado como cuando hacemos "hover" sobre ellos o cuando están activos. La captura de pantalla siguiente muestra el estado predeterminado:

customizing-the-wordpress-admin-part6-button-colorscustomizing-the-wordpress-admin-part6-button-colorscustomizing-the-wordpress-admin-part6-button-colors

Y este es el color cuando se pasa el ratón sobre un botón o se hace clic en él:

customizing-the-wordpress-admin-part6-button-hover-colorscustomizing-the-wordpress-admin-part6-button-hover-colorscustomizing-the-wordpress-admin-part6-button-hover-colors

Y ese es todo mi estilo, ¡hecho!


Resumen

En esta serie te he mostrado seis técnicas diferentes para personalizar el administrador de WordPress.

He cubierto lo siguiente:

  1. Creación de una pantalla de inicio de sesión personalizada con tu propio logotipo y tus propios colores
  2. Personalización del escritorio añadiendo y eliminando contenido
  3. Creación de menús de administración personalizados para ayudar a los usuarios
  4. Adición de texto de ayuda a las pantallas de edición para asistir a los usuarios durante la edición de su sitio
  5. Personalización de las pantallas de listados para mostrar solo lo que los usuarios necesitan
  6. Aplicación de estilo a las pantallas de administración para reflejar tu identidad de marca y/o hacer cambios de color en la interfaz de usuario o para hacerlo coincidir con el front-end de un sitio

Con suerte, esto te habrá apportado algo de inspiración para imaginar ideas propias.

WordPress es un sistema de gestión de contenido realmente genial, con alguna personalización extra puedes hacerlo tuyo, y proporcionar a tus usuarios y clientes una experiencia que les aporte ayuda adicional y que además refleje tu marca.

Advertisement
Did you find this post useful?
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.