Widget de últimas entradas con imágenes en WordPress.

por | wordpress | 2 Comentarios

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.

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.

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.

J.Rafael Simarro

J.Rafael Simarro

Desarrollador WordPress , entusiasta de la tecnología y todo lo relacionado con el diseño web. Últimamente muy enfocado en el tema Divi como primera herramienta de diseño , he probado muchas y Divi se lleva la palma.

2 Comentarios

  1. Roger

    Hola, primero de todo muchísimas gracias porque odio los plugins y llevo mucho rato buscando esto.

    Pero también te quiero dar un consejo, esta informacion que das es de extremo valor, pero tienes que comprender que la gente que te lee casi seguro que no tiene ni idea, creo que deberías explicar más en detalle todos los puntos, por ejemplo, me salen una serie de preguntas:

    donde debo copiar todo ese código y como encuentro el documento?
    donde debo encontrar y modificar el unregistry?
    que es el widget_init?

    Pero tenemos que usar una acción con widget_init para procesar los cambios en el core , entonces envolveremos esta funciones en otra que sera la que pasemos al hook. –> pocas cosas mas en chino que esto he visto.

    de verdad que te agradezco mucho esta información y voy a tratar de sacarlo yo solo, pero si que es verdad que puede ser peligroso modificar archivos “core” si no sabes.

    Te dejo mi correo por si me quieres ayudar:D

    Responder
    • juan rafael

      Gracias por tu comentario Roger.
      Tienes razon el post estaba obsoleto y descuidado , fue de los primeros y por algún problema que tuve con la web desaparecieron las imágenes.
      Lo he actualizado y añadido algún contenido más para que sea más claro.
      un saludo.

      Responder

Enviar un comentario

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

Share This