Personalización de las tablas de administración de WordPress: Primeros pasos

Todos los que usan WordPress estarán familiarizados con las tablas de administración de WordPress que aparecen en todas las áreas principales de descripción general, como páginas y publicaciones. El mismo formato se usa para este tipo de tablas en todo WordPress, lo que significa que rápidamente se vuelve experto en usarlas. Pero, ¿sabía que puede modificar las tablas de administración de WordPress y alterar la información que se muestra o agregar sus propias columnas adicionales?

En este artículo te explicaremos cómo puedes hacerlo. ¡Empecemos!

los ganchos

Para mostrar los datos de las tablas de administración, WordPress amplía la clase integrada WP_List_Table . La clase WP_List_Table se presenta como una clase privada en el archivo wp-admin/includes/class-wp-list-table.php . Las clases privadas se denominan privadas porque solo están destinadas a otras clases y funciones principales y no a los desarrolladores.

WordPress le ofrece la posibilidad de modificar las tablas de administración. Para manipular las columnas de las tablas, debe usar uno de los ganchos de filtro que proporciona WordPress en el archivo wp-admin/includes/class-wp-posts-list-table.php .

En este archivo, la clase WP_Posts_List_Table amplía la clase WP_List_Table y redefine sus propiedades y métodos para llenar las tablas de administración de acuerdo con su tipo de publicación. Puede usar el manage_posts_columns para la tabla de publicaciones, manage_pages_columns para las páginas y manage_{$post_type}_posts_columns si desea manipular las columnas de una tabla de tipo de publicación personalizada.

Las columnas que se utilizan de forma predeterminada para los datos de la tabla también se describen en este archivo. Alrededor de la línea 616 se introduce la matriz $posts_columns y se agregan las siguientes columnas:

• La columna de casilla de verificación 'cb' para acciones masivas
• La columna 'título' de la publicación
• La columna 'autor' para el autor de la publicación
• La columna 'categorías' para las categorías a las que pertenece la publicación
• La columna de 'etiquetas' de la publicación
• La columna de 'comentarios'
• La columna 'fecha' publicada

Agregar una columna personalizada a las tablas de administración

Agregar una columna personalizada a una tabla es algo que los desarrolladores deben hacer con frecuencia. Además, poder ordenar las columnas también es muy útil a la hora de organizar el contenido. Demostraremos cómo se implementa una columna personalizada para publicaciones, páginas y tipos de publicaciones personalizadas y cómo podemos hacer que estas columnas personalizadas se puedan ordenar.

Las tablas de lista de publicaciones

Como ejemplo, veamos cómo podríamos agregar una columna que describa cuándo se modificó por última vez una publicación. Esta podría ser una característica realmente útil, especialmente si ejecuta un blog con muchas publicaciones y desea poder verificar cuándo se actualizó por última vez. Veamos cómo se puede implementar esto.

Para comenzar, debemos agregar el nombre de la nueva columna a la matriz de nombres de encabezado de columna. Echemos un vistazo más de cerca a la línea 663 del archivo class-wp-posts-list-table.php .

 if ( 'page' === $post_type ) { $posts_columns = apply_filters( 'manage_pages_columns', $posts_columns ); } else { $posts_columns = apply_filters( 'manage_posts_columns', $posts_columns, $post_type ); }

En esta parte del código, está claro que debemos usar el filtro manage_posts_columns (consulte aquí para obtener más información al respecto) ya que queremos realizar los cambios en la tabla de la lista de publicaciones. Para agregar el nombre de la columna a la matriz de encabezados de columna, editaremos el archivo functions.php de nuestro tema activo e insertaremos este código:

 add_filter('manage_posts_columns','add_custom_columns'); function add_custom_columns( $columns ) { $columns['last_modified'] = 'Last modified'; return $columns; }

Ahora, si actualizamos la página de la lista de publicaciones de administrador, podemos ver la columna adicional. No habrá datos en esta columna en esta etapa.

En nuestro próximo paso, debemos decirle a WordPress qué contenido se mostrará en la columna. Para hacer esto, usaremos la acción manage_posts_columns que es parte de la función pública column_default que es responsable de la salida de las columnas. Esta acción corresponde solo a los tipos de publicaciones que no son jerárquicas, como las publicaciones, y puede detectarla alrededor de la línea 1258.

Lo que realmente haremos aquí para completar el contenido es ejecutar una declaración de cambio para todas las columnas personalizadas y, como el nombre del encabezado es 'last_modified' (como lo registramos en nuestro paso inicial anterior), repetiremos nuestro contenido. Para repetir el contenido, usaremos la función get_post_field incorporada de WordPress y devolveremos el campo deseado, que podría ser cualquier columna de la tabla wp_posts en la base de datos. En caso de falla, devolverá una cadena vacía.

Entonces, en el archivo functions.php agregaremos el siguiente código:

 add_action( 'manage_posts_custom_column','custom_columns_content', 10, 2 ); function custom_columns_content ( $column_id, $post_id ) { switch( $column_id ) { case 'last_modified': echo get_post_field('post_modified', $post_id); break; } }

Puede confirmar que esto funciona como se esperaba actualizando la página una vez más.

Tenga en cuenta que el valor de 'Última modificación' para la segunda publicación que nunca se modificó después de su publicación inicial es el mismo que la fecha de publicación.

La tabla de lista de páginas

Para hacer lo mismo en la tabla de lista de páginas, agregamos el nombre de la columna de la misma manera a la matriz de nombres de encabezado de columna. La diferencia esta vez es que usaremos el manage_pages_columns como se muestra a continuación:

 add_filter('manage_pages_columns','add_custom_page_columns'); function add_custom_page_columns( $columns ) { $columns['last_modified'] = 'Last modified'; return $columns; }

A continuación, agregaremos los contenidos usando el manage_pages_custom_column en lugar de manage_posts_custom_column que usamos antes.

 add_action( 'manage_pages_custom_column','custom_columns_content', 10, 2 ); function custom_columns_content ( $column_id, $post_id ) { switch( $column_id ) { case 'last_modified': echo get_post_field('post_modified', $post_id); break; } }

Después de insertar el código anterior en nuestro archivo functions.php , podemos confirmar que las cosas funcionan como se espera visitando la tabla de administración de páginas en nuestra área de administración, donde ahora deberíamos ver una columna "Última modificación".

La tabla de tipos de publicaciones personalizadas

Primero crearemos un tipo de publicación personalizada insertando el siguiente código en nuestro archivo functions.php :

 function my_custom_post_type() { register_post_type( 'mycpt', array( 'labels' => array( 'name' => __( 'Custom Post Types' ), 'singular_name' => __( 'Custom Post Type' ) ), 'public' => true, 'has_archive' => true, 'rewrite' => array('slug' => 'mycpt'), 'show_in_rest' => true, ) ); } add_action( 'init', 'my_custom_post_type' );

En nuestro menú de administración, notaremos que se ha agregado un nuevo elemento llamado 'Tipo de publicación personalizada'.

Si no sabe cómo se crean los tipos de publicaciones personalizadas y desea obtener más información, puede consultar nuestro artículo relacionado sobre la creación de tipos de publicaciones personalizadas.

Ahora que tenemos nuestra configuración de tipo de publicación personalizada, procederemos a agregar nuestro nuevo encabezado de columna con su contenido. Como se mencionó anteriormente, en el caso de un CPT (Tipo de publicación personalizada), tenemos que usar las manage_{$post_type}_posts_columns para agregar nuestra columna personalizada.

El {$post_type} debe ser idéntico al primer argumento de la función register_post_type() que en este caso es 'mycpt'.

Entonces, el fragmento de código que usaremos en el archivo functions.php para agregar el encabezado de nuestra columna será el siguiente:

 add_filter( 'manage_mycpt_posts_columns','add_mycpt_custom_columns'); function add_mycpt_custom_columns( $columns ) { $columns['last_modified'] = 'Last modified'; return $columns; }

Y para llenar el contenido de la columna:

 add_action( 'manage_mycpt_posts_custom_column','fill_mycpt_posts_custom_column'); function fill_mycpt_posts_custom_column( $column_id, $post_id ) { switch( $column_id ) { case 'last_modified': echo get_post_field('post_modified', $post_id); break; } }

Los resultados deberían ser algo como esto:

Hacer que las columnas se puedan ordenar

Para que la columna se pueda ordenar, tenemos que definir qué columnas personalizadas se pueden ordenar. Para lograr esto, usamos el manage_edit-{post-type}_sortable_columns con una función de devolución de llamada.

Entonces, en cada caso de tipo de publicación, agregaremos el mismo código (con nombres de función únicos, por supuesto).

Para publicaciones:

 add_filter( 'manage_edit-post_sortable_columns', 'sortable_post_columns' ); function sortable_post_columns( $columns ) { $columns['last_modified'] = 'Last modified'; return $columns; }

Para páginas:

 add_filter( 'manage_edit-page_sortable_columns', 'sortable_page_columns' ); function sortable_page_columns( $columns ) { $columns['last_modified'] = 'Last modified'; return $columns; }

Para nuestro tipo de publicaciones personalizadas (mycpt):

 add_filter( 'manage_edit-mycpt_sortable_columns', 'sortable_mycpt_posts_columns' ); function sortable_mycpt_posts_columns( $columns ) { $columns['last_modified'] = 'Last modified'; return $columns; }

Ahora, si visita una de sus tablas de administración, debería ver que el encabezado de la columna personalizada se muestra como un enlace. Si hace clic aquí, debería ordenar por fecha de modificación.

Deshabilitar la clasificación por columnas

Para eliminar la función de clasificación de una columna, solo tenemos que eliminarla de la matriz. Si, por ejemplo, queremos hacer esto para la columna 'fecha', agregaríamos una línea adicional de código unset($columns['date']) . Esto se vería así:

Para publicaciones:

 add_filter( 'manage_edit-post_sortable_columns', 'sortable_post_columns' ); function sortable_post_columns( $columns ) { $columns['last_modified'] = 'Last modified'; unset($columns['date']); return $columns; }

Para páginas:

 add_filter( 'manage_edit-page_sortable_columns', 'sortable_page_columns' ); function sortable_page_columns( $columns ) { $columns['last_modified'] = 'Last modified'; unset($columns['date']); return $columns; }

Para nuestro tipo de publicaciones personalizadas (mycpt):

 add_filter( 'manage_edit-mycpt_sortable_columns', 'sortable_mycpt_posts_columns' ); function sortable_mycpt_posts_columns( $columns ) { $columns['last_modified'] = 'Last modified'; unset($columns['date']); return $columns; }

Ahora, si visita la tabla adecuada, notará que ya no se puede hacer clic en la etiqueta Fecha (y, por lo tanto, esa columna ya no se puede ordenar).

Llegados a este punto, cabe destacar un detalle que suele confundir a los desarrolladores de WordPress. Eche un vistazo a la tabla a continuación que muestra los ganchos que usamos para Publicaciones, Páginas y Publicaciones personalizadas.

Es posible que haya notado que los ganchos que usamos para clasificar las columnas no siguen realmente el patrón. Esperaría que fueran manage_posts_sortable_columns , manage_pages_sortable_columns y manage_mycpt_posts_sortable_columns respectivamente. Desafortunadamente, esto es solo una cuestión de mala denominación. No obstante, es muy útil mantener una tabla de resumen como esta como un recordatorio fácil.

Cambiar el ancho de las columnas

Para ajustar el ancho de una columna, usaremos el enlace de acción admin_head que WordPress proporciona y ejecuta en la sección de encabezado para todas las páginas de administración que incluyen CSS o JS.

Como ejemplo, intente ingresar el siguiente código en el archivo functions.php :

 add_action('admin_head', 'my_column_width'); function my_column_width() { echo '<style type="text/css">'; echo '.table-view-list.posts .column-title { width:120px !important; overflow:hidden }'; echo '</style>'; }

Aquí, usamos la clase .column-title de la columna de título, que es común para todas las tablas de administración, y las .table-view-list.posts . Combinados, estos aseguran que el CSS se aplicará solo en la tabla de lista de publicaciones.

Para lograr lo mismo para nuestras otras pantallas de administración (como las páginas), usaremos table-view-list.pages en su lugar.

Conclusión

Hay muchas posibilidades cuando se trata de manipular las columnas de las tablas de administración de WordPress. En futuros artículos, veremos algunos ejemplos más y brindaremos algunos trucos útiles que puede usar para sacar más provecho de sus tablas de administración.