Support Home > Apariencia > Scroll infinito

Scroll infinito

En lugar de tener que hacer clic en un enlace para obtener el siguiente conjunto de entradas, el scroll infinito las muestra automáticamente cuando el lector se acerca al final de la página.

A diferencia de muchas de las funciones de Jetpack, Scroll infinito solo funciona con los temas compatibles. Como cada tema está diseñado de manera distinta, la función Scroll infinito necesita información sobre él para funcionar correctamente.

NOTA: La mayoría de los temas actuales tienen integrada la compatibilidad con Scroll infinito. Para comprobar si tu tema es compatible con Scroll infinito, ve a JetpackAjustesEscritura en el Escritorio de tu sitio y busca en la sección “Mejoras del tema“.

Si tu tema no tiene integrada la compatibilidad con Scroll infinito, sigue leyendo para obtener instrucciones detalladas sobre cómo añadirla al tema y usar CSS para personalizar su aspecto.

Añadir compatibilidad

El proceso para activar Scroll infinito es muy parecido al de añadir compatibilidad para las miniaturas de entrada o los estilos de editor, porque se hace usando add_theme_support(). Si proporcionas algunos datos clave al llamar a add_theme_support(), Scroll infinito se integrará con tu tema sin problemas.
Si tienes un tema bien diseñado, como los temas por defecto de WordPress, te resultará muy fácil añadir Scroll infinito. Así es como se hace para Twenty Twelve:

add_theme_support( 'infinite-scroll', array(
 'container' => 'content',
 'footer' => 'page',
) );

Con esto, la experiencia de scroll infinito funcionará a la perfección.

container

El parámetro container es un elemento fundamental a la hora de añadir el scroll infinito a tu tema, ya que especifica el ID del elemento HTML al que Scroll infinito tiene que añadir entradas adicionales. El valor por defecto es content, pero puede ser cualquier ID de CSS válido que se muestre en el tema compatible y al que se puedan añadir entradas. Normalmente, este valor es el contenedor principal de las entradas del tema.

footer

Uno de los problemas del scroll infinito es que no puedes acceder al pie de página, ya que cuando te acercas al final, se cargan nuevas entradas. Nuestro scroll infinito ofrece un pie de página fijo que aparece cuando te desplazas hacia abajo. El parámetro footer ayuda a integrar este pie de página con el diseño del tema. Al definir otro ID, el pie de página de scroll infinito se ajusta al ancho correspondiente para que encaje perfectamente con el diseño. Si defines el valor como false, no se añade ningún pie de página.
También hay otros parámetros que puedes modificar. A continuación te mostramos un ejemplo con todos los valores por defecto para cada opción de configuración:

add_theme_support( 'infinite-scroll', array(
 'type' => 'scroll',
 'footer_widgets' => false,
 'container' => 'content',
 'wrapper' => true,
 'render' => false,
 'posts_per_page' => false,
) );

Detalles de cada opción:

type

El parámetro type acepta dos valores distintos: scroll o click. Esta opción controla el comportamiento por defecto de Scroll infinito. El valor scroll hace que las entradas se carguen automáticamente cuando el visitante se acerca al final de la página, mientras que el valor click muestra el botón Cargar más entradas, que permite al usuario controlar cuándo se cargan más entradas.

Por defecto, se establece el valor scroll, pero si un tema tiene widgets de pie de página, puede sobrescribirse este valor con click para que los widgets sean accesibles.

footer_widgets

El argumento footer_widgets acepta una variedad de valores e indica si un tema tiene widgets de pie de página. Si tiene, el tipo de scroll se establece en click para que los widgets sean accesibles.

La opción más sencilla es establecer un booleano true o false para indicar si el pie de página debe mostrarse siempre o nunca, respectivamente.
Además, el argumento footer_widgets también acepta una cadena que represente un ID de barra lateral (por ejemplo, 'sidebar-1') o una array de ID de barra lateral. El código de Scroll infinito comprueba si las barras laterales contienen widgets y define el argumento footer_widgets según estos datos.

Siempre que sea posible, te recomendamos encarecidamente que proporciones los ID de barra lateral si un tema coloca áreas de widgets debajo de la lista de entradas. Así, los usuarios pueden disfrutar de la mejor experiencia del tema al definir si el tipo de scroll debe ser scroll o click. Dicho esto, si un tema especifica el tipo click desde el principio, el argumento footer_widgets puede omitirse con total seguridad.

Y, por si estas opciones no fueran suficientes, el filtro infinite_scroll_has_footer_widgets está disponible por si quieres crear una lógica más compleja. El filtro debe devolver un valor booleano y se puede usar para detectar la presencia de menús de navegación o los visitantes que usan dispositivos móviles.

wrapper

El argumento wrapper tiene un comportamiento similar al de footer_widgets, ya que acepta varios valores. Este argumento determina si cada conjunto de entradas adicionales se incluye dentro de un elemento div cuando se añade al contenedor especificado en el argumento precedente.
Si se especifica un valor booleano (true o false), se coloca el elemento div con la clase infinite-wrap entre las entradas adicionales o no se coloca, respectivamente.

Para encapsular las entradas en un elemento div con una clase personalizada, define el argumento wrapper en una cadena que represente la clase personalizada.
Ten en cuenta que el argumento wrapper solo acepta una única cadena sin ningún espacio en blanco.

En general, se recomienda encapsular las entradas añadidas en un elemento div, a menos que eso resulte en un marcado no válido. Por ejemplo, si un tema usa un elemento de lista (ol o ul) para mostrar entradas, el encapsulado debe desactivarse para evitar que los elementos div aparezcan donde no deben.

Render

Scroll infinito utiliza un bucle estándar de WordPress para representar las entradas adicionales añadidas y usa partes de la plantilla en el formulario content-{post format}.php. Si un tema incluye al menos un elemento content.php, el argumento render se puede omitir. A continuación, se muestra la función de representación por defecto que se usa con Scroll infinito:

while( have_posts() ) {
 the_post();
 get_template_part( 'content', get_post_format() );
}

Si quieres personalizarlo aún más o bien un tema no usa las partes content de la plantilla, debes especificar un nombre de función para el argumento render, que se usará para generar el marcado de Scroll infinito. La función debe incluir la parte while() del bucle de WordPress y puede usar cualquier función disponible en el tema a la hora de representar entradas.

posts_per_page

Por defecto, el argumento type controla cuántas entradas se cargan cada vez que se activa Scroll infinito. Con el tipo scroll se cargan siete (7) entradas cada vez que se activa Scroll infinito. Con el tipo click se usa el valor “Número máximo de entradas a mostrar en el sitio” que se encuentra en Ajustes → Lectura.
Sin embargo, si el diseño de un tema está pensado para un determinado número de entradas, el argumento posts_per_page sobrescribe los valores por defecto descritos en el parágrafo anterior. Este control puede ser útil, por ejemplo, en un tema con un diseño de tres columnas que puede quedar descompensado si se publican más o menos de tres entradas.

Ejemplos

Como existe una amplia variedad de temas y herramientas, queremos que los usuarios puedan controlar el comportamiento de Scroll infinito lo suficiente como para hacerlo compatible con muchos temas. Dicho esto, en base a nuestra experiencia en WordPress.com sabemos que, en general, cada tema necesita muy pocas opciones de configuración. Para demostrarlo, proporcionamos la configuración de Scroll infinito en los temas por defecto de WordPress.

Twenty Twelve
/**
 * Añade compatibilidad con scroll infinito al tema.
 *
 * @uses add_theme_support
 * @return void
 */
function twenty_twelve_infinite_scroll_init() {
 add_theme_support( 'infinite-scroll', array(
 'container' => 'content',
 ) );
}
add_action( 'after_setup_theme', 'twenty_twelve_infinite_scroll_init' );

Para los que no están familiarizados con el tema Twenty Twelve, deben saber que utiliza las partes content-{post format}.php de la plantilla y que no tiene ninguna área de widgets debajo de las entradas, de modo que hemos omitido los argumentos footer_widgets y render. En realidad, como el valor container coincide con el valor por defecto, este argumento podría omitirse también, pero lo hemos dejado para evitar confusiones.

Twenty Eleven
/**
 * Añade compatibilidad con scroll infinito al tema.
 */
function twenty_eleven_infinite_scroll_init() {
 add_theme_support( 'infinite-scroll', array(
 'container' => 'content',
 'footer_widgets' => array( 'sidebar-3', 'sidebar-4', 'sidebar-5', ),
 'footer' => 'page',
 ) );
}
add_action( 'after_setup_theme', 'twenty_eleven_infinite_scroll_init' );

Twenty Eleven incluye áreas de widgets de pie de página. Sin embargo, no se pueden llegar a ver, ya que siempre aparecen nuevas entradas al desplazarse hacia abajo. Para solucionarlo, definimos una array con los ID de las áreas de widgets en footer_widgets. Sin embargo, si una de estas barras laterales tiene un widget, nuestro plugin de Scroll infinito lo detectará y cambiará al tipo click automáticamente (con la que debes hacer clic para cargar más entradas siempre que quieras). Así, pues, se podrá acceder al contenido del pie de página perfectamente. Si tu tema tiene widgets de pie de página, esta es la opción recomendada, ya que te permite mejorar considerablemente la experiencia de los usuarios.

Twenty Ten
/**
 * Añade compatibilidad con scroll infinito al tema
 */
function twenty_ten_infinite_scroll_init() {
 add_theme_support( 'infinite-scroll', array(
 'container' => 'content',
 'render' => 'twenty_ten_infinite_scroll_render',
 'footer' => 'wrapper',
 ) );
}
add_action( 'after_setup_theme', 'twenty_ten_infinite_scroll_init' );
/**
 * Define el código para que se represente en las entradas de llamada
 * y enlazado a partes de la plantilla siempre que sea posible.
 *
 * Nota: Se debe definir un bucle.
 *
function twenty_ten_infinite_scroll_render() {
 get_template_part( 'loop' );
}

Twenty Ten utiliza una estructura de plantilla un poco distinta a la hora de representar entradas, así que necesitamos proporcionar una función de representación personalizada para el scroll infinito.

Siempre con estilo

Lo último que falta por averiguar es cómo se puede integrar perfectamente Scroll infinito con el diseño del sitio. Scroll infinito se basa en el elemento body_class compatible con el tema y, con él, los desarrolladores de temas tienen toda la flexibilidad necesaria para mejorar la experiencia utilizando algunas clases concretas para el cuerpo del contenido. Es decir, cuando el scroll infinito está activo, la clase infinite-scroll está disponible para el elemento body. Si el tipo de scroll infinito es “scroll”, también dispones de la clase neverending. Con la última entrada del blog cargada, se añade la clase infinity-end. Con estas opciones, puedes ocultar tu pie de página y los enlaces de navegación, y mostrarlos de nuevo cuando acabe el scroll infinito. Ejemplo:

/* Oculta los enlaces de navegación y el pie de página del sitio cuando el scroll infinito está activo */
.infinite-scroll #navigation,
.infinite-scroll.neverending #footer {
 display: none;
}
/* Muestra el pie de página de nuevo cuando se han cargado todas las entradas */
.infinity-end.neverending #footer {
 display: block;
}

También recomendamos ajustar estos dos elementos para que encajen con tu tema:

[...]

y

[…]

span.infinite-loader es el indicador de carga que se muestra mientras se recuperan nuevas entradas. Se inserta como un contenedor secundario y es posible que, cuando ya no sea necesario, se oculte en lugar de eliminarse del DOM. Asegúrate de que el CSS se adapte a ambos casos.
div#infinite-handle es el botón Cargar más entradas que se muestra para type=click. Puedes ignorar este elemento si sabes que tu tema siempre usa type=scroll y no tiene ningún widget de pie de página.

Eventos JavaScript

Inevitablemente, hay situaciones en las que se necesitan interacciones de JavaScript en un tema después de añadir entradas. Por ejemplo, en un tema que use jQuery Masonry y necesite activar esta biblioteca para colocar entradas adicionales. Como somos conscientes de dicha necesidad, activamos un evento después de añadir las entradas. Para usar el evento, responde a post-load cuando se active en document.body:

( function( $ ) {
 $( document.body ).on( 'post-load', function () {
 // Se han añadido nuevas entradas a la página.
 } );
} )( jQuery );

Consulta de Scroll infinito con argumentos personalizados

Algunos temas y plugins añaden argumentos adicionales a las consultas de entrada, normalmente para cambiar la forma en que se ordenan o se cargan las entradas. Puedes usar el filtro infinite_scroll_query_args para añadir también esos argumentos adicionales a Scroll infinito. En el ejemplo que se muestra a continuación, añadimos 2 parámetros de ordenación personalizados, que son order y orderby:

/**
 * Ordena todos los resultados de Scroll infinito alfabéticamente por nombre de entrada
 *
 * @param array $args
 * @filter infinite_scroll_query_args
 * @return array
 */
function jetpack_infinite_scroll_query_args( $args ) {
 $args['order'] = 'ASC';
 $args['orderby'] = 'name';
 return $args;
}
add_filter( 'infinite_scroll_query_args', 'jetpack_infinite_scroll_query_args' );

Solución de problemas

He definido Scroll infinito como Carga más entradas a medida que el lector se desliza verticalmente. En cambio, se muestra el botón “Entradas antiguas”.

¿Tu tema tiene widgets de pie de página? Si tienes widgets en el área de widgets de pie de página, Scroll infinito se cambia automáticamente por el botón “Entradas antiguas” para que se muestren los widgets de pie de página en tu sitio. Si quieres que las entradas se carguen a medida que te desplazas hacia abajo, puedes colocar los widgets en otra área de widgets, como en la barra lateral. Si tu tema solo tiene áreas de widgets de pie de página, te recomendamos que busques un tema con más opciones para esto.

Otras notas

Tras darnos cuenta de que esta función debe ser compatible con el tema para funcionar correctamente, hemos incorporado la compatibilidad de Jetpack con los temas de WordPress por defecto, como Twenty Ten, Twenty Eleven, etc. Si usas uno de estos temas, puedes activar la función Scroll infinito y disfrutar de esta función inmediatamente. Si usas uno de los temas de Automattic de WordPress.org, se empezarán a actualizar e incluirán la compatibilidad con el scroll infinito (la tarjeta de la función mostrará un aviso a los usuarios que pueden mejorar los temas si hay disponible alguna actualización para el tema activo).

Información de privacidad

Esta función está desactivada por defecto. Si alguna vez necesitas desactivarla, cambia la opción de configuración Carga más entradas usando el comportamiento del tema por defecto de la sección Mejoras en los temas, en Jetpack — Ajustes — Escritura.

Más información acerca del uso de datos en tu sitio
Datos utilizados
Usuarios o propietarios del sitio
Para registrar las visualizaciones de página mediante las Estadísticas de WordPress.com (debe activarse para que el seguimiento de visualizaciones de página funcione) con cargas adicionales, se usa la siguiente información: dirección IP, ID de usuario de WordPress.com (si se ha conectado), nombre de usuario de WordPress.com (si se ha conectado), agente del usuario, URL de visita, URL referente, marca de tiempo del evento, idioma del navegador y código de país.
Visitantes del sitio
Para registrar las visualizaciones de página mediante las Estadísticas de WordPress.com (debe activarse para que el seguimiento de visualizaciones de página funcione) con cargas adicionales, se usa la siguiente información: dirección IP, ID de usuario de WordPress.com (si se ha conectado), nombre de usuario de WordPress.com (si se ha conectado), agente del usuario, URL de visita, URL referente, marca de tiempo del evento, idioma del navegador y código de país.
Seguimiento de actividad
Usuarios o propietarios del sitio
Se hará un seguimiento de las visualizaciones de página con cada carga adicional (es decir, cuando te desplazas hasta el final de la página y un nuevo conjunto de entradas se carga automáticamente). Si el propietario del sitio ha activado Google Analytics para que se combine con esta función, se enviará también un evento de visualización de página a la correspondiente cuenta de Google Analytics con cada carga adicional.
Visitantes del sitio
Se hará un seguimiento de las visualizaciones de página con cada carga adicional (es decir, cuando te desplazas hasta el final de la página y un nuevo conjunto de entradas se carga automáticamente). Si el propietario del sitio ha activado Google Analytics para que se combine con esta función, se enviará también un evento de visualización de página a la correspondiente cuenta de Google Analytics con cada carga adicional.
Datos sincronizados (más información)
Usuarios o propietarios del sitio
Sincronizamos opciones que determinan si la función está activada o no, y si Google Analytics se ha integrado con esta función.
Visitantes del sitio
Ninguno.
  • Tabla de contenido