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:
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
Agregar código CSS a la administración a través de un Hook
Como alternativa a lo anterior, es posible agregar código CSS a la administración de WordPress a través de un Hook, específicamente usando el hook admin_head
<?php // Esta línea se puede eliminar
add_action( 'admin_head', function () { ?>
<style>
// Aqui tu código CSS
</style>
<?php } );
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
Artículos Relacionados
(5 votos, promedio: 5,00 de 5)
Cargando...
Hola muy buena pagina. Me sirvio mucho, la comencé a utilizar de apoyo para mis proyectos. Te agradezco el esfuerzo. Quería consultarte sobre una duda que me surgió; como puedo modificar el estilo del administrador dependiendo de los permisos de usuarios, es decir modificar el estilo para el panel de control de por ejemplo un escritor que sea diferente al de un moderador, espero hacerme entender, desde ya muchas gracias. 😀
Hola Andrés, he visto plugins que te controlan los accesos, pero no que te cambien el diseño, evaluaré hacer un artículo sobre esto. Gracias por la sugerencia. Saludos.
Gracias Jhon por su respuesta, voy a estar al pendiente saludos. 😀
Gracias, buenísimo como siempre!!
Entiendo que podría servir para ocultar la papelera si por ejemplo no quiero que un gestor de tienda pueda eliminar pedidos, verdad? Sólo quiero que pueda eliminar pedidos el administrador.
¿O hay alguna manera más eficiente de hacerlo? Sin plugins me refiero, quiero usar los menos posibles porque me acaban dando problemas cuando hay actualizaciones..
Hola, si podrías ocultar cualquier elemento, pero ten en cuenta que estará sólo oculto por CSS, los permisos aún se seguirán teniendo para realizar estas acciones. Saludos.
Estoy tratanddo de customizar la interfaz de administración de un custom post type que cree pero todavia no ocurre nada, puse el codigo en el archivo functions.php y cree el admin css en la carpeta que traen por defecto el proyecto de wordpress.
Hola, verifica primero si tu archivo de estilo esta cargando, puedes ver el código HTML y verificar, sigue el ejemplo de este artículo primero.
Hola buen tema, excelente explicación, hice las pruebas y todo salio tal cual, pero quisiera nos aclararas a mi y algunos colegas que estamos haciendo algunas pruebas y deseariamos saber si esto funcionaria en Woocommerce, ?? … me explico, en tu ejemplo utilizas la pagina de entradas de wordpress….pero estamos tratando de hacer lo mismo pero en la pagina de productos de wooComerce y no nos sale o no nos lo permite… es posible hacerlo alli? o es que Woocommerce bloquea algo… si así fuera existe una forma de editar o sea darle CSS a las paginas de Woocommerce como ejemplo la pagina de entradas de productos
Hola, has probado también de la forma: Agregar código CSS a la administración a través de un Hook? , tu código CSS si funciona en la página?, lo puedes probar por ejemplo con firefox con el inspector de código > editor de estilos, agregando uno nuevo. Saludos.