Añade una columna personalizada en la pantalla de administración de las entradas y entradas personalizadas

En este tutorial veremos cómo añadir una nueva columna en la pantalla de gestión de las entradas de WordPress y mostraremos en ella la imagen destacada correspondiente a cada una de las entradas. Esta nueva columna también se añadirá a la pantalla de gestión de cualquier tipo de entrada personalizada activa.

Paso 1 Activar las imágenes destacadas

En este tutorial usaremos el archivo functions.php disponible en el directorio de nuestro tema activo. Si el archivo no está presente, puedes crear uno nuevo con el siguiente contenido:

1

2

<?php

3

// FUNCTIONS

4

5

?>

En primer lugar, comprueba si la imagen destacada está disponible en la página Añadir nueva entrada:

Si no ves el cajetín de la Imagen destacada, añade esta línea a functions.php:

1

2

add_theme_support('post-thumbnails');

También establecemos un tamaño personalizado de 55 píxeles que se utilizará para mostrar la vista previa de la imagen destacada:

1

2

add_image_size('featured_preview', 55, 55, true);

Paso 2 Añadir una columna personalizada a la pantalla de las entradas

Ahora añadiremos una nueva columna en la tabla que lista las entradas y que contendrá la imagen destacada de cada una de ellas. Pero primero, necesitamos una función que obtenga la imagen destacada de una entrada: ST4_get_featured_image.

Abre el archivo functions.php del directorio de tu tema y pega esto:

1

2

// GET FEATURED IMAGE

3

function ST4_get_featured_image($post_ID) {

4

	$post_thumbnail_id = get_post_thumbnail_id($post_ID);

5

	if ($post_thumbnail_id) {

6

		$post_thumbnail_img = wp_get_attachment_image_src($post_thumbnail_id, 'featured_preview');

7

		return $post_thumbnail_img[0];

8

	}

9

}

Y definimos dos funciones: la primera añadirá la nueva columna, la segunda llamará y mostrará la imagen destacada en cada celda de la nueva columna:

1

2

// ADD NEW COLUMN

3

function ST4_columns_head($defaults) {

4

	$defaults['featured_image'] = 'Featured Image';

5

	return $defaults;

6

}

7

8

// SHOW THE FEATURED IMAGE

9

function ST4_columns_content($column_name, $post_ID) {

10

	if ($column_name == 'featured_image') {

11

		$post_featured_image = ST4_get_featured_image($post_ID);

12

		if ($post_featured_image) {

13

			echo '<img src="' . $post_featured_image . '" />';

14

		}

15

	}

16

}

Estas dos funciones se "engancharán" en la función principal de WordPress que crea la tabla Posts.

Acerca de los ganchos de WordPress

Los desarrolladores pueden modificar el comportamiento predeterminado de WordPress a través de las API de WordPress:

Los ganchos son proporcionados por WordPress para permitir que tu plugin 'enganche' el resto de WordPress; es decir, llamar a funciones en tu plugin en momentos concretos, y así poner tu plugin en marcha.

En resumen, los ganchos permiten a los desarrolladores ampliar las características de WordPress sin editar los archivos de su núcleo. Hay dos tipos de ganchos: acciones y filtros. Ambos se inician durante la ejecución de WordPress, pero mientras que los filtros aceptan, transforman y devuelven una entrada, las acciones no devuelven nada, aunque pueden imprimir todo lo que necesitas.

En nuestro caso, la función ST4_columns_head toma la matriz $defaults que contiene las columnas predeterminadas de tabla Posts (Título, Categoría, Etiquetas, etc.), añade un nuevo elemento featured_image a la matriz y lo devuelve a la función principal que utiliza WordPress para imprimir la tabla html.

Por el contrario, la función ST4_columns_content acepta dos variables ($column_name y $post_ID) y, dependiendo de ellas, imprime una salida. Para ser más precisos, se invoca ST4_columns_content en cada iteración del bucle que recorre la matriz $defaults. En cada iteración, WordPress pasa dos argumentos a nuestra función: el nombre de la columna y el ID de la entrada. La función analiza todos los nombres de columna y cuando el nombre es igual al que especificamos en ST4_columns_head, comprueba si hay una imagen destacada.

Por lo tanto, ahora podemos conectar nuestras funciones a las APIs del plugin de WordPress:

1

2

add_filter('manage_posts_columns', 'ST4_columns_head');

3

add_action('manage_posts_custom_column', 'ST4_columns_content', 10, 2);

Los parámetros 10 y 2 son respectivamente: el orden (prioridad) en el que se ejecutará la función y el número de argumentos que acepta la función. De todos modos, puedes leer más en el Codex de WordPress en la sección add_action.

Resultado final

Ahora finalmente podemos escribir una entrada que tenga una imagen destacada:

Por lo tanto, cuando abras la pantalla de administración de las entradas en /wp-admin/edit.php, verás la nueva columna Featured Image (imagen destacada):

Las dos primeros entradas tienen la imagen destacada, la tercera (una entrada sin imagen destacada) no la tiene, y por tanto no muestra nada.

Para mostrar una imagen por defecto en las entradas que no tienen imagen destacada, puedes modificar la función ST4_columns_content de la siguiente manera:

1

2

<?php

3

function ST4_columns_content($column_name, $post_ID) {

4

	if ($column_name == 'featured_image') {

5

		$post_featured_image = ST4_get_featured_image($post_ID);

6

		if ($post_featured_image) {

7

			// HAS A FEATURED IMAGE

8

			echo '<img src="' . $post_featured_image . '" />';

9

		}

10

		else {

11

			// NO FEATURED IMAGE, SHOW THE DEFAULT ONE

12

			echo '<img src="' . get_bloginfo( 'template_url' ); . '/images/default.jpg" />';

13

		}

14

	}

15

}

16

?>

La imagen default.jpg debe estar presente en el directorio images de nuestro tema activo.

También puedes mostrar / ocultar esta nueva columna abriendo el panel Opciones de pantalla y haciendo clic en la casilla de verificación Imagen destacada:

Paso 3 añade la columna Imagen destacada a los tipos de entradas personalizadas

Una de las características más interesantes y útiles de WordPress, es la posibilidad de añadir tipos de entradas personalizadas (y también taxonomías personalizadas). Puedes usar tipos de entradas para crear nuevos tipos de contenido, diferentes de las entradas y las páginas, por ejemplo, para administrar una base de datos de películas. De hecho, cuando añades un tipo de entrada personalizada, WordPress crea todas las páginas de administración para ese tipo de entrada: puedes añadir, editar y eliminar esas entradas de la misma manera que las entradas y páginas predeterminadas.

Ahora creamos un nuevo Tipo de Entrada Personalizada: Movies (películas), a través de la función de WordPress register_post_type:

1

2

add_action('init', 'ST4_add_movies');  

3

4

function ST4_add_movies() {

5

	$args = array(

6

		'label' => __('Movies'),

7

		'singular_label' => __('Movie'),

8

		'public' => true,

9

		'show_ui' => true,

10

		'capability_type' => 'post',

11

		'hierarchical' => false,

12

		'rewrite' => true,

13

		'supports' => array('title', 'editor', 'thumbnail')

14

	);

15

	register_post_type( 'movie' , $args );

16

}

Por lo tanto, cuando se añade una imagen destacada a una entrada Movie...

... verás la también la imagen destacada en la pantalla de administración de Movies (ten en cuenta que aquí también puedes mostrar / ocultar la columna desde las opciones de pantalla):

Otros usos

Añadir la columna personalizada en función del tipo de entrada

Si utilizas los ganchos manage_posts_columns y manage_posts_custom_column, la columna se mostrará en todas las pantallas de administración de entradas. Estos filtros, de hecho, funcionarán para todos los tipos entradas a excepción de las páginas.

1

2

// ALL POST TYPES: posts AND custom post types

3

add_filter('manage_posts_columns', 'ST4_columns_head');

4

add_action('manage_posts_custom_column', 'ST4_columns_content', 10, 2);

Si deseas añadir una columna solo en la pantalla de administración de las entradas, utiliza:

1

2

// ONLY WORDPRESS DEFAULT POSTS

3

add_filter('manage_post_posts_columns', 'ST4_columns_head', 10);

4

add_action('manage_post_posts_custom_column', 'ST4_columns_content', 10, 2);

Si deseas añadir una columna solo en la pantalla de administración de las páginas, utiliza:

1

2

// ONLY WORDPRESS DEFAULT PAGES

3

add_filter('manage_page_posts_columns', 'ST4_columns_head', 10);

4

add_action('manage_page_posts_custom_column', 'ST4_columns_content', 10, 2);

Si deseas añadir una columna solo en la pantalla administración de Movies, utiliza:

1

2

// ONLY MOVIE CUSTOM TYPE POSTS

3

add_filter('manage_movie_posts_columns', 'ST4_columns_head_only_movies', 10);

4

add_action('manage_movie_posts_custom_column', 'ST4_columns_content_only_movies', 10, 2);

5

6

// CREATE TWO FUNCTIONS TO HANDLE THE COLUMN

7

function ST4_columns_head_only_movies($defaults) {

8

	$defaults['directors_name'] = 'Director';

9

	return $defaults;

10

}

11

function ST4_columns_content_only_movies($column_name, $post_ID) {

12

	if ($column_name == 'directors_name') {

13

		// show content of 'directors_name' column

14

	}

15

}

Añadir la columna personalizada a otro tipo de entradas

Si tienes otros tipos de entradas personalizadas, puedes añadir fácilmente la columna de imagen destacada a ellas.
Si has añadido el tipo de entrada manualmente, comprueba el archivo donde se añade la entrada personalizada y busca el primer argumento de la función register_post_type:

1

2

register_post_type( 'book' , $args ); // book is the post type

Si el tipo de entrada personalizada se define a través de otro plugin y/o no puedes encontrar dónde está register_post_type, abre la pantalla de administración de entradas personalizadas en tu navegador y comprueba la URL:

1

2

http://www.yoursite.com/wp-admin/edit.php?post_type=<u>book</u>

En este caso, el tipo de entrada es book.

Finalmente, modifica los ganchos de esta manera, reemplazando movie por book:

1

2

add_filter('manage_book_posts_columns', 'ST4_columns_book_head');

3

add_action('manage_book_posts_custom_column', 'ST4_columns_book_content', 10, 2);

No olvides crear dos funciones: ST4_columns_book_head para crear la columna, y ST4_columns_book_content para mostrar el contenido.

Añade dos columnas personalizadas

Si necesitas añadir más de una columna, puedes hacerlo fácilmente:

1

2

// ADD TWO NEW COLUMNS

3

function ST4_columns_head($defaults) {

4

	$defaults['first_column']  = 'First Column';

5

	$defaults['second_column'] = 'Second Column';

6

	return $defaults;

7

}

8

9

function ST4_columns_content($column_name, $post_ID) {

10

	if ($column_name == 'first_column') {

11

		// First column

12

	}

13

	if ($column_name == 'second_column') {

14

		// Second column

15

	}

16

}

Eliminar columnas predeterminadas

También puedes eliminar una columna predeterminada de WordPress, por ejemplo, la columna Categoría en la pantalla de administración de entradas:

1

2

add_filter('manage_post_posts_columns', 'ST4_columns_remove_category');

3

4

// REMOVE DEFAULT CATEGORY COLUMN

5

function ST4_columns_remove_category($defaults) {

6

	// to get defaults column names:

7

	// print_r($defaults);

8

	unset($defaults['categories']);

9

	return $defaults;

10

}

Referencias

• Plugin API de WordPress 
• Tipos de entradas personalizadas de WordPress
• Referencia de la función/Añadir una acción
• Plugin API/Reference del filtro/gestionar columnas de entradas
• Plugin API/Referencia de acción/administrar columna de entrada personalizada
• Plugin API/Referencia del filtro/gestionar columnas de $post tipo de entradas
• Plugin API/Referencia de la acción/gestionar columna personalizada de $post tipo de entradas