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?

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, lo que podría aumentar las visitas a la página y el tiempo de permanencia.

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 entradas.

Otra útil función de navegación se encuentra al final de cada entrada de blog. Allí, encontrarás enlaces a las entradas anterior y siguiente 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 entradas de blog más populares o con mejor rendimiento.

Por ejemplo, puedes tener 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 las entradas solo te ayudaría a crear tu lista de correo electrónico y hacer crecer tu pequeño negocio.

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:

¡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 del tema de tu WordPress.

Recomendamos usar WPCode, el mejor plugin de fragmentos de código para WordPress. Te permite agregar código sin romper tu sitio y viene con muchas plantillas listas para usar, por lo que no tienes que escribir código desde cero.

En todos nuestros sitios web, 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 funciones.

Si no has hecho esto antes, consulta nuestra guía sobre cómo copiar y pegar código en WordPress.

Para empezar, necesitarás instalar y activar el plugin WPCode. Desde tu área de administrador de WordPress, ve a Plugins » Añadir Plugin.

En la siguiente pantalla, usa el cuadro de búsqueda para encontrar rápidamente el plugin WPCode.

Haz clic en ‘Instalar ahora’ en el resultado de la búsqueda, seguido de ‘Activar’.

Si necesitas ayuda, puedes consultar nuestro artículo sobre cómo instalar un plugin de WordPress.

Tras la activación, ve a Fragmentos de código » + Añadir fragmento desde tu panel de WordPress.

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 las entradas anterior y siguiente, subiremos una cadena de código personalizado.

Entonces, hagamos clic en ‘+ Añadir fragmento personalizado’ bajo ‘Añade 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', que es un pequeño fragmento de código que se utiliza para extender la funcionalidad de WordPress.

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;
}

Así es como podría verse en tu pantalla:

Antes de activar, desplázate hacia abajo hasta la sección ‘Inserción’ para verificar la configuración.

Aquí, asegúrate de que el ‘Método de inserción’ esté configurado en ‘Insertar automáticamente’ y la ‘Ubicación’ sea ‘Ejecutar en todas partes’.

Luego, puedes desplazarte hacia arriba de nuevo y cambiar el botón de ‘Inactivo’ a ‘Activo’.

No olvides hacer clic en el botón ‘Guardar fragmento’ o ‘Actualizar’ para activar tu nueva función.

Ahora que la función está creada, necesitamos crear un segundo fragmento para indicarle a WordPress exactamente dónde mostrarla en la página. Al dividir esto en dos fragmentos, creamos la característica de forma segura primero y luego la colocamos fácilmente sin sobrecargar tu sitio o romper tu diseño.

Volvamos a la página Fragmentos de código » + Añadir fragmento.

De nuevo, en la opción ‘Añadir tu código personalizado (Nuevo fragmento)’, haz clic en ‘+ Añadir fragmento personalizado’.

En la ventana emergente que aparece, WPCode te preguntará por el tipo de código.

Puedes seleccionar ‘Fragmento de PHP’.

Esto abrirá el mismo editor de texto que antes.

Continúa y dale un nombre descriptivo a tu nuevo fragmento personalizado para que puedas consultarlo fácilmente más tarde.

Ahora, puedes copiar y pegar el siguiente código en el editor de texto de WPCode. Este código le dice a WordPress dónde mostrar la navegación con la imagen destacada.

wpb_posts_nav();

Así es como podría verse en tu pantalla:

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 el interruptor ‘Activo’ y hacer clic en ‘Guardar fragmento’ (o ‘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.

Debido a que estableciste la ubicación en 'Insertar después de la entrada', WPCode manejará automáticamente la ubicación por ti. No hay necesidad de editar los archivos de tu tema.

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 entradas populares contienen tu contenido más exitoso. Mostrarlas a tus visitantes ayudará a aumentar tus visitas a la página y a mejorar la participación del usuario.

Si bien los enlaces anterior y siguiente son excelentes para la lectura cronológica, una herramienta como MonsterInsights te permite mostrar automáticamente tu contenido absoluto mejor y de mayor conversión para mantener a los lectores interesados.

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 de referencia 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.

Puedes aprender lo fácil que es configurar esto en nuestra guía sobre cómo mostrar publicaciones por visitas en WordPress.

O puedes ver 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.

Enlaces de bonificación para 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 miniaturas de video destacadas 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 ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.