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!