Comment implémenter une fonctionnalité AJAX « Charger plus de publications » dans WordPress ?

Comment implémenter une fonctionnalité AJAX « Charger plus de publications » dans WordPress

Cet article aborde la question de la mise en œuvre d'une fonctionnalité AJAX « Charger plus de publications » " fonctionnalité de WordPress, qui permet aux utilisateurs de charger dynamiquement des publications supplémentaires sur une page Web sans avoir à recharger l'intégralité page.

Énoncé du problème

L'utilisateur a rencontré des difficultés en tentant d'implémenter cette fonctionnalité en utilisant diverses méthodes, y compris celle mentionnée dans la « Pagination sur une requête WP_Query Ajax personnalisée ». post.

Solution

La solution fournie se concentre sur l'amélioration du code pour garantir un bon fonctionnement. Les aspects clés comprennent :

1. Code côté serveur

• Dans le fichier modèle, assurez-vous que la requête de publication initiale renvoie le nombre souhaité de publications par page.
• Dans le fichier de fonctions, créez une fonction pour gérer la requête AJAX et charger dynamiquement plus de publications. La fonction doit inclure une logique de pagination pour récupérer l'ensemble correct de publications.

2. Code côté client (jQuery)

• Côté client, liez un écouteur d'événement au bouton "Charger plus".
• Lorsque vous cliquez sur le bouton, envoyez une requête AJAX à la fonction côté serveur à l'aide de jQuery.
• Transmettez les paramètres nécessaires comme le décalage et le nombre de publications par page.
• Ajoutez le code HTML renvoyé à la liste des publications existantes.

3. Considérations supplémentaires

• Gérez le cas où il n'y a plus de publications à charger en désactivant le bouton « Charger plus ».
• Pour créer un effet de « chargement infini », utilisez le défilement de la fenêtre au lieu d'événements de clic sur un bouton.

Code Implémentation

Suivez les extraits de code fournis pour implémenter la solution :

functions.php :

/**
 * Handle AJAX "Load More" request
 */
function load_more_posts() {
    $offset = $_POST['offset'];
    $ppp = $_POST['ppp'];

    $args = [
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'offset' => $offset,
        // Other query parameters...
    ];

    $query = new WP_Query($args);
    $html = '';

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $html .= '<div>' . get_the_content() . '</div>';
        }
        wp_reset_postdata();
    } else {
        $html = 'No more posts to load';
    }

    echo $html;
    exit();
}

add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

script. js :

$(function() {
    var offset = 0;
    var ppp = 3;

    $('#load-more').on('click', function() {
        $.ajax({
            type: 'POST',
            url: 'path/to/wp-admin/admin-ajax.php',
            data: {
                action: 'load_more_posts',
                offset: offset,
                ppp: ppp
            },
            success: function(response) {
                $('#posts').append(response);
                offset += ppp;
            }
        });

        // Prevent the button from triggering multiple AJAX requests
        $('#load-more').attr('disabled', true);
    });
});

Remarque : Remplacer 'path/to/wp-admin/admin-ajax.php' avec l'URL réelle de votre fichier WordPress admin-ajax.php.

Conclusion

En suivant En suivant ces étapes, vous pouvez implémenter efficacement une fonctionnalité AJAX « Charger plus de publications » pour votre site WordPress, permettant aux utilisateurs de parcourir de manière transparente de grandes quantités de contenu sans avoir à actualiser l'intégralité de la page. page.

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!