Comment ajouter un bouton « Charger plus d'articles » dans WordPress

Lorsque les visiteurs arrivent sur votre blog, l'objectif est de les inciter à lire le plus longtemps possible. Mais s'ils doivent constamment cliquer pour passer à la page suivante, cela crée une friction qui peut les amener à partir avant d'explorer davantage votre contenu.

C'est là qu'intervient un bouton « Charger plus d'articles ». Au lieu de rompre le flux, les lecteurs peuvent instantanément afficher de nouveaux articles sans jamais quitter la page. Cette fonctionnalité simple peut réduire les taux de rebond, améliorer le temps passé sur le site et rendre la navigation dans votre contenu fluide.

Nous avons constaté que cette approche fonctionne particulièrement bien pour les blogs et les sites de style magazine avec de nombreux articles. L'ajout d'un bouton « Charger plus » permet aux lecteurs de découvrir plus facilement votre contenu. De plus, plus ils restent longtemps, plus ils sont susceptibles de s'abonner ou de devenir des visiteurs fidèles.

Dans cet article, nous vous montrerons comment ajouter un bouton « Charger plus d'articles » dans WordPress, étape par étape.

Quand et pourquoi ajouter un bouton « Charger plus d'articles » dans WordPress

Si vous voulez que les gens passent plus de temps sur votre site, vous devez leur faciliter la découverte de nouveau contenu. Plus les visiteurs restent engagés avec votre contenu, plus vous obtenez de vues et plus ils sont susceptibles de s'abonner ou de revenir.

La plupart des blogs utilisent une navigation simple en bas de leurs pages d'accueil, de blog ou d'archives, comme un lien « Articles plus anciens » ou une navigation par page numérique. Bien que cela fonctionne, cela peut interrompre le flux de lecture et amener les visiteurs à cesser de naviguer.

C'est pourquoi certains types de sites tirent de grands avantages de l'ajout d'un bouton « Charger plus d'articles ». C'est particulièrement efficace pour les sites au contenu riche comme les blogs culinaires, les sites de photographie, les listicles ou les sites d'actualités virales.

Prenez le blog So Much Food par exemple, ils utilisent un bouton épuré « Charger plus d'articles » qui charge instantanément de nouvelles recettes.

Au lieu de charger une nouvelle page entière, un bouton « Charger plus d'articles » fonctionne comme le défilement infini. Il utilise JavaScript pour récupérer rapidement le prochain ensemble de contenu. Cela améliore l'expérience utilisateur et leur donne une chance de voir plus de votre contenu sans interruption.

Cela dit, examinons comment ajouter facilement un bouton « Charger plus d'articles » sur votre site WordPress.

Étape 1 : Ajouter un bouton « Charger plus d'articles » dans 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 comment installer un plugin WordPress.

Lors de l'activation, le plugin ajoutera un nouvel élément de menu intitulé « Ajax Load More » à votre menu d'administration WordPress. Vous devez cliquer dessus et accéder à 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 aient à cliquer sur le bouton.

Ensuite, vous devez visiter la page Ajax Load More » Repeater Template pour ajouter votre modèle d'affichage des articles.

Le plugin est livré avec un modèle de base contenant la boucle WordPress pour afficher les articles. Cependant, il ne correspond pas à votre thème et peut sembler déplacé sur votre site Web.

Pour résoudre ce problème, vous devez copier le code que votre thème utilise pour afficher les articles sur les pages d'index, d'archives 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 différents contenus. Par exemple, content-page.php, content-search.php, et plus encore.

Vous rechercherez 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' des paramètres du plugin.

N'oubliez pas de cliquer sur le bouton 'Save Template' pour enregistrer vos paramètres.

Ensuite, vous devez visiter la page Ajax Load More » Shortcode Builder pour générer le shortcode.

Cette page contient de nombreuses options différentes que vous pouvez personnaliser. Tout d'abord, vous devrez sélectionner le type de conteneur. Si vous n'êtes pas sûr, regardez simplement le modèle que vous avez copié précédemment. La plupart des thèmes WordPress modernes utilisent l'élément <div>.

Après cela, faites défiler jusqu'à la section des étiquettes de bouton. Ici, vous pouvez modifier le texte qui apparaît sur le bouton. Par défaut, le plugin utilise 'Older Posts', et vous pouvez le changer en 'Load more posts' ou tout ce que vous voulez.

Enfin, vous devez choisir si vous souhaitez que les articles se chargent automatiquement ou qu'ils attendent que les utilisateurs cliquent sur le bouton de chargement d'autres articles.

Votre shortcode est maintenant prêt à être utilisé. Dans la colonne de droite, vous verrez la sortie du shortcode. Copiez le shortcode et collez-le dans un éditeur de texte car vous en aurez besoin à l'étape suivante.

Étape 2 : Ajouter le chargement de plus d'articles dans votre thème WordPress

Cette partie du tutoriel vous demande d'ajouter du code dans les fichiers de votre thème WordPress. Si vous ne l'avez jamais fait auparavant, consultez notre guide sur comment copier et coller du code dans WordPress.

Remarque : N'oubliez pas de sauvegarder votre thème WordPress avant d'apporter des modifications.

Vous devrez trouver les fichiers de modèle où vous souhaitez ajouter le bouton 'Charger plus d'articles' dans votre thème. Selon la façon dont votre thème est organisé, ces fichiers sont généralement index.php, archives.php, categories.php, etc.

Vous devrez ajouter le shortcode que vous avez copié précédemment 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 à l'intérieur de 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 d'articles' en action. Voici à quoi il ressemblait sur notre site de démonstration :

Nous espérons que cet article vous a aidé à apprendre comment ajouter un bouton 'Charger plus d'articles' dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment lister les futurs articles programmés à venir dans WordPress et nos sélections d'experts des meilleurs plugins d'articles similaires pour WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.