Widget de últimas entradas con imágenes en WordPress

Desde hace algún tiempo me fijaba en los temas de WordPress que se encuentran por la red y me llamaba la atención que muchos usan unos widgets de artículos recientes muy chulos, ¿ porque ?, por que tenían imágenes y  que sepamos el widget de wordpress por defecto no incluye esta característica.

Así que decidí que en mi ultimo tema quería incluir un widgets que tuviera imágenes porque además el tema lo requería ya que está enfocado a la fotografía y qué menos que mostrar tu ultimas entradas con su imagen destacada.

No tardé en encontrar plugins que hacían el trabajo ( en wp hay plugins para todo) y el más destacado es Recent Posts Widget With Thumbnails , buen complemento por si te interesa y con muchas opciones ,aunque yo soy muy escueto en el tema de plugins y intento su uso lo mínimo posible y además en mi tema propio aun me pareció menos apropiado usarlos.

Entonces di con la forma de hacerlo con código, no es mas que crear una clase la cual extiende de WP_Widget_Recent_Posts que es la clase que utiliza wordPress para crear el widget “Recent posts”. ese que viene por defecto pero no muestra las imágenes destacadas.

Este sería un ejemplo del widget normal:

¿Que necesito?

Antes de continuar con la explicación decirte que necesitas acceder a los archivos de tu tema y en concreto al archivo functions.php donde pegaremos todo el código que mostraremos a continuación.

Si tienes acceso a tu hosting ,puedes llegar a los archivos de tu tema desde el cpanel de tu administrador > Administrador de archivos y por norma general en la raíz de tu web la carpeta public_html es la que contiene todo lo referente a tu sitio.

Te puede interesar:  Menú "Rollages" de WordPress: tome las decisiones correctas !

Una vez en la raíz de tu sitio web, busca wp_content > themes> nombre-de-tu-tema y dentro de este buscas functions.php

Necesitarás modificar estos archivos , una de dos o los modificas con el editor del hosting directamente (que no es muy recomendable) o lo descargas y con un editor de texto lo editas y lo resubes otra vez.

Recomendaciones antes de hacer nada.

  • Una buena práctica siempre antes de tocar nada de código en tu web es hacer una copia de seguridad por si acaso algo sale mal, tómate esto por costumbre cuando toques código o archivos de tu web.
  • Otra recomendación es no tocar directamente los archivos de tu tema, crear un tema hijo y después crear un archivo llamado functions.php en este, así es más seguro y cuando se actualice tu tema no perderas todo los cambios que realizaste.

Bien vamos a crear una nueva función que llamaremos Noa_Recent_Posts y extiende de WP_Widget_Recent_Posts.

El nombre Noa_Recent_Posts es así porque mi tema se llama Noa, pero tu puedes ponerle el nombre que quieras a esta función.

Class Noa_Recent_Posts_Widget extends WP_Widget_Recent_Posts {

        function widget($args, $instance) {

                if ( ! isset( $args['widget_id'] ) ) {
                $args['widget_id'] = $this->id;
            }

            $title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Recent Posts' ,'noa');

            /** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
            $title = apply_filters( 'widget_title', $title, $instance, $this->id_base );

            $number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 5;
            if ( ! $number )
                $number = 5;
            $show_date = isset( $instance['show_date'] ) ? $instance['show_date'] : false;

            /**
             * Filter the arguments for the Recent Posts widget.
             *
             * @since 3.4.0
             *
             * @see WP_Query::get_posts()
             *
             * @param array $args An array of arguments used to retrieve the recent posts.
             */
            $r = new WP_Query( apply_filters( 'widget_posts_args', array(
                'posts_per_page'      => $number,
                'no_found_rows'       => true,
                'post_status'         => 'publish',
                'ignore_sticky_posts' => true
            ) ) );

            if ($r->have_posts()) :
            ?>
            <?php echo $args['before_widget']; ?>
            <?php if ( $title ) {
                echo $args['before_title'] . $title . $args['after_title'];
            } ?>
            <ul>
            <?php while ( $r->have_posts() ) : $r->the_post(); ?>
                <li>

                    <?php if(has_post_thumbnail()):
                            the_post_thumbnail('widget-posts'); 
                        
                    <?php endif; ?>
                    <div class="noa-widget-info">
                        <a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a>
                        <?php if ( $show_date ) : ?>
                            <span class="post-date"><?php echo get_the_date(); ?></span>
                        <?php endif; ?>
                    </div>
                </li>
            <?php endwhile; ?>
            </ul>
            <?php echo $args['after_widget']; ?>
            <?php
            // Reset the global $the_post as this query will have stomped on it
            wp_reset_postdata();

            endif;
        }
}

Como puedes ver todo es más o menos como se construye el widget original ( con algún div añadido para dar estilo luego ) pero en el loop usamos the_post_thumbnail para usar las imágenes destacadas de cada post.

Te puede interesar:  Páginas de WordPress: la guía completa

Copia el código anterior y pegalo en el archivo functions.php al final del todo.

Recuerda que sólo puedes modificar el nombre de la clase Noa_Recent_Posts_Widget por el que tu quieras pero si no lo cambias funcionara igual. No cambies nada mas.

Ya tenemos lo que queremos, nuestra clase modificada de forma que toma en cuenta la imágen destacada y la añade en el widget, ahora solo nos falta hacer “unregister” de la antigua clase y registrar la nueva que hemos creado.

unregister_widget('WP_Widget_Recent_Posts');// Des registramos la clase del widget de WordPress
register_widget('Noa_Recent_Posts_Widget');// Registramos la clase para el nuevo Widget

Pero tenemos que usar una acción ( widget_init ) para procesar los cambios en el core , entonces envolveremos esta funciones en otra que será la que pasemos al hook de la siguiente manera.

function noa_recent_widget_registration() {
  unregister_widget('WP_Widget_Recent_Posts');
  register_widget('Noa_Recent_Posts_Widget');
}
add_action('widgets_init', 'noa_recent_widget_registration');

Ahora copia este código al final del archivo functions.php, después de la clase que pegamos anteriormente.

Ahora si, cuando activemos el widget de Recent posts ya vendrá con imágenes destacadas, mucho más visual y descriptivo sin duda.

Recent post widget theme Noa

Ahora solo falta afinar con el style y añadir css para que quede perfecto , pero eso da para otro artículo.

¿Qué te parece como quedo este widget? ¿Qué añadirías? , comenta tu opinión.

Deja una respuesta

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

Share This