Comment créer un site web à défilement infini avec WordPress

Le défilement infini est un procédé utilisé par de nombreux sites web aujourd’hui. Il s’agit d’un procédé par lequel les messages sont constamment chargés à la fin d’une page au lieu d’utiliser “suivant” ou “précédent”. Il continuera à délivrer poste après poste jusqu’à ce que tout le contenu ait été épuisé. Vous avez probablement déjà vu cela sur des sites comme Facebook et Twitter. Vous pouvez également développer un site web à défilement infini dans WordPress.

Avec la plupart des techniques de défilement infinies, vous verrez un chargement paresseux. Il est donc beaucoup plus facile pour les navigateurs de charger le contenu tout en gardant le site web rapide. Si vous essayez de tout charger en une seule fois, le téléchargement de toutes les informations peut prendre littéralement des jours, surtout sur les très grands sites web.

Dans ce tutoriel, je vais vous montrer comment créer un site web à défilement infini en utilisant WordPress.

Installer Ajax Charger plus

Aujourd’hui, je vais aborder certaines des fonctions du plugin de défilement infini Ajax Load More. C’est un outil flexible qui permet une grande personnalisation tout en utilisant des shortcodes sur votre site. Bien qu’il vous faille connaître un peu de programmation pour vous plonger vraiment dans ce plugin, c’est quelque chose que vous voudrez peut-être envisager.

Il est également utile qu’Ajax Load More soit l’un des meilleurs plugins de défilement infini pour WordPress. Il a plus de 30 000 installations actives et une note élogieuse.

Installez et activez le plugin “Ajax Load More”.

Cliquez sur l’outil Ajax Load More dans la colonne de gauche de WordPress.

L’écran des paramètres

Dans l’écran des paramètres, vous pouvez modifier la façon dont Ajax Load More se comporte sur le site web. Par exemple, vous pouvez changer le type de conteneur de la façon dont les shortcodes fonctionnent ou si vous voulez utiliser vos propres styles CSS.

Vous pouvez également modifier la façon dont le bouton et le style de chargement apparaissent sur votre site.

Lorsque vous apportez des modifications à l’écran de paramétrage, celui-ci est automatiquement enregistré.

Modèles de répétiteurs

À partir de Repeater Templates, vous pouvez modifier le fonctionnement du HTML et du PHP dans le shortcode Ajax Load More. Un code par défaut est déjà en place, mais vous pouvez y apporter vos propres modifications.

Si vous passez à la version Premium de ce plugin, vous aurez accès à d’autres modèles, ce qui peut vous éviter une partie du travail de codage. Cela pourrait vous faire gagner du temps si vous vous y connaissez en PHP et HTML.

Créateur de codes courts

Le Shortcode Builder est le pain et le beurre de ce plugin. C’est ici que vous modifierez le comportement de l’outil et que vous ajouterez des personnalisations.

Sur la gauche, vous avez toutes les options disponibles pour créer votre propre fonction de défilement infini. Les identifiants, les étiquettes des boutons, les options de défilement et bien d’autres choses encore sont personnalisables afin que vous puissiez créer quelque chose qui s’adapte facilement à vos idées de conception.

A droite, la sortie du shortcode. C’est le code que vous voulez copier et coller dans vos messages ou pages. Au fur et à mesure que vous faites des modifications dans le constructeur, vous verrez ce code s’ajuster automatiquement.

Pour tirer le meilleur parti de cet outil, vous voudrez peut-être vous familiariser avec les CSS, HTML et PHP. Vous ne devez pas nécessairement apprendre un jargon de codage extravagant, mais il vous serait utile d’apprendre la différence entre des choses comme div, ul, ol et les conteneurs de table.

Si vous avez besoin d’aide à cet égard, je vous suggère des sites comme W3 Schools. Il est rempli d’informations gratuites pour aider à peu près tout le monde à apprendre à coder pour Internet.

Utiliser Ajax Charger plus

Une fois que vous avez obtenu le shortcode exactement comme vous le souhaitez, vous pouvez l’utiliser de plusieurs façons sur votre site web. Vous pouvez soit copier et coller le raccourci que vous voyez dans le générateur de raccourcis Ajax, soit utiliser l’éditeur visuel de WordPress pour créer le code.

Copier et coller le code

Dans le générateur de codes courts, copiez le code court que vous voyez dans le champ de sortie.

Allez dans votre poste ou votre page et collez le code.

Une fois que vous aurez mis à jour ou publié le contenu, le défilement infini sera en direct sur ce poste ou cette page.

De l’éditeur visuel de WordPress

Ajax Load More va ajouter une nouvelle fonctionnalité à l’éditeur visuel de WordPress. Si vous ne souhaitez pas créer le code pour le copier et le déplacer vers un article ou une page, il vous suffit de cliquer sur un bouton pour ouvrir le constructeur.

Ouvrez n’importe quel poste ou page et cliquez sur le bouton “Ajax Load More”. Il s’agit d’un carré rouge avec la lettre “A” au centre.

Le générateur de codes courts apparaîtra alors dans une fenêtre contextuelle. Une fois que vous avez terminé de faire des ajustements pour le défilement infini, cliquez sur le bouton “Insérer un code” en bas à gauche.

Le shortcode est placé automatiquement dans votre message ou votre page et vous pouvez le mettre à jour ou le publier à votre guise.

Ajax Load More sauvegarde-t-il les shortcodes personnalisés du constructeur ?

Au moment de ce tutoriel, Ajax Load More ne sauvegarde pas les shortcodes créés avec le constructeur. Si vous avez une certaine mise en page que vous aimez plus, c’est probablement une bonne idée de la sauvegarder dans un endroit facile à trouver. Par exemple, vous pouvez le coller dans des programmes de texte comme Notepad et les copier plus tard.

Avez-vous absolument besoin de connaître CSS, HTML ou PHP pour utiliser Ajax Load More ?

Cet outil est très facile à utiliser. Vous n’avez pas besoin de savoir comment le coder pour l’utiliser sur votre site web. Toutefois, une meilleure compréhension des éléments de codage vous permettra de procéder plus facilement à des ajustements personnalisés.

Cela fonctionnera-t-il sur n’importe quel poste ou page ?

Comme Ajax Load More utilise des shortcodes pour contrôler sa fonction, il peut être utilisé dans pratiquement tous les endroits de WordPress qui le supportent. Cela signifie les messages, les pages, certains widgets et d’autres types de messages personnalisés.

Une bonne façon d’utiliser ce plugin est de créer une page spécifique pour le défilement infini de votre contenu. Vous pouvez aller jusqu’à utiliser le Page Builder de SiteOrigin pour ajouter encore plus de personnalisation à une page tout en plaçant le shortcode de défilement infini.

Vous pouvez peut-être en faire une page de renvoi pour vos profils de médias sociaux.

Garder le site rapide et convivial

Ajouter le défilement infini à un site web fonctionnant sous WordPress ne demande pas beaucoup d’efforts. En fait, même le plus novice des utilisateurs peut créer quelque chose de fonctionnel pour ses visiteurs en utilisant Ajax Load More. Ajax étant un système efficace, vous n’avez pas à vous soucier de la lenteur de votre site web.

Quels sont les plugins que vous aimez en termes de diffusion de contenu à vos visiteurs ? Avez-vous l’intention d’apprendre un quelconque type de codage pour personnaliser encore plus WordPress, ou êtes-vous satisfait des fonctionnalités que certains développeurs mettent en œuvre dans les plugins et les thèmes ?