Comment charger des articles WordPress avec AJAX

Dernière mise à jour Oct 18, 2021

Teneur

Charger des articles WordPress avec Ajax sur le bouton Charger plus

Charger des articles WordPress avec Ajax sur le défilement de la page

Je dirige une chaîne YouTube où je publie des vidéos liées à la programmation et aux logiciels. Récemment, l’un des abonnés m’a demandé comment charger un article WordPress avec AJAX. En réponse à lui, j’ai décidé d’écrire un article sur sa question. Donc, dans cet article, nous étudions comment charger un article WordPress avec AJAX en utilisant un bouton Charger plus et un défilement de page.

La différence entre le chargement de plus et un défilement de page est assez simple. Lorsque vous utilisez le bouton Charger plus, vous devez cliquer sur un bouton pour voir la prochaine série de messages. Et lors du défilement de la page, lorsque vous faites défiler jusqu’à la fin d’une fenêtre d’affichage, la prochaine série de publications devrait être automatiquement chargée.

Supposons que vous ayez quelques articles et que vous deviez afficher 2 articles au chargement de la page, puis en cliquant sur « Charger plus » ou sur « Défilement de la page », les 2 articles suivants devraient s’afficher. Ce processus se poursuivra jusqu’à ce que tous vos messages soient affichés.

Créez une nouvelle page appelée ‘Blog’. Pour afficher vos articles sur la page Blog, créez un modèle personnalisé page-blog.phpdans le répertoire de votre thème actif.

Désormais, lorsque les utilisateurs visitent votre page de blog, ils devraient voir 2 articles. Alors, ajoutez le code ci-dessous dans votre fichier de modèle personnalisé.

<div class="entry-content">
    <?php
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => '2',
        'paged' => 1,
    );
    $blog_posts = new WP_Query( $args );
    ?>
 
    <?php if ($blog_posts->have_posts() ): ?>
        <div class="blog-posts">
            <?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>
                <h2><?php the_title(); ?></h2>
                <?php the_excerpt(); ?>
            <?php endwhile; ?>
        </div>
        <div class="loadmore">Load More...</div>
    <?php endif; ?>
</div>

Ici, j’ai utilisé la clé " paginée " et lui ai passé la valeur " 1 ". ‘paginé’ est une clé utilisée dans WordPress lorsqu’il s’agit de pagination. ‘paged’ => 1 signifie la première page.

Vous remarquerez l’élément div avec la classe ‘loadmore’. En cliquant sur Charger plus, nous passerons un appel Ajax et obtiendrons la prochaine série de messages.

Charger des articles WordPress avec Ajax sur le bouton Charger plus

Pour donner un appel Ajax, vous devez inclure le fichier JS dans l’environnement WordPress. Créez un custom.jsfichier dans le jsrépertoire, puis ajoutez le code ci-dessous dans le functions.phpfichier.

function blog_scripts() {
    // Register the script
    wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
 
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'load_more_posts' ),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );
 
    // Enqueued script with localized data.
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'blog_scripts' );

Ensuite, écrivons un peu de jQuery et donnons un appel Ajax qui en retour donnera les prochains messages.

custom.js

var page = 2;
jQuery(function($) {
    $('body').on('click', '.loadmore', function() {
        var data = {
            'action': 'load_posts_by_ajax',
            'page': page,
            'security': blog.security
        };
 
        $.post(blog.ajaxurl, data, function(response) {
            if($.trim(response) != '') {
                $('.blog-posts').append(response);
                page++;
            } else {
                $('.loadmore').hide();
            }
        });
    });
});

Ce que nous faisons ici, c’est que j’ai pris une variable javascript ‘page’ avec la valeur initiale 2 car nous allons commencer par la pagination de la deuxième page. J’incrémente cette variable ‘page’ après avoir reçu la réponse Ajax. Après avoir reçu la réponse, je l’ajoute à la liste des messages existants.

J’ai également utilisé le paramètre d’action en tant que ‘load_posts_by_ajax’ pour un appel Ajax qui doit être mappé avec les actions WordPress. Ouvrez votre functions.phpfichier et ajoutez le code ci-dessous à un fichier.

add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');

Dans les actions WordPress ci-dessus, nous appelons la fonction de rappel load_posts_by_ajax_callbackque je vais définir à l’étape suivante. Vous pouvez définir cette fonction dans votre functions.php.

function load_posts_by_ajax_callback() {
    check_ajax_referer('load_more_posts', 'security');
    $paged = $_POST['page'];
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => '2',
        'paged' => $paged,
    );
    $blog_posts = new WP_Query( $args );
    ?>
 
    <?php if ($blog_posts->have_posts() ): ?>
        <?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>
            <h2><?php the_title(); ?></h2>
            <?php the_excerpt(); ?>
        <?php endwhile; ?>
        <?php
    endif;
 
    wp_die();
}

Maintenant, lorsque vous cliquez sur le bouton « Charger plus », il chargera les prochains messages via Ajax et les renverra en réponse. Le code JavaScript écrit ci-dessus gérerait le reste.

Charger des articles WordPress avec Ajax sur le défilement de la page

Certains utilisateurs peuvent ne pas vouloir de bouton Charger plus pour afficher les publications avec Ajax. Au lieu de cela, ils préfèrent que les publications s’affichent une fois que l’utilisateur atteint la fin d’une fenêtre d’affichage.

Pour y parvenir, vous devez écrire une logique qui capture l’événement à la fin d’une fenêtre, le reste du code est le même que le bouton « Charger plus ». Vous trouverez ci-dessous le code jQuery pour le défilement de page.

jQuery(window).scroll(function($) {
    if (jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height()) {
        var data = {
            'action': 'load_posts_by_ajax',
            'page': page,
            'security': blog.security
        };
 
        $.post(blog.ajaxurl, data, function(response) {
            if($.trim(response) != '') {
                $('.blog-posts').append(response);
                page++;
            } else {
                $('.loadmore').hide();
            }
        });
    }
});

C’est ça! Vous pouvez aller de l’avant et l’essayer. J’aimerais connaître vos pensées et suggestions dans les commentaires ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net