Cómo agregar miniaturas a los enlaces de entrada anterior y siguiente en WordPress

Después de todo el trabajo en una entrada de blog de WordPress, ver a los lectores irse después de una sola página es frustrante.

¿Una gran razón? Los enlaces de navegación de texto plano al final de tus publicaciones apenas se notan.

Agregar imágenes en miniatura a estos enlaces de navegación puede ayudarte a captar la atención. Los lectores pueden ver instantáneamente lo que viene a continuación, lo que hace que sea mucho más probable que se queden y exploren tu contenido.

Hemos probado muchos métodos y descubierto que WPCode es la mejor herramienta para el trabajo. Te permite agregar fragmentos de código personalizados de forma segura sin tocar los archivos de tu tema.

En esta guía, te mostraremos exactamente cómo agregar miniaturas a tus enlaces de publicaciones anteriores y siguientes en WordPress. ¡Es más fácil de lo que piensas! 💡

¿Por qué mostrar miniaturas con los enlaces de publicaciones anteriores y siguientes?

En resumen, las miniaturas hacen que tus enlaces de navegación sean instantáneamente más llamativos y fáciles de hacer clic. Pueden animar a los lectores a seguir explorando tu sitio.

Tu blog de WordPress ofrece algunas funciones útiles para ayudar a los visitantes a encontrar contenido nuevo y navegar por tu sitio. Estas funciones incluyen:

• menús de navegación
• una barra de búsqueda, y
• un widget de archivos de publicaciones.

Otra útil función de navegación se encuentra al final de cada publicación de blog. Allí, encontrarás enlaces a las publicaciones anteriores y siguientes de tu sitio.

Estos enlaces aumentan la participación del usuario porque cuando los visitantes terminan de leer una publicación de blog, podrían buscar algo más que leer. Sin embargo, si agregas miniaturas, los enlaces se verán más interactivos.

También es una excelente manera de llamar la atención sobre tus publicaciones de blog más populares o con mejor rendimiento.

Por ejemplo, es posible que tengas contenido principal que ya esté generando mucho tráfico y convirtiendo a esos lectores en suscriptores de correo electrónico. Agregar miniaturas con enlaces a publicaciones solo te ayudaría a crear tu lista de correo electrónico y hacer crecer tu pequeña empresa.

Con eso en mente, te mostraremos cómo agregar miniaturas a los enlaces de publicaciones anteriores y siguientes en WordPress. Aquí están todos los temas que cubriremos en este artículo:

• Using Thumbnails with Previous and Next Post Links in WordPress
• Alternativa: Mostrar publicaciones populares con miniaturas
• Preguntas frecuentes sobre miniaturas de navegación de publicaciones
• Enlaces adicionales: Usar imágenes y otros archivos multimedia en WordPress

¡Empecemos!

Usar miniaturas con enlaces a publicaciones anteriores y siguientes en WordPress

Para agregar miniaturas a tus enlaces de publicaciones anteriores y siguientes, tendrás que agregar 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.

Agregar código usando WPCode

El primer paso es agregar el siguiente fragmento de código usando WPCode, el mejor plugin de fragmentos de código. Te permite agregar código sin romper tu sitio y viene con muchas plantillas listas para usar, para que no tengas que escribir código desde cero.

En los sitios de nuestras marcas asociadas, usamos WPCode para crear y administrar fragmentos de código personalizados. Nos ha funcionado increíblemente bien, y puedes consultar nuestra reseña completa de WPCode para explorar sus características.

Para empezar, necesitarás instalar y activar el plugin WPCode. Si necesitas ayuda, puedes consultar nuestro artículo sobre cómo instalar un plugin de WordPress.

Al activar, ve a la página Fragmentos de Código » + Agregar Fragmento desde tu panel de WordPress.

Luego, haz clic en el botón ‘Agregar Nuevo’.

Serás redirigido a una biblioteca de fragmentos de código, donde puedes elegir entre una amplia variedad de plantillas prefabricadas.

Para agregar miniaturas a los enlaces de la publicación anterior y siguiente, cargaremos una cadena de código personalizado. Entonces, hagamos clic en ‘Usar Fragmento’ debajo de ‘Agregar Tu Código Personalizado (Nuevo Fragmento).’

En la ventana emergente que aparece, seleccionarás el tipo de código.

Aquí, querrás elegir ‘Fragmento de PHP’.

El siguiente paso es darle un nombre al fragmento de código para que puedas consultarlo más tarde.

Luego, simplemente copia el siguiente código en el editor de texto de WPCode:

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 que hayas ingresado el fragmento, puedes cambiar el botón de ‘Inactivo’ a ‘Activo’.

Debería verse así.

Esto permitirá que el código funcione.

Luego, simplemente puedes hacer clic en el botón ‘Actualizar’.

Ahora, necesitaremos volver a la página Fragmentos de Código » + Agregar Fragmento.

De nuevo, bajo la opción ‘Agregar Tu Código Personalizado (Nuevo Fragmento)’, seleccionarás ‘Usar Fragmento’.

Asegúrate de seleccionar ‘Fragmento de PHP’ en la ventana emergente que aparece.

Después de eso, puedes darle un nombre descriptivo para que puedas consultarlo fácilmente más tarde.

Ahora, puedes copiar el siguiente código y pegarlo en el editor de texto de WPCode.

wpb_posts_nav();

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

Hecho esto, querrás desplazarte hacia abajo hasta la sección ‘Inserción’ y hacer clic en el menú desplegable junto a ‘Ubicación’.

Desde aquí, ve a ‘Específico de página’ y elige ‘Insertar después de la publicación’. De esta manera, las miniaturas aparecerán correctamente junto a los enlaces.

Finalmente, puedes activar ‘Activo’ y hacer clic en ‘Actualizar’.

Después de guardar tus cambios, puedes usar esta función en la plantilla donde quieras mostrar enlaces de publicación anterior y siguiente con miniaturas.

Y eso es todo: ¡has agregado y configurado tus miniaturas de publicación anterior y siguiente!

Ahora, cuando veas una publicación en tu sitio web, notarás que los enlaces anterior y siguiente al final de la publicación ahora tienen miniaturas.

Alternativa: Mostrar publicaciones populares con miniaturas

Otra forma de involucrar a tus lectores después de que lean una publicación es mostrar una lista de las publicaciones populares después de cada artículo. Esto permitirá a tus lectores ver tu mejor contenido en lugar de solo los artículos publicados anteriormente y posteriormente.

Tus publicaciones populares contienen tu contenido más exitoso. Mostrarlas a tus visitantes generará confianza, mejorará la prueba social y asegurará que tus visitantes permanezcan más tiempo en tu sitio web.

Cuando revises el primer método en nuestra guía sobre cómo mostrar las publicaciones por visitas en WordPress, aprenderás lo fácil que es agregar publicaciones populares usando el plugin MonsterInsights.

En WPBeginner, usamos MonsterInsights para vigilar de cerca el rendimiento de nuestro sitio web. Puedes ver nuestra reseña completa de MonsterInsights y ver por qué es nuestra herramienta principal para tomar decisiones basadas en datos.

El Widget de Publicaciones Populares de MonsterInsights ofrece una amplia gama de temas atractivos y muchas opciones de personalización.

O puedes consultar nuestra guía sobre cómo agregar widgets personalizados después de las publicaciones en WordPress, donde puedes aprender a agregar varios tipos de contenido al final de cada publicación de blog.

Preguntas frecuentes sobre miniaturas de navegación de publicaciones

¿Tienes preguntas sobre cómo agregar miniaturas a la navegación de tus publicaciones? Aquí hay algunas de las cosas que los lectores suelen preguntar antes de empezar.

¿Puedo cambiar el tamaño de las miniaturas?

¡Absolutamente! En el primer fragmento de código, busca las líneas que contienen [ 100, 100 ]. Estos números representan el ancho y el alto en píxeles. Simplemente cámbialos por las dimensiones que mejor se adapten al diseño de tu tema.

¿Agregar miniaturas con código ralentizará mi sitio web?

En absoluto. El código es ligero y está diseñado pensando en el rendimiento, por lo que no deberías notar ninguna ralentización. Además, WPCode se asegura de que el fragmento solo se cargue en las páginas de publicaciones individuales donde sea necesario.

¿Qué sucede si una publicación no tiene una imagen destacada?

No te preocupes. Si una publicación enlazada no tiene una imagen destacada, el código simplemente mostrará el enlace de texto en su lugar. Dicho esto, establecer una imagen destacada para cada publicación ayuda a que tu sitio se vea pulido y consistente.

¿Es mejor mostrar enlaces de anterior/siguiente o una sección de publicaciones populares?

Depende de tu objetivo. Los enlaces de anterior y siguiente son excelentes para guiar a los lectores a través de contenido relacionado en orden.

Pero si quieres que la gente siga navegando por tus artículos principales, una sección de artículos populares (usando una herramienta como MonsterInsights) puede hacer maravillas.

Enlaces adicionales: Usar imágenes y otros archivos multimedia en WordPress

Esperamos que este tutorial te haya ayudado a aprender cómo usar miniaturas con enlaces a publicaciones anteriores y siguientes en WordPress. A continuación, también te puede interesar aprender:

• Cómo recortar y editar miniaturas de publicaciones de WordPress
• Cómo agregar una imagen de fondo en WordPress
• Cómo agregar miniaturas de video destacadas en WordPress
• Cómo agregar un widget de reproductor de música de audio en WordPress
• Cómo agregar indexación y búsqueda de PDF en WordPress
• Texto alternativo de imagen vs. título de imagen en WordPress
• Cómo solucionar el problema de que la imagen destacada no se muestre en WordPress
• Cómo optimizar imágenes para el rendimiento web sin perder calidad

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.