La cuenta con los tutoriales sobre Jetpack ya me empieza a tambalear. Me parece que ya vamos por la octava parte, ya hemos pasado a Juego de Tronos. En el post de hoy veremos cómo implementar un scroll infinito en nuestra web ya que está de moda las páginas tipo paralax. Y eso sólo es la nueva parte que veremos, no nos podemos olvidar de la inserción de formularios, creación de fórmulas matemáticas o difusión de nuestras entradas a través de las redes sociales mediante Jetpack.
Infinite Scroll
Este módulo tiene una finalidad bien clara y sencilla: mostrar todos los posts en la página de inicio. Además, lo realiza de forma que se van cargando más entradas según vamos bajando por la página para no colapsar nuestra web. Con un simple clic conseguimos que Jetpack implemente el modo scroll en nuestra web. En lugar de tener que hacer clic en un enlace para llegar a la siguiente serie de posts, el desplazamiento infinito tira de los siguientes posts de forma automática a la vista cuando el lector se acerca al final de la página.
En las opciones de configuración permite activar una opción para las visitas en Analytics. Dónde viene la casilla «Utilice Google Analytics con Scroll Infinito » activamos y tenemos como resultado que cada nueva entrada cargada con Scroll Infinito como una visita a una página en Google Analytics. Muy recomendado para evitar tener uns tasa de rebote alta y nos perjudique en el SEO.
Este módulo nos resulta fácil y tiene un pero: no es compatible con todas las plantillas. Cada tema se construye un poco diferente y no todos son aptos para Infinite Scrolla. Para más información tenemos la información de Jetpack sobre temas y estilos CSS. Por supuesto que los temas Twenty de WordPress son compatibles con el deslizamiento infinito.
Funciones soporte
En caso afirmativo, Jetpack permite insertar funciones para concretar mejor su configuración. Esta parte es técnica. Es muy similar a la adición para las miniaturas de correos o estilos de editor ya que hacemos uso de la función add_theme_support (). En caso de compatibilidad, realizamos una copia de seguridad de nuestro archivo functions.php dentro de la carpeta de nuestro tema. Podemos insertar el siguiente código, los primeros parámetros son obligatorios.
add_theme_support( 'infinite-scroll', array( 'container'=> 'content', 'footer'=> 'page', 'type'=> 'scroll', 'footer_widgets'=> false, 'wrapper'=> true, 'render'=> false, 'posts_per_page'=> false,) );
container
Este parámetro es el núcleo de la adición de scroll infinito a nuestro tema: especifica el nombre de la ID donde Infinito Scroll debe agregar las entradas adicionales. El valor por defecto es «content», pero puede ser cualquier ID válida en nuestro tema. Por lo general, esto va a ser el contenedor padre de las entradas de nuestro tema.
footer
Uno de los problemas con scroll infinito es que no se puede acceder a pie de página de una página, ya que cada vez que nos acercamos al final, se cargan nuevos posts. Para remediar esto, el módulo cuenta un pie de página fijo que se desliza según nos desplazamos hacia abajo. El parámetro footer ayuda a mezclar este pie de página con el diseño de nuestra plantilla. También admite el valor «false» para no mostrar un footer.
type
Esta variable admite los siguientes valores: scroll o click. El primero, scroll, es el valor predeterminado si no ponemos nada en la función. Y, además, es el auténtico deslizamiento porque carga automáticamente las entradas cuando el visitante se acerca al final de la página. El segundo, click, muestra un botón de cargar más posts, dejando un control más preciso al usuario para mostrar más entradas. Tenemos que tener cuidado si tenemos wigets en el pie de página y tenemos el modo scroll porque pueden anularse el modo scroll para que los widgets son accesibles.
footer_widgets
Si no tenemos widgets en el pie de página, pasamos de este parámetro. Su valor por defecto es «false». Como ya hemos mencionado con el parámetro anterior, el tipo de desplazamiento se ajustará en «click» en los widgets para que sean accesibles. Además, admite el valor «true» que es el siguiente más sencillo.
Además, podemos añadir un ID de un sidebar, por ejemplo, «sidebar-1». El módulo comprobará si la barra lateral contiene los widgets y establece la variable en consecuencia.
wrapper
Este argumento determina si cada conjunto de posts está contenido dentro de un elemento div cuando se anexa al contenedor especificado en el argumento precedente. Es decir, es una capa envolvente a otra en el CSS. Un ejemplo válido se da cuando envuelva al a mayor parte de la página permieindo definir características básicas tales como ancho, letra, bordes o si se centra en la ventana del navegador. Es un término técnico.
Aquí podemos elegir entre «true», «false» y la div wrapper. En general, es una buena práctica para envolver las entradas en un div. Una excepción se da cuando se emplean elementos ol y ul para visualizar los posts, en cuyo caso se debe deshabilitar la este parámetro.
render
El módulo utiliza un bucle WordPress estándar para que las entradas se añadan utilizando elementos de la plantilla con su contenido. Si el tema incluye unos ficheros PHP relativos al contenido, este parámetro no se tiene en cuenta. Si requerimos una mayor personalización o un tema no utiliza los elementos de plantilla de contenido mencionados en la frase anterior, un nombre de función puede ser especificado para el argumento. El código sería similar al siguiente, necesitando incluir la porción de bucle de WordPress y se puede utilizar cualquier función disponible al tema cuando se hacen posts:
while( have_posts() ) {
the_post();
get_template_part( ‘content’, get_post_format() );
}
posts_per_page
Por defecto, este argumento es siete entradas para tipo scroll y para tipo click depende de las opciones dentro de «Lectura» en el menú «Ajustes». Obviamente si deseamos otro valor lo podemos escribir para que se ajuste lo más armoniosamente a nuestra plantilla. Además, tenemos que tener en cuenta el número de columnas no es lo mismo una, dos o tres llenando más o menos la pantalla.
Conclusión
Hemos visto que Scroll Infinite es fácil de activar. Sin embargo, no se adapta a todos los temas por lo que puede feo nuestro tema y no poder habilitarlo. Si no tenemos problemas, podemos activar las estadísticas avanzadas para Google para evitar una tasa de rebote alta. Además, si tenemos conocimientos técnicos y avanzados en CSS y WordPress tenemos la posibilidad de personalizar más el tipo de deslizamiento que queremos para nuestra web.
¿Usáis este módulo? ¿Cuál es vuestra experiencia? ¿Estáis a favor de un deslizamiento infinito? Dejad vuestros comentarios.
