Wordpress

Modificar el color de fondo de los borradores en el backend de WordPress

Vamos con un pequeño consejo para hacer más intuitivo el backend de WordPress cuando en nuestro proyecto utilizamos a menudo el estado «borrador». Si es tu caso, habrás notado que es difícil distinguir una entrada (o custom post type) publicada de las que están en modo borrador.

Captura de pantalla 2015-09-29 a las 11.26.50

Tan sólo la palabra «borrador» las distingue, ya que el sombreado que vemos no tiene nada que ver con el estado de la entrada, si no con el estilo de la tabla, que sombrea las filas impares para facilitar la lectura. Teniendo esto en cuenta, vamos a añadir unas reglas CSS que van a colorear en oscuro las filas que contienen una entrada en estado «borrador», así el resto destacará más.

tr.status-draft {
background-color: #C5C5C5;
}
.striped>tbody>tr.status-draft:nth-child(odd) {
background-color: #bdbdbd;
}

Si queremos asignar un color para cada estado de entrada, no tenemos más que fijarnos en las clases que se aplican a las filas de la tabla dependiendo del estado:

  • Programada: status-future
  • Publicada: status-publish
  • Pendiente de revision: status-pending

Así pues podemos colorear de amarillo las entradas «pendientes de revisión» y de azul las «programadas para el futuro», y dejar como están las publicaciones «publicadas»

tr.status-draft {
background-color: #C5C5C5;
}
.striped>tbody>tr.status-draft:nth-child(odd) {
background-color: #BDBDBD;
}
tr.status-future {
background-color: #E7E9FF;
}
.striped>tbody>tr.status-future:nth-child(odd) {
background-color: #DBDEF9;
}
tr.status-pending {
background-color: #FBFFDA;
}
.striped>tbody>tr.status-pending:nth-child(odd) {
background-color: #F7FDC5;
}

 

Si ves, aplicamos un primer color para todas las filas de la tabla y después aplicamos un color algo más oscuro a las filas impares.

¿Dónde añadimos estas reglas?

Pues dependerá del theme que estés usando. Algunos disponen de opciones de personalización que permiten escribir reglas CSS en un área de texto y las guardan en la base de datos sin necesidad de modificar archivos css o php. Suelen estar en «Apariencia > Opciones del tema». Sin embargo, es posible que estas reglas css sólo afecten al frontend, es decir, a la parte «pública» de la página, y no al panel de administración de WordPress.

Una de las formas correctas de aplicar estas CSS sería a través de un plugin como «Add Admin CSS«, que añadirá a la cabecera del html de nuestro backend las reglas que escribamos en un área de texto. También podemos subir un archivo CSS por FTP o mediante el gestor de medios de WordPress y decirle al plugin que añada las reglas contenidas en ese archivo, de modo que podemos editarlo con nuestro editor favorito, en lugar de en un formulario html.

Sin embargo, nosotros solemos implementar esta funcionalidad a través de una función en un Child Theme. Todos nuestros proyectos requieren de un alto grado de presonalización, tanto en el frontend como en el backend, de modo que siempre comenzamos por crear un Child Theme de la plantilla de WordPress que hayamos elegido. De este modo, cuando actualicemos el theme principal, no perderemos las modificaciones que hayamos hecho.

Una vez creado el child theme, dentro de su directorio creamos un subdirectorio llamado CSS donde subiremos nuestro archivo CSS (admin.css, por ejemplo) y otros más si fueran necesarios en nuestro proyecto. Ahora, en el archivo functions.php del child theme, crearemos una función y «anclaremos» su resultado a la cabecera del html de nuestro panel de administración de wordpress:

function cargar_estilos_admin() {
wp_enqueue_style( ‘admin_css’, get_stylesheet_directory_uri() . ‘/css/admin.css’, false, ‘1.0.0’ );
}
add_action( ‘admin_enqueue_scripts’, ‘cargar_estilos_admin’ );

Si piensas que sería más sencillo escribir directamente las css en el archivo header.php de tu child theme, piensa que si actualizas el theme principal y hay modificaciones sustanciales en el archivo header.php, tú no las vas a ver ni disfrutar porque tu child theme está «sobreescribiendo» ese archivo (si hablamos con propiedad no lo sobreescribe, sino que tiene prioridad). Incluso es posible que se produzca algún error y tu sitio se caiga (por experiencia).

¿Y si quiero hacerlo sin utilizar un child theme ni un plugin de terceros?

Puedes escribir tu propio plugin, no es muy complicado, pero para cosas sencillas como estas, los plugins de terceros ofrecen rapidez de implementación, son ligeros, e incluso puede que ofrezcan algo de soporte.

 

Contacto

Información

Av. Cesaraugusto 44, 2º 1ª
50.004 Zaragoza
(Spain)

(+34) 976 49 54 20
(+34) 656 36 65 23

sumun@sumun.net
sumun.net

¿Quieres recibir nuestra newsletter?



 

Visita nuestro blog

 

Horario de atención

Lunes a viernes: 08:30 – 16:30 h

Información básica sobre el tratamiento de tus datos:

  • Responsable: Sumun Comunicación Global S.L.U. (Sumun)
  • Finalidad: resolución de consultas (formulario de contacto) / gestión de candidaturas (formulario «trabaja con nosotros»)
  • Legitimación: consentimiento de la política de privacidad marcando la casilla al efecto.
  • Destinatario: Sumun. No se cederán los datos a terceros.
  • Tus derechos: acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, transparencia. lopd@sumun.net
  • Caducidad: hasta que el usuario comunique que quiere suprimirlos, o en su defecto hasta que Sumun considere que ya no son de utilidad.

¿Qué tipo de empleo estás buscando?

Adjunta tu CV en formato PDF (máximo 6MB)

Información básica sobre el tratamiento de tus datos:

  • Responsable: Sumun Comunicación Global S.L.U. (Sumun)
  • Finalidad: resolución de consultas (formulario de contacto) / gestión de candidaturas (formulario «trabaja con nosotros»)
  • Legitimación: consentimiento de la política de privacidad marcando la casilla al efecto.
  • Destinatario: Sumun. No se cederán los datos a terceros.
  • Tus derechos: acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, transparencia. lopd@sumun.net
  • Caducidad: hasta que el usuario comunique que quiere suprimirlos, o en su defecto hasta que Sumun considere que ya no son de utilidad.

Usamos algunas cookies

Usamos servicios de terceros (Google Analytics y Hotjar) para monitorizar el comportamiento general de los usuarios y así ver qué es lo que más interesa. Si haces clic en aceptar las instalaremos y desaparecerá este mensaje, y confirmarás que aceptas la política de cookies. ACEPTAR

Aviso de cookies