Souhaitez-vous ajouter un bouton pour charger progressivement et de manière asynchrone les articles sur WordPress ? De nombreuses plateformes populaires permettent aux utilisateurs de charger plus d’articles lorsqu’ils atteignent le bas de la page. Dans ce tutoriel, nous allons vous montrer comment ajouter facilement un bouton pour charger de nouveaux articles sur WordPress.
Quand et pourquoi ajouter un bouton de chargement d’articles sur WordPress
Garder vos utilisateurs engagés avec un contenu vous aide à obtenir plus de vues et, finalement, plus d’abonnés.
De nombreux blogs utilisent le simple lien de navigation « précédents articles » à la fin de leur page d’accueil, de leur blog et de leur archive. Certains sites utilisent la navigation de page numérique qui ajoute plus de contexte.
Cependant, il existe certains types de sites Web qui peuvent bénéficier immensément d’un défilement infini avec tous les articles. Quelques exemples incluent: des sites Web de photographie, des listes, et des sites Web à contenu viral.
Au lieu de charger une nouvelle page, le bouton ‘charger plus d’article’ fonctionne comme un parchemin infini. Il utilise JavaScript pour récupérer rapidement l’ensemble de contenu suivant. Cela améliore l’expérience de l’utilisateur et lui donne l’opportunité d’afficher plus de contenu.
Cela étant dit, jetons un coup d’œil à la façon d’ajouter facilement le bouton de chargement d’article sur votre site WordPress.
Ajout du bouton de chargement d’articles sur WordPress
La première chose à faire est d’installer et d’activer le plugin Ajax Load More . Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Après l’activation du plugin, le plugin va ajouter un nouvel élément de menu intitulé «Ajax Load More» à votre tableau de bord WordPress. Vous devez cliquer dessus et vous diriger vers la page des paramètres du plugin.
Sur la page des paramètres, vous pouvez choisir la couleur de votre bouton. Vous pouvez également remplacer le bouton par un défilement infini qui charge automatiquement le lot suivant d’articles sans que les utilisateurs ne cliquent sur le bouton.
Ensuite, vous devez accéder à « Ajax Load Plus » Repeater Template » pour ajouter votre modèle à l’affichage des articles.
Le plugin est livré avec un modèle de base contenant la boucle WordPress pour afficher les articles. Cependant, il peut ne pas correspondre à votre thème.
Pour résoudre ce problème, vous devez copier le code utilisé par votre thème pour afficher les publications sur les pages d’accueil du blog, d’archivage et de blog.
Normalement, ce code se trouve dans le dossier template-parts de votre thème. Dans ce dossier, vous verrez des modèles pour afficher un contenu différent. Par exemple content-page.php, content-search.php, et plus encore.
Vous recherchez le modèle générique content.php. Voici un exemple du fichier content.php de notre thème de démonstration:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php // Post thumbnail. twentyfifteen_post_thumbnail(); ?> <header class="entry-header"> <?php if ( is_single() ) : the_title( '<h1 class="entry-title">', '</h1>' ); else : the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); endif; ?> </header><!-- .entry-header --> <div class="entry-content"> <?php /* translators: %s: Name of current post */ the_content( sprintf( __( 'Continue reading %s', 'twentyfifteen' ), the_title( '<span class="screen-reader-text">', '</span>', false ) ) ); wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>', 'pagelink' => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%', 'separator' => '<span class="screen-reader-text">, </span>', ) ); ?> </div><!-- .entry-content --> <?php // Author bio. if ( is_single() && get_the_author_meta( 'description' ) ) : get_template_part( 'author-bio' ); endif; ?> <footer class="entry-footer"> <?php twentyfifteen_entry_meta(); ?> <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- .entry-footer --> </article><!-- #post-## -->
Une fois que vous avez trouvé ce code, vous devez le coller dans le champ Repeater Templates dans les paramètres du plugin.
N’oubliez pas de cliquer sur le bouton « Enregistrer le modèle » pour stocker vos paramètres.
Ensuite, vous devez visiter « Ajax Load Plus » Shortcode Builder » pour générer le shortcode.
Cette page contient de nombreuses options que vous pouvez personnaliser. Vous devez d’abord sélectionner le type de conteneur. Si vous n’êtes pas sûr, regardez simplement le modèle que vous avez copié plus tôt. Les thèmes les plus modernes utilisent l’élément <div>.
Après cela, faites défiler jusqu’à la section des étiquettes du bouton. Ici vous pouvez changer le texte qui apparaît sur le bouton. Par défaut, le plugin utilise ‘Load More Posts‘, et vous pouvez le changer pour tout ce que vous voulez.
Enfin, vous devez choisir si vous souhaitez que les publications se chargent automatiquement après un clic.
Votre shortcode est maintenant prêt à être utilisé. Dans la colonne de droite, vous verrez la sortie du shortcode. Allez-y et copiez le shortcode et collez-le dans un éditeur de texte comme vous en aurez besoin à l’étape suivante.
Ajouter plus d’articles sur votre thème WordPress
Cette partie du tutoriel vous oblige à ajouter du code dans les fichiers de thème WordPress.
N’oubliez pas de sauvegarder votre thème WordPress avant de faire des changements.
Vous devrez trouver les fichiers modèles dans lesquels vous souhaitez ajouter le bouton de chargement dans votre thème. Selon la façon dont votre thème est organisé, généralement ces fichiers sont index.php, archives.php, categories.php, etc.
Vous devrez ajouter le code court que vous avez copié plus tôt dans votre thème juste après la balise endwhile;.
Puisque nous ajoutons le shortcode dans un fichier de thème, nous devrons l’ajouter dans la fonction do_shortcode, comme ceci:
echo do_shortcode('[ajax_load_more container_type="div" post_type="post"]');
Vous pouvez maintenant enregistrer vos modifications et visiter votre site Web pour voir le bouton « Charger plus de messages » en action.
C’est tout pour ce tutoriel, j’espère qu’il vous permettra d’ajouter un bouton de chargement asynchrone sur votre blog WordPress.
