Spanish (Español) translation by Jorge Montoya (you can also view the original English article)
Tan refrescante como el nuevo tablero de WordPress es, no todo el mundo está feliz con algunos de los cambios. Personalmente, me encanta el nuevo estilo minimalista.
Sólo había una cosa que realmente extraño: La navegación a la izquierda carecía de su separación visual entre diferentes áreas de WordPress.
En este consejo rápido, voy a mostrarle cómo inspeccionar el backend CSS y traer los separadores de vuelta con sólo unas pocas líneas de código.
Encuentre Sus Estilos
Los separadores que vamos a intentar restaurar no se han ido realmente - son simplemente transparentes. Haga clic con el botón derecho en el área en blanco entre Comentarios y Apariencia e inspeccione este elemento.
Debería ver el HTML interpretado. Los menús son elementos ul con elementos li para cada ítem de menú.
Abra ul id = "adminmenu" role = "navigation". Verá todos los elementos de menú envueltos en elementos li, pero también verá un li class = "wp-menu-separator" entre ellos. Al hacer clic en él, podrá ver los estilos y debe notar el CSS para este elemento.
1 |
#adminmenu li.wp-menu-separator { |
2 |
background: transparent; |
3 |
border-color: transparent; |
4 |
}
|
Ese es nuestro estilo del separador. Específicamente, es el que necesitamos modificar.
Agregue Sus Propios Eestilos CSS al Backend
Ahora vamos a escribir una función, para encajar nuestros propios estilos CSS con el Backend de WordPress.
Agregue este código a su archivo de temas functions.php.
1 |
function tutsplus_separators() { |
2 |
|
3 |
}
|
4 |
add_action( 'admin_head', 'tutsplus_separators' ); |
La primera parte define la función y el conector add_action lo añadirá al encabezado del escritorio de WordPress. En el medio, agregaremos ahora un echo para publicar nuestro propio código CSS.
1 |
function tutsplus_separators() { |
2 |
echo '<style type="text/css">#adminmenu li.wp-menu-separator {margin: 0; background: #444;}</style>'; |
3 |
}
|
4 |
add_action( 'admin_head', 'tutsplus_separators' ); |
Si usted recarga sus páginas, sus separadores estarán en el color #444 - gris. Yo cambié el margen del separador también porque necesitaba alguna alineación en mi opinión.
Cubriendo los Esquemas de Color Predeterminados de WordPress
Si usted es un perfeccionista, notará que este color sólo se adapta al estilo predeterminado de administración negro y azul de WordPress. Echemos un vistazo a cómo podemos cubrir todos los nuevos esquemas de color.
El etiqueta body de WordPress tiene un muchas clases prácticas para identificar diferentes usos. Si usted mira más de cerca, usted verá también una clase para el esquema de color. El valor predeterminado se denomina admin-color-fresh.
Trate de cambiar su estilo en "Usuarios" > "Su perfil" y ver cómo está cambiando la clase. Con esta clase disponible, podemos dar a cada estilo de color su propio color de separador. Simplemente agregue el nombre de la clase delante de tu código css así .admin-color-fresh #adminmenu li.wp-menu-separator {background: # 444;}
Aquí el código ahora con todos los estilos de color apropiados para los separadores:
1 |
function tutsplus_separators() { |
2 |
echo '<style type="text/css"> |
3 |
#adminmenu li.wp-menu-separator {margin: 0;}
|
4 |
.admin-color-fresh #adminmenu li.wp-menu-separator {background: #444;}
|
5 |
.admin-color-midnight #adminmenu li.wp-menu-separator {background: #4a5258;}
|
6 |
.admin-color-light #adminmenu li.wp-menu-separator {background: #c2c2c2;}
|
7 |
.admin-color-blue #adminmenu li.wp-menu-separator {background: #3c85a0;}
|
8 |
.admin-color-coffee #adminmenu li.wp-menu-separator {background: #83766d;}
|
9 |
.admin-color-ectoplasm #adminmenu li.wp-menu-separator {background: #715d8d;}
|
10 |
.admin-color-ocean #adminmenu li.wp-menu-separator {background: #8ca8af;}
|
11 |
.admin-color-sunrise #adminmenu li.wp-menu-separator {background: #a43d39;}
|
12 |
</style>'; |
13 |
}
|
14 |
add_action( 'admin_head', 'tutsplus_separators' ); |
Bono
Si usted quiere líneas de separación entre cada elemento de menú intente ajustar la clase menu-top de los
ítems li un poco con border-bottom y border-top.
Plugin
Agregué este pequeño pedazo de código a un plugin para agregarlo rápidamente a algunas de mis instalaciones. Si lo desea, puede obtenerlo desde el Directorio de Plugins de WordPress.
By
