Comment implémenter des publications « Load More » basées sur Ajax dans WordPress ?

Charger plus de publications via Ajax dans WordPress

La mise en œuvre d'un bouton « Charger plus » pour charger dynamiquement des publications dans WordPress nécessite une combinaison de PHP et JavaScript. Même si vous avez décrit une approche particulière, d'autres facteurs peuvent influencer la fonctionnalité ou l'efficacité de votre code. Voici une solution révisée et améliorée :

Marquage HTML :

<div>

Fonctions Fichier PHP :

function more_post_ajax() {
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];

    header("Content-Type: text/html");
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => 1,
        'offset' => $offset,
    ];

    $loop = new WP_Query($args);

    while ($loop->have_posts()) {
        $loop->the_post();
        the_content();
    }
    exit;
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

wp_localize_script(
    'twentyfifteen-script',
    'ajax_posts',
    array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'noposts' => __('No older posts found', 'twentyfifteen'),
    )
);

jQuery Fonction :

var ppp = 3; // Posts per page
var page = 5; // Current page number, starting from 1

$('#more_posts').click(function() {
    $('#more_posts').attr('disabled', true);
    var offset = (page * ppp) + 1;

    $.post(
        ajax_posts.ajaxurl,
        {
            action: 'more_post_ajax',
            offset: offset,
            ppp: ppp,
        }
    ).success(function(posts) {
        page++;
        $('#ajax-posts').append(posts);
        $('#more_posts').attr('disabled', false);
    });
});

Considérations supplémentaires :

• Filtrage de catégorie : Vous pouvez intégrer un filtrage de catégorie en ajoutant une donnée attribut au bouton "Charger plus" avec l'ID de catégorie. Ensuite, dans le code PHP, récupérez l'ID de catégorie du tableau $_POST et incluez le paramètre 'cat' dans les arguments de la requête.
• Charge infinie : Pour un défilement infini, vous pouvez utiliser L'événement de défilement de jQuery pour charger automatiquement les publications lorsque l'utilisateur fait défiler la page. Une approche consiste à charger les publications lorsque la distance entre le bas de la page et le haut de la fenêtre d'affichage est inférieure à un seuil, tel que 100 pixels.
• Indicateur de chargement : Pensez à ajouter un chargement d'un spinner ou d'un indicateur pour fournir un retour visuel à l'utilisateur pendant le chargement des publications.
• Gestion des erreurs : Assurez-vous que l'erreur est correcte gestion à la fois du code PHP et du code JavaScript pour gérer les erreurs potentielles pouvant survenir lors de la requête Ajax ou du post-traitement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!