Agregar CSS personalizado al área de administración de WordPress

[ 19 noviembre 2018 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

En un artículo anterior vimos cómo eliminar las opciones de pantalla de la administración de WordPress, sin embargo tener la opción de hacer cualquier cambio CSS te dará más control para ocultar o cambiar el diseño de cualquier opción en la área de administración de WordPress.

Generalidades

WordPress genera estilos por defecto para el front-end del sitio, además para la parte de administración también hay estilos estándar que puedes usar para ocultar o para cambiar el diseño de ciertos elementos. Para agregar código CSS usaremos un archivo de estilos que se cargue en la administración de WordPress.

Estilos CSS de ejemplo

El siguiente código CSS oculta algunos enlaces de las filas en el listado de entrada y destaca con un color diferente el enlace de editar


body.post-type-post .row-actions .trash,
body.post-type-post .row-actions .inline{
  display: none;
}

body.post-type-post .row-actions .edit a{
  color:green;
}

Con este código obtendremos algo similar a lo que se muestra en la siguiente imagen:

Comparación luego de agregar CSS para ocultar enlaces filas entradas

Para que el código sólo aplique a las entradas se usó la clase .post-type-post a nivel de la etiqueta body

Registrando el archivo CSS para la administración

El código CSS anterior lo colocaremos en un archivo llamado admin.css, dentro de la carpeta css del theme que estemos usando, por lo tanto el código para registrar este archivo sería:


function admin_style() {
  wp_enqueue_style('admin-styles', get_stylesheet_directory_uri().'/css/admin.css');
}
add_action('admin_enqueue_scripts', 'admin_style');

En el código anterior:

Usamos el hook llamado admin_enqueue_scripts el cual hace referencia a la función admin_style
Dentro de la función admin_style usamos la función de WordPress wp_enqueue_style
El primer parámetro de la función es el identificador único, lo llamamos admin-styles
El segundo parámetro es la ruta del archivo, usaremos la función get_stylesheet_directory_uri para obtener la ruta del theme

Puedes colocar este código en el archivo functions.php de tu child-theme

Conclusión

Tal como has podido ver, puedes agregar un archivo CSS para que funcione en la administración de tu sitio WordPress y allí usar código CSS para ocultar o cambiar el diseño de elementos de manera simple.

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