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

Artículo escrito por:
  • WordPress
  • Actualizado: Jul 29, 2014

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ás una buena imagen gif para tu mensaje de "carga". Podrías encontrar muchos 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 la secuencia de comandos solo cuando tenga una página que no sea una sola publicación, solo las páginas en las que tenga más de 1 publicará tendrán que 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):

<? php / ************************* INGRESO INFINITO EN LA WEB ***************** ******** / / * Función que registrará y encolará la secuencia de comandos de scolling infinito que se utilizará en el tema. * / function twentytwelve_script_infinite_scrolling () {wp_register_script ('infinite_scrolling', // nombre del script get_template_directory_uri (). '/ js / jquery.infinitescroll.min.js', // donde el archivo es array ('jquery') este script requiere un script jquery nulo, // no tiene un número de versión del script verdadero // el script se colocará en el pie de página); if (! is_singular ()) {// solo cuando tengamos más de 1 post // cargaremos este script wp_enqueue_script ('infinite_scrolling'); }} // ¡Registre nuestros scripts personalizados! add_action ('wp_enqueue_scripts', 'twentytwelve_script_infinite_scrolling'); / * Función que configurará el desplazamiento infinito para mostrarse en la página. * / function set_infinite_scrolling () {if (! is_singular ()) {// otra vez, solo cuando tenemos más de 1 post // agregar el script js a continuación?> <script type = "text / javascript"> / * Este es el inifinite scrolling setting, puede modificar esto a su gusto * / var inf_scrolling = {/ * img: es la ruta de la imagen de carga, agregue un bonito icono de carga de gifs msgText: el mensaje de carga finalizado Mensaje: mensaje de carga finalizado * / loading: { img: "<? echo get_template_directory_uri ();?> / images / ajax-loading.gif", msgText: "Cargando las siguientes publicaciones ....", finishedMsg: "Posts loaded !!",}, / * El siguiente elemento es establecer nextSelector. NextSelector es la clase css de navegación de la página. En nuestro caso es # nav-below .nav-previous a * / "nextSelector": "# nav-below .nav-previous a", // navSelector es un identificador css de la navegación de la página "navSelector": "# nav-below ", // itemSelector es el div donde se muestra la publicación" itemSelector ":" article ", // contentSelector es la div donde se muestra el contenido de la página (posts)" contentSelector ":" # content "}; / * Lo último que debe hacer es configurar contentSelector para desplazamiento infinito, con una función jquery de infinite-scroll.min.js * / jQuery (inf_scrolling.contentSelector) .infinitescroll (inf_scrolling); </script> <? }} / * necesitamos agregar esta acción en el pie de página. 100 es un número de prioridad que corresponde a una ejecución posterior. * / add_action ('wp_footer', 'set_infinite_scrolling', 100); ?>

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:

<div id = "content" role = "main"> <? php / * ¡Mostrar solo páginas en desplazamiento infinito! Aquí está el secreto: puedes configurar post_type para lo que necesites, ¡es simple! Algunos tipos de publicación podrían ser: cartera, proyecto, producto. Podríamos agregar tantos tipos de publicación como queramos, separándolos por comas, como 'publicación', 'página', 'producto' * / $ args = array (// configurar argumentos 'post_type' => 'página', // Sólo páginas); query_posts ($ args); // cargar publicaciones si (have_posts ()):?> <? php / * Start the Loop * /?> <? php while (have_posts ()): the_post (); // el código de bucle "habitual" para mostrar esos elementos?>

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.