Como mostrar la imagen en las listas de entradas de WordPress


Hace tiempo que lo hice para unos amigos y el resultado fue genial, ellos querian  mostrar la imagen (feature imagen)  en la  listas de entradas de WordPress, para así tener un mejor control por si se olvidaban, ya que tenían muchos artículos al dia.

Por defecto WordPress trae los campos de titulo , categoría , fecha ,.. pero si quisiéramos mostrar la imagen principal, tendríamos que añadir un trocito de código, o buscar un plugin, esto muchas veces es lo mas sencillo.

La idea de este  post es que entendáis como hacerlo y lo que no se entienda me lo indicáis y os lo explico o rehago el post 😛

Vamos a usar dos funciones de WordPress :

  • manage_posts_columns: es un filtro que nos va a permitir mostrar las columnas
  • manage_posts_custom_column: esta es una acción  vamos a devolver la información que queremos que aparezca en una columna, por ejemplo si es una imagen pues la imagen, si queremos un icono, si queremos nuestros propios metas ,…  es decir lo que se va a ver en las columna.

Teniendo claras las funciones vamos a hacer un ejemplo en el que pintaremos las imágenes  y os quedara algo tal que asi.

como mostrar la imagen principal en tus listas de entradas de WordPress
como mostrar la imagen principal en tus listas de entradas de WordPress

La idea es que comprendais el ejemplo que pongo a continuación, así que no vamos a meter mucho ruido de comprobaciones ni nada de si existe la función o no. Seguro que el código se puede mejorar 😛

 

Pasos para mostrar la imagen en las listas de entradas de WordPress o cualquier campo que queramos:

1.- Registramos la columna o digamos que la declaramos, le damos un nombre

function demo_columna_imagen_principal($defaults) {
    $defaults['imagen_principal'] = 'Imagen';
    return $defaults;
}

 

2.- Mostramos la imagen

// MUESTRA LA IMAGEN DE PORTADA 
function devolver_imagen_principal($post_ID) {
 $post_thumbnail_id = get_post_thumbnail_id($post_ID);
 if ($post_thumbnail_id) {
 $post_thumbnail_img = wp_get_attachment_image_src($post_thumbnail_id, 'thumbnail', 'featured_preview');
 return $post_thumbnail_img[0];
 }
}
// MOSTRAMOS LA COLUMNA 
function demo_devolver_contenido_columna($column_name, $post_ID) {
    if ($column_name == 'imagen_principal') {
        $post_featured_image = devolver_imagen_principal($post_ID);
        if ($post_featured_image) {
            echo '<img style="width:55px; height:auto;" src="' . $post_featured_image . '" />';
        }
    }
}

3.- Registramos este filtro y acción

add_filter('manage_posts_columns', 'demo_columna_imagen_principal');
add_action('manage_posts_custom_column', 'demo_devolver_contenido_columna', 10, 2);

 

Como veis es bastante sencillo  le damos un nombre y devolvemos la imagen. Esto se puede aplicar a mas cosas. Si teneis un meta podeis devolver el meta y ya esta. Por ejemplo un meta que controle si debeis o no mostrar el contenido en la portada.

 

Si en vez de querer agregar esa información queremos agregarla a las paginas en vez de usar las funciones de arriba usaremos estas otras que realizan lo mismo pero en paginas .

  • manage_pages_columns
  • manage_pages_custom_column

 

 

Como añadirlo a nuestro WordPress

Hay mucha controversia de si metemos el código en el tema , lo metemos en un plugin que es mas eficiente. El tema es muy sencillo a mi parecer y depende de la situación.

Si usas un tema de terceros es decir un tema de otra persona pues no tienes ningún control y cada vez que actualices tendrás que poner los cambios.  Así que en estos casos si es conveniente tenerlo en un plugin.

Si estas trabajando en un tema hijo que es siempre lo mejor y es muy sencillo de montar, como es muy poco el código yo no me crearía un plugin lo metería en functions.php o me crearía una clase y lo añadiría con un requiere.

 

Aquí os dejo el código completo

<?php 
function demo_columna_imagen_principal($defaults) {
    $defaults['imagen_principal'] = 'Imagen';
    return $defaults;
}
// MUESTRA LA IMAGEN DE PORTADA 
function devolver_imagen_principal($post_ID) {
 $post_thumbnail_id = get_post_thumbnail_id($post_ID);
 if ($post_thumbnail_id) {
 $post_thumbnail_img = wp_get_attachment_image_src($post_thumbnail_id, 'thumbnail', 'featured_preview');
 return $post_thumbnail_img[0];
 }
}
// MOSTRAMOS LA COLUMNA 
function demo_devolver_contenido_columna($column_name, $post_ID) {
    if ($column_name == 'imagen_principal') {
        $post_featured_image = devolver_imagen_principal($post_ID);
        if ($post_featured_image) {
            echo '<img style="width:55px; height:auto;" src="' . $post_featured_image . '" />';
        }
    }
}
// REGISTRAMOS LAS FUNCIONES 
add_filter('manage_posts_columns', 'demo_columna_imagen_principal');
add_action('manage_posts_custom_column', 'demo_devolver_contenido_columna', 10, 2);