Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo enlazar miniaturas a entradas anteriores y siguientes en WordPress

Por defecto, WordPress enlaza las entradas anterior y siguiente en la parte inferior de cada entrada para facilitar la navegación.

Añadir miniaturas a estos enlaces puede suponer una gran diferencia en la experiencia de usuario de su blog de WordPress. Este sencillo cambio puede atraer la atención de tus lectores y hacer que permanezcan más tiempo en tu sitio.

En este artículo, le guiaremos sobre cómo añadir miniaturas a los enlaces de entradas anteriores y siguientes en WordPress para dar a su sitio un impulso visual.

How to use Thumbnails with Previous and Next Post Links in WordPress

¿Por qué enlazar las entradas anterior y siguiente con miniaturas?

Su blog de WordPress ofrece algunas características útiles para ayudar a los visitantes a encontrar nuevos contenidos y navegar por su sitio. Estas características incluyen menús de navegación, una barra de búsqueda y un widget de archivos de entradas.

Otra característica útil de navegación se encuentra en la parte inferior de cada entrada del blog de WordPress. Allí encontrará enlaces a las entradas anteriores y siguientes de su sitio.

You Find Links to the Previous and Next Posts at the Bottom of Each Blog Post

Estos enlaces fomentan la participación de los usuarios porque cuando los visitantes terminan de leer una entrada del blog, es posible que busquen otra cosa que leer. Sin embargo, si añade miniaturas, los enlaces parecerán más interactivos.

También es una buena forma de llamar la atención sobre las entradas de blog con mejor rendimiento.

Por ejemplo, es posible que tenga contenido pilar que ya está impulsando una tonelada de tráfico y la conversión de los lectores en suscriptores de correo electrónico. Añadir miniaturas con entradas enlazadas solo te ayudaría a construir tu lista de correo electrónico y hacer crecer tu pequeña empresa.

Con esto en mente, veamos cómo añadir miniaturas a los enlaces de entradas anteriores y siguientes en WordPress.

Uso de miniaturas con enlaces a entradas anteriores y siguientes en WordPress

Para añadir miniaturas a los enlaces de tus entradas anterior y siguiente, tendrás que añadir código a los archivos de tu tema de WordPress. Si no lo has hecho antes, consulta nuestra guía sobre cómo copiar y pegar código en WordPress.

Añadir código con WPCode

El primer paso es añadir el siguiente fragmento de código utilizando WPCode, el mejor plugin de fragmentos de código. Le permite añadir código sin romper su sitio y viene con un montón de plantillas ya hechas, por lo que no tiene que escribir código desde cero.

Para empezar, necesitarás instalar y activar el plugin WPCode. Para más detalles, puedes marcar / comprobar nuestro artículo sobre cómo instalar un plugin de WordPress.

Desde allí, vaya a la página Fragmentos de código + Añadir fragmento. A continuación, haga clic en “Añadir nuevo”.

add new code snippet

Accederás a una biblioteca de fragmentos de código, donde podrás elegir entre una gran variedad de plantillas prediseñadas.

Sin embargo, para añadir miniaturas a los enlaces de la entrada anterior y siguiente, subiremos una cadena de código personalizado. Para ello, hagamos clic en “Usar fragmento de código” en “Añadir código personalizado”.

add custom code

El siguiente paso consiste en dar un nombre al fragmento de código para poder consultarlo más adelante.

A continuación, simplemente copie el siguiente código en el editor de texto WPCode. Asegúrese de seleccionar ‘Fragmento de código PHP’ como ‘Tipo de código’.

function wpb_posts_nav(){
    $next_post = get_next_post();
    $prev_post = get_previous_post();
    
    if ( $next_post || $prev_post ) : ?>
    
        <div class="wpb-posts-nav">
            <div>
                <?php if ( ! empty( $prev_post ) ) : ?>
                    <a href="<?php echo get_permalink( $prev_post ); ?>">
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
                                <?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                        <div>
                            <strong>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
                                <?php _e( 'Previous article', 'textdomain' ) ?>
                            </strong>
                            <h4><?php echo get_the_title( $prev_post ); ?></h4>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
            <div>
                <?php if ( ! empty( $next_post ) ) : ?>
                    <a href="<?php echo get_permalink( $next_post ); ?>">
                        <div>
                            <strong>
                                <?php _e( 'Next article', 'textdomain' ) ?>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
                            </strong>
                            <h4><?php echo get_the_title( $next_post ); ?></h4>
                        </div>
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
                                <?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
        </div> <!-- .wpb-posts-nav -->
    
    <?php endif;
}

Una vez introducido el fragmento de código, puedes activar o desactivar el botón.

Debería verse así.

add code snippet

Esto activará el código.

A continuación, sólo tiene que hacer clic en el botón “Actualizar”.

update code snippet

Ahora, tendremos que volver a la página Fragmentos de código +Añadir fragmento.

De nuevo, en la opción “Añade tu código personalizado”, selecciona “Usar fragmento de código” y ponle un nombre para poder consultarlo más adelante.

add custom code

A continuación, puede copiar el siguiente código y pegarlo en el editor de texto WPCode. Asegúrate también de seleccionar ‘Fragmento de código PHP’ en el desplegable ‘Tipo de código’.

wpb_posts_nav();

Este código indica a WordPress dónde mostrar la navegación con la imagen destacada.

add navigation snippet

A continuación, desplácese hasta la sección “Inserción” y haga clic en el menú desplegable situado junto a “Ubicación”.

Desde aquí, vaya a “Página específica” y elija “Insertar después de la entrada”. De este modo, las miniaturas aparecerán correctamente enlazadas.

insert after post wpcode

Por último, puedes activar el conmutador “Activo” y hacer clic en “Actualizar”.

Después de guardar los cambios, puede utilizar esta función en la plantilla en la que desee mostrar enlaces de entradas anteriores y siguientes con miniaturas.

activate posts navigation snippet

Y ya está: ¡ya has añadido y configurado las miniaturas de tu entrada anterior y siguiente!

Ahora, cuando vea una entrada en su sitio web, verá que los enlaces anterior y siguiente de la parte inferior de la entrada ahora tienen miniaturas.

previous and next post example

Nota: Si una de las entradas enlazadas no tiene ya una imagen destacada, entonces no verá una miniatura. Para saber cómo añadir miniaturas a una entrada, puede consultar nuestra guía sobre cómo añadir imágenes destacadas o miniaturas de entradas en WordPress.

Alternativa: Mostrar entradas populares con miniaturas

Otra forma de conseguir la participación de sus lectores después de que lean una entrada es mostrar un catálogo de entradas populares después de cada artículo. Esto permitirá a sus lectores ver su mejor contenido en lugar de sólo los artículos publicados anterior y siguiente.

Sus entradas más populares contienen su contenido más correcto. Mostrarlos a tus visitantes generará confianza, mejorará la prueba social y garantizará que tus visitantes permanezcan más tiempo en tu sitio web.

Cuando compruebe el primer método de nuestra guía sobre cómo mostrar entradas por vistas en WordPress, aprenderá lo fácil que es añadir entradas populares utilizando el plugin MonsterInsights.

El widget de entradas populares de MonsterInsights ofrece una amplia gama de temas atractivos y muchas opciones de personalización.

The Popular Posts Widget in MonsterInsights

También puede consultar nuestra guía sobre cómo añadir widgets personalizados después de la entrada en WordPress, donde aprenderá a añadir distintos tipos de contenido al final de cada entrada del blog.

Esperamos que este tutorial te haya ayudado a aprender a usar miniaturas con enlaces a entradas anteriores y siguientes en WordPress. A continuación, puede que también quieras aprender cómo recortar y editar miniaturas de entradas en WordPress o cómo añadir miniaturas de vídeos destacados en WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

19 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Atesz

    Hello,
    thnak you for this code. I would like to add the post navigation in the middle of my page as a block. So I tried to create a shortcode calling the wpb_posts_nav funtion:

    add_shortcode( ‘custom-post-nav’, ‘wpb_posts_nav’ );

    but if I use the shortcode [custom-post-nav] in the block editor, I cannot publish the post and I get the following: “Updating failed. The response is not a valid JSON response”
    The post nav still appears but only If I paste the code at the end of the page and then they go to wrong place (to the top).

    Do you know where is the problem?
    Thank you in advance!

  3. Sekh Sahajahan

    Hello sir have you any solution to remove the 3 line navigation bar from menu bar because it automatically added.

  4. Markus Martin

    Hi Syed. Does this still work especally with the new version of wordpress?

  5. patricia

    Hello! How would I do, if i want to use this for custom post type? thanks

  6. MarykeVanRensburg

    I got it to work. It seems the } in this “<?php } ?>” was the problem. I removed it and it works. Now just to figure out how to only show next and previous in same category. Thanks

  7. bowetech

    HOw would i set it up so that it will actually get the next post from its current category ?

  8. Japh

    Nice and simple solution, I really like it. Great answer for your Facebook asker :)

  9. MarykeVanRensburg

    Can you tell me how to only show previous and next in the same category? Thanks for this code. I’m going to try it.

    • wpbeginner

      @MarykeVanRensburg I think the TRUE variable there means in category browsing.

      • MarykeVanRensburg

        @wpbeginner I used the code, but it doesn’t work in an Artisteer created theme. The code in my theme is as follows:

        ‘next_link’ => theme_get_previous_post_link(‘« %link’), ‘prev_link’ => theme_get_next_post_link(‘%link »’),

        and I need to change it to show a thumbnail and only a certain category. Thanks.

        • wpbeginner

          @MarykeVanRensburg AFter the link area just add ,true

          our code above will do only category browsing. Unfortunately we do not provide support for specific frameworks.

  10. Dragon Blogger

    Really cool, I do think using thumbnails with latest/next post may be overkill if you already use it with “related posts” there is limited real estate which is especially true for the growing trend of mobile browsing.

    • wpbeginner

      @Dragon Blogger That is only if you are assuming that the site has related posts. Some may not. We are using it on our List25 site which is relatively new site, so related articles is not very helpful at the time. That is why we are using single post navigation.

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.