Pagination infinie Scroll est inspiré par Facebook et Twitter. Ceci est juste une pagination où l’utilisateur devra faire défiler à la fin de la page 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 de mal, cela peut également donner une mauvaise expérience. Si vous allez mettre en œuvre ce type de page, assurez-vous de ne pas inclure des liens importants au bas de la page. La raison en est que lorsqu’un utilisateur tente de cliquer sur ce lien particulier, la page chargera automatiquement de nouvelles entrées et appuyer sur le lien de l’écran à chaque fois. Vous pouvez définir une zone de pied de page de position fixe ou rendre votre barre latérale visible tout le temps.
à la recherche d’une solution rapide?
Si vous recherchez une solution rapide, il y a un Grande collection de scripts et d’accessoires de déplacement infinis sur le marché envient. De quelques dollars, c’est un excellent moyen de mettre en œuvre quelque chose dans quelques minutes qu’il faudrait beaucoup plus à être construit à partir de zéro.
Si vous recherchez une solution pour WordPress, Magento, Woocommerce ou votre propre configuration, il y a quelque chose pour vous.!
Étape 1 Planifiez votre page
Il est important que vous planifiez Votre pagination à l’avance, où vous voulez l’inclure et comment cela le traitera. Une forme commune de fabrication de pagination répertorie les numéros de page au bas de la page. Toutefois, lors de l’utilisation de cette méthode, aucun autre numéros de page n’apparaîtra à la fin de votre liste d’éléments, car ils ne sont plus nécessaires. Cette page peut être utilisée sur tous les sujets tant que vous n’incluez pas beaucoup d’informations dans la section de votre pied de page, car il peut ne pas donner l’effet souhaité.
Notre pagination de défilement infinie utilisera Les fonctions JQuery et Ajax pour faire la demande et récupérer davantage d’éléments pour leur montrer l’utilisateur. Dans ce didacticiel, j’utiliserai le thème vingt-dix comme exemple, vous pouvez voir le défilement de la démonstration de travail infini ici.
Étape 2 Construire la fonction Ajax
Nous utiliserons WordPress Ajax Fonctionnalité pour faire appel à cette page. Tout d’abord, nous préparons la fonction de base de notre pagination, veuillez insérer le code suivant dans vos fonctions de sujet.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;
Cette fonction sera utilisée pour faire l’appel de notre pagination, nous envoyons essentiellement deux variables à cette fonction via AJAX, l’une est le numéro de page et une autre est le modèle de fichier que nous allons utiliser pour notre pagination. Pour permettre à cette fonction d’être utilisée avec WordPress Ajax, nous avons besoin du code suivant.
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
L’action par défaut pour WordPress Ajax serait wp_ajax_ (nuestro nombre de acción), d’où la raison pour laquelle le nom infinit_scroll est utilisé dans l’exemple de code. Nous devons ajouter deux actions, une pour les utilisateurs enregistrés et un autre pour les utilisateurs qui ne sont pas connectés.
Ensuite, nous devrons construire la fonction Ajax qui enverra les deux variables dont nous avons besoin pour notre pagination. Vous pouvez utiliser les crochets WordPress pour insérer cette fonction jQuery Ajax ou l’insérer immédiatement sur votre thème Header.php Sujet
Ce sera l’appel de base Ajax que nous vont faire et utiliser « infinis_scroll » comme nom d’action. WordPress appellera automatiquement notre fonction. wp_infinitepaginate (); Parce que nous le définissons sur notre sujet. Fonctions.php précédemment.
Étape 3 Déterminez lorsque l’utilisateur se déplace vers le bas de la page
pour activer la page de défilement infinie, nous devons déterminer lorsque l’utilisateur arrive à la fin de l’utilisateur. la page. Cela peut être facilement réalisé via JQuery à l’aide du code suivant.
Nous pouvons maintenant savoir quand l’utilisateur atteint la fin de la page. Ci-dessous, nous devons appeler la cargaArtículo fonction dans la fonction de défilement. J’ajoute un mètre à utiliser comme numéro de page de notre appel ..
Chaque fois que l’utilisateur se déplace vers le bas de la page, le compteur va Augmentation et cela nous permettra de passer notre numéro de page pour aller à notre wp_infinitepage () fonctionne dans nos fonctions de sujet.php. Avec les fonctions de défilement et de loadarticle, nous pouvons maintenant faire la fonction dite Ajax dans notre thème WordPress, mais il est possible que le résultat n’apparaisse pas si nous n’avons pas défini le fichier de boucle dans notre dossier Sujets.
Étape 4 Configuration de notre sujet
La chose la plus importante est que nous devons configurer la DIV qui contiendra le nouveau contenu demandé avec notre fonction Ajax. Dans le thème de vingt dix, il y a déjà un div nous pouvons utiliser, qui est la div avec id = "contenido" nous inclurons donc l’ID DIV sur notre fonction Ajax. Si vous utilisez d’autres sujets qui n’échouent pas votre boucle dans une DIV, vous pouvez simplement envelopper la fonction de boucle en tant que code d’échantillon ci-dessous pour obtenir le même résultat.
contenido de bucle
Je vais alors avoir besoin d’un fichier de boucle pour cela. Thème Vingt dix a déjà un fichier de boucle inclus, c’est la raison principale pour laquelle j’ai choisi vingt dix pour cet exemple, car il est plus facile pour tous ceux qui souhaitent y référer plus tard. Si vous n’avez aucune loop.php, créez simplement un nouveau fichier de boucle et copiez la fonction de boucle dans votre fichier index.php dans le nouveau fichier et téléchargez-le sur le dossier de votre sujet. Pour quiconque utilise le thème vingt dix, vous voudrez commenter la page incluse dans le fichier car nous n’en aurons plus besoin (voir le fichier source du tutoriel pour apprendre à le faire).
Étape 5 ajoutant AJAX Loader
Cette option est facultative, juste pour lui donner une touche agréable à notre page de défilement infini. Nous ajouterons une image de chargeur Ajax lorsque nous atteindrons la fin de la page. Vous pouvez ajouter le code suivant à votre pied de page.php
Cargando…
puis ajoutez les CSS suivants à votre feuille de style.
una posición # inifiniteLoader corregida; índice z: 2; inferior: 15px; derecha: 10px; pantalla: ninguna;
Ensuite, nous allons ajouter quelques lignes de code à notre fonction JQuery pour afficher et masquer cet élément chargeur AJAX.
le chargeur de AJAX sera affiché lorsque l’utilisateur arrive à la fin de la page et sera cachée une fois que la demande d’AJAX est finie ..
Étape 6 limitation supplémentaire pour améliorer le déplacement infini
Jusqu’à Maintenant, nous avons déjà un déplacement infini en fonctionnement, mais une chose manque. La fonction continuera d’être activée chaque fois qu’un utilisateur atteint la page inférieure, bien qu’il n’y ait plus de publications à montrer. C’est quelque chose que nous ne voulons pas avoir. Nous allons ajouter un contrôle dans notre fonction de défilement afin que, lorsque aucune autre pages ne soit affichée, stop ..
Ajouter une nouvelle variété totale à la fonction qui va renvoyer le nombre total de pages disponibles sur notre site. Ceci sera utilisé pour que des appels supplémentaires ne soient pas apportés à la page si la page maximale a été atteinte. Une autre chose que nous aimerions ajouter est une restriction où cette fonction sera chargée. Nous ne voulons que ceci sur notre page d’accueil, déposer ou peut-être la recherche, mais pas dans notre seule publication et notre page. Nous avons donc enveloppons simple php si mas œuvres dans notre code jQuery.
if (! is_single () ||! is_page ()): // nuestra función jQuery aquí endif;
C’est pratiquement tout ce que vous avez besoin pour pagination; Consultez les fichiers source, par exemple, le code utilisé dans ce didacticiel. Les fichiers sont basés sur thème vingt dix ..