Cómo agregar un botón de cargar más publicaciones en WordPress

Cuando los visitantes llegan a tu blog, el objetivo es mantenerlos leyendo el mayor tiempo posible. Pero si tienen que hacer clic constantemente para ir a la siguiente página, se crea una fricción que puede hacer que se vayan antes de explorar más de tu contenido.

Ahí es donde entra en juego un botón de 'cargar más publicaciones'. En lugar de interrumpir el flujo, los lectores pueden cargar instantáneamente nuevos artículos sin salir de la página. Esta sencilla función puede reducir las tasas de rebote, mejorar el tiempo en el sitio y hacer que la navegación por tu contenido sea muy fácil.

Hemos visto que este enfoque funciona especialmente bien para blogs y sitios estilo revista con muchas publicaciones. Agregar un botón de 'cargar más' facilita que los lectores descubran más de tu contenido. Además, cuanto más tiempo permanezcan, más probable será que se suscriban o se conviertan en visitantes leales.

En este artículo, te mostraremos cómo agregar un botón de 'cargar más publicaciones' en WordPress, paso a paso.

Cuándo y por qué agregar un botón de 'Cargar más publicaciones' en WordPress

Si quieres que la gente pase más tiempo en tu sitio, necesitas facilitarles el descubrimiento de nuevo contenido. Cuanto más tiempo los visitantes permanezcan interactuando con tu contenido, más visitas obtendrás y más probable será que se suscriban o regresen.

La mayoría de los blogs utilizan una navegación sencilla en la parte inferior de sus páginas de inicio, de blog o de archivo, como un enlace de ‘Entradas antiguas’ o navegación de página numérica. Si bien esto funciona, puede interrumpir el flujo de lectura y hacer que los visitantes dejen de navegar.

Es por eso que ciertos tipos de sitios ven grandes beneficios al agregar un botón de ‘Cargar más entradas’. Es especialmente efectivo para sitios web con mucho contenido, como blogs de comida, sitios web de fotografía, listículos o sitios de noticias virales.

Tomemos el blog So Much Food como ejemplo, utilizan un botón limpio de ‘Cargar más entradas’ que carga instantáneamente nuevas recetas.

En lugar de cargar una página completamente nueva, un botón de ‘Cargar más entradas’ funciona como scroll infinito. Utiliza JavaScript para obtener rápidamente el siguiente conjunto de contenido. Esto mejora la experiencia del usuario y les da la oportunidad de ver más de tu contenido sin interrupción.

Dicho esto, veamos cómo agregar fácilmente un botón de ‘Cargar más entradas’ en tu sitio web de WordPress.

Paso 1: Agregar el botón ‘Cargar más entradas’ en WordPress

Lo primero que debes hacer es instalar y activar el plugin Ajax Load More. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Al activarse, el plugin agregará un nuevo elemento de menú llamado ‘Ajax Load More’ a tu menú de administración de WordPress. Debes hacer clic en él y dirigirte a la página de configuración del plugin.

En la página de configuración, puedes elegir el color de tu botón. También puedes reemplazar el botón con scroll infinito, que carga el siguiente lote de publicaciones automáticamente sin que los usuarios hagan clic en el botón.

A continuación, debes visitar la página Ajax Load More » Plantilla Repetidora para agregar tu plantilla para mostrar las publicaciones.

El plugin viene con una plantilla básica que contiene el loop de WordPress para mostrar las publicaciones. Sin embargo, no coincide con tu tema y puede verse fuera de lugar en tu sitio web.

Para solucionar esto, necesitas copiar el código que tu tema utiliza para mostrar las publicaciones en las páginas de índice, archivo y páginas del blog.

Normalmente, este código se encuentra en la carpeta template-parts de tu tema. En esa carpeta, verás plantillas para mostrar diferente contenido. Por ejemplo, content-page.php, content-search.php, y más.

Buscarás la plantilla genérica content.php. Aquí tienes un ejemplo del archivo content.php de nuestro tema de demostración:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php // Post thumbnail. twentyfifteen_post_thumbnail(); ?> <header class="entry-header"> <?php if ( is_single() ) : the_title( '<h1 class="entry-title">', '</h1>' ); else : the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); endif; ?> </header><!-- .entry-header --> <div class="entry-content"> <?php /* translators: %s: Name of current post */ the_content( sprintf( __( 'Continue reading %s', 'twentyfifteen' ), the_title( '<span class="screen-reader-text">', '</span>', false ) ) ); wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>', 'pagelink' => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%', 'separator' => '<span class="screen-reader-text">, </span>', ) ); ?> </div><!-- .entry-content --> <?php // Author bio. if ( is_single() && get_the_author_meta( 'description' ) ) : get_template_part( 'author-bio' ); endif; ?> <footer class="entry-footer"> <?php twentyfifteen_entry_meta(); ?> <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- .entry-footer --> </article><!-- #post-## --> 

Una vez que encuentres ese código, necesitas pegarlo dentro del campo 'Repeater Templates' en la configuración del plugin.

No olvides hacer clic en el botón 'Save Template' para guardar tu configuración.

A continuación, necesitas visitar la página Ajax Load More » Shortcode Builder para generar el shortcode.

Esta página contiene muchas opciones diferentes que puedes personalizar. Primero, necesitarás seleccionar el tipo de contenedor. Si no estás seguro, solo mira la plantilla que copiaste anteriormente. La mayoría de los temas de WordPress modernos usan el elemento <div>.

Después de eso, desplázate hacia abajo hasta la sección de etiquetas del botón. Aquí puedes cambiar el texto que aparece en el botón. Por defecto, el plugin usa 'Older Posts', y puedes cambiarlo a 'Load more posts' o lo que quieras.

Por último, necesitas elegir si quieres que las publicaciones se carguen automáticamente o esperen a que los usuarios hagan clic en el botón de cargar más publicaciones.

Tu shortcode está listo para ser utilizado. En la columna de la derecha, verás la salida del shortcode. Adelante, copia el shortcode y pégalo en un editor de texto, ya que lo necesitarás en el siguiente paso.

Paso 2: Añadir Cargar Más Publicaciones en Tu Tema de WordPress

Esta parte del tutorial requiere que agregues 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.

Nota: No olvides hacer una copia de seguridad de tu tema de WordPress antes de realizar cualquier cambio.

Necesitarás encontrar los archivos de plantilla donde deseas agregar el botón 'Cargar más publicaciones' en tu tema. Dependiendo de cómo esté organizado tu tema, generalmente estos archivos son index.php, archives.php, categories.php, etc.

Deberás agregar el shortcode que copiaste anteriormente en tu tema justo después de la etiqueta endwhile;.

Dado que estamos agregando el shortcode en un archivo de tema, necesitaremos agregarlo dentro de la función do_shortcode, de la siguiente manera:

echo do_shortcode('[ajax_load_more container_type="div" post_type="post"]'); 

Ahora puedes guardar tus cambios y visitar tu sitio web para ver el botón 'Cargar más publicaciones' en acción. Así es como se veía en nuestro sitio de demostración:

Esperamos que este artículo te haya ayudado a aprender cómo agregar un botón de 'Cargar más publicaciones' en WordPress. También te puede interesar nuestra guía sobre cómo listar publicaciones futuras programadas en WordPress y nuestras selecciones expertas de los mejores plugins de publicaciones relacionadas para WordPress.

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.