Tutorial de WordPress: Cómo crear un sitio WP de desplazamiento infinito

Actualizado: 29 de julio de 2014 / Artículo de: Rochester Oliveira

Ciertamente, trabajas duro para mejorar la usabilidad de tu sitio para que tus usuarios sean más felices y tengan más probabilidades de volver a menudo, ¿no? Bueno, una de las mejoras que podrías implementar es la técnica de desplazamiento infinito. Básicamente es lo mismo que tenemos en Twitter o Facebook, donde al principio solo se muestra contenido básico, y se agrega más contenido a medida que se desplaza hacia abajo. Esto es bastante bueno para mejorar el rendimiento de su sitio (reduciendo el tiempo de carga) y mejorando la experiencia del usuario (ya que no se necesita ninguna acción para cargar más elementos, como hacer clic en un botón).

Aquí veremos por qué y cómo usarlo en su propio sitio.

Ejemplos del sitio Infinite Scrolling

Siempre es bueno verificar qué están haciendo los grandes, y este tipo de efecto (difícil muchas veces imperceptible) es utilizado por muchos sitios y aplicaciones grandes, como Facebook (que se transmite en vivo), Twitter, Pinterest, Feedly.

Feedly

twitter

Desplazamiento infinito: qué hacer y qué no hacer

Esta técnica eliminará el enlace de paginación regular de su sitio ("publicaciones anteriores" o las páginas numeradas que tiene después de sus publicaciones). El gran "pro" de esta técnica es el tiempo de carga, ya que al principio se cargan menos elementos, se puede tener un sitio mucho más rápido y se agregan más elementos sin la recarga de la página. Notándote, quedándote mucho más tiempo en tu sitio.

Se puede aplicar en la mayoría de los sitios, pero es más adecuado para blogs o sitios similares a una cartera, donde tiene una gran cantidad de contenido e imágenes, y no desea abrumar al usuario con una gran cantidad de contenido.

Esta guía no requiere dominio de codificación, y para ser honesto, ciertamente aprenderá un poco sobre cómo modificar un poco su tema de WordPress.

Los activos

Usaremos El plugin JS de Paul Irish. Descárgalo e instálalo en la carpeta js de tu tema. Usaremos los Twenty Twelve para las propuestas de aprendizaje, pero siéntase libre de usarlo en cualquier tema (y publique preguntas si no funciona para usted).

También necesitará una bonita imagen gif para su mensaje de "carga". Podrías encontrar muchos de ellos por ahí, pero el AjaxLoad El sitio tiene una herramienta impresionante para ayudarlo con muchos estilos preestablecidos y puede elegir el color que mejor se adapte a su combinación de colores.

Una vez que tengas el script y tu bonita imagen gif en Wp-content / themes / twentytwelve / js, ¡podemos empezar!

El codigo PHP

Ok, no tengas miedo, te daremos un fragmento de copiar y pegar, pero esto es lo que debemos hacer para que funcione:

  • Cree una función que cargará y registrará el complemento de desplazamiento infinito internamente. Esto evitará que WordPress lo cargue dos veces y rompa la funcionalidad del tema
  • Cargue el script solo cuando tenga una página que no sea una sola publicación; solo las páginas en las que tenga más de una publicación para mostrar deberán cargar más elementos.

El archivo functions.php es el corazón de tu tema. Toda la funcionalidad suele estar allí o se llama desde otros archivos. Entonces, podemos agregar este código en su archivo de funciones para agregar el soporte de desplazamiento infinito (agregarlo al final del archivo):

    
                    
            /*
                This is the inifinite scrolling setting, you can modify this at your will
            */
            var inf_scrolling = {                
                /*
                    img: is the loading image path, add a nice gif loading icon there                    
                    msgText: the loading message                
                    finishedMsg: the finished loading message
                */
                loading:{
                    img: "/images/ajax-loading.gif",
                    msgText: "Loading next posts....",
                    finishedMsg: "Posts loaded!!",
                },

                /*Next item is set nextSelector. 
                NextSelector is the css class of page navigation.
                In our case is #nav-below .nav-previous a
                */
                "nextSelector":"#nav-below .nav-previous a",

                //navSelector is a css id of page navigation
                "navSelector":"#nav-below",

                //itemSelector is the div where post is displayed
                "itemSelector":"article",

                //contentSelector is the div where page content (posts) is displayed
                "contentSelector":"#content"
            };

            /*
                Last thing to do is configure contentSelector to infinite scroll,
                with a function jquery from infinite-scroll.min.js
            */
            jQuery(inf_scrolling.contentSelector).infinitescroll(inf_scrolling);
                
    

Enfoque alternativo: carga de páginas y tipos de mensajes personalizados

El código anterior cargará todas sus publicaciones, pero ¿qué pasaría si desea mostrar páginas o tipos de publicaciones personalizadas (como elementos de la cartera, si el tema lo admite)? Bueno, podemos modificar el código un poco y hacerlo funcionar también.

El único ajuste necesario es en su índice, categoría o cualquier otro archivo que cargue elementos, reemplazará su bucle actual con un código diferente. Puede identificar su bucle por este código:

while (have_posts ()):

Entonces, una vez que lo hayas encontrado puedes usar este código mágico:

'página', // Solo páginas); query_posts ($ args); // cargar publicaciones if (have_posts ()):?>

Conclusión

Esto es sólo un artículo de "calentamiento". Hay muchas cosas que podría hacer con este tipo de enfoque. Por ejemplo, puede cargar productos en su tienda (usando WooCommerce, tal vez) como desplazamientos de usuarios, o incluso agregar más código JS y CSS allí para crear un cargador increíble tipo paralaje para publicar imágenes.

¿Qué te parece esta técnica? ¿Te gusta? ¿Lo usarías? ¡Comparte tus pensamientos usando la sección de comentarios!

Acerca de Rochester Oliveira

Soy un diseñador web y empresario de Itajubá (MG), Brasil. Me encanta escribir sobre temas oscuros y hacer cosas interesantes.