Comment implémenter un bouton Ajax « Charger plus » pour les publications WordPress ?

Bouton Ajax Charger plus de publications dans WordPress

Ce tutoriel aborde le problème de l'implémentation d'un bouton « Charger plus » dans WordPress pour charger progressivement les publications via Ajax. Le problème consiste à intégrer les fonctions jQuery, Ajax et WordPress pour récupérer et afficher les nouveaux articles à la demande.

Solution :

Dans le index.php fichier modèle, créez un élément conteneur avec l'ID "ajax-posts" et incluez du code PHP pour interroger et afficher un nombre limité de publications (par exemple, trois). Ajoutez un bouton avec l'ID "more_posts" pour déclencher le chargement de posts supplémentaires.

Dans le fichier functions.php, créez une fonction (more_post_ajax()) pour gérer la requête Ajax. Cette fonction recevra le décalage et le nombre de publications par page comme paramètres et interrogera la base de données pour récupérer la prochaine série de publications.

Dans l'appel Ajax (soit dans un fichier de script, soit en ligne ), définissez l'URL Ajax, envoyez le décalage et le nombre de publications par page sous forme de données et gérez la réponse en ajoutant les publications récupérées au conteneur "ajax-posts" et en incrémentant la page. numéro.

Exemple de code :

index.php

<div>

functions.php

function more_post_ajax() {
    // Get offset and number of posts per page
    $offset = $_POST['offset'];
    $ppp = $_POST['ppp'];

    // Query database to retrieve next set of posts

    // Return retrieved posts
    echo $posts;
    exit;
}

Ajax appeler

// Set Ajax URL
var ajaxUrl = '<?php echo admin_url('admin-ajax.php') ?>';

// When "Load More" button is clicked
$('#more_posts').on('click', function() {
    // Disable button temporarily
    $(this).attr('disabled', true);

    // Send Ajax request with offset and number of posts per page
    $.post(ajaxUrl, {
        action: 'more_post_ajax',
        offset: (page * ppp) + 1,
        ppp: ppp
    })
    .success(function(posts) {
        // Append retrieved posts to container
        $('#ajax-posts').append(posts);
        // Increment page number
        page++;
        // Re-enable "Load More" button
        $('#more_posts').attr('disabled', false);
    });
});

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!