Comment créer une pagination par défilement infini

La pagination par défilement infini est inspirée de Facebook et de Twitter. Ceci est juste une pagination où l'utilisateur devra faire défiler la page jusqu'en bas pour lire plus d'articles. C'est un moyen d'améliorer l'expérience utilisateur sur un site Web, mais si vous le faites mal, cela peut également être une mauvaise expérience. Si vous souhaitez implémenter ce type de pagination, assurez-vous de ne pas inclure de liens importants au bas de la page. La raison en est que lorsqu'un utilisateur essaie de cliquer sur ce lien particulier, la page charge automatiquement les nouvelles entrées et fait sortir le lien de l'écran à chaque fois. Vous pouvez définir une zone de pied de page à position fixe ou bien rendre votre barre latérale visible à tout moment..

À la recherche d'une solution rapide?

Si vous cherchez une solution rapide, il existe une grande collection de scripts et de plug-ins de défilement infinis sur Envato Market. À partir de quelques dollars seulement, c'est un excellent moyen d'implémenter quelque chose en quelques minutes qui prendrait beaucoup plus de temps à construire à partir de zéro.!

Que vous souhaitiez une solution pour WordPress, Magento, WooCommerce ou votre propre configuration, il y a quelque chose pour vous.!

Étape 1 Planifiez votre pagination

Il est important que vous planifiiez à l’avance votre pagination, le lieu où vous souhaitez l’inclure et la façon dont vous allez la traiter. Une façon courante de faire la pagination consiste à lister les numéros de page au bas de la page. Cependant, avec cette méthode, plus aucun numéro de page n'apparaîtra à la fin de votre liste d'articles, car ils ne sont plus nécessaires. Cette pagination peut être utilisée sur tous les thèmes tant que vous n'incluez pas une foule d'informations dans votre section de pied de page, car cela pourrait ne pas donner l'effet souhaité..

Notre pagination à défilement infini utilisera les fonctionnalités jQuery et ajax pour effectuer la demande et extraire davantage d'articles à afficher à l'utilisateur. Dans ce tutoriel, je vais utiliser le thème Twenty Ten comme exemple. Vous pouvez voir la démonstration de travail du défilement infini ici..

Étape 2 Construire la fonction Ajax

Nous allons utiliser la fonctionnalité ajax de WordPress pour lancer l'appel de cette pagination. Nous préparons d’abord la fonction de base pour notre pagination, veuillez insérer le code suivant dans le thème de votre thème. functions.php

fonction wp_infinitepaginate () $ loopFile = $ _POST ['loop_file']; $ paginé = $ _POST ['page_no']; $ posts_per_page = get_option ('posts_per_page'); # Charge les publications query_posts (array ('paged' => $ paged)); get_template_part ($ loopFile); sortie; 

Cette fonction sera utilisée pour lancer l'appel de notre pagination. En gros, nous envoyons deux variables à cette fonction via ajax, l'une est le numéro de page et l'autre le modèle de fichier que nous allons utiliser pour notre pagination. Pour activer cette fonction avec WordPress ajax, nous avons besoin du code suivant.

add_action ('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // pour l'utilisateur connecté add_action ('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // si l'utilisateur n'est pas connecté

L'action par défaut pour WordPress ajax serait wp_ajax_ (notre nom d'action), D'où la raison pour laquelle le nom infinite_scroll est utilisé dans l'exemple de code. Nous devons ajouter deux actions, une pour les utilisateurs connectés et une autre pour les utilisateurs qui ne sont pas connectés..

Ensuite, nous devrons créer la fonction ajax qui enverra les deux variables nécessaires à notre pagination. Vous pouvez utiliser les points d'ancrage WordPress pour insérer cette fonction ajax de jQuery ou l'insérer immédiatement dans votre thème. header.php

Ce sera l'appel ajax de base que nous allons effectuer et nous utilisons "infinite_scroll" comme nom d'action. WordPress appellera automatiquement notre fonction wp_infinitepaginate (); parce que nous le définissons dans notre thème functions.php précédemment.

Étape 3: Déterminez quand l'utilisateur doit défiler jusqu'en bas de la page

Pour activer la pagination du défilement infini, nous devons déterminer quand l'utilisateur frappe au bas de la page. Ceci peut être réalisé facilement via jQuery en utilisant le code suivant.

Nous pouvons maintenant savoir quand l'utilisateur clique sur le bas de la page. Ensuite, nous devons appeler le loadArticle fonction dans la fonction de défilement. J'ajoute un compteur à utiliser comme numéro de page de notre appel.

Chaque fois que l'utilisateur fait défiler la page jusqu'en bas, le compteur augmente et cela nous permet de faire passer le numéro de page à notre wp_infinitepage () fonctionner dans notre thème functions.php. Avec les fonctions scroll et loadArticle, nous pouvons maintenant effectuer l'appel de la fonction ajax dans notre thème WordPress, mais le résultat peut ne pas apparaître si nous n'avons pas défini le fichier de boucle dans notre dossier de thèmes..

Étape 4: Configurer notre thème

Le plus important, nous devons configurer la div qui contiendra le nouveau contenu demandé à l’aide de notre fonction ajax. Dans le thème Twenty Ten, il y a déjà une div que nous pouvons utiliser, qui est la div avec id = "content" Nous allons donc inclure l'identifiant div dans notre fonction ajax. Si vous utilisez d'autres thèmes qui n'enveloppent pas la boucle dans un div, vous pouvez simplement envelopper la fonction de boucle comme dans l'exemple de code ci-dessous pour obtenir le même résultat..

 contenu de la boucle 

Ensuite, nous aurons besoin d’un fichier de boucle pour cela. Le thème Twenty Ten contient déjà un fichier de boucle. C’est la raison principale pour laquelle j’ai choisi Twenty Ten pour cet exemple, car il est plus facile pour quiconque de le mentionner plus tard. Si vous n'en avez pas loop.php, créez simplement un nouveau fichier de boucle et copiez la fonction de boucle dans votre index.php dans le nouveau fichier et chargé dans le dossier de votre thème. Si vous utilisez le thème Twenty Ten, vous pouvez commenter la pagination incluse dans le fichier car nous n'en aurons plus besoin (veuillez vous reporter au fichier source du didacticiel pour savoir comment procéder)..

Étape 5 Ajouter Ajax Loader

Ceci est facultatif, juste pour donner une belle touche à notre pagination à défilement infini. Nous allons ajouter une image du chargeur ajax au fur et à mesure que nous touchons le bas de la page. Vous pouvez ajouter le code suivant à votre footer.php

Chargement… 

un # inifiniteLoader position: fixed; z-index: 2; en bas: 15px; à droite: 10px; affichage: aucun; 

if (! is_single () ||! is_page ()): // notre fonction jQuery ici endif;