imagen destacada

Establecer la primera imagen de un post como destacada

Cuando escribimos una entrada o página en WordPress, por defecto nos deja establecer una imagen destacada o thumbnail:

featured-image

Esta imagen destacada suele usarse por ejemplo para listados o para indicar en las etiquetas open graph qué imagen usar para compartir contenido en redes sociales.

En algunas ocasiones nos podemos olvidar de completar este campo, o puede que tengamos entradas tan antiguas que nos da pereza ahora revisar una por una e ir estableciendo la imagen destacada para cada una de ellas.

En este caso puede interesarnos recuperar la primera imagen del post en el caso de que no hayamos establecido imagen destacada, y que haga las funciones de la misma. Para esto utilizaremos la función get_children(). Esta función devuelve imágenes, revisiones o sub-páginas asociadas a un post.

Por ejemplo en el template category.php mostramos un listado de noticias. Preguntaremos si tiene imagen desatacada asociada, y en caso contrario buscaremos una imagen entre las asociadas al post:

<?php

if (have_posts()) :
    while (have_posts()) : the_post();?>
        <article id="post-<?php the_ID();?>" <?php post_class();?>>
            <div class="entry-featured-image">
                <?php if ( has_post_thumbnail() ) {
                    the_post_thumbnail( 'thumbnail', $args );
                }else {
                    $args = array(
                        'post_parent' => get_the_ID(),
                        'post_type' => 'attachment',
                        'numberposts' => 1,
                    );

                    $featured_image = get_children( $args );

                    foreach ($featured_image as $key => $thumbnail) {
                        echo wp_get_attachment_image( $thumbnail->ID, 'thumbnail' );
                    }
                }?>
            </div>

            <div class="entry-content">
                <h2><a href="<?php echo get_permalink();?>"><?php echo get_the_title();?></a></h2>
                <p class="post-meta">publicado por <?php the_author_posts_link();?> en <?php echo get_the_category_list( ', ' );?> el <?php the_time('j');?> de <?php the_time('F');?> de <?php the_time('Y');?></p>
                <?php the_excerpt();?>
            </div><!-- entry-content -->
        </article>
    <?php endwhile;
endif;

Con este código mostraremos en el listado una de las imágenes asociadas al post, pero no necesariamente será la primera en aparecer dentro del contenido. Si hemos subido varias imágenes al post lo que mostraremos por defecto será la primera imagen que se asoció al post. Podemos pasar el parámetro order dentro de $args con el valor ASC o DESC para mostrar la primera o última imagen respectivamente que se asoció al post.

Si lo que queremos es mostrar la primera imagen que aparece en el post, tendremos que tirar de expresiones regulares, buscando directamente en el contenido la etiqueta img:

<?php

if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'thumbnail', $args );
}else {
    preg_match('/< *img[^>]*src *= *["\']?([^"\']*)/i', $post->post_content, $featured_image);

    if (!empty($featured_image["0"])) {
        echo $featured_image["0"];
    }
}

Estos dos snippets lo que hacen es mostrar una imagen destacada sacada el contenido o de las imágenes asociadas a un post, pero si lo que realmente queremos es dejar los listados como los tenemos y hacer una función para que establezca una imagen destacada sacada de las imágenes asociadas al post, lo que tendremos que poner en nuestro functions.php es lo siguiente:

<?php

$myposts = get_posts(array('posts_per_page' => '-1' )); 

foreach($myposts as $post) :
    if (!has_post_thumbnail($post->ID)) {
        $args = array(
            'post_parent' => $post->ID,
            'post_type' => 'attachment',
            'numberposts' => 1,
        );

        $featured_image = get_children( $args );

        if ($featured_image) {
            foreach ($featured_image as $key => $thumbnail) {
                set_post_thumbnail($post->ID, $key);
            }
        }
    }
endforeach;

Este código bastaría con ejecutarlo una sola vez, ya que va a recorrer todos nuestros posts y les va a asignar una imagen destacada de entre las que tiene asociadas al post.

¿Te ha resultado útil esta información? 🍺

Si este post te ha resuelto un problema, invítame a un café o a una cerveza. Con este pequeño gesto me animas a seguir escribiendo.

Comentarios

9 comentarios en Establecer la primera imagen de un post como destacada

  1. Hola, muy bueno el blog y muy interesante el articulo, tengo dos dudas, relacionadas con la parte final.
    La función que recomendas usar en el functions.php: a) ¿reemplaza a lo que sugerís mas arriba, o sea, es una alternativa? b) ¿cuando decís que basta con ejecutarlo una única vez, quiere decir que después puede ser removido el código del functions.php?

    1. Efectivamente. Si pones ese código en el functions.php y corres la página, se establecerá imagen destacada a todos los posts que no tengan imagen destacada. Una vez ejecutado puedes eliminar este código del functions.php ya que habrá hecho su función

      Es una alternativa al código de más arriba, la diferencia es que en el primer código nunca estableces la imagen destacada a los posts que no la tengan

      Espero haber resuelto tus dudas

  2. Hola, tengo esta web: http://latitular.com/ Pero lo que me pasa, es que dentro del post, me aparece la imagen destacada dentro del mismo post, lo que ocasiona que me aparezcan dos fotos. La que subí para el post y la de la imagen destacada (quizás sea la misma). Pero esto hace que el post se vea mal, porque como dije, aparece dos veces. Entonces quisiera saber si hay alguna forma de evitar que esa imagen destacada aparezca dentro del post ocasionando que aparezcan dos fotos.

    Nota: no puedo dejar los post sin imagen destacada, porque en el inicio de la web, aparecerá la nota pero sin la imagen lo que causa que se vea mal.

    Si tienes alguna ayuda, lo agradecería. Saludos.

    1. Hola Raúl. En el último snippet de código justo se explica cómo podrías automatizar que se establezca como imagen destacada la primera imagen que tengas en el cuerpo de un artículo.

      Ojo con las automatizaciones, que las carga el diablo. Haz un backup primero, y asegúrate de que lo que quieres es realmente establecer como imagen destacada la primera que encuentre en el cuerpo de tu artículo

  3. Muchísimas Gracias! darle a entender a la gente que coloque la imagen destacada es terrible, esto es una ayuda impresionante!

  4. Hola un saludo, tengo un problema en mi página pues desactive el plugin nelio content y cuando reactive el plugin me dio error y las imágenes de la página desaparecieron ya que tenía la opción de establecer la primera imagen del post como imagen destacada.
    Alguien conoce un programa similar el nelio pues no utilizo el calendario solo necesito de el por la opción de establecer la primera imagen destacada

Deja un comentario

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

  • El fin del tratamiento es únicamente la moderación de comentarios para evitar spam
  • La legitimación es tu consentimiento al comentar
  • No se comunicará ningún dato a terceros salvo por obligación legal
  • Tienes derecho al acceso, rectificación y eliminación de los comentarios