Colores de celda de tabla personalizados en el panel de administración de WordPress

Colores de celda de tabla personalizados en el panel de administración de WordPress

Siempre pensé que sería interesante poder cambiar el color de fondo de las líneas de las publicaciones según diferentes criterios en la administración de WordPress. Entonces, miré a mi alrededor y encontré algunos tutoriales para hacerlo. Pero lo malo es que cada tutorial tenía el mismo código, probablemente un simple copiar y pegar. Y además, después de algunas pruebas, vi que todos estos artículos estaban incompletos. Es por eso que decidí profundizar un poco más en la explicación de cómo agregar colores de fondo específicos a la línea de publicación. ¡Y para hacer esto, crearemos un nuevo complemento!

Paso 1: el complemento

Bien, comencemos, necesitamos crear un complemento, como vimos en mis publicaciones anteriores, esta es la parte más fácil. Cree una nueva carpeta en wp-content / plugins y asígnele el nombre “color-my-posts”. Dentro, cree un nuevo archivo y llámelo…. “Color-my-posts.php” (¡no crea que no tengo imaginación!). Abra este archivo y agregue este código:

<?php
/*
Plugin Name: Color My Posts
Plugin URL: http://remicorson.com/color-my-posts
Description: A little plugin to color post rows depending on the posts' status in the administration
Version: 0.1
Author: Remi Corson
Author URI: http://remicorson.com
Contributors: corsonr
tags: color, customization, administration, corsonr, remi corson
*/

Lo que esto hace es decirle a WordPress que hay un nuevo complemento llamado “Color de mis publicaciones” en su carpeta de complementos. Ahora su complemento, incluso si está vacío, debería aparecer en la lista de complementos en el menú “Complementos”. En el siguiente paso, crearemos una clase simple para instanciar el complemento.

Paso 2: la clase principal

Como creamos una clase en mi tutorial sobre cómo agregar atributos personalizados a los menús de WordPress, necesitamos hacer lo mismo y para crear una clase, aquí se explica cómo hacerlo:

class rc_color_my_posts {

	/*--------------------------------------------*
	 * Constructor
	 *--------------------------------------------*/

	/**
	 * Initializes the plugin
	 */
	function __construct() {

		add_action('admin_footer', array( &$this,'rc_color_my_admin_posts') );

	} // end constructor

	function rc_color_my_admin_posts(){
		/* Be patient ! */
	}

}

// instantiate plugin's class
$GLOBALS['color_my_posts'] = new rc_color_my_posts();

Aquí estamos creando una clase llamada “rc_color_my_posts que contiene un constructor y una función llamada rc_color_my_admin_posts (). En el constructor, conectamos la función rc_color_my_admin_posts () a admin_footer. Esto significa que nuestra función se tendrá en cuenta al cargar el pie de página del administrador. Ahora solo tenemos que agregar algo de código CSS a nuestra función. Este código se imprimirá directamente en el código fuente de las páginas de administración de WordPress.

Paso 3: Estilo de los artículos

Como dije antes, todos los tutoriales de formato de línea de publicación en el administrador de WordPress que he visto, solo nos ocupamos del estado de la publicación. Así es, puede diseñar artículos según su estado, pero eso no es todo. Para aquellos que estén interesados, hay una función llamada get_post_class () en el /wp-includes/post-template.php archivo principal. Por si acaso, no cambie el código de este archivo (al menos no todavía).

Bueno, esta función get_post_class () es genial porque es la responsable de determinar las clases posteriores. Esta función se utiliza en la administración y en la interfaz. A continuación, se explica cómo agregar código CSS personalizado para cada clase generada por get_post_class:

function rc_color_my_admin_posts(){
 ?>
 <style>
 /* Color by post Status */
 .status-draft { background: #ffffe0 !important;}
 .status-future { background: #E9F2D3 !important;}
 .status-publish {}
 .status-pending { background: #D3E4ED !important;}
 .status-private { background: #FFECE6 !important;}
 .post-password-required { background: #ff9894 !important;}
/* Color by author data */
 .author-self {}
 .author-other {}
/* Color by post format */
 .format-aside {}
 .format-gallery {}
 .format-link {}
 .format-image {}
 .format-quote {}
 .format-status {}
 .format-video {}
 .format-audio {}
 .format-chat {}
 .format-standard {}
/* Color by post category (change blog by the category slug) */
 .category-blog {}
/* Color by custom post type (change xxxxx by the custom post type slug) */
 .xxxxx {}
 .type-xxxxx {}
/* Color by post ID (change xxxxx by the post ID) */
 .post-xxxxx {}
/* Color by post tag (change xxxxx by the tag slug) */
 .tag-xxxxx {}
/* Color hAtom compliance */
 .hentry {}
</style>
 <?php
 }

Como este código no es complicado, agregué comentarios en el código mismo. Básicamente, para diseñar las líneas de la siguiente manera:

  • Estado del mensaje, use .status-xxx donde xxx es el estado de la publicación
  • Autor, use .author-self para orientar los artículos que ha escrito y .author-other para artículos escritos por otros autores
  • Formato de mensaje, use .format-xxx donde xxx es el formato de publicación
  • Categoría de Trabajo, use .category-xxx donde xxx es la categoría slug, puede apuntar a tantas categorías como desee
  • Tipo de Posición, use .xxx o .type-xxx donde xxx es el tipo de publicación slug, puede apuntar a tantos CPT como desee
  • ID del mensaje, use .post-xxx donde xxx es el ID de la publicación, puede apuntar a tantas publicaciones como desee
  • Etiqueta de publicación, use .tag-xxx, donde xxx es la etiqueta slug, puede apuntar a tantas etiquetas como desee
  • .hentry se utiliza para apuntar hátomo conformidad

No he establecido colores para todas las clases, pero puede hacerlo usted mismo y personalizar el complemento para que se vea como realmente desea.

¿Qué pasa con los artículos pegajosos?

Cuando estaba trabajando en este pequeño complemento, noté que no se había agregado ninguna clase a las publicaciones fijas. Bueno, al menos en la administración. Así que volví al archivo post-template.php y vi que se había agregado una clase .sticky a la publicación persistente, pero solo si is_home () &&! Is_paged ()… ¿por qué? Es realmente extraño. Esta es la razón por la que creé un billete en la pista principal de WordPress para mencionarlo. Para aquellos que realmente quieren poder diseñar publicaciones fijas en el administrador, simplemente agregue este código a la función get_post_class (), aunque recomiendo nunca modificar los archivos centrales de WordPress:

// sticky for Sticky Posts in administration
if ( is_sticky($post->ID) && is_admin() )
$classes[] = 'post-sticky';

Descarga el complemento

Para aquellos que quieran usar el complemento directamente sin tener que crearlo usted mismo, agregué el complemento al repositorio, simplemente Haga clic aquí para descargarlo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba