A paginação de rolagem infinita é inspirada no Facebook e no Twitter. Esta é apenas uma paginação onde o usuário terá que rolar no final da página para ler mais artigos. Esta é uma maneira de melhorar a experiência do usuário em um site, mas se você fizer errado, também pode dar uma má experiência. Se você for implementar esse tipo de página, verifique se você não inclui links importantes na parte inferior da página. A razão para isso é que quando um usuário tenta clicar nesse link específico, a página irá carregar automaticamente novas entradas e enviará o link da tela a cada vez. Você pode definir uma área de pé de posição de posição fixa ou tornar sua barra lateral visível o tempo todo.
Procurando por uma solução rápida?
Se você estiver procurando por uma solução rápida, há um Grande coleção de scripts e acessórios infinitos de deslocamento no mercado ENVORE. De alguns dólares, é uma excelente maneira de implementar algo em poucos minutos que levaria muito mais a ser construído a partir do zero.!
Se você está procurando uma solução para WordPress, Magento, Woocommerce ou sua própria configuração, há algo para você.
Passo 1 Planeje sua página
É importante que você planeje Sua paginação antecipadamente, onde você quer incluí-lo e como ele irá processá-lo. Uma forma comum de fazer paging está listando os números da página na parte inferior da página. No entanto, ao usar este método, nenhum número de página aparecerá no final da sua lista de itens, já que eles não são mais necessários. Esta página pode ser usada em todos os tópicos, desde que você não inclua muitas informações na seção do seu rodapé, pois pode não dar o efeito desejado ..
Nossa pagagem de rolagem infinita usará As funções jQuery e Ajax para fazer a solicitação e recuperar mais itens para mostrar-lhes o usuário. Neste tutorial, vou usar o tema de vinte e dez como exemplo, você pode ver o rolo de demonstração do trabalho do infinito aqui.
Passo 2 Construindo a função Ajax
Nós usaremos WordPress Ajax Funcionalidade para fazer a chamada desta página. Primeiro, preparamos a função básica para a nossa paginação, por favor insira o seguinte código em suas funções tópicas.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 função será usada para fazer a chamada De nossa paginação, basicamente enviamos duas variáveis para esta função via Ajax, um deles é o número da página e outro é o modelo de arquivo que vamos usar para nossa paginação. Para permitir que esta função seja usada com o WordPress Ajax, precisamos do 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 ação padrão para o WordPress Ajax seria wp_ajax_ (nuestro nombre de acción), daí a razão pela qual o nome Infinite_scroll é usado no exemplo de código. Precisamos adicionar duas ações, uma para usuários registradas e outra para usuários que não fizeram login.
Em seguida, teremos que construir a função Ajax que enviará as duas variáveis que precisamos para nossa paginação. Você pode usar os ganchos do WordPress para inserir essa função JQuery Ajax ou inserir-o imediatamente no tópico do cabeçalho.php
Esta será a chamada básica Ajax que nós vai fazer e usar “infinite_scroll” como nosso nome de ação. O WordPress chamará automaticamente nossa função. wp_infinitepaginate (); Porque nós definimos em nosso assunto. funções. da página. Isso pode ser facilmente alcançado através do jQuery usando o seguinte código.
Agora podemos saber quando o usuário atinge o final da página. Abaixo, temos que chamar a função cargaArtículo dentro da função de rolagem. Eu estou adicionando um medidor a usar como o número da página da nossa chamada ..
Toda vez que o usuário se move para a parte inferior da página, o contador Aumentar e isso nos permitirá passar ao nosso número de página para ir para o nosso wp_infinitepage () opera dentro de nossas funções do tópico.PHP. Com as funções de rolagem e loadarticle, agora podemos fazer a chamada função Ajax dentro do nosso tema WordPress, mas é possível que o resultado não apareça se não definirmos o arquivo de loop dentro da pasta de tópicos.
Etapa 4 Configuração do nosso tópico
O mais importante é que precisemos configurar o DIV que conterá o novo conteúdo solicitado com nossa função Ajax. No tema de vinte e dez, já existe um div Nós podemos usar, que é o div com id = "contenido" Então, vamos incluir o ID DIV em nossa função Ajax. Se você usar outros tópicos que não cercarem seu loop em um div, você pode simplesmente envolver a função de loop como o código de amostra abaixo para obter o mesmo resultado.
contenido de bucle
Vou precisar de um arquivo de loop para isso. O tema vinte dez já tem um arquivo de loop incluído, esta é a principal razão pela qual eu escolhi vinte dez para este exemplo, porque é mais fácil para quem quiser se referir a isso mais tarde. Se você não tiver nenhum loop.php, simplesmente crie um novo arquivo de loop e copie a função de loop dentro do seu index.php no novo arquivo e faça o upload da pasta no seu tópico. Para qualquer um que usa tema vinte dez, você vai querer comentar a página incluída no arquivo porque não precisaremos mais (consulte o arquivo de origem do tutorial para aprender a fazer).
Passo 5 Adicionando AJAX Loader
Isso é opcional, só para dar um toque agradável para nossa página de rolagem infinita. Adicionaremos uma imagem do carregador Ajax quando chegarmos ao final da página. Você pode adicionar o seguinte código ao seu rodapé.php
Cargando…
e adicione o seguinte CSS à sua folha de estilos.
una posición # inifiniteLoader corregida; índice z: 2; inferior: 15px; derecha: 10px; pantalla: ninguna;
Em seguida, adicionaremos algumas linhas de código à nossa função JQuery para exibir e ocultar este item de carregador Ajax.
O carregador Ajax será exibido assim que o usuário atingir o final da página e será escondido quando a solicitação Ajax estiver concluída ..
Passo 6 Limitação adicional para melhorar o deslocamento infinito
até Agora, já temos um deslocamento infinito na operação, mas uma coisa está faltando. A função continuará a ser ativada toda vez que um usuário atingir a página inferior, embora não haja mais publicações para mostrar. Isso é algo que não queremos ter. Vamos adicionar um controle em nossa função de rolagem para que, quando não há mais páginas exibidas, pare ..
Adicione uma nova variedade total à função que será Retorna o número total de páginas disponíveis em nosso site. Isso será usado para garantir que as chamadas adicionais não sejam feitas na página se a página máxima tiver sido atingida. Outra coisa que gostaríamos de adicionar é uma restrição onde esta função será cobrada. Nós só queremos isso em nossa página inicial, arquivo ou talvez pesquisa, mas não em nossa única publicação e página. Então envolvemos um simples php si mas funciona em nosso código jquery.
if (! is_single () ||! is_page ()): // nuestra función jQuery aquí endif;
que é praticamente tudo que você precisa para paginação; Consulte os arquivos de origem, por exemplo, o código usado neste tutorial. Os arquivos são baseados no tema vinte dez ..