Défilement infini de page


, Mis à jour le 17 septembre, 2013

Défilement infini de page

Le défilement infini d’une page web est devenu de nos jours un véritable engouement chez les concepteurs de sites Web. Rejoignez le mouvement et apprenez comment intégrer le scrolling infini dans votre site web!

Si vous suivez les étapes complètes ci-dessous, vous serez en mesure de créer facilement le déroulement de votre page sans fin.!

Étape 1: Déterminer votre pagination.

Il faut décidez avant tout où allez-voulez ajouter le scrolling infini sur votre site? Si vous avez de la pagination (numéros de page) au milieu de votre site Web, le défilement infini ne fonctionnera pas. Le meilleur endroit est tout en bas de la page, dans la section de pied de page.

Étape 2: Création de la fonction Ajax

Avant de commencer, définissons qu’est ce qu’est la fonction ajax. C'est une fonction qui envoie des données à des fichiers bien déterminé lorsque des actions particulières sont faits avec du JavaScript. Dans ce cas, lorsque vous faites défiler vers le bas de la page, la fonction ajax enverra les données vers un autre fichier, qui, à son tour, exécute une ou plusieurs actions particulières (plus précisément, charger plus de contenu). Essentiellement, la fonction ajax agit comme un messager.

Pour construire la fonction ajax dans votre thème WordPress (applicable aussi à n’importe quel autre type de site web), ajoutez le code suivant à votre fichier functions.php:

function loadArticle(pageNumber) {
$.ajax({
url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
type:'POST',
data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop',
success: function(html){
$("#content").append(html); // div ou le contenu sera charger
}
});
return false;
}

 

Étape 3: Créer une fonction ajax jQuery.

Cette fonction spécifique permet simplement d'envoyer deux variables pour les fichiers: le numéro de page et le modèle de fichier pour votre pagination. Ajoutez le code suivant à votre fichier header.php:

function loadArticle(pageNumber) {
$.ajax({
url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
type:'POST',
data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop',
success: function(html){
$("#content").append(html);    // Ce div est l'endroit ou le contenu est chargé
}
});
return false;

 

Étape 4: Créer une fonction qui permet aux fichiers de savoir que l’utilisateur est arrivé en bas de la page.

C'est assez facile à faire via jQuery. Il suffit d'utiliser le code suivant:

$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()){
}
});

 

Étape 5: Créer une fonction qui charge plus de contenu une fois que l'utilisateur arrive en bas de la page.

C'est là que les choses intéressantes commencent à se produire! Le code suivant vient après la fonction ci-dessus:

var count = 2;
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
loadArticle(count); count++;
}
});
function loadArticle(pageNumber){
$.ajax({
url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
type:'POST',
data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop',
success: function(html){
$("#content").append(html); // Ce div est l'endroit ou le contenu sera charger
}
});
return false;
}

Étape 6: Définir le fichier de boucle dans le dossier de votre thème. 

Recherchez le div avec l'id = "content". La plupart des thèmes WordPress l’utilise. Elle devrait ressembler à quelque chose comme ceci:

<div id="content"> Contenu en boucle </div>

 Si vous n’avez pas ce div, ajouter le code au dessus dans votre fichier index.php.

 Étape 7: Ajouter un code pour informer l'utilisateur qu'il n'y a pas plus de contenu à afficher.

Vous ne voulez pas que vos utilisateurs deviennent confus  en continuant à dérouler la page vers le bas en s’attendant à ce qu’il y a plus de contenu sans sucées. Vous pouvez facilement résoudre ce problème en ajoutant un code à  votre fonction de défilement qui arrêtera simplement le déroulement une fois qu’il n'y a plus de contenu à afficher. Ajoutez le code suivant à votre fichier functions.php:

var count = 2;
var total = <?php echo $wp_query->max_num_pages; ?>;
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
if (count > total) { return false;
} else {
loadArticle(count);
}
count++;
}
});

Et ajouter ceci dans votre code jQuery:

 if (!is_single() || !is_page()): // our jQuery function here endif; 

C'est tout ce que vous devez faire! Si vous avez des questions ou des idées, n'hésitez pas à nous les faire savoir dans les commentaires ci-dessous!


comments powered by Disqus

Comment changer un domaine principal wp multi-site

Comment changer un domaine principal wp multi-site

Si vous voulez changer le domaine principal de l'installation de votre WordPress multi-site, il y a 5 valeurs à modifier. Vous n’aurez pas besoin d'effectuer une dump de base de données. Ceci est en fait désapprouvé parceque WordPress enregistre des données en séries, et la modification de cela peut … Continuer

Publié le 8 octobre, 2016

0 Commentaires
Supprimer le spam dans wordpress

Supprimer le spam dans wordpress

L’augmentation des commentaires spams dans WordPress devenant un problème, vous vous retrouvez peut-être avec des centaines, voire même des milliers de commentaires en attente que vous avez à supprimer. Malheureusement, l’installation de base de WordPress vous laisse seulement supprimer en masse les … Continuer

Publié le 8 mai, 2016

0 Commentaires
Optimiser la base de données de Wordpress avec Cron

Optimiser la base de données de Wordpress avec Cron

Nous avons déjà souligné l’importance d’avoir une base de données simple et optimisée pour votre site web WordPress pour accélérer la performance de votre site. Après un certain temps, les tableaux MySQL deviennent encombrés et exigeront grandement quelques réparations et travaux d’entretien. Comme … Continuer

Publié le 24 janvier, 2016

0 Commentaires
Comment protéger wp-config.php

Comment protéger wp-config.php

Il est triste de constater à quel point de nombreux sites WordPress sont incroyablement faciles à pirater. Beaucoup d'entre eux ne sont même équipé de la dernière version. Cependant, l'un des fichiers parmi les plus dangereux et les plus sensibles dans WordPress est le wp-config.php. Ce fichier cont … Continuer

Publié le 21 octobre, 2015

0 Commentaires
Comment changer un site html en un site Wordpress

Comment changer un site html en un site Wordpress

Récemment, sur un forum que je fréquente, une vieille connaissance m’a demandé comment convertir un de ses anciens sites Dreamweaver vers WordPress, sans que cela ne lui demande trop d’effort. J’ai d’abord pensé que ce serait impossible de faire cela facilement, mais après avoir vu d’autres réponses … Continuer

Publié le 13 juillet, 2015

2 Commentaires
Comment ajouter un bouton donation dans Wordpress

Comment ajouter un bouton donation dans Wordpress

Il y a un grand nombre de sites web qui offrent des logiciels gratuits ou autres services libres de droit (open source). Les développeurs font beaucoup d’efforts pour nous fournir des outils spécialisés pour divers besoins. Les plugins WordPress sont eux-mêmes un bon exemple. Regardez le nombre d’ad … Continuer

Publié le 11 juillet, 2015

0 Commentaires
Comment installer SSL dans Wordpress

Comment installer SSL dans Wordpress

Tous les jours, nous révélons des informations personnelles sur internet. Rien que pendant la dernière heure, j’ai utilisé ma carte de crédit, acheté un livre, sauvegardé une copie de l’adresse de mes amis, envoyé des mails et fait quelques courses. Partager nos informations est devenu tellement co … Continuer

Publié le 28 février, 2015

0 Commentaires



Les avis des clients

Avis des utilisateurs


Faites entendre votre voix. Passez en revue votre fournisseur d'hébergement Web - bon ou mauvais.


LWS est un hébergeur qui me satisfait humblement dans le rapport SAV, pour la rapidité à revolver les préoccupation de ses clients. J'apprécie le fait qu'il ne faut pas attendre plus 24 heures pour avoir son espace d'hébergement et son nom de domaine disponible. je suis très content de le promptitu …

YOUGOUE à propos LWS

Montrer une autre revue
Lire les avis LWS



Plans d'hébergement




Les plans d'hébergement de 59 sociétés d'hébergement partout dans le monde


Meilleur hébergeurs web

# hébergeur web prix action

1

Ikoula

1.95 EURO

Ajouter un Avis
Visiter

2

Siteground

6.95 USD

Ajouter un Avis
Visiter

3

Ex2hosting

3.99 EURO

Ajouter un Avis
Visiter

4

Inmotion

5.95 USD

Ajouter un Avis
Visiter

5

Webhostinghub

4.95 USD

Ajouter un Avis
Visiter

6

Bluehost

6.95 USD

Ajouter un Avis
Visiter






Hébergeurs par avis de clients

Ex2hosting
78 avis des clients
Nuxit France
70 avis des clients
Hostpapa France
67 avis des clients
1and1 France
62 avis des clients
Rapidenet
50 avis des clients
Ajouter un avis Tous les profils


Hébergeurs par fidélité de clients

Ex2hosting
73 / 78 recommandé
Nuxit France
68 / 70 recommandé
Rapidenet
49 / 50 recommandé
Infomaniak France
48 / 48 recommandé
Hostpapa France
39 / 67 recommandé
Évaluer hébergeur Tous les profils


Question de la Semaine


Le plus important critère de votre hébergeur



Contacter l'éditeur

Posez votre question