Paginación de desprazamento infinito está inspirada en Facebook e Twitter. Esta é só unha paginación onde o usuario terá que desprazar ao final da páxina para ler máis artigos. Esta é unha forma de mellorar a experiencia do usuario nun sitio web, pero se o fai mal, tamén pode dar unha mala experiencia. Se vai implementar este tipo de páxina, asegúrese de que non inclúa ligazóns importantes na parte inferior da páxina. O motivo diso é que cando un usuario intenta facer clic nesa ligazón particular, a páxina cargará automaticamente novas entradas e empuxará a ligazón fóra da pantalla cada vez. Pode configurar unha área de pé de posición fixa ou facer que a barra lateral sexa visible todo o tempo.
Buscando unha solución rápida?
Se está a buscar unha solución rápida, hai un Gran colección de scripts e accesorios de desprazamento infinito en envasado de mercado. A partir de algúns dólares, é unha excelente forma de implementar algo en poucos minutos que levaría moito máis a ser construído a partir de cero.
Se está a buscar unha solución para WordPress, Magento, WooCommerce ou a súa propia configuración, hai algo para ti.
Paso 1 Planifica a túa páxina
É importante que planifique A túa paginación con antelación, onde queres incluíla e como o procesará. Unha forma común de facer paginación está listando os números de páxina na parte inferior da páxina. Non obstante, ao usar este método, non hai máis números de páxina que aparecerán ao final da súa lista de elementos, xa que xa non son necesarios. Esta páxina pode usarse en todos os temas sempre que non inclúa moita información na sección do seu pé de páxina, xa que pode que non dea o efecto desexado.
O noso pagamento de desprazamento infinito usará As funcións jQuery e AJAX fan que a solicitude e recupere máis elementos para mostrarlles ao usuario. Neste tutorial, vou usar o tema de vinte e dez como exemplo, podes ver o desprazamento de demostración de traballo infinito aquí.
Paso 2 Construíndo a función AJAX
Usaremos WordPress AJAX Funcionalidade para facer a chamada para esta páxina. En primeiro lugar, preparamos a función básica para a nosa paginación, por favor, insira o seguinte código na súa función de función.php
función wp_infinitepaginate () $ loopFile = $ _POST ; $ paged = $ _POST ; $ posts_per_page = get_option ('posts_per_page'); # Cargue los posts query_posts (array ('paged' => $ paged)); get_template_part ($ loopFile); salida;
Esta función empregarase para facer a chamada Dos nosos pagamentos, enviamos basicamente dúas variables a esta función a través de Ajax, un é o número de páxina e outro é o modelo de ficheiro que imos usar para a nosa paginación. Para permitir que esta función se empregue con WordPress AJAX, necesitamos o seguinte código.
add_action ('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // para el usuario registrado en add_action ('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // si el usuario no ha iniciado sesión
A acción predeterminada para WordPress AJAX sería wp_ajax_ (nuestro nombre de acción), de aí a razón pola que o nome infinite_scroll úsase no exemplo do código. Necesitamos engadir dúas accións, unha para usuarios rexistrados e outra para os usuarios que non conectaron.
A continuación, teremos que construír a función AJAX que enviará as dúas variables que necesitamos para a nosa paginación. Podes usar os ganchos de WordPress para inserir esta función AJAX de jQuery ou inserila de inmediato no teu cabeceiro. O tema
Esta será a chamada básica ajax que nós Vai facer e usar “infinite_scroll” como o noso nome de acción. WordPress chamará automaticamente a nosa función. wp_infinitepaginate (); porque o definimos no noso tema. funcións.php anteriormente.
Paso 3 Determine cando o usuario se move á parte inferior da páxina
Para habilitar a páxina de desprazamento infinito, debemos determinar cando o usuario chega ao final de a páxina. Isto pódese conseguir facilmente a través de jQuery usando o seguinte código.
Agora podemos saber cando o usuario alcanza o final da páxina. A continuación temos que chamar a función cargaArtículo dentro da función de desprazamento. Estou engadindo un contador para usar como o número da páxina da nosa chamada …
Cada vez que o usuario se move á parte inferior da páxina, o contador Aumento e isto permitiranos pasar o noso número de páxina para ir ao noso wp_infinitepage () funciona dentro das funcións do noso tema. Coa función de desprazamento e carga de cartagar, agora podemos facer a chamada función AJAX dentro do noso tema de WordPress, pero é posible que o resultado non apareza se non definimos o ficheiro de ciclo dentro do noso cartafol de temas.
Paso 4 Configurar o noso tema
O máis importante é que necesitamos configurar o DIV que conterá o novo contido solicitado coa nosa función AJAX. No tema de vinte e dez, xa hai unha divia que podemos usar, que é a DIV con id = "contenido", polo que incluiremos a identificación DV na nosa función AJAX. Se usa outros temas que non rodean o seu ciclo nunha div, pode simplemente envolver a función de lazo como o código de exemplo para acadar o mesmo resultado.
contenido de bucle
Eu terá entón un ficheiro de loop para iso. Tema vinte e dez xa ten un arquivo de loop incluído, esta é a principal razón pola que escollín vinte e dez por este exemplo, porque é máis doado para calquera que queira referirse a isto máis tarde. Se non ten ningún loop.php, simplemente cree un novo ficheiro de loop e copie a función de loop dentro do seu índice no novo ficheiro e cargalo no cartafol do seu tema. Para quen usa Tema Twenty Dez, quererá comentar a páxina incluída no ficheiro porque non o necesitaremos máis (ver o ficheiro de orixe do tutorial para aprender a facelo).
Paso 5 Engadindo AJAX Loader
Isto é opcional, só para darlle un bo toque á nosa páxina de desprazamento infinito. Engadiremos unha imaxe de cargador AJAX cando chegamos ao final da páxina. Pode engadir o seguinte código ao seu pé de páxina.php
Cargando…
e logo engadir o seguinte CSS á súa folla de estilos.
una posición # inifiniteLoader corregida; índice z: 2; inferior: 15px; derecha: 10px; pantalla: ninguna;
A continuación, engadiremos algunhas liñas de código á nosa función de jQuery para mostrar e ocultar este elemento de cargador AJAX.
O cargador AJAX mostrarase unha vez que o usuario alcance o final da páxina e estará escondido unha vez que a solicitude AJAX estea rematada.
Paso 6 Limitación adicional para mellorar o desprazamento infinito
ata que Agora, xa temos un desprazamento infinito en funcionamento, pero falta unha cousa. A función continuará a ser activada cada vez que un usuario chega á páxina inferior, aínda que non hai máis publicacións para mostrar. Isto é algo que non queremos ter. Imos engadir un control na nosa función de desprazamento para que cando non se amosan máis páxinas, parar …
Engadir un novo total var do número total de páxinas Dispoñible no noso sitio. Isto empregarase para garantir que as chamadas adicionais non se realicen na páxina se se alcanzou a páxina máxima. Outra cousa que nos gustaría engadir é unha restrición onde se cobrará esta función. Só queremos isto na nosa páxina de inicio, o ficheiro ou quizais a busca, pero non na nosa única publicación e páxina. Así que envolvemos un simple PHP si mas funciona no noso código jQuery.
if (! is_single () ||! is_page ()): // nuestra función jQuery aquí endif;
que é prácticamente todo o que necesitas para Paginación; Consulte os ficheiros de orixe, por exemplo, o código utilizado neste tutorial. Os ficheiros están baseados no tema vinte e dez ..