Didacticiel WordPress: Comment créer un site WP à défilement infini

Mise à jour: 29 juillet 2014 / Article par: Rochester Oliveira

Vous travaillez certainement beaucoup pour améliorer la convivialité de votre site afin que vos utilisateurs soient plus heureux et plus susceptibles de revenir souvent, n'est-ce pas? Eh bien, l’une des améliorations à apporter est la technique du défilement infini. C'est fondamentalement la même chose que ce que nous avons sur Twitter ou Facebook, où seulement le contenu de base est affiché au début, et plus de contenu est ajouté lorsque vous faites défiler l'écran. Cela est très utile pour améliorer les performances de votre site (réduire le temps de chargement) et améliorer l'expérience utilisateur (aucune action n'étant nécessaire pour charger plus d'éléments, comme cliquer sur un bouton).

Ici, nous verrons pourquoi et comment l'utiliser sur votre propre site

Exemples sur le site de défilement infini

Il est toujours bon de vérifier ce que font les gros joueurs, et ce genre d'effet (difficile à remarquer, parfois imperceptible) est utilisé par de nombreux sites et applications géants, tels que Facebook (ce flux en direct), Twitter, Pinterest, Feedly.

Feedly

twitter

Infinite Scroll - À faire et à ne pas faire

Cette technique supprimera le lien de pagination normal de votre site (les «publications plus anciennes» ou les pages numérotées que vous avez après vos publications). Le gros «pro» de cette technique est le temps de chargement, puisque moins d’articles sont chargés au début, vous pouvez avoir un site beaucoup plus rapide, et comme plus d’articles sont ajoutés sans rechargement de page, l’utilisateur peut faire défiler vers le bas pour les «pages» 10 de publications sans même remarquant, restant beaucoup plus longtemps sur votre site.

Il peut être appliqué à la plupart des sites, mais il convient mieux aux blogs ou aux sites de type portefeuille, où vous avez beaucoup de contenu et d'images et que vous ne voulez pas submerger l'utilisateur avec beaucoup de contenu.

Ce guide ne nécessite pas de compétences en programmation, et pour être franc, vous en apprendrez certainement un peu sur la façon de modifier un peu votre thème WordPress.

Les actifs

Nous utiliserons Le plugin JS de Paul Irish. Téléchargez-le et installez-le dans le dossier js de votre thème. Nous utiliserons les propositions de formation Twenty Twelve mais n'hésitez pas à les utiliser dans n'importe quel thème (et à poser des questions si cela ne fonctionne pas pour vous).

Vous aurez également besoin d'une belle image gif pour votre message de «chargement». Vous pourriez en trouver beaucoup là-bas, mais le AjaxLoad Le site propose un outil génial pour vous aider avec beaucoup de styles prédéfinis et vous pouvez choisir la couleur qui correspond le mieux à votre palette de couleurs.

Une fois que vous avez le script et votre belle image gif sous Wp-content / themes / vingt / douze / js, nous pouvons commencer!

Le code PHP

Ok, n’ayez pas peur, nous vous donnerons un extrait copier-coller, mais voici ce que nous devons faire pour que cela fonctionne:

  • Créez une fonction qui chargera et enregistrera le plugin infinite scroll en interne - Ceci empêchera WordPress de le charger deux fois et de casser les fonctionnalités du thème.
  • Chargez le script uniquement lorsque vous avez une page qui n'est pas un seul article - seules les pages où vous avez plus d'un article à afficher devront charger plus d'éléments.

Le fichier functions.php est le cœur de votre thème. Toutes les fonctionnalités sont généralement présentes ou appelées à partir d'autres fichiers. Nous pouvons donc ajouter ce code dans votre fichier de fonctions pour ajouter le support du défilement infini (ajoutez-le à la fin du fichier):

    
                    
            /*
                This is the inifinite scrolling setting, you can modify this at your will
            */
            var inf_scrolling = {                
                /*
                    img: is the loading image path, add a nice gif loading icon there                    
                    msgText: the loading message                
                    finishedMsg: the finished loading message
                */
                loading:{
                    img: "/images/ajax-loading.gif",
                    msgText: "Loading next posts....",
                    finishedMsg: "Posts loaded!!",
                },

                /*Next item is set nextSelector. 
                NextSelector is the css class of page navigation.
                In our case is #nav-below .nav-previous a
                */
                "nextSelector":"#nav-below .nav-previous a",

                //navSelector is a css id of page navigation
                "navSelector":"#nav-below",

                //itemSelector is the div where post is displayed
                "itemSelector":"article",

                //contentSelector is the div where page content (posts) is displayed
                "contentSelector":"#content"
            };

            /*
                Last thing to do is configure contentSelector to infinite scroll,
                with a function jquery from infinite-scroll.min.js
            */
            jQuery(inf_scrolling.contentSelector).infinitescroll(inf_scrolling);
                
    

Approche alternative - pages de chargement et types de publication personnalisés

Le code précédent chargera toutes vos publications, mais que se passe-t-il si vous souhaitez afficher des pages ou des types de publication personnalisés (comme des éléments de portefeuille si votre thème le prend en charge)? Eh bien, nous pouvons modifier un peu le code et le faire fonctionner également.

Le seul ajustement nécessaire est dans votre index, votre catégorie ou tout autre fichier qui chargera des éléments, vous remplacerez votre boucle actuelle par un code différent. Vous pouvez identifier votre boucle par ce code:

while (have_posts ()):

Donc, une fois que vous l'avez trouvé, vous pouvez utiliser ce code magique:

'page', // Pages uniquement); query_posts ($ args); // charge les articles if (have_posts ()):?> 

Conclusion

Ceci est juste un article «d'échauffement». Il y a beaucoup de choses que vous pourriez faire avec ce genre d'approche. Par exemple, vous pouvez charger des produits dans votre magasin (en utilisant peut-être WooCommerce) sous forme de défilement utilisateur, ou même ajouter plus de code JS et CSS pour créer un chargeur impressionnant de type parallaxe pour les images de publication.

Que penses-tu de cette technique? Aimez-vous? Voulez-vous l'utiliser? Partagez vos pensées en utilisant la section commentaires!

A propos de Rochester Oliveira

Je suis un concepteur de sites Web et un entrepreneur de Itajubá (MG), Brésil. J'aime écrire sur des sujets obscurs et faire des trucs sympas.