• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Agregar CSS personalizado al área de administración de WordPress

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

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

[ 19 noviembre 2018 ] [ Actualizado: 23 octubre 2020 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

css dashboard

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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

 

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 } );

Puedes agregar este código al final de tu archivo functions.php de tu tema hijo

 

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

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (5 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Andres

    25 junio, 2020

    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. 😀

    • Jhon Marreros Guzmán

      26 junio, 2020

      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.

      • Andres

        26 junio, 2020

        Gracias Jhon por su respuesta, voy a estar al pendiente saludos. 😀

  2. David

    7 enero, 2021

    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..

    • Jhon Marreros Guzmán

      13 enero, 2021

      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.

  3. Facundo

    21 diciembre, 2021

    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.

    • Jhon Marreros Guzmán

      27 diciembre, 2021

      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.

  4. Victor

    30 julio, 2022

    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

    • Jhon Marreros Guzmán

      2 agosto, 2022

      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.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Asignar entradas a una categoría de acuerdo al título en WordPress

Listar todos los Shortcodes en un sitio WordPress

Insertar javascript en WordPress de forma correcta

Cómo usar Roles y Capacidades en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados