() translation by (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:
1 |
/*
|
2 |
Plugin Name: WPTutsPlus Customize the Admin Part 6 - styling and branding the dashboard
|
3 |
Plugin URI: https://rachelmccollin.co.uk
|
4 |
Description: This plugin supports the tutorial in wptutsplus. It customizes the WordPress dashboard screen.
|
5 |
Version: 1.0
|
6 |
Author: Rachel McCollin
|
7 |
Author URI: http://rachelmccollin.com
|
8 |
License: GPLv2
|
9 |
*/
|
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:
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:
1 |
// let's start by enqueuing our styles correctly
|
2 |
function wptutsplus_admin_styles() { |
3 |
wp_register_style( 'wptuts_admin_stylesheet', plugins_url( '/css/style.css', __FILE__ ) ); |
4 |
wp_enqueue_style( 'wptuts_admin_stylesheet' ); |
5 |
}
|
6 |
add_action( 'admin_enqueue_scripts', 'wptutsplus_admin_styles' ); |
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:
1 |
//change the footer text
|
2 |
function wptutsplus_admin_footer_text () { |
3 |
echo '<img src="' . plugins_url( 'images/wptutsplus-icon.png' , __FILE__ ) . '">This tutorial is brought to you by <a href="http://wp.tutsplus.com">wptutsplus</a>.'; |
4 |
}
|
5 |
add_filter( 'admin_footer_text', 'wptutsplus_admin_footer_text' ); |
Esto añade la nueva imagen y el texto del pie de página tal y como se muestra en la captura de pantalla:
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:
1 |
/* styling for the footer */
|
2 |
#wpfooter #footer-left img { |
3 |
height: 1.2em; |
4 |
width: auto; |
5 |
margin-right: 0.5em; |
6 |
}
|
Ahora la imagen tiene el tamaño correcto:
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:
1 |
/* styling for admin menu */
|
2 |
|
3 |
/* background and text color */
|
4 |
#adminmenuback, #adminmenuwrap { |
5 |
background-color: #58595b; |
6 |
border-color: #fff; |
7 |
}
|
8 |
#adminmenu li.menu-top:hover, #adminmenu li.opensub > a.menu-top, #adminmenu li > a.menu-top:focus { |
9 |
background-color: #58595b; |
10 |
color: #d54e21; |
11 |
text-shadow: 0 1px 0 rgba(255,255,255,0.4); |
12 |
}
|
13 |
#adminmenu li.wp-menu-separator { |
14 |
background: #fff; |
15 |
border-color: #fff; |
16 |
}
|
17 |
|
18 |
/* links in admin menu */
|
19 |
#adminmenu a, |
20 |
#adminmenu li.menu-top:hover, |
21 |
#adminmenu li.opensub > a.menu-top, |
22 |
#adminmenu li > a.menu-top:focus { |
23 |
color: #fff; |
24 |
}
|
25 |
#adminmenu a:hover, |
26 |
#adminmenu a:active { |
27 |
color: #fff; |
28 |
text-decoration: underline; |
29 |
}
|
30 |
#adminmenu .wp-submenu a { |
31 |
color: #58595b; |
32 |
}
|
33 |
|
34 |
/* change color of arrow to submenus */
|
35 |
#adminmenu li.wp-not-current-submenu .wp-menu-arrow, |
36 |
#adminmenu li.wp-not-current-submenu .wp-menu-arrow div { |
37 |
background: #58595b; |
38 |
}
|
39 |
|
40 |
/* active screen as seen in menu - change the background and arrow colour */
|
41 |
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, |
42 |
#adminmenu li.current a.menu-top, |
43 |
.folded #adminmenu li.wp-has-current-submenu, |
44 |
.folded #adminmenu li.current.menu-top, |
45 |
#adminmenu .wp-menu-arrow, |
46 |
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head { |
47 |
background: #9e4059; |
48 |
}
|
49 |
#adminmenu li.wp-has-current-submenu .wp-menu-arrow, |
50 |
#adminmenu li.wp-has-current-submenu .wp-menu-arrow div { |
51 |
background: #9e4059; |
52 |
}
|
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:
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:
1 |
/* links elsewhere */
|
2 |
a:hover, a:active { |
3 |
color: #9e4059; |
4 |
}
|
Esto ajusta el rojo de mis enlaces como se muestra en la siguiente captura de pantalla:
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:
1 |
/* buttons */
|
2 |
.wp-core-ui .button-primary { |
3 |
background: #4b8938; |
4 |
background-image: -webkit-gradient(linear,left top,left bottom,from(#7ea367),to(#4b8938)); |
5 |
background-image: -webkit-linear-gradient(top,#7ea367,#4b8938); |
6 |
background-image: -moz-linear-gradient(top,#7ea367,#4b8938); |
7 |
background-image: -ms-linear-gradient(top,#7ea367,#4b8938); |
8 |
background-image: -o-linear-gradient(top,#7ea367,#4b8938); |
9 |
background-image: linear-gradient(to bottom,#7ea367,#4b8938); |
10 |
border-color: #4b8938; |
11 |
color: rgba(255,255,255,0.95); |
12 |
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); |
13 |
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); |
14 |
text-shadow: 0 1px 0 rgba(0,0,0,0.1); |
15 |
}
|
16 |
.wp-core-ui .button-primary.active, |
17 |
.wp-core-ui .button-primary:hover, |
18 |
.wp-core-ui .button-primary:active { |
19 |
background: #9e4059; |
20 |
background-image: -webkit-gradient(linear,left top,left bottom,from(#ba7582),to(#9e4059)); |
21 |
background-image: -webkit-linear-gradient(top,#ba7582,#9e4059); |
22 |
background-image: -moz-linear-gradient(top,#ba7582,#9e4059); |
23 |
background-image: -ms-linear-gradient(top,#ba7582,#9e4059); |
24 |
background-image: -o-linear-gradient(top,#ba7582,#9e4059); |
25 |
background-image: linear-gradient(to bottom,#ba7582,#9e4059); |
26 |
border-color: #9e4059; |
27 |
color: rgba(255,255,255,0.95); |
28 |
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); |
29 |
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); |
30 |
text-shadow: 0 1px 0 rgba(0,0,0,0.1); |
31 |
}
|
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:
Y este es el color cuando se pasa el ratón sobre un botón o se hace clic en él:
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:
- Creación de una pantalla de inicio de sesión personalizada con tu propio logotipo y tus propios colores
- Personalización del escritorio añadiendo y eliminando contenido
- Creación de menús de administración personalizados para ayudar a los usuarios
- Adición de texto de ayuda a las pantallas de edición para asistir a los usuarios durante la edición de su sitio
- Personalización de las pantallas de listados para mostrar solo lo que los usuarios necesitan
- 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.
