Personalizar el administrador de WordPress - Pantallas de listados

En las Partes 1-4 de esta serie te mostré cómo hacer lo siguiente:

• Personalizar la pantalla de inicio de sesión de WordPress
• Personalizar el escritorio
• Personalizar el menú de administración
• Añadir texto de ayuda para publicar pantallas de edición

En esta quinta entrega te mostraré cómo personalizar las pantallas del administrador que contienen listados.

En este tutorial aprenderás a:

1. Eliminar columnas de las pantallas que listan entradas para diferentes tipos de entradas
2. Cambiar el tamaño de las columnas restantes

Para conseguir esto voy a crear un plugin, si ya has creado un plugin después de seguir las Partes 1 a 4 de esta serie es posible que prefieras añadir el código de este tutorial a ese plugin, lo que te proporcionará uno que contenga todas tus personalizaciones para el administrador.

Lo que necesitarás para completar este tutorial

Para completar este tutorial necesitarás lo siguiente:

• Una instalación de WordPress
• Acceso a la carpeta de plugins de tu sitio en la que añadir tu plugin
• Un editor de texto para crear tu plugin

Configuración del plugin

Al principio de mi plugin, estoy añadiendo las siguientes líneas:

1

/*

2

Plugin Name: WPTutsPlus Customize the Admin Part 5 - listings screens

3

Plugin URI: https://rachelmccollin.co.uk

4

Description: This plugin supports the tutorial in wptutsplus. It customizes the WordPress listings screens in the admin.

5

Version: 1.0

6

Author: Rachel McCollin

7

Author URI: http://rachelmccollin.com

8

License: GPLv2

9

*/

1. Eliminar columnas de las pantallas que listan entradas

En mi sitio no usaré etiquetas para las entradas, por lo que también puedo eliminarla de la pantalla que lista entradas. A continuación se puede ver qué aspecto tiene la pantalla que lista entradas con todas las columnas predeterminadas en su sitio. (Ten en cuenta que en esta captura de pantalla, las entradas se conocen como "News" (noticias) ya que cambié esto en la parte 3 de esta serie).

La columna tags (etiquetas) no es necesaria, ya que no tiene datos, por lo que la voy a eliminar.

Para editar columnas utilizo uno de los tres ganchos de acción:

• manage_posts_columns, para la pantalla que lista entradas
• manage_pages_columns, para la pantalla que lista páginas
• manage_$post_type_posts_columns, para una pantalla que muestre tu tipo de entradas personalizadas. De manera que, por ejemplo, si tuvieras un tipo de entrada personalizada denominada 'cars' (coches), usarías el gancho de acción manage_cars_post_type_columns

En este caso usaré manage_posts_columns.

En tu plugin, añade lo siguiente:

1

// remove tags from posts listing screen

2

function wptutsplus_remove_posts_listing_tags( $columns ) {

3

	unset( $columns[ 'tags' ] );

4

	return $columns;

5

}

6

add_action( 'manage_posts_columns', 'wptutsplus_remove_posts_listing_tags' );

Esto elimina la columna 'Tags' (etiquetas), tal y como se muestra en la siguiente captura de pantalla.

La columna de comentarios también es superflua para este sitio, así que la eliminaré también. Edita la función para que tenga el siguiente aspecto:

1

// remove tags from posts listing screen

2

function wptutsplus_remove_posts_listing_tags( $columns ) {

3

	unset( $columns[ 'tags' ] );

4

	unset( $columns[ 'comments' ] );

5

	return $columns;

6

}

7

add_action( 'manage_posts_columns', 'wptutsplus_remove_posts_listing_tags' );

Esto eliminará también la columna 'Coments' (comentarios):

Así que ahora se eliminan las columnas innecesarias, aunque han dejado mucho espacio libre que podrías usar haciendo que las columnas que aún permanecen sean un poco más anchas.

Nota sobre la adición de columnas de taxonomía en las pantallas de listados

Vale la pena señalar que la adición de columnas a las pantallas de listados se hace de manera muy diferente. Antes de la aparición de WordPress 3.5 se añadían columnas para taxonomías personalizadas de una manera similar al método que acabo de demostrar para su eliminación. Sin embargo, desde WordPress 3.5 esto ha cambiado. En lugar de personalizar la pantalla, debes establecer el argumento 'show_admin_column' para la taxonomía en true al registrarla. Para obtener más información al respecto, consulta el Codex.

2. Cambiar el tamaño de las columnas en la pantalla que lista las entradas

Puedo cambiar el tamaño de las columnas usando CSS. Las clases a las que tengo que dirigirme son las siguientes:

• .fixed .column-author, para la columna 'Autor'
• .fixed .column-categories, para la columna 'Categorías'
• .edit-php, para asegurarme de que mis cambios solo se aplican a esta pantalla de edición en concreto, para lo cual la etiqueta body tiene la clase .edit-php.

Hago estos cambios definiendo nuevos estilos y activándolos a través del gancho admin_enqueue_scripts.

En tu plugin, añade lo siguiente:

1

// resize columns in post listing screen

2

function wptutsplus_post_listing_column_resize() { ?>

3

	<style type="text/css">

4

		.edit-php .fixed .column-author, .edit-php .fixed .column-categories {

5

			width: 15%;

6

		}

7

	</style>

8

<?php }

9

add_action( 'admin_enqueue_scripts', 'wptutsplus_post_listing_column_resize' );

Esto cambia el tamaño de las columnas para que usen el espacio de forma más eficaz.

Nota: Es recomendable poner tu CSS en una hoja de estilos independiente e invocarla usando wp_register_style y wp_enqueue_style. Como el siguiente tutorial de esta serie se centra en el estilo del administrador de WordPress, te mostraré cómo hacerlo en la parte 6.

Resumen

Personalizar las pantallas que listan entradas en WordPress es muy sencillo: puedes eliminar fácilmente las columnas como desees y modificar el estilo para hacer un mejor uso del espacio. Esto hará que las pantallas sean menos confusas para los usuarios, ya que no verán aquellas columnas que no contengan metadatos.