Sin duda, trabaja duro para mejorar la usabilidad de su sitio para que sus usuarios estén más contentos y tengan más probabilidades de volver con frecuencia, ¿verdad? Bueno, una de las mejoras que podrías implementar es la técnica de desplazamiento infinito. Es básicamente lo mismo que tenemos en Twitter o Facebook, donde solo se muestra el contenido básico al principio y se agrega más contenido a medida que se desplaza hacia abajo. Esto es bastante bueno para mejorar el rendimiento de su sitio (reducing tiempo de carga) y mejorar 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.
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 codificación competencia, y para ser honesto, seguramente aprenderá un poco sobre cómo ajustar su WordPress tema un poco.
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!
Las soluciones PHP código
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 cargue y registre el complemento de desplazamiento infinito internamente: esto evitará WordPress de cargarlo dos veces y romper 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.
Las funciones.php El archivo es el corazón de tu tema. Toda la funcionalidad suele estar allí o se llama allí 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
/*************************
WEB REVENUE INFINITE SCROLLING
*************************/
/*
Function that will register and enqueue the infinite scolling's script to be used in the theme.
*/
function twentytwelve_script_infinite_scrolling(){
wp_register_script(
'infinite_scrolling',//name of script
get_template_directory_uri().'/js/jquery.infinitescroll.min.js',//where the file is
array('jquery'),//this script requires a jquery script
null,//don't have a script version number
true//script will de placed on footer
);
if(!is_singular()){ //only when we have more than 1 post
//we'll load this script
wp_enqueue_script('infinite_scrolling');
}
}
//Register our custom scripts!
add_action('wp_enqueue_scripts', 'twentytwelve_script_infinite_scrolling');
/*
Function that will set infinite scrolling to be displayed in the page.
*/
function set_infinite_scrolling(){
if(!is_singular()){//again, only when we have more than 1 post
//add js script below
?>
<script type="text/javascript">
/*
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: "<? echo get_template_directory_uri(); ?>/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);
</script>
<?
}
}
/*
we need to add this action on page's footer.
100 is a priority number that correpond a later execution.
*/
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:
<?php /* ¡Mostrar solo páginas en desplazamiento infinito! Aquí está el secreto: puede configurar post_type para lo que necesita, ¡es simple! Algunos tipos_de_publicaciones podrían ser: portafolio, proyecto, producto. Podríamos agregar tantos tipos de publicaciones como queramos, separándolos con comas, como 'publicación', 'página', 'producto' */ $args = array( // configurar argumentos 'post_type' => 'page', // Solo páginas); query_posts($argumentos); // cargar publicaciones si ( have_posts() ) : ?> <?php /* Iniciar el bucle */ ?> <?php while ( have_posts() ) : the_post(); //¿el código de bucle "habitual" para mostrar esos elementos?>
Conclusión
Este es solo un artículo de "calentamiento". Hay muchas cosas que podrías hacer con este tipo de enfoque. Por ejemplo, puede cargar productos en su tienda (usando WooCommerce, tal vez) a medida que el usuario se desplaza, o incluso agregue más código JS y CSS allí para crear un cargador de paralaje impresionante para imágenes de publicaciones.
¿Qué te parece esta técnica? ¿Te gusta? ¿Lo usarías? ¡Comparte tus pensamientos usando la sección de comentarios!
