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

Article écrit par:
  • WordPress
  • Mis à jour: Jul 29, 2014

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).

De plus, vous aurez besoin d’une belle image gif pour votre message de «chargement». Vous pouvez 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.
  • Ne chargez le script que lorsque vous avez une page qui n'est pas une publication unique. Seules les pages contenant plus de publications 1 à afficher devront afficher 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):

<? php / ************************** REVENU WEB DÉFILEMENT INFINI ***************** ******** / / * Fonction qui enregistre et met en file d'attente le script de défilement infini à utiliser dans le thème. * / function twentytwelve_script_infinite_scrolling () {wp_register_script ('infinite_scrolling', // nom du script get_template_directory_uri (). '/ js / jquery.infinitescroll.min.js', // où le fichier est un tableau ('jquery'), ce script nécessite un script jquery null, // n'a pas de numéro de version de script true // le script sera placé sur le pied de page); if (! is_singular ()) {// uniquement lorsque nous avons plus de 1 post // nous allons charger ce script wp_enqueue_script ('infinite_scrolling'); }} // Enregistrez nos scripts personnalisés! add_action ('wp_enqueue_scripts', 'twentytwelve_script_infinite_scrolling'); / * Fonction permettant de définir le défilement infini à afficher dans la page. * / function set_infinite_scrolling () {if (! is_singular ()) {// encore une fois, uniquement lorsque nous avons plus que la publication 1 // ajout du script js ci-dessous?> <script type = "text / javascript"> / * Ceci est la paramètre de défilement inifinite, vous pouvez le modifier à votre guise * / var inf_scrolling = {/ * img: est le chemin de l’image de chargement, ajoutez une belle icône de chargement en gif msgText: le message de chargement finishMsg: le message de chargement terminé * / loading: { img: "<? echo get_template_directory_uri ();?> / images / ajax-loading.gif", msgText: "Chargement des prochains messages ...", terminéMsg: "Posts chargés !!",}, / * L'élément suivant est set nextSelector. NextSelector est la classe css de navigation de page. Dans notre cas, il s'agit de # nav-below .nav-previous a * / "nextSelector": "# nav-below .nav-previous a", // navSelector est un identifiant CSS de la navigation dans la page "navSelector": "# nav-below ", // itemSelector est le div où post est affiché" itemSelector ":" article ", // contentSelector est le div où le contenu de la page (posts) est affiché" contentSelector ":" # content "}; / * La dernière chose à faire est de configurer contentSelector en défilement infini, avec la fonction jquery de infinite-scroll.min.js * / jQuery (inf_scrolling.contentSelector) .infinitescroll (inf_scrolling); </ script> <? }} / * nous devons ajouter cette action au bas de page. 100 est un numéro de priorité qui correspond à une exécution ultérieure. * / add_action ('wp_footer', 'set_infinite_scrolling', 100); ?>

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:

<div id = "content" role = "main"> <? php / * Afficher uniquement les pages sur le défilement infini! Voici le secret: vous pouvez définir post_type pour ce dont vous avez besoin, c'est simple! Certains post_types pourraient être: portfolio, projet, produit Nous pourrions ajouter autant de types de publications que nous le souhaitons, en les séparant par des virgules, comme 'post', 'page', 'produit' * / $ args = array (// paramètres de configuration 'post_type' => 'page', // Pages uniquement); query_posts ($ args); // charge les posts if (have_posts ()):?> <? php / * Commence la boucle * /?> <? php while (have_posts ()): the_post (); // le code de boucle "habituel" pour afficher ces éléments?>

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.